Membuat Buku Tamu Turun Dari Atas

Bigung mau taruh buku tamu tapi memakan banyak tempat?, sembunyikan aja biar rapi.

Mungkin dengan membuat buku tamu turun dari atas bisa jadi solusi sobat blogger, dulu pernah saya pakai juga di blog ini berhubung sudah bosan dan daripada di buang kan sayang lebih baik dibagi-bagi ke sahabat blogger lainya yang belum tau, oke langsung aja praktek. Klik DEMO untuk lihat contoh.

Ikuti langkah - langkah dibawah..!

1. Sign in blog anda di blogger.com
2. Klik menu Tata Letak
3. Klik menu Elemen Halaman
4. Klik tulisan Tambah Gadget
5. pilih tulisan HTML/JavaScript
6. Copy kode dibawah ini kemudian paste pada kolom yang di sediakan.

<style type="text/css">
#at{
position:fixed;
right:450px;
z-index:+1000;
}
* html #at{position:relative;}
.attab{
height:100px;
width:100px;
float:left;
cursor:pointer;
background:url();
}
.atcontent{
float:left;
border:2px solid #999;
background: #000;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
padding:10px;
-moz-box-shadow: 0px 2px 5px 0px #f8f9b9;
}
</style>
<script type="text/javascript">
function showHideAT(){
var at = document.getElementById("at");
var w = at.offsetWidth;
at.opened ? moveAT(0, -200-w) : moveAT(20-w, 0);
at.opened = !at.opened;
}
function moveAT(x0, xf){
var at = document.getElementById("at");
var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
at.style.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveAT("+x+", "+xf+")", 10);}
}
</script>
<div id="at">
<div class="attab" onclick="showHideAT()"> </div>
<div class="atcontent">
<div align="center">
<div style="background:#000;">

<iframe title="masdi226" src="http://www.shoutmix.com/?masdi226" width="100%" height="460" frameborder="0" scrolling="auto"><a href="http://www.shoutmix.com/?masdi226">View shoutbox</a></iframe><br /><a href="http://www.shoutmix.com" title="Get your own free shoutbox chat widget at ShoutMix!">ShoutMix chat widget</a><br />

</div>
</div>

<br />
<div align="right"><a href="javascript:void(0);" onclick="showHideAT()"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4SV4F1ew4zFglPMek8BEg5GgfpGR1IDhpsWGD9LbhV4MTmOePi2yfK9xD8SAIGOcnl6jIk1zpNAI2_pAaIFtBocz2ZuRxdX-aif5sZy1XBpkox-9oIOaT29Jp9mlfLhfKcoPDgeRVAU7H/s1600/close.png" alt="close" title="Click here to Close Cbox" /></a></div>

</div></div>

<script type="text/javascript">
var at = document.getElementById("at");
at.style.top = (-200-at.offsetWidth).toString() + "px";
</script>

<div style='display:scroll; position:fixed; top:50px; right:0px;'><a href="javascript:void(0);"onclick="showHideAT()"/><img src="http://i.imgur.com/3DLta.gif" /></a>
</div>

8. Dan langkah terakhir simpan dan lihat blog anda, keren kan..?

Keterangan :

silakan ganti yang saya blog warna biru silakan ganti dengan kode cbox atau shoutmix sobat
Gambar tombol Guest Book, anda dapat membiarkannya seperti itu atau merubahnya dengan gambar sobat sendiri.

Membuat Buku Tamu Turun Dari Atas

Related Posts