Beberapa Koleksi Style Buku Tamu

Beberapa Koleksi Style Buku Tamu , 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/AVvXsEjIxNOXLaQXMf4-dF17Iol3GqGG2gWb2K8jc2wwtJZXZgEln0623ZnPYhGeKBzxrufZEGCdtZ1JB5j45u2K16PwLNtQGRAsYl7btoUZ2AkSXBDiWzqwe17AJzrEiFeewT2ytkOH9o6HhGZW/') 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/AVvXsEhD17lcLNIe6Qa5bA3RpWEwL5p8ILBrwlAnH5M0tkbHIYuk9Rg03IT5qgUOYgeUtEdcd4nPu99DdpKWpow3OGypQ-QHi6ZtPuBbOhyxtEAlJytwzNY0g5EdhA6x10SCqbjpN_oNocxNxt50/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"> <!-- Ganti ini dengan kode buku tamu kamu --> <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/AVvXsEhVfcoh7cDhVPwQYnHbQAloDH3Iq5UAHe9OzSGBVBnq1MMPL7TcdDAa3d8aP4TwoP0wwaeUACSE3Qzmfx1d6NPDS2AVmVEP6DFnIA6KTcpl7xi0c-E71_z8y5geguYTCF0_w9FtOj4diYRD/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/AVvXsEhdBoMkzxT-HcYOUhOgyEtCVtep9PMqn9YT0VCje0SxitBWLh95IpC5LBt7nejHPLwOD8VuB-TuCTa2jDm-xeoa7Xs5aFJZTLA6FgxBVA3Dxg7Ns6RJ2lABDi04v__4D4nSQG57V3Wzdkzl/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/AVvXsEjN0Xl-33gedQ2yzF8y4RgVA7vdRIch0J0ccxJHc6c6RhEcjyyocM8LvElQhInG4yHNWkfw-73c0sUwwjDhJsDp2wcHD7Y76sAz689lq39Y70I7JzWTkhOjTD6Sie7sOPBhzUYVri1O8e4/s1600/btn-slide.png) no-repeat center top; } .btn-slide { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-9lMFy1sr-aSI7BghihHrjEaJcRhtXl0BgrjUjo8UW-D8iBJz48aAi482p5NAfgNnpuF6SS00GSdYrplFfj3YQ071Iv3g3BoppwhJ-MlbWtg9QCKAlksJeqFJCKRjrUSuh0eiyY1tA_M/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