Wednesday, September 30, 2009

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==&quot;commentshown&quot;) {
whichpost.className=&quot;commenthidden&quot;;
}
else {
whichpost.className=&quot;commentshown&quot;;
}
}
</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 (&quot;comments-block&quot;)' 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 (&quot;comments-block&quot;)' 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='&quot;comment-author &quot; + 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? :

22 komentar:

Klik Here To Show All Comment


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

lover Wednesday, September 30, 2009 3:50:00 PM  

Terima kasih
@ Kak Rinto
@ mas Putra
@ Kak Basri...

info ternak Wednesday, September 30, 2009 4:30:00 PM  
This comment has been removed by a blog administrator.
lover 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 ...

lover 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

Rizky2009 Thursday, October 08, 2009 4:48:00 AM  

aq pernah nyoba tp g berhasil. gambarnya g muncul, kira2 apa y yang salah ?

Tukang Corat - Coret Saturday, October 17, 2009 3:02:00 PM  

Terima kasih banyak mbak...ini yang saya cari - cari.. Akhirnya ketemu juga. :D

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...

AmruSite Thursday, November 26, 2009 8:36:00 AM  

Tipnya bagus nul, mas udah nyoba barusan & alhamdulillah langsung berhasil.. makasih banyak ya.. :-*

Seti@wan Dirgant@Ra 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

Yuan D Freakz Sunday, September 05, 2010 6:34:00 PM  

g bisa nich

apa karna sy make cufon kali ya

Post a Comment

newer page older page home
top