CARA BUAT BUKU Tamu terselip disamping blog

Posting dengan Judul yang serupa Banyak sekali beredar tentunya memang Buku Tamu sangat berguna bagi Blogger ,Buat Anda  yang suka, dengan blogwalking pasti senang banget kalo di blog yang kamu kunjungi mempunyai shout box/chat mix atau buku tamu. Di sini kamu bisa meninggalkan jejak berupa link blog/website kamu dan juga pesan ...Biar Bisa diBaca pemilik blog maupun tamu tamu yang lain yang isi buku Tamu.
Dengan memanfaatkan ruang kita bisa membuat widget buku tamu terselip di samping.seperti contoh pada blog ini terselip diKanan Atas .... Jadi singkatnya kamu bisa menghemat ruang yang ada di blog kamu. Gimana yah kira-kira caranya membuat buku tamu menjadi terselip di samping blog?. yuk mari kita buat tutorialnya bareng-bareng.

Langkah pertama yang harus kamu lakukan adalah kamu harus memiliki kode shoutbox untuk buku tamu kamu. Belum punya Anda Bisa Pakai Cbox atau cari pada Browser Buku tamu gratis atau shoutmix beres.Kalo kamu sebelumnya sudah punya ga masalah di manfaatkan saja Kode Buku tamu Anda

1. Login ke dasbor blogger kamu.
2. KLIK Rancangan/Tata Letak --- Tambah Getget --- HTML/JavaScript.
3. Copy-Paste-kan Code di bawah ini/ klik tombol Highlight All Copy Paste ke NotePad :

<style type="text/css"><br /> <br /> #gb{<br /> <br /> position:fixed;<br /> <br /> top:50px;<br /> <br /> z-index:+1000;<br /> <br /> }<br /> <br /> * html #gb{position:relative;}<br /> <br /> .gbtab{<br /> <br /> height:100px;<br /> <br /> width:30px;<br /> <br /> float:left;<br /> <br /> cursor:pointer;<br /> <br /> background:url('http://i827.photobucket.com/albums/zz194/depalpiss/bukutamu5.png')<br /> <br /> no-repeat;<br /> <br /> }<br /> <br /> .gbcontent{<br /> <br /> float:left;<br /> <br /> border:2px solid #000000;<br /> <br /> background:#F5F5F5;<br /> <br /> padding:10px;<br /> <br /> }<br /> <br /> </style><br /> <br /> <script type="text/javascript"><br /> <br /> function showHideGB(){<br /> <br /> var gb = document.getElementById("gb");<br /> <br /> var w = gb.offsetWidth;<br /> <br /> gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);<br /> <br /> gb.opened = !gb.opened;<br /> <br /> }<br /> <br /> function moveGB(x0, xf){<br /> <br /> var gb = document.getElementById("gb");<br /> <br /> var dx = Math.abs(x0-xf) > 10 ? 5 : 1;<br /> <br /> var dir = xf>x0 ? 1 : -1;<br /> <br /> var x = x0 + dx * dir;<br /> <br /> gb.style.right = x.toString() + "px";<br /> <br /> if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}<br /> <br /> }<br /> <br /> </script><br /> <br /> <div id="gb"><br /> <br /> <div class="gbtab" onclick="showHideGB()"> </div><br /> <br /> <div class="gbcontent"><br /> <br /> <div><br /> <br /> <span class="Apple-style-span" style="font-size: x-small;">Tinggalkan Pesan Kamu di Sini!</span><br /> <br /> </div><br /> <br /> <a href="http://myoxy.blog.com/"><span class="Apple-style-span" style="font-size: x-small;">Salam Myoxy Super Indonesia</span></a><br /> <br /> <div style="color: red;"><b>Masukkan Kode ShoutBox Kamu disini!</b></div><br /> <div><br /> <br /> <span class="Apple-style-span" style="font-size: x-small;">Pengen Punya Widget kaya gini <br /> <br /> </span></div><br /> <br /> <a href="http://water-mulia.blogspot.com/2012/01/cara-buat-buku-tamu-terselip-disamping.html">baca tutorialnya! di sini</a><br /> <br /> <br /><br /> <br /> <div style="text-align:right"><br /> <br /> <a href="javascript:showHideGB()"><br /> <br /> [tutup]<br /> <br /> </a><br /> <br /> </div><br /> <br /> </div><br /> <br /> </div><br /> <br /> <script type="text/javascript"><br /> <br /> var gb = document.getElementById("gb");<br /> <br /> gb.style.right = (30-gb.offsetWidth).toString() + "px";<br /> <br /> </script><br /> <br />

4. Buka Notepad Hapus kata warna merah /"Masukan Kode shoutbox Kamu di sini!" , ganti dengan kode Shoutbox yang Anda  punya tambahkan ke point no 2 diatas HTML/JavaScript. dan Simpan...selesai....
Contoh tampilan Buku Tamu seperti diPojok Kanan atas..

Artikel Terkait

UPS...JANGAN BERANJAK DULU PLEASE Share...Be Happy?? BISA juga ANDA PRINT: