Mereund Blog

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

.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://lh4.ggpht.com/_jn57XA2jLxY/SmCHl1YEsxI/AAAAAAAAAXQ/HshHClEVcvY/tabs.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:10px;
}
</style>

<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>

<br /> <div class="hc-credit">
 <span 
style="float:left">   </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

* 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/AVvXsEjwzDMGGEAmCpAr-hFx5axyfzB9vzWnUi1xYPED89-herhk0v9mjklaibpzXUYk6MaXbvV9HgOWjk2RldWEgstvy5a593SMwP4yhSLKzwMA2u3QVHyP1Nr8nE2WmKNhUd805gFI0IaBwRE9/s1600/CloseButtonHot.bmp"
 /></a>
</div>

</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/AVvXsEiVXITT4SaFm4stiFO1bs1sLfsothqKFwieo9X1WMZrVzgifSs0WpGv3RlBQ8YZNXLypvzNOqtrIgJHhNmUemNbAQN22VjndELKiGIjtNbce7bORX7_L92p21vEYUyifpXNfrJ7y0WRRxmF/s1600/chatbox.png"
 style="filter: alpha(opacity=60); opacity: 0.6;" />
</a> </div>

$(".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/AVvXsEjLxsCURGyUoNjse4DLnZrWhHQxF2vjrrnuomKWUIyAzt3ywdw7oyzMXBpveDzkffN731I4ay9jwgOwpyvswI1tDhW6zp1hZpRU37mJYOSn5aaDlkj2t0AC1-9CNARhu7SnOoXwCuia3D8/s1600/btn-slide.png)
 no-repeat center top;

}
.btn-slide {
background: 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTJ_L8idsom4LzpL6Nb-A1yjy5_6EhrAQEa-ZOOF8KJ6mF3_2E72QAavGwjMuTDqfB_hyphenhyphenZbCmaEqCvtzYXZXila8VbMiqPxQK7YAfPILXMPYY6cR8jv0mI2buZjD9MoqvsBfZ6yEXvuv4/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>
<p class="slide">
<a href="#" class="btn-slide">Buku 
Tamu</a></p>

Cara memasangnya di blog anda sangatlah mudah cukup ikuti langka berikut