Buka Tutup Kotak Komentar Blogger dengan jQuery
Komentar sangat penting dalam suatu Blog/Website dll sebagai indikator diminati tidaknya artikel yang kita posting. Semakin banyaknya komentar yang di lontarkan oleh pengunjung, maka artinya artikel yang kita sajikan mendapat respon yang lumayan baik sehingga kita akan semakin tertantang untuk melakukan update terus terhadap Blog kita. Terlebih kita terus menerus melakukan polesan tampilan yang membuat minat pengunjung untuk berlama-lama di Blog kita. Memang cara tersebut bukanlah jaminan bisa mendongkrak popularitas blog tersebut tapi minimal kita bisa menyuguhkan sisi lain daya tarik pada blog kita salah satunya tampilan Kotak Komentar yang di sajikan sedemikian rupa sehingga akan terlihat lain dengan bawaanya yang standar. Misal menggunakan bingkai yang unik seperti background image, bingkai blinking dll. Tapi kali ini saya akan menyajikan cara menampilkan kotak komentar buka tutup ketika di klik tombol " Klik untuk tambah komentar " atau kalimat lain yang sesuai seperti pada Blog ini. Tujuan lain dari pemakaian widget ini adalah untuk menghemat space yang ada di blog sehingga bisa digunakan untuk widget lain.
1. Login ke Blogger sobat
2. Pilih Elemen Rancangan
3. Pilih Edit HTML ( centang Expand Template Widget )
4. Letakkan Kode dibawah ini tepat dibawah <head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(".toggle_container").hide();
$("h3.trigger").click(function(){
$(this).toggleClass("active").next().slideToggle("slow");
});
});
</script>
5. Kemudian cari kode ]]></b:skin> kemudian letakan kode dibawah tepat diatasnya
/*----- Comment Box by www.MybloggerTricks.com ----*/
h3.trigger {
background: url(http://mybloggertricks.googlecode.com/files/comment-boxbg.png) no-repeat;
height: 44px;
line-height: 46px;
width: 518px; border-radius:4px;
font-family:Arial;
font-size: 1.4em; font-weight: bold;
text-align:left;
color:#A1A1A1;
float: left;
cursor:pointer;
box-shadow: #333 0px 1px 3px;
padding:0 0 0 50px;
margin:10px 0px 10px 10px;
}
h3.active {
background-position: bottom left;
color:#ddd;
}
.toggle_container {
padding-left:10px;
overflow: hidden;
clear: both;
}
Keterangan kode :
- 518px : menyatakan width ( lebar ) kotak dan bisa di edit sesuai selera
- Background kuning : untuk merubah font dan warna text " Klik untuk menambah komentar
<h3 class='trigger'>Klik untuk tembah komentar</h3>
<div class='toggle_container'>
<div class='block'>
7. Dan letakkan kode berikut tepat di atas </b:includable>
<p style=' line-height:0px; font-family:Arial; font-size:8px; font-weight:bold; text-align:right;'><a href='http://www.mybloggertricks.com/2012/05/create-floating-bar-for-pinterest-other.html' style='color:#CAC8C8;'><i>Blogger Widgets</i></a></p>
</div>
</div>
</div>
8. Save/ Simpan Template tapi baiknya Pratinjau dulu untuk memastikan tidak Galat !
9. Selesai
Selesai sudah cara membuat kotak komentar buka-tutup di blog, semoga bermanfaat.
Salam
h72
0 komentar:
Post a Comment
No spam...