Cara Membuat Spoiler Pada Komentar

Kang Muroi
1 Apr, 2012
29
Assalamu ‘alaikum sobat blogger semua, kali ini Muro’i El-Barezy akan berbagi sedikit tips, bagaimana membuat spoiler pada komentar blog, ini berfungsi untuk menyembunyikan komentar dan akan muncul ketika di klik. Oke langsung saja, caranya sangatlah mudah :
Buka dasbor blog sobat >>Klik template >> Klik edit HTML >>Klik Expand Template Widget dan temukan kode berikut (untuk memudahkan ,tekan Ctrl + f ) :

<div class='comments-content'>
      <b:if cond='data:post.embedCommentForm'>
        <b:include data='post' name='threaded_comment_js'/>
      </b:if>
      <div id='comment-holder'>
         <data:post.commentHtml/>
      </div>
</div

Setelah sobat menemukan kode diatas, silakan copy script dibawah ini, persis diatas kode tadi :

<!-- 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 Disini&apos;; }' style='margin: 0px; padding: 0px; width: 200px; font-size: 15px;font-weight:bold;' type='button' value='Lihat Komentar Disini'/></div>
<div style='border: 0px inset ; margin: 0px; padding: 0px;'><div style='display: none;'>
<!-- spoiler komentar part1 end -->

Langkah terakhir adalah klik SAVE.
Gimana, mudahkan? Selamat mencoba dan semoga berhasil.

Catatan :
  • Sebelum oprek oprek, silakan sobat beck up dulu templatenya.
  • Jika gagal, silakan sobat taruh script dibawah ini setelah kode  yang berwarna biru. Berikut scriptnya :

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



   
Next Post Previous Post
29 Comments
  • Unknown
    Unknown April 20, 2012 at 5:42 PM

    wah ini lebih baik menggunakan spoiler untuk mengurangi loading blog dan membuat komentar terlihat rapi sobat...

    Reply
  • cerita anak kost
    cerita anak kost April 20, 2012 at 6:18 PM

    wah ini contohnya ya...mantap sekali gan. makasih ni tutorialnya, ntar kolo saya mau pake tinggal ke sini. ok gan

    Reply
  • Fitrah Alimuddin
    Fitrah Alimuddin April 20, 2012 at 6:42 PM

    Makasih infonya mas, nanti di coba.... ^^

    Reply
  • Fitrianto
    Fitrianto April 20, 2012 at 7:44 PM

    Wah..keren juga nih infonya..Terimakasih infonya... :)

    Reply
  • Fitrianto
    Fitrianto April 20, 2012 at 7:54 PM

    Wah..setelah ane coba..ternyata ga bisa sob..ada yg salah ya???

    • Kang Muroi
      Kang Muroi April 20, 2012 at 10:53 PM

      coba lagi sob, sudah ane perbaiki scriptnya, semoga berhasil

    Reply
  • Benny Dwi
    Benny Dwi April 21, 2012 at 6:02 AM

    keren sob jadi blognya gak keliatan panjang,,,

    Reply
  • Nhinis
    Nhinis April 21, 2012 at 7:09 AM

    Wah keren ^^
    Spoiler memang bikin blog kita hemat tempat :D

    Sy sudah coba pak eL, dan berhasil di blog sy.
    Awalnya pake langkah 1 tdk bisa, tp stelah ditambah kode yg dibawah berhasil.

    Makasih pak, sering2 sj ya posting tips2 buat memperindah blog spt ini, hehe...

    Reply
  • Shitlipedia
    Shitlipedia April 22, 2012 at 6:46 AM

    mantap sekali mas tutorialnya.. blognya jadi keliatan lebih rapi dan hemat tempat yaa.. bagus

    Reply
  • Info Toko Surya62
    Info Toko Surya62 April 22, 2012 at 9:26 PM

    gimana Bos kok gak jadi di html5 ya....share ke info toko surya62 ya trim's

    Reply
  • Fahri Samudra
    Fahri Samudra April 30, 2012 at 5:54 AM

    Wah, ini baru keren dan berguna sob, keren karena terlihat simple, berguna karena membantu meringankan loading blog kita yg lama karena memuat komentar yang begitu banyak, kalo blog ane sih, komentarnya masih sedang-sedang saja, hehehe, belum banyak

    Reply
  • Anonymous
    Anonymous May 16, 2012 at 1:02 PM

    boleh nih dicoba, nice share and salam kenal

    Reply
  • Ima Nurani
    Ima Nurani June 6, 2012 at 9:13 PM

    Terima kasih :) jadi gak makan banyak tempat :)

    Reply
  • Ima Nurani
    Ima Nurani June 6, 2012 at 9:39 PM

    Saya udah coba tapi gagal.. udah taroh kode kedua di bawah kode biru tapi tetep gagal juga,, gimana ya??

    • Kang Muroi
      Kang Muroi June 7, 2012 at 7:03 AM

      coba deh lebih teliti lagi mungkin ada yg ketinggalan, sobat yg lain sudah pernah coba dan berhasil

    Reply
  • Info Bermanfaat
    Info Bermanfaat June 13, 2012 at 11:01 PM

    saya sudah pernah coba spoiler dan berhasil

    tapi kalau komentar nya dirubah jadi thread seperti ini, spoilernya jadi hilang

    bagaimana ya mas.?
    bingung saya :O

    • Kang Muroi
      Kang Muroi June 14, 2012 at 5:29 AM

      sobat pastikan membuat threaded terlebih dahulu, kemudian membuat spoiler setelahnya, silakan dicoba kembali

    Reply
  • Jane Doe
    Jane Doe June 27, 2012 at 12:37 PM

    Trik Sukses......

    Reply
  • Saeful13
    Saeful13 July 6, 2012 at 4:11 PM

    punya sya gagal gan, ada solusinya gk. Ditunggu jawabannya

    Reply
  • akbar abustang
    akbar abustang August 19, 2012 at 7:23 PM

    good

    Reply
  • 90animax
    90animax September 19, 2012 at 6:17 PM

    sip dah ,tapi ni tombolnya gede amatya

    Reply
  • Aw
    Aw November 20, 2012 at 5:41 PM

    thanks infonya gan xD

    Reply
  • hilda
    hilda December 27, 2012 at 4:27 PM

    makasih infonya gan, capcus

    Reply
  • Agung Xd dan Jakarta-Cyber4art
    Agung Xd dan Jakarta-Cyber4art January 27, 2013 at 1:47 PM

    bermanfaat sekali sob

    Reply
  • hienzo
    hienzo February 28, 2013 at 4:30 PM

    laporin bro, tutorialnya gagal diblog saya :D

    • Kang Muroi
      Kang Muroi February 28, 2013 at 5:34 PM

      scriptnya tidak ada yang salah sob, coba lebih teliti lagi penempatannya

    Reply
  • Harun Ar
    Harun Ar March 30, 2013 at 5:21 PM

    Pingin ucapin terima kasih Mas..... Tips ini saya gunakan

    Reply
  • Anonymous
    Anonymous April 4, 2013 at 9:56 PM

    Produk dijamin asli.
    Dina Shop : Barang yang Kami Tawarkan Semuanya Barang ASLI ORGINAL Garansi Resmi Distributor dan gransi TAM.
    Semua Produk Kami Baru dan Msh Tersegel dLm BOX_nya.
    BERMINAT HUB-SMS:0896-9198-6257 ATAU KLIK WEBSET RESMI KAMI DI http://dina-shop7.blogspot.com/.
    BlackBerry>Samsung>Nokia>Apple>Acer>Dell>Nikon>DLL

    BLACKBERRY
    Asli Buatan Canada.
    HARGA PROMO

    BlackBerry 8230 Rp. 500.000
    BlackBerry 8330 Rp. 500.000
    BlackBerry 8700 Rp. 500.000
    BlackBerry 8830 World Edition Rp. 500.000
    BlackBerry 9330 kepler Rp. 1.100.000
    BlackBerry Bold 9000 Rp. 1.100.000
    BlackBerry Bold 965 Rp. 900.000
    BlackBerry Bold 9700 (Onyx) Rp. 700.000
    BlackBerry Bold 9780 (Onyx II) Rp. 800.000
    BlackBerry Bold 9790 (Bellagio) Rp. 1,100.000
    BlackBerry Bold Touch 9900 (Dakota) Rp. 1,500.000
    BlackBerry Bold Touch 9930 (Montana) Rp. 1,200.000
    BlackBerry Curve 3G 9300 (Kepler) Rp. 700.000
    BlackBerry Curve 3G 9330 Rp. 700.000
    BlackBerry Curve 8310 Rp. 550.000
    BlackBerry Curve 8320 Rp. 600.000
    BlackBerry Curve 8…

    Reply
  • Unknown
    Unknown May 21, 2013 at 3:16 PM

    aku coba ni kok masih tetep ya.

    Reply
Add Comment
comment url