Buku Tamu Tersembunyi dan Profesional Dengan jQuery

Langsung aja pada topik tentang membuat buku tamu tersembunyi versersi terbaru, sebab fungsi buku tamu sudah pernah dibahas sebelumnya disini dan disini. Kode ini saya dapatkan dari salah satu teman yang bernama Ahrizal WS. Akan tetapi, pada tutorial kali ini menggunakan jQuery sepenuhnya tanpa menambahkan gadget. Biar anda tidak penasaran silakan lihat demo disini

Langkahnya sebagai berikut :

• Masuklah ke akun Blogger yang anda miliki;


• Pilih dan klik tombol Rancangan dan pilih Edit HTML;


• Jangan lupa Centang Expend Widget;


• Cari kode </head>


• Masukan kode derikut diatas </head>

<script type='text/javascript'>
$(document).ready(function(){
$(&quot;.slide&quot;).click(function(){
$(&quot;.kodbk&quot;).toggle(&quot;fast&quot;);
$(this).toggleClass(&quot;active&quot;);
return false;
});
});
</script>

• Lanjutkan pencarian kode ]]></b:skin>


• Copy paste kode berikut diataskode ]]></b:skin>

/*KOD Buku Tamu V-3*/
.kodbk{position:fixed;top:40px;left:0;background:#000;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;border:1px solid #444;width:330px;height:auto;filter:alpha(opacity=85);-moz-opacity:0.85;opacity:0.85;display:none;padding:30px 30px 30px 100px}
.kodbk p{color:#ccc;margin:0 0 15px;padding:0}
.kodbk a,.kodbk a:visited{color:#9FC54E;text-decoration:none;border-bottom:1px solid #9FC54E;margin:0;padding:0}
.kodbk a:hover,.kodbk a:visited:hover{color:#fff;text-decoration:none;border-bottom:1px solid #fff;margin:0;padding:0}
a.slide{position:fixed;text-decoration:none;top:110px;left:0;font-size:16px;letter-spacing:-1px;font-family:verdana, helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg067AIqhoHgzVV4Yjf4F8UrOZwwB7L0DQtxvvnQa4c60sETrnFo2uMW0Cb_KzcHDThFj8QLRdSIZEai2Aq1ORyx8rbB0zh3nuIiSzRkrynPdrWGcNpfkFllL5BN06LW_sk4mWl52z7iMw/) 85% 55% no-repeat;border:1px solid #444;-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:0;-webkit-border-bottom-left-radius:0;display:block;padding:15px 40px 15px 15px}
a.slide:hover{position:fixed;text-decoration:none;top:110px;left:50px;font-size:16px;letter-spacing:-1px;font-family:verdana, helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg6yr-ESFg0sNNudPGz68o7H-4-_nFhysVee13ElB6r7Oqu5tK7WRCgsyHLE3bnRc66NNCIH4C19Lec-FvHNMtDmqflnqJlox90ZYQdkgduyOFpVDmBtn2Af5jS97ftoV9MtASFMxpxRg/) 85% 55% no-repeat;border:1px solid #444;-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-bottomleft:0;-webkit-border-bottom-left-radius:0;display:block;padding:15px 40px 15px 15px}
a.active.slide{background:#222 url(http://lh3.ggpht.com/_xcD4JK_dIjU/S4QDvxbreOI/AAAAAAAAD2M/Cz3Q2r5pdTM/d/minus.png) 85% 55% no-repeat}
.table{clear:both;width:330px;line-height:22px;padding:0 0 20px}
.colleft{float:left;width:130px;line-height:22px}
.colright{float:right;width:130px;line-height:22px}
a:focus{outline:none}
.kodbk img{background-color:#262626;border:1px solid #333;float:right;margin:3px 3px 6px 8px;padding:5px}
.kodbk h3{border-bottom:1px solid silver;margin-bottom:5px;padding-bottom:3px;text-align:left;clear:both;color:#FFF;font-size:12px;font-weight:700}
.table ul,.table ul li{list-style-type:none;margin:0;padding:0}

• Langkah yang terakhir carilah kode </body>


• Copy kode dibawah ini dan pastekan diatas kode </body>

<div class='kodbk'>
<h3>Buku Tamu</h3>
------ Kode Buku Tamu Anda -------------
</div>
<a class='slide' href='#'>Buku Tamu</a>

• Simpan Template dan lihat hasilnya

Selamat mencoba dan semoga berhasil