Cara membuat Buku Tamu Melayang di Blog

Buku Tamu Melayang

Hay para sobat blogger semua,...!!! pada kali ini saya akan menerangkan bagaimana Cara membuat Buku tamu melayang di Blog seperti yang ada di samping kanan atas blog saya. Buku Tamu pada kali ini menggunakan background, dan kalau diklik pada background maka otomatis akan keluar form isian Nama, Website dan Message. Buku Tamu atau Guest Book tersebut melayang dan auto hide, yang artinya para sobat sekalian tidak perlu khawatir buku tamu menganggu artikel pada blog sobat sekalian dan buku tamu ini juga tidak terpengaruh oleh scroll mouse, walaupun mouse digulir ke bawah Buku Tamu tersebut tetap terlihat (diam ditempat semula).

Langkah pertama sobat semua register dulu di Cbox. Apabila sobat semua belum mengetahui cara untuk registrasi di Cbox sobat bisa membaca di artikel saya yang sebelumnya di Cara membuat Buku Tamu di Blog.

Setelah itu untuk membuatnya ikuti langkah berikut :

• Masuk ke Blogger
• Klik Rancangan
• klik Elemen Laman
• klik Tambah Gadget
• Klik "HTML/JavaScript"
• Kemudian Copy/Paste kode di bawah ini :

 <style type="text/css"> #gb{ position:fixed; top:50px; z-index:+1000; } * html #gb{position:relative;} .gbtab{ height:150px; width:30px; float:left; cursor:pointer; background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZUnHLpA8iEUbsIf74Fak557s7fp7k-x0TAFgfQVxFuASTHtRZOQ6wITBRxB-cwNFp5Y-Bj0x3tFMEnDWVVdynEBvGGLxTDcAtSLL_pUkONZm2KIuBxQTnWVVx8NC2DPZ0ORAHkNC50yVa/s1600/buku+tamu.png') no-repeat; } .gbcontent{ float:left; border:1px solid #B3B3B3; background:#E6E6E6; padding:5px; } </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 CBOX - www.cbox.ws - v001 -->

Copy kan code CBOX disini

<!-- END CBOX -->
<br/>Mau buat buku tamu ini ?<br/>Klik <a href="http://www.masnugh.co.cc/2012/01/cara-membuat-buku-tamu-melayang-di-blog.html"target="_blank"> di sini </a> <div style="text-align:right"> <a href="javascript:showHideGB()"> [hide] </a> </div> </div> </div> <script type="text/javascript"> var gb = document.getElementById("gb"); gb.style.right = (30-gb.offsetWidth).toString() + "px"; </script>

Selamat mencoba ^,^