Cara Membuat Buku Tamu "Menggantung" Di Blog Cara Membuat Buku Tamu "Menggantung" Di Blog

Dalam artikel ini Saya akan menjelaskan/menginformasikan tentang Panduan Cara Membuat Buku Tamu "Menggantung" Di Blog.
Buku tamu/Shoutmix/Shoutbox merupakan salah satu aksesoris blog yang saya anggap sebagai salah satu aksesoris yang wajib ada di blog/website.Bentuk dari buku tamu mungkin berbeda-beda,namun mempunyai fungsi yang sama.Fungsinya adalah untuk memudahkan pengunjung untuk mengisi buku tamu tersebut,kalau dia pernah singgah di blog sobat.
Dalam hal ini, saya akan membantu sobat untuk membuat buku tamu/guest book yang tampilannya menggantung/melayang di blog.Jika sobat mau lihat contoh buku tamu menggantung/melayang ini,sobat gak perlu jauh-jauh berkunjung ke blog lain.Silahkan sobat lihat aja di blog ini.

Jika sobat tertarik untuk mempunyai buku tamu yang serupa dengan blog ini,silahkan sobat langsung saja simak penjelasannya di bawah ini.Caranya cukup mudah kok.......simak ya...... Untuk memulai membuatnya,silahkan ikuti panduan dan langkah-langkahnya seperti berikut :
 - Seperti biasa sobat mesti login dulu ke blog sobat
- Silahkan klik Rancangan
- Klik elemen laman - Klik tambah gadget/add gadget
- Klik opsi HTML/Javascript
- Silahkan sobat Copy dan Paste Kode HTML di bawah ini :

<style type="text/css"> #scgb{ position:fixed; top:100px; z-index:+1000; } * html #scgb{position:relative;} .scgbtab{ height:100px; width:10px; float:left; cursor:pointer; background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbxeDJ5FFUUmXwIQrbuCEFg6s95v41bd4zO3kMX-N1U5TJO7MqVHABD80bGuJmhWCZTzEvPVWFcR50zh4uuaJfAZpBBEtwXmrXiTA1YBCP9UY7aQoAvooiSqTIwBZzfjUQbVRpXGEK_uS8/s1600/chat+pink.png') no-repeat; } .scgbcontent{ float:left; border:2px solid #FF00CC; background:#ffffff; padding:10px; } </style> <script type="text/javascript"> function showHideGB(){ var scgb = document.getElementById("scgb"); var w = scgb.offsetWidth; scgb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0); scgb.opened = !scgb.opened; } function moveGB(x0, xf){ var scgb = document.getElementById("scgb"); var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; scgb.style.right = x.toString() + "px"; if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);} } </script> <div id="scgb"> <div class="scgbtab" onclick="showHideGB()"> </div> <div class="scgbcontent"> Paste Kode Chat Boxnya Disini Gan <div style="text-align:right"> <a href="http://irrandy.blogspot.com/2013/09/cara-membuat-buku-tamu-menggantung-di.html" target="_blank">[get this widget]</a> <a href="javascript:showHideGB()"> [Tutup] </a> </div> </div> </div> <script type="text/javascript"> var scgb = document.getElementById("scgb"); scgb.style.right = (30-scgb.offsetWidth).toString() + "px"; </script>

Sekarang tinggal ngedit gan. Pertama pastein kode chat box anda di tempat yang udah ditentuin gan. 

Terus buat top:100px; itu buat ngatur posisinya, semakin gede nialinya semakin kebawah chat boxnya gan.
Lalu buat background :url itu buat ganti tabnya gan silahkan diganti mau pake warna apa. Ni Saya sediain banyak pilihan biar teman puas soalnya kebanyakan tutorial di blog laen pake tab warna hijau bosen ya gak gan.

1. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoBBKQaAE6ZiMFsSES-SHCwvbMPEH_oo6Jsu-nxD8OXc8Qa9nDBwpMDzFcK6vJuBFZ5i3AzybXu6DereBaQYaTg2V8yVY7QW9f517WWY7Ttfw9480xLpQi12rQN2TQiwq6kyE-pO5M9Iuc/s1600/chat+merah.png
2. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEih6lw3kX98-3u61Dkb13xzXn5ACne7R9FCH3EPGagIpwwgqX46lMG-hGGEECUsGK7qgPUOlpkxtudFQllycJ2daNCUitbjIVQ646m1qzaC1lKvdU_klJxUTcZeRy7So5QkCDXzA-7893CI/s1600/chat+kuning.png
3. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhN_FzDvp6ZTWZACrSpHN5mzDPPHpFmTmZMv3cfIbb6NWvJqqiXGjEu6FmaNWUDhnqcV8LRxDV_ZEem3CIjKe0wmMaeQgzX6Px21i4Job3DQ6XwKtdlLIE-vJyX0ufgdauha046tkaPtr5O/s1600/chat+merah+muda.png
4. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuvOTxDmdY2zk1nQmlUi4207TkQm3Y5CpnDu1Xirx26zupnsxfvKjsotGjcCd7s04QsgnGVaUc-5Gw09aUnUFDYHqZ64fSmv1hzqLdtD0P91MHaIRnZ0fIJacQvtqreegV3_3FhBvnsA8Y/s1600/chat+orange.png
5. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbxeDJ5FFUUmXwIQrbuCEFg6s95v41bd4zO3kMX-N1U5TJO7MqVHABD80bGuJmhWCZTzEvPVWFcR50zh4uuaJfAZpBBEtwXmrXiTA1YBCP9UY7aQoAvooiSqTIwBZzfjUQbVRpXGEK_uS8/s1600/chat+pink.png
6. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_aOwuMlRvWwNteJNPLr72cTXGL2LoKzatMltBfgxJv5qSyCj1rChDevR3W-f24usZEYYjfFPxVDWXEXo39t1ep2hGJtyppY18Nmgwz6VEloInJeHhseXFANSqBK_13hMEI-hBS9Z7cBwM/s1600/chat+ungu.png
7.https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilQcUlXcT-815K8_w23xu1RlCTBhYSCN4H6vfx7qi6Vy5MjivbcSpbMUEMpRDswJKIRUdn0RciVhAhx2Df67eS5-4azazUZXd2UyYhyphenhyphenJeKdmnKTjuBWrXS0_AAfn0yzyPD6HfbE2johirq/s1600/chat+biru.png

 Demikian sedikit info dari saya Selamat mencoba