Membuat spoiler di komentar Blogspot Non Treaded

Selamat berjumpa lagi di fayescool.blogspot.com yang pada kesempatan ini akan mencoba share Tentang "Membuat spoiler di komentar Blogspot Non Treaded" diblog butut ini. Seperti apakah info tentang "Membuat spoiler di komentar Blogspot Non Treaded" ini, mari kita cekidot berikut ini:

Awal cerita ada sobat blogger yang bertanya, bagaimana cara membuat komentar menjadi kaya spoiler. Seperti ini nih komentarnya:


Seperti ini nih kira-kira komentarnya:

mas, makasih tutornya.
tapi mau nanya ni, kalau bikin koment yang seprti ini gimana ya? yang bisa kaya spoiler begitu?

Cara membuat spoiler di kotak komentar sebagai berikut gan:

Untuk template yang bukan treaded/bertingkat:

Sebelum edit template selalu simpan template ditempat aman gan, dengan cara dibackup dulu templatenya di komputer yach, biar aman dan pasti lebih nyaman dan gak kewatir bila nanti terjadi kegagalan.. Oke langsung cekibrooooottt:

1. Login di blogger.com kemudian ke langsung saja edit tmplate html, centang expand widget content...

2. Cari kode seperti berikut ini (agar mudah klik ctrl+f pada keybord, akan muncul sebuah kotak pencarian. Lalu masukkan sepenggal kodenya yang mau dicari):

<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'>
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
<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' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
<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>

setelah ketemu masukkan kode berikut ini diatas kode no.2 diatas:

<!-- spoiler komentar part1 -->
<div><div style='margin-bottom: 2px;'><i><b><small/></b></i><input onclick='if (this.parentNode.parentNode.getElementsByTagName(&apos;div&apos;)[1].getElementsByTagName(&apos;div&apos;)[0].style.display != &apos;&apos;) { this.parentNode.parentNode.getElementsByTagName(&apos;div&apos;)[1].getElementsByTagName(&apos;div&apos;)[0].style.display = &apos;&apos;; this.innerText = &apos;&apos;; this.value = &apos;Hide&apos;; } else { this.parentNode.parentNode.getElementsByTagName(&apos;div&apos;)[1].getElementsByTagName(&apos;div&apos;)[0].style.display = &apos;none&apos;; this.innerText = &apos;&apos;; this.value = &apos;Lihat Komentar&apos;; }' style='margin: 0px; padding: 0px; width: 180px; font-size: 12px;font-weight:bold;' type='button' value='Lihat Komentar'/></div>
<div style='border: 0px inset ; margin: 0px; padding: 0px;'><div style='display: none;'>
<!-- spoiler komentar part1 end -->

3. Kemudian Masukkan Kode berikut dibawah kode no.2:

<!-- spoiler komentar part2 -->
</div></div></div>
<!-- spoiler komentar part2 end -->

Selengkapnya kode akan menjadi seperti ini:

<!-- spoiler komentar part1 -->
<div><div style='margin-bottom: 2px;'><i><b><small/></b></i><input onclick='if (this.parentNode.parentNode.getElementsByTagName(&apos;div&apos;)[1].getElementsByTagName(&apos;div&apos;)[0].style.display != &apos;&apos;) { this.parentNode.parentNode.getElementsByTagName(&apos;div&apos;)[1].getElementsByTagName(&apos;div&apos;)[0].style.display = &apos;&apos;; this.innerText = &apos;&apos;; this.value = &apos;Hide&apos;; } else { this.parentNode.parentNode.getElementsByTagName(&apos;div&apos;)[1].getElementsByTagName(&apos;div&apos;)[0].style.display = &apos;none&apos;; this.innerText = &apos;&apos;; this.value = &apos;Lihat Komentar&apos;; }' style='margin: 0px; padding: 0px; width: 180px; font-size: 12px;font-weight:bold;' type='button' value='Lihat Komentar'/></div>
<div style='border: 0px inset ; margin: 0px; padding: 0px;'><div style='display: none;'>
<!-- spoiler komentar part1 end -->

<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'>
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
<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' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
<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>

<!-- spoiler komentar part2 -->
</div></div></div>
<!-- spoiler komentar part2 end -->

Lalu klik Save, semoga jadi ya gan...

Catatan:

1. kode yanng beginian <!-- spoiler komentar part2 end --> hanya tambahan gan untuk agar mudah mencari kodenya kalau suatu saat mau dirubah lagi. Ane biasa menggunakan cara ini...
2. Kata Lihat Komentar yang ane cetak tebal bisa diganti sesuai keinginan misal, View Comment atau yang lain (kalau diganti keduanya diganti sama gan, agar gak berubah ubah saat tombolnya di klik nanti)

Hasil yang pernah ane terapkan:



Oke gan namun cara diatas tidak berlaku (tidak akan berpengaruh) untuk form komentar jenis treaded bawaan blogger. Untuk komentar treaded bawaan blogger baca Membuat spoiler di komentar treaded / bertingkat Blogspot

Demikianlah sharing ane tentang "Membuat spoiler di komentar Blogspot Non Treaded" di fayescool.blogspot.com ada salah apapun saya mohon maaf. Happy Blogging..

Posted by Fayes Cool » Rating 4.5 » at Tuesday, March 27, 2012

Postingan Terkait

Review Komentar

• Cara Memasang Rating Bintang Rich Snippets Pada Blogspot
• Membuat Spoiler (tombol Buka Tutup)
• Cara membuat Spoiler Di Komentar Blogspot
• Membuat spoiler di komentar treaded/bertingkat Blogspot
• Asal Mula Kata Cekidot di Blog Fayescool
• Update Avira AntiVir Personal Offline/Manual
• Tip Meningkatkan Links In Alexa
• Review Komentar untuk Menambah Ide Postingan
• Copypas artikel ngak ke indeks google?
• Lagi dan Lagi Backlink Bermasalah

Blog tip N trik

• Cara Memasang Rating Bintang Rich Snippets Pada Blogspot
• Trik membuat tulisan berjalan (marquee)
• CONVERT CODE HTML, JAVASCRIPT, CSS, DAN SEJENISNYA
• Cara Memasang Link Pada sebuah Gambar
• Membuat Spoiler (tombol Buka Tutup)
• Pengeditan Template Blogger Tampilan Baru Kurang Maksimal?
• Cara membuat Spoiler Di Komentar Blogspot
• Membuat spoiler di komentar treaded/bertingkat Blogspot
• Ngerjain Autoblog Rssforward.com offpage
• Ngerjain Autoblog Yang Menforward Feed Kita
• Cara pasang Widget statistik Histats
• Review Komentar untuk Menambah Ide Postingan
• Test kecepatan web (GOOGLE PAGE SPEED ONLINE)
• Anti klik kanan mouse dan Keyboard tanpa script yang panjang
• Pasang widget follower/pengikut asli dan modifikasi sesuka hati
• Anti adblock 2.00 lindungi situs anda dari adblock
• Pasang tombol google +1 di wordpress dan blogspot
• Cara membuat link bergoyang dombret
• Membuat Sumber Otomatis bila ada yang kopas