Cara Membuat Buku Tamu (Auto Hide) di Blog

Assalamualaikum Gan...

kali ini Ane mau ngasih Tutorial ... malam ini mau mau buat artikel tapi gak ada bahan, coba coba browsing , eh nemu widget tersembunyi Buku tamu, asik asik buat tutorial.
ok langsung aja ke tutorial ..


Berikut langkah - langkah nya
1. Login ke Akun Blogger anda masing-masing
2. Klik Design atau Rancangan,
3. Tambah gatget HTMLjavascript
4. Pastekan Kode di Bawah ini Ke Dalam nya

CODE:

<style type='text/css'>.cboxjaparus {z-index: 1000;height: 15px;width: 280px;border: 2px solid #FF0000;background: #FF0000 -moz-linear-gradient(top,#000,#D11717);background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#D11717));border-radius: 12px;-moz-border-radius: 12px;-webkit-border-radius: 12px;-o-transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;-webkit-transition: all 1s ease-in-out;padding: 5px 5px;margin: 15px auto;font: 11px Arial;color: #FF0000;overflow: hidden;box-shadow: 0 1px 8px #B30000;-moz-box-shadow: 0 1px 8px #000;-webkit-box-shadow: 0 1px 8px #000;}.cboxjaparus:hover {min-height: 270px;border: 2px solid #B30000;background: #000;box-shadow: 0 1px 15px #000;-moz-box-shadow: 0 1px 15px #000;-webkit-box-shadow: 0 1px 15px #000;color: #000; text-shadow: 0 1px 1px #888;}.cboxjaparus h3, .cboxjs h3 {font-size: 14px;font-family: Droid Serif;font-weight: bold;color: #ffffff;text-align: center;text-shadow: 0px 1px 1px #fff; margin: 3px 5px;background: #000;border-radius: 5px;-moz-border-radius: 5px;-webkit-border-radius: 5px;border: 1px solid #999;-o-transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;-webkit-transition: all 1s ease-in-out;}.cboxjaparus h3:hover {box-shadow: 0 1px 8px #000;-moz-box-shadow: 0 1px 8px #000;-webkit-box-shadow: 0 1px 8px #000;}.cboxjaparus img.mini, .cboxjaparus img.minianima {width: 70px;border: 4px solid #666;padding: 3px;border-radius: 6px;-moz-border-radius: 6px;-webkit-border-radius: 6px;float: left; margin: 0 10px 5px 0;background: #222;-o-transition: all 1.5s;-moz-transition: all 1.5s;-webkit-transition: all 1.5s;}.cboxjaparus img.mini:hover, .cboxjaparus img.minianima:hover {box-shadow: 1px 1px 15px #000;-moz-box-shadow: 1px 1px 15px #000;-webkit-box-shadow: 1px 1px 15px #FF0000;border: 4px solid #CCCCCC;background :#666;-o-transform: scale(1.4);-moz-transform: scale(1.4);-webkit-transform: scale(1.4);margin-top: 20px;margin-left: 15px;}.cboxjaparus img.minianima:hover {-o-transform: scale(1.4) rotate(360deg) translate(0px);-moz-transform: scale(1.4) rotate(360deg) translate(0px);-webkit-transform: scale(1.4) rotate(360deg) translate(0px);}.cboxjs {margin-top: 15px;height:225px;overflow: auto;padding: 0 5px;-o-transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;-webkit-transition: all 1s ease-in-out; background:#ddd -moz-linear-gradient(top,#ddd,#000);background:-webkit-gradient(linear, left top, left bottom, from(#ddd), to(#000));}.cboxjs:hover {background: #333;color: #eee;text-shadow: 0 0px 1px #fe0303;}.cboxjs h3 {margin: 20px 0;max-width: 224px;margin-left:10px;background: #FF0000;box-shadow: 0 1px 12px #eee;-moz-box-shadow: 0 1px 12px #eee;-webkit-box-shadow: 0 1px 12px #eee;}.columns{clear:both;line-height:22px;padding:0 0 20px;width:250px}.colleft{float:left;line-height:22px;width:120px}.colright{float:right;line-height:22px;width:120px}.cboxjs h3:hover {background: #FF0000;border: 3px solid #FF0000;box-shadow: 0 1px 12px #fff;-moz-box-shadow: 0 1px 12px #fff;-webkit-box-shadow: 0 1px 12px #fff;}.cboxjs ul {padding: 0;margin: 0;list-style: none;}.cboxjs li {padding: 0;margin: 0;list-style: none;border-bottom:1px dotted #FF0000;}.cboxjs li a{color: #FF0000;padding: 0;margin: 0;text-decoration:none;font-size: 12px;-o-transition: all 1.5s;-moz-transition: all 1.5s;-webkit-transition: all 1.5s;}.cboxjs li a:hover {-o-transform: scale(1.1);-moz-transform: scale(1.1);-webkit-transform: scale(1.1);color: red;text-shadow: 0 1px 1px #FF0000;margin-left: 20px;}.cboxjaparus {height: 17px; float:right ;margin-top:0px;z-index: 10000;position: fixed;top:0px;margin-left:690px;} .cboxjaparus h3, .cboxjs {font-size: 13px;}</style>
<div class='cboxjaparus'>
<h3>BUKU TAMU</h3>
<div class='cboxjs'>
<h3>JANGAN SPAM ya BRO</h3>
<!-- ShoutBox --> MASUKAN KODE SHOUTBOX DISINI <!-- End ShoutBox -->
</div>
</div>

</div>

5. Simpan

KET .. (PENTING)
1. Kode ukuran shoutbox anda width (lebar)nya jadi 250 dan height (panjang )nya TERserah anda
2. Dibagian kode shoutbox bisa masbro ganti apa aja misalkan link-link sahabat, aboutme, info jejaringan sosial, dll

UNTUK INFO LEBIH LANJUT .. (yg gk ngerti maksudnya) bisa comment..