Cara Pasang Buku Tamu Di Blogger

Banyak sekali sekarang Buku Tamu dengan berbagai gaya dan fitur seperti Melayang (kanan, kiri, bawah, atas), Sembunyi, Folting, Tanpa di Klik Terbuka Sendiri? dan masi banyak lagi. Semuanya bagus-bagus, namun dari beberapa Buku Tamu yang saya temukan ini sudah tren di kalangan para blogger.

Floating Kanan	Floating Kiri
<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/AVvXsEiMFTRgkJj_j-i0ihYnXAkexYGfFGw1C6d6tK3unUInhvSeps-oHTq3KSdJQiJyPDv1pIVpiSJLq7O7ZQxsdtaPYangh9yeBfrY-OKM6h-qMq41-9MIEG7AWf_IpVWfkEIox1rpn-bSycCq/') 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"> <!-- Ganti ini dengan kode buku tamu kamu --> <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>	<style> #hcl { position:fixed; top:50px; left:20px; z-index:+500; } * html #hcl {position:relative;} .hcltab { height:200px; width:35px; float:left; cursor:pointer; background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCFv_T6XK5Ncg2aJZlSf8XkHZmt5gDpkRmWoUiqGyYEPp7zdSVvX6s5sP22VlVSYWOAibiG37cgGfli1wODiu02waoLVpunC2rMC3kEnzSZRyZP03kt3fBeWeyok18iU4TSYSP9rtyZNoc/s1600/tabs.png') no-repeat; } .hclcontent { float:left; border:2px solid #A5BD51; background:#F5F5F5; padding:3px; } .hc-credit {font-size:9px} .hc-credit a {text-decoration:none} </style> <script type="text/javascript"> function showHidehcl(){ var hcl = document.getElementById("hcl"); var w = hcl.offsetWidth; hcl.opened ? movehcl(0, 30-w) : movehcl(20-w, 0); hcl.opened = !hcl.opened; } function movehcl(x0, xf){ var hcl = document.getElementById("hcl"); var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; hcl.style.left = x.toString() + "px"; if(x0!=xf){setTimeout("movehcl("+x+", "+xf+")", 10);} } </script> <div id="hcl"> <div class="hclcontent"> &lt;!-- Ganti ini dengan kode buku tamu kamu --&gt; <br /> <div class="hc-credit"> <span style="float:left"> <!-- THIS CREDIT MUST STAY INTACT FOR LEGAL USE --> </span> <span style="float:right"> <a href="javascript:showHidehcl()"> [close] </a> </span> </div> </div> <div class="hcltab" onclick="showHidehcl()"> </div> <script type="text/javascript"> var hcl = document.getElementById("hcl"); hcl.style.left = (30-hcl.offsetWidth).toString() + "px"; </script></div>
Flash	Slide
<style type="text/css"> .gb_fixed{position:fixed; top:60px; right:0px; z-index:+10} * html .gb_fixed {position:relative;} #hidden_gb2{display:none; background:transparent; padding:10px; padding-top:10px; border:1px solid #ccc; -moz-border-radius-topleft:30px; -moz-border-radius-bottomright:30px; transform:rotate(-5deg); -moz-transform:rotate(-5deg); -webkit-transform:rotate(-5deg); -o-transform:rotate(-5deg)} #hidden_gb2:hover{background:url("http://i55.tinypic.com/8x1xlt.gif") no-repeat scroll 0 0; background-position:top center; box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #FF1493; -moz-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #FF1493; -webkit-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #FF1493; transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg)} </style> <div class="gb_fixed"> <table cellpadding="0" cellspacing="0" id="hidden_gb2"><tbody> <tr><td> <div> <a href="javascript:void(0)" onclick="gb_showHideGB()"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghfKs9oAoYr4kO3fDiDbCUSwzY1RsRdC5vDh5wv_Wz6H1TJ3r_ppESBCLSZhWwCJZU36OVam5b1_TN8yjqCcbmKnchcT2oCU3OQ6JFMvAeaVVTbNNNQbXRThGl66D0Ook4tm1CSA-kgQ6u/s1600/CloseButtonHot.bmp" /></a> </div> <!-- Ganti ini dengan kode buku tamu kamu --> </td></tr> </tbody></table> </div> <script src="http://donor-ilmu.googlecode.com/files/floating.js"> </script> <div class="gb_fixed" style="z-index: +5;"> <a href="javascript:void(0)" onmouseover="gb_showHideGB()"> <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwQz0RaZ6W-Fkp8nBm9B2IZ7E_CQgJkg-BRiwvG7M0N4wBRJOY2IcSG7wVmYTmPLomRHoWc13IP3xYVD2QirvUKOqTF6ByNNKVe_wr1aZA5QqK3NocN9NV19WPDHJJdE57LUqJobdWEi3i/s1600/chatbox.png" style="filter: alpha(opacity=60); opacity: 0.6;" /> </a> </div>	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".btn-slide").click(function(){ $("#panel").slideToggle("slow"); $(this).toggleClass("active"); return false; }); }); </script> <style> /* --------------- Simple Slide panel with jQuery ---------------------------------- */ #panel { height: auto; background: #f90; width: auto; display: none; padding: 7px; border: #0C0; -moz-border-radius-topright:10px; -webkit-border-top-right-radius:10px; -moz-border-radius-bottomright:10px; -webkit-border-bottom-right-radius:10px; -moz-border-radius-topleft:10px; -webkit-border-top-left-radius:10px; -moz-border-radius-bottomleft:10px; -webkit-border-bottom-left-radius:10px; } .slide { margin: 0; padding: 0; border-top: solid 4px #f90; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjx9PylcjGcNN8PIruu0eH7iI9xJBQLCsV-kMHedE9IFRwH-NZfZB3FApWq9cvmndOHP929m-44EY2k8ssYFEiqWV4jGCLXk8k2WBixL03-rkSoVt72-kOnmUfXCmJdEZH8Ea9uYPJFBqc/s1600/btn-slide.png) no-repeat center top; } .btn-slide { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8g3UaMsbiBH9nFXetFYSnA9yHdVe6j_Y1VOVa6WyW66s3EHTf1P3RvDRxVce3eNoY8SYCxvEUZlIj4qPh96Clfas2GKNjpvozMYEf7SMsejUuvLT4LBIZG-SQ0yLI788DeFL6miA8MVc/s1600/white-arrow.gif) no-repeat right -50px; text-align: center; width: 144px; height: 31px; padding: 10px 10px 0 0; margin: 0 auto; display: block; font: bold 120%/100% Arial, Helvetica, sans-serif; color: #fff; text-decoration: none; } .active { background-position: right 12px; } </style> <div id="panel"> <!-- Ganti ini dengan kode buku tamu kamu --> </div> <p class="slide"><a href="#" class="btn-slide">Buku Tamu</a></p>

Cara memasangnya di blog anda sangatlah mudah cukup ikuti langka berikut

1. Login di Blogger.com, Klik Layout

2. Klik Tambah Gadget, Pilih HTML/JavaScript

3. Masukan Kodenya, Ganti Script
   

   <!-- Ganti ini dengan kode buku tamu kamu -->

   Dengan Kode Buku Tamu anda, Klik Simpan

Sumber : Donor Ilmu