Cara Membuat Buku Tamu Slide Effect Menarik

Disini akan dibahas cara membuat "Buku Tamu" . Dengan adanya Buku Tamu maka kita akan enak menerima komentar dari Visitor (Pengunjung). Semenjak saya membuat blog ! saya sangat bosan dengan tampilan blog yang tidak ada memberi komentar sedikit pun :D  karena ada Buku Tamu blog Saya sangat senang. karena pengunjung dan saya dapat ngobrol sepuasnya tanpa pulsa.  Hehehehe

Terlalu lama nih berkoyok gan !
Nah Bagaimana cara membuat buku tamu agar dapat berinteraksi dengan pengunjung ?
Yang perlu anda lakukan adalah mendapatkan kode Buku Tamu anda di ShoutMix
langkah untuk mendapatkan kode tersebut.
|Langkah Pertama|

1. Seperti biasa daftar dulu account anda di Shoutmix.com
2. Jika sudah terdaftar bro. Pastikan anda sudah menjadi anggota shoutmix
3. Pada kolom yang berjudul Quick Start pilih Get Kode
4. Pada menu Pulldown. Klik lalu akan muncul seperti ini

5. Jika sudah di klik. maka akan dapat Form seperti gambar berikut.

6. Selesai!  Anda Sudah mendapatkan Kode Buku Tamu.  Selanjutnya ?   (hehehe jangan anggap udah siap bro)

|Langkah kedua|
1. Masuk ke akun blogger anda. Dengan Id dan Password Jika tidak terdaftar = Segera matikan Komputer anda  Wkwkwkwkwk :D
2. Pilih Rancangan atau Tata letak.
3. Tambahkan Gadget atau Html/JavaScript
4. lalu tempelkan kode berikut kedalamnya
Kode JS orang lain :) <textarea style="height: 118px; width: 254px;">

<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/AVvXsEiy2eoU2lUkdnQIg4-2DiWMT6KIGAo5nXhRQDNrcykF5X-EZze3kYRB8b7lRFBjJURcAk39e8VNqpX9XW-Faq9peF5ttf5udUXyFwM05j9QyAxveCzqeb-gk6pEu3-LNke2lNFKeMzEok8/s1600/btn-slide.png) no-repeat center top;

}
.btn-slide {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisi4DY4jw8PWeq1l6JRCr6mSHRssFoi72G6y3obfUA-mlamlR2euq33Uiw7jQt7NaPm3W009oqSBS7uniBrCRqTwFKBb7FJtoTZSo6I0Uf9WDJ9Nt70acwlXfYy3cL71XYRWVqxTShlHw/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 tamunya disini -->

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

</textarea><br />

»» Save, kemudian lihat hasilnya.

Keterangan:
Harap diketahui bahwa jika KAWAN sudah pernah memasang Script jQuery didalam template KAWAN, maka script yang berwarna Merah tersebut tidak perlu di ikut sertakan dalam pemasangan buku tamu slide effect with jQuery ini.
"TULISAN YANG BERWARNA HIJAU GANTI DENGAN KODE SHOUT MIX YANG ANDA DAPATKAN TADI"

5. Selesai.

Good Luck | Buku Tamu Sudah Jadi?   KomentarDibawahIni.. trims