Cara Membuat Buku Tamu Melayang (Floating Guest Book)

Sering saya jumpai kalau lagi jalan-jalan (blogwalking) menemukan widget yang cukup menggelitik menambah penasaran. Ya, Itulah buku tamu melayang pada sisi kanan atas/bawah. Timbul pertanyaan, Bagaimana cara membuatnya?....Ah dasar newbie hari gini baru nanyain soal itu, padahal jauh-jauh hari sudah tidak asing lagi bagi para blogger yang lebih senior dari pada saya. Dari pada terus curhat, lebih baik saya catat cara membuatnya. Btw perlu di ingat juga semakin menambah widget pada blog kita maka akan bertambah berat ketika meloadingnya, Ya selain keuntungannya menghemat tempat, namun ada juga efek negatifnya (itu sudah biasa):

Silahkan anda copy kode di bawah ini..

1. Masuk pada menu Tata Letak / Edit Layout
2. Klik Tambah Gadget / Add a Gadget
3. Pilih HTML/Javascript
4. Copy kode berikut dan paste pada HTML/Javascript tersebut

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyFrPXflLomZY5uhJYUTc1rTF0tqOzSwKLul5DeVAKDKRVWkumOV07KcfmAQL1dByM-8FnAvUcwerwz0v6Iid5eRaBPNWXBtc8mPpvZ8uUPYRZu2dLit8UWQN94GKUpw_vds_uPG_xnO0J/') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:10px;
}
</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>

<div id="gb">

<div class="gbtab" onclick="showHideGB()"> </div>

<div class="gbcontent">

<!-- Begin ShoutMix - http://www.shoutmix.com -->

<iframe title="m4n0" src="http://www6.shoutmix.com/?m4n0" width="160" height="400" frameborder="0" scrolling="auto">

<a href="http://www6.shoutmix.com/?m4n0">View shoutbox</a>

</iframe>

<br /><a href="http://www.shoutmix.com" title="Get your own free shoutbox chat widget at ShoutMix!">ShoutMix chat widget</a><br />

<!-- End ShoutMix -->

<br/>

Anda berminat buat Buku Tamu seperti ini?<br/>

Klik di

<a href="http://makassar-09.blogspot.com/2009/08/trik-membuat-buku-tamu-melayang.html&quot;>

sini </a>

<div style="text-align:right">
<a href="javascript:showHideGB()">
[tutup]
</a>
</div>

</div>

</div>

<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

Catatan:

1. Jangan satukan dengan iklan yang melayang karena akan menjadi kacau.
2. Yang diberi tanda berupa huruf yang merah dapat diganti, contohnya buku tamu anda yang shoutbox atau cbox.

5. Klik Save.

Sederhana alias mudah... Memang tidah serumit ketika harus menambah kolom, mebagi kolom, membuat kolom ada di kiri dan di kanan bla bla bla... saya sendiri dibikin rpot kalo udah urusan meracik template.. konsul langsung ke blognya kang Rohman ja atau oom...Baik sekian dulu.. Btw info ini juga hasil dari kombinasi dari beberapa blog hasil pencarian Prof. Dr. Google, Phd dll hehe

Preview:

.::Related Posts: