Monday 2 August 2010

Hide or Show Comments / Show Hide Comments

Cara Membuat Show-Hide Komentar/Expand-Collapse Comment: "

Membuat Show-Hide Komentar/Expand-Collapse Comment.Tutorial pada pelajaran blog kali ini,adalah salah satu 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 maksud yang saya maksudkan (ngomong oopo aku iki :D)?
Yup! anda betul sekali,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...!
Pertama,pergilah ke Dashboard,lalu Tata Letak,kemudian pilih tab Edit HTML.
Lalu contreng check box tulisan Expand Widget Templates,lalu cari kode berikut:

]]></b:skin>
Setelah ketemu,tepat diatasnya,letakkan kode berikut:
.commenthidden {display:none}
.commentshown {display:inline}
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.
<script type='text/Javascript'>
function togglecomments (postid){
var whichpost = document.getElementById(postid);
if (whichpost.className==&quot;commentshown&quot;){
whichpost.className=&quot;commenthidden&quot;;
}
else{
whichpost.className=&quot;commentshown&quot;;
}
}
</script>
Setelah itu cari kode berikut:
<dl id='comments-block'>
Untuk mempermudah pencarian kode gunakan Ctrl+F pada keyboard anda.
Jika sudah ketemu,lalu hapus kode tersebut,dan gantilah dengan kode dibawah ini:
<a aiotitle='click to expand'
href='javascript:togglecomments
(&quot;comments-block&quot;)'
rel='nofollow'><strong>Show or Hide Comments/Tampilkan atau Sembunyikan Komentar</strong></a>
<dl class='commenthidden'
id='comments-block'>
Lalu Simpan Template,Selesai!!

Ket:
Untuk tulisan 'Show or Hide Comments/Tampilkan atau Sembunyikan Komentar' gantilah sesuai keinginan anda.
Semoga Bermanfaat :D

Baca Juga Yang Ini..


Diposkan oleh di
Label: , , , ,