Sabtu, 09 November 2013
Cara Membuat Show Hide Komentar Expand Collapse Comment
Tutorial kita kali ini,adalah belajar tentang menghias kotak komentar.Tapi disini bukan akan membahas bagaimana cara memodifikasi komentar tersebut,melainkan mempelajari script kode menampilkan dan menyembunyikan komentar yang telah ada,hanya dengan satu klik.
.
Gimana? dah ngerti yang saya maksudkan? kali ini kita akan mempelajari lebih dalam bagaimana cara membuat komentar show and hide/expand collaps comment pada blog.
Biar langsung kelar,kita langsung ke topiknya yuk,yuuuk...!
1. Pertama,pergilah ke Dashboard,lalu Tata Letak,kemudian pilih tab Edit HTML.
2. Lalu contreng check box tulisan Expand Widget Templates,lalu cari kode berikut :
]]></b:skin> , Setelah ketemu,tepat diatasnya,letakkan kode berikut :
#comments {
display : none;
}
.tombol-komentar a{
text-align: center;
}
.stylewadah {background: #CCC;
padding: 5px;
}
3. Setelah itu,masih di HTML area (aaaalah!),tarik scroll kebawah cari kode:
</head>, Setelah ketemu letakkan kode script di bawah ini tepat diatas kode </head> tersebut.
</head>, Setelah ketemu letakkan kode script di bawah ini tepat diatas kode </head> tersebut.
<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js type=text/javascript/>
<script type=text/javascript>
$(document).ready(function(){
$(".tombol-komentar").click(function(){
$("#comments").slideToggle("slow");
$(this).toggleClass("active");
return false;
});
});
</script>
4. Setelah itu cari kode berikut:
</b:includable>
<b:includable id=comments var=post>
</b:includable>
<b:includable id=comments var=post>
Untuk mempermudah pencarian kode gunakan Ctrl+F pada keyboard anda.
Jika sudah ketemu,letakkan kode berikut,tepat dibawahnya:
<center>
<div class=stylewadah>
<a class=tombol-komentar expr:href=data:post.addCommentUrl expr:onclick=data:post.addCommentOnclick>
<b:if cond=data:post.numComments == 0>No Comments be the first<b:else/><b:if cond=data:post.numComments == 1>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></b:if>
</a>
</div>
</center>
5. Lalu Simpan Template,Selesai!!
Semoga Bermanfaat :D
Langganan:
Posting Komentar (Atom)
Tidak ada komentar:
Posting Komentar