Memasang Widget Buku Tamu Dengan Slide J-Query

Setelah membuat tutorial Membuat Buku Tamu Buka Tutup, Posting kali ini termotivasi dari kiriman/konfirmasi tugas mandiri mahasiswaku. Ada tampilan widget buku tamu yang menurutku cukup unik dan agak berbeda. Penasaran gimana cara membuatnya..., memotivasi aku untuk kemudian berselancar di pagi hari, cari sana sini, sampe akhirnya mentok di blog Shangkala Talking. Dan kemudian aku praktekin, dan akhirnya....cekedooott..., hasiilnya seperti tampilan di bawah ini...

Buku Tamu

Oke deh...penasaran pengen buat seperti widget di atas, ikuti langkahnya berikut ini. Eits...tunggu dulu, yang pasti anda udah punya script buku tamu dulu yaa...

Baiklah kalo begitu, kita mulai...OK...

1. Login Ke Blog Anda (jangan blog orang lain)
2. Klik Rancangan > Tambah Widget > Pilih Menu HTML/Javascript
3. Copy script di bawah ini

<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/AVvXsEjmvVNQOt52TsqPD_6xE-N6dcmozTrPkrNOFR94VdCnmzCVsoSO_oNZhFDiMGSbTPr2dAXVFvi0BeGNi9maLjaX2ZFHtkyVsreC40csN7WUYE75_DkGMEgJuVQMYvXZz-kzVEOZCHnBKhc/s1600/btn-slide.png) no-repeat center top;

}
.btn-slide {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc9Zm3OiLytCbEp0dNztXJu7k6-ouRymCDl96TjKUpstpdtJKv2Ho6DUdaHzcJhBPgoCRF3fnkT1M5knkSiZnDoFyVSCSS4pvBI4ricsheiV2yjcVNAjONJeum_50uzoRU-96sqs0kkk4/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">

<!-- SIMPAN SCRIPT BUKU TAMU ANDA DISINI -->

</div>
<p class="slide"><a href="#" class="btn-slide">Buku Tamu</a></p>

Pada tulisan warna biru, ganti dengan kode/script buku tamu anda, sedangkan pada kata yang berwarna merah ganti dengan kata kata yang anda inginkan.

4. Save dan lihat hasilnya....

--------Best Regard----------


---Aghaku---