Home / Blog Tutorial / Cara Pasang buku tamu dengan jQuery

Cara Pasang buku tamu dengan jQuery

Posted by Unknown Minggu, 28 Oktober 2012 0 komentar

Buku tamu memang fasilitas yang penting yang dibutuhkan oleh blogger dalam silaturahim dengan pengunjung, dimana pengunjung dapat bertegur sapa, mengucap salam bahkan ucapan terimakasih yang pernah saya alami di ungkapkan dalam buku tamu. Buku tamu juga digunakan sebagai media blogwalking, dimana blogger dapat meninggalkan jejak untuk dikunjungi oleh si pemilik blog yang dikunjungi nya tersebut. Lalu, bagaimana cara membuat Buku Tamu Ala Slide Vertikal dengan jQuery mari kita simak tutorialnya.

Login ke Blogger
Masuk ke "Tata Letak - Edit HTML"
Klik "Expand Template Widget"
Cari kode di bawah ini :

]]></skin>

Masukan (copy paste) kode dibawah ini diatas kode ]]></skin>

.parno{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}
.parno p{color:#ccc;margin:0 0 15px;padding:0}
.parno a,.parno a:visited{color:#9FC54E;text-decoration:none;border-bottom:1px solid #9FC54E;margin:0;padding:0}
.parno a:hover,.parno a:visited:hover{color:#fff;text-decoration:none;border-bottom:1px solid #fff;margin:0;padding:0}
a.triger{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/AVvXsEhtjMC_sx-3LTYqB2VS8sBscCZiEC_AWebcIgJpRZVW6JC0_XILfgHmYKJB1Ho0CR0gwivZDAT-NYpJQFvDwk9oRc8EyDOZD4kjamPMmMu-9jKQYcHOM0fF5MjI3S2dW-wolyFL0mPPFyQ/) 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.triger: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/AVvXsEgZXC1NPOI5OZVPHBHqEfLdhrVBPBJd3rEmyISvY-k3dCAhVA5Y_HAnD_bykfpOSinY_t4zLa_DxpT7DgaNgEFZLK4IFaPiB-vJpwakMes2pmp1BJUv35gqQvF_lUOrq-Az3iFNotoILDs/) 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.triger{background:#222 url(http://lh3.ggpht.com/_xcD4JK_dIjU/S4QDvxbreOI/AAAAAAAAD2M/Cz3Q2r5pdTM/d/minus.png) 85% 55% no-repeat}
.columns{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}
.parno img{background-color:#262626;border:1px solid #333;float:right;margin:3px 3px 6px 8px;padding:5px}
.parno 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}
.columns ul,.columns ul li{list-style-type:none;margin:0;padding:0}

Tulisan yang bercetak tebal silahkan dirubah sesuka anda dg url koleksi gambar anda, hanya saja diharuskan max 32x32.

Cari kode dibawah ini :

</head>

Masukan (copy paste) kode dibawah ini diatas kode</head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(".triger").click(function(){
$(".parno").toggle("fast");
$(this).toggleClass("active");
return false;
});
});
</script>

Cari kode dibawah ini :

</body>

Masukan (copy paste) kode dibawah ini diatas kode </body>

<div class='parno'>
<h3>Buku Tamu</h3>
====== Kode Widget Shoutbox Anda =======
</div>
<a class='triger' href='#'>Guest</a>

Tulisan yang bercetak tebal isikan dg kode widget shoutbox sobat.
Simpan Template dan Lihatlah hasilnya..

Semoga bermanfaat.....

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul: Cara Pasang buku tamu dengan jQuery
Ditulis oleh Unknown
Rating Blog 5 dari 5

Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip, baik itu sebagian atau keseluruhan dari isi artikel ini harap menyertakan link dofollow ke https://samsung-batteris.blogspot.com/2012/10/cara-pasang-buku-tamu-dengan-jquery.html. Terima kasih sudah singgah membaca artikel ini.