Cara Membuat Spoiler ( Show / Hide ) Komentar yang Memanjang

Cara ini berguna jika postingan sahabat banyak yang memberi komentar sehingga halaman memanjang sampai bawah penuh dengan kolom komentar. Caranya sangat mudah, di jamin gak pusing kepala. Seperti biasa kenapa aku posting ini karena aku sudah lakukan dan buat dokumentasi. Yuk kita mulai...
1. Log in Blog, Klik Layout, Klik edit HTML, Klik Expand Widget.
2. Cari kode seperti di bawah ini :

.feed-links {
clear: both;
line-height: 2.5em;
margin-left: 13px;
}

Kemudian Coppy kode di bawah ini, Pastekan di atasnya kode tadi.

.commenthidden {
display:none
}
.commentshown {
display:inline
}

3. Langkah selanjutnya cari kode </head> .

Coppy kode di bawah ini dan pastekan di atasnya kode </head>

<script type='text/Javascript'>
function togglecomments (postid) {
var whichpost = document.getElementById(postid);
if (whichpost.className=="commentshown") {
whichpost.className="commenthidden";
}
else {
whichpost.className="commentshown";
}
}
</script>

4. Kemudian cari kode seperti di bawah ini :

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>

Kalau tidak ketemu coba cari kode seperti ini :

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
<b:loop values='data:post.comments' var='comment'>

Jika sudah ketemu Coppy kode di bawah ini, pastekan diatasnya.

<base target='_self'><h2><a aiotitle='click to expand' href='javascript:togglecomments ("comments-block")' rel='nofollow'><b> <center><blink>Show All Comment</blink></center></b></a></h2></base>
<dl class='commenthidden' id='comments-block'><br/>

Jangan lupa taruh kode ini </dl> di penutup kode tag.

Contohnya :

<base target='_self'><h2><a aiotitle='click to expand' href='javascript:togglecomments ("comments-block")' rel='nofollow'><b> <center><blink>Show All Comment</blink></center></b></a></h2></base>
<dl class='commenthidden' id='comments-block'><br/><dl expr:class='data:post.avatarIndentClass' id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
...dan seterusnya sampai...
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>
</dl>

5. Save

Anda Sudah Baca Yang Ini? :

news

berita unik

daftar isi blog

tutorial tip dan trik

tutorial blog

22 komentar:

Klik Here To Show All Comment

Rinto, Wednesday, September 30, 2009 2:39:00 PM: yup...yp...yup...ne yg gw cari
putra, Wednesday, September 30, 2009 3:33:00 PM: Mantep nih ,,
Thanks Ya ,,
al-basri, Wednesday, September 30, 2009 3:48:00 PM: selamat malam dik,
bagus juga info ni, selalu ada yang baru disini.
ni memang paling updated blogger...

terima kasih dik, info yang menarik
Mr. X, Wednesday, September 30, 2009 3:50:00 PM: Terima kasih
@ Kak Rinto
@ mas Putra
@ Kak Basri...
Muksinjamaludin, Wednesday, September 30, 2009 4:30:00 PM: This comment has been removed by a blog administrator.
Mr. X, Wednesday, September 30, 2009 4:37:00 PM: Info ternak aku suka tuh ayamnya...
langsung ke TKP...
Rattlenetwork, Wednesday, September 30, 2009 4:39:00 PM: oke juga nih...sip...!!fotonya juga bagus tuh..hehehehe,...!!!
Giblog, Wednesday, September 30, 2009 4:44:00 PM: ajib... sm kyk pny q nih. cm bda dispoiler dan accordion . mantaf ...
Mr. X, Wednesday, September 30, 2009 4:52:00 PM: Mas Rattlenetwork dan mas Giblog, tunggu aku ya? aku datang....
kel, Wednesday, September 30, 2009 5:39:00 PM: info yang menarik khusnul. Ia sangat berguna dan tip yang sering d cari oleh para blogger.terima kasih juga atas berbagi ilmu.
SehatZBlog, Wednesday, September 30, 2009 5:48:00 PM: info nya bagus...tampilan jadi tambah menarik...
hanya saja kalo udah di klik tetap panjang juga tuh.... tapi tetap mo ijin di simpen dulu...buat variasi blog...hehehehe
Ramuni, Wednesday, September 30, 2009 6:33:00 PM: pake div dengan css overflow:auto aja enak jd bisa discroll spt link sobat2 khusnul
Seti@wan Dirgant@Ra, Saturday, October 03, 2009 10:47:00 AM: Makasih banyak dinda.
Rizkyzone, Thursday, October 08, 2009 4:48:00 AM: aq pernah nyoba tp g berhasil. gambarnya g muncul, kira2 apa y yang salah ?
Yoh Asakura, Saturday, October 17, 2009 3:02:00 PM: Terima kasih banyak mbak...ini yang saya cari - cari.. Akhirnya ketemu juga. :D
Upex, Sunday, October 18, 2009 4:06:00 AM: Coba dulu ahhh....
Upex, Wednesday, November 25, 2009 1:48:00 AM: Yang ini ya... ak dulu kan dah pernah baca ini tp lupa judulnya... hahaha...
Makasih dek....
Di coba dulu...
Anonymous, Thursday, November 26, 2009 8:36:00 AM: Tipnya bagus nul, mas udah nyoba barusan & alhamdulillah langsung berhasil.. makasih banyak ya.. :-*
FATAMORGANA, Wednesday, December 23, 2009 7:07:00 AM: Aku sudah coba tapi nggak berhasil...
FATAMORGANA, Wednesday, December 23, 2009 7:09:00 AM: Gimana caranya yah??
di tempalte punyaku kode2 itu nggak ada?
Osi, Sunday, January 31, 2010 9:36:00 AM: Terima kasih infonya, sdh berhasil di terapkan
yuanperdana, Sunday, September 05, 2010 6:34:00 PM: g bisa nich

apa karna sy make cufon kali ya