Rabu, 10 Maret 2010

Cara Membuat Show/Hide Komentar

Kembali lagi di postingan Modifikasi Template, kali ini kita akan membahas tentang cara membuat show/hide pada komentar. Anda mengerti? Kalau belum, begini. Pertama-tama semua komentar akan disembunyikan, dan akan terlihat jika pengunjung mengklik link untuk membukanya. Sebagai contoh ada di blog http://siapayangpantas.blogspot.com. Buka salah satu postingan yang ada komentarnya, lalu lihat. Ada tulisan [Lihat semua komentar] untuk membukanya. Seperti ini nih screenshoot-nya (klik pada gambar untuk lebih jelas).


Lalu, ketika sudah diklik, semua komentar akan terbuka. Nah, lalu akan ada link [Tutup semua komentar] untuk menyembunyikan semua komentar yang masuk. Nah, seperti ini (klik pada gambar juga untuk lebih jelas).


Gimana? Bagus nggak? Kalo iya, pengen nggak supaya ada di blog kamu? Ya iya laah... Masa ya iya dong... Duren aja dibelah bukan dibedong... Kita mulai aja yuk tutorialnya, lama-lama basa-basi jadi garing!!!

1. Login ke Blogger dengan akun anda (jangan pake akun orang, apalagi akun saya! Kan yang mau anda bukan saya... )

2. Lalu klik Tata Letak > Edit HTML.

tata letak, edit HTML

3. Backup dulu template anda untuk menghindari pencurian, maksudnya template anda rusak setelah melakukan pengeditan. Klik Download Template Lengkap lalu ikuti langkah selanjutnya untuk mengunduh file XML dari template anda.


4. Beri tanda centang pada partai yang anda pilih, maksudnya checkbox Expand Template Widget.


5. Cari kode ]]></b:skin>, lalu masukkan kode berikut diatasnya.
/* Show-Hide Comments */
#showcomments{
display:inline;
}
a#showcomments:hover, a#closecomments:hover{
cursor:hand;
}
#closecomments, #komentar{
display:none;
}
6. Cari kode </head>, lalu ketikkan kode ini diatasnya.
<script>
function tutupkomen()
{
document.getElementById(&#39;komentar&#39;).style.display=&#39;none&#39;;
document.getElementById(&#39;showcomments&#39;).style.display=&#39;inline&#39;;
document.getElementById(&#39;closecomments&#39;).style.display=&#39;none&#39;;
}
function bukakomen()
{
document.getElementById(&#39;komentar&#39;).style.display=&#39;inline&#39;;
document.getElementById(&#39;showcomments&#39;).style.display=&#39;none&#39;;
document.getElementById(&#39;closecomments&#39;).style.display=&#39;inline&#39;;
}
</script>
7. Cari kode seperti kode dibawah.
<b:if cond='data:post.numComments == 1'>
1 <data:commentLabel/>:
<b:else/>
<data:post.numComments/> <data:commentLabelPlural/>:
</b:if>
8. Hapus semua kode tersebut, lalu ganti dengan kode:
<b:if cond='data:post.numComments == 1'>
1 <data:commentLabel/> <a id='showcomments' onclick='bukakomen()'>[Lihat semua komentar]</a><a id='closecomments' onclick='tutupkomen()'>[Tutup semua komentar]</a>
<b:else/>
<data:post.numComments/> <data:commentLabelPlural/> <a href='#nogo' id='showcomments' onclick='bukakomen()'>[Lihat semua komentar]</a><a href='#nogo' id='closecomments' onclick='tutupkomen()'>[Tutup semua komentar]</a>
</b:if>
Ket: Yang berwarna merah adalah link untuk membuka komentar. Sedangkan yang berwarna biru adalah link untuk menutup komentar. Anda bisa menggantinya dengan teks yang diinginkan. Perhatikan! Ada dua bagian yang berwarna merah dan biru. Isikan keduanya dengan teks yang sama.

9. Cari kode berikut.
<dl 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'>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>
10. Ganti sehingga menjadi seperti ini.
<div id='komentar'>
<dl 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'>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>
</div>
Ket: kode yang ditambahkan hanya kode yang dicetak tebal.

11. Klik Simpan Template.

Selsai! Akhirnya... Capek juga nih tangan nulis dari tadi... Silahkan mencoba. Bila belum berhasil, cek lagi, barangkali ada satu-dua langkah yang terlewatkan. Semoga bermanfaat!


Apabila anda menyukai postingan ini, anda bisa men-sharenya ke yang lain. Semisal ke Facebook atau Twitter. Silakan klik salah satu pilihan dibawah.

Buzz It

Artikel Menarik Lainnya



18 komentar:

Rhyzaboy mengatakan...

cocok nih buat blog yang berkomentar banyak seperti milik O-Om atw kang-rohman...

grosir baju wanita mengatakan...

salam kenal..

grosir baju wanita mengatakan...

salam kenal..

Facechan mengatakan...

thanks infonya....

mantep bgt buat yang commentnya banyak bgt..

dogan cengkir mengatakan...

maksih infonya sob,, keren ni kalau berkenan kita tukaran link ya,,

jeehad020190 mengatakan...

keren-keren.. makasih infonya, tapi kok gak diterapin di blog ini ya?

kunjungan balik ya.. dan tuker link yuuk..

mas doyok mengatakan...

makasih rizki
tapi saya leih suka ditampilkan semua :)

Nowgoogle.com Adalah Multiple Search Engine Popular mengatakan...

makasih tutorial komennya :)

Blogger Terpanas mengatakan...

sayan sudah mencoba, namun membuat loading blognya jadi berat. ya saya copot lagi hehe...

Inspirasi Hera mengatakan...

Lowongan Kerja
Ini yang dicari akhirnya menemukan juga tutorialnya...apalgi kalo untuk blog yang banyak comentar, thanks sob langsung praktek nih

http://hera-inspirasi.blogspot.com/search/label/Lowongan%20Kerja

BRI Jakarta Veteran mengatakan...

makasih sahabat informasinya sangat bermanfaat. Salam

Forantum I Blogging is My Life I Tutorial Blog I Tips dan Trik Blog I SEO I Free Template mengatakan...

Makasih...

mysticko mengatakan...

trik yg bermanfaat.. :)

axl requiem mengatakan...

om! kaLo show hide yang kayak foLder di xp gitu gimana ya?

Imtikhan mengatakan...

langsung coba...
makasih tutornya.

ramdan mengatakan...

tutorialnya bagus gan, keep share :)

Harun Ar mengatakan...

Makasih banget mas infonya

Posting Komentar

Apa pandapat anda terhadap artikel ini? Berkomentarlah tanpa rasa malu, ragu dan takut.

Komentar diluar tanggung jawab pemilik blog. Jika anda berkomentar yang berbau pornografi atau sara, maka itu risiko anda sendiri.

Jika anda mengirimkan komentar spam, maka akan saya hapus.

Jika anda tidak ingin komentar anda ditampilkan, silakan kirimkan e-mail di halaman email me.

Jika anda ingin berceloteh bebas, silakan tuju halaman ini.

Anda dapat menggunakan beberapa tag HTML seperti <b>, <i>, <u>, <a>, <strike>, <sub>, <sup>, dan lain-lain. Anda juga dapat menggunakan emoticon Plurk seperti (lmao) (taser) (haha).

Untuk link exchange bisa dilakukan dihalaman ini, sedangkan banner exchange dihalaman ini. Permintaan link exchange dan banner exchange selain dihalaman tersebut tidak akan dilayani.



Emoticon yang dapat digunakan [Tampilkan] [Sembunyikan]



:-))
:-)
:-D
(lol)
:-p
(woot)
;-)
:-o
X-(
:-(
:'-(
:-&
(K)
(angry)
(annoyed)
(wave) | (bye)
B-)
(cozy)
(sick)
(:
(goodluck)
(griltongue)
(mmm)
(hungry)
(music)
(tears)
(tongue)
(unsure)
(highfive)
(dance)
(blush)
(bigeyes)
(funkydance)
(idiot)
(lonely)
(scenic)
(hassle)
(panic)
(okok)
(yahoo)
(cry)
(doh)
(brokenheart)
(drinking)
(girlkiss)
(rofl)
(money)
(rock)
(nottalking)
(party)
(sleeping)
(thinking)
(bringit)
(worship)
(applause)
8-)
(gym)
(heart)
(devil)
(lmao)
(banana_cool)
(banana_rock)
(evilgrin)
(headspin)
(heart_beat)
(ninja)
(haha)
(evilsmirk)
(eyeroll)
(muhaha)
(taser) | (rammi)
(banana_ninja)
(beer)
(coffee)
(fish_hit)
(muscle)
(smileydance)
(fireworks)
(goal)
(bzzz)
(dance_bzz)
(Русский)
(code)
(morning)

Cara menggunakan: ketikkan emoticon yang diinginkan. Untuk yang ada pemisah berupa "|" maka itu adalah alternatif. Seperti (wave) | (bye) maka bisa (wave) bisa (bye)


Pengikut

Follow via NetworkedBlogs



Jangan lupa jadi fans Muhammad Rizki Fadillah's Blog di Facebook. Klik link di bawah ini.

http://www.facebook.com/pages/Tips-Trik-Matematika-Tutorial-Blogging-Muhammad-Rizki-Fadillahs-Blog/277782561876

Setelah mengklik link diatas, klik tombol Become A Fan untuk menjadi fans Muhammad Rizki Fadillah's Blog.