Cara Membuat Show-Hide Comment Pada Blog

Cara Membuat Show-Hide Comment Pada Blog - Ya, kali ini saya akan berbagi Cara Membuat Show-Hide Comment Pada Blog , bagaimana cara kerjanya? cara kerjanya itu misalkan di Blog kita tidak muncul comment tetapi ada teks bacaan seperti Buka Komentar / Tutup Komentar, sebenarnya teks itu bisa diganti dengan teks yang anda mau, nah setelah anda klik Buka Komentar, maka komentar pun akan muncul kebawah dengan perlahan.

Contoh :
Show Hide Comment XC-Blog
Langsung aja saya beritahu caranya :
Pertama" Login di www.blogger.com
Kemudian Kamu buka Template > Edit HTML dan Centang "Expand Template Widget"
kalau sudah, kamu letakkan code dibawah ini tepat diatas kode ]]></b:skin>
a.openpanel{display:block;width:auto;height:auto;text-align:center;font-weight:bold;font-size:15px;line-height:30px;background:#660000;border:3px solid #990000;border-top:0px;-webkit-transition:all .15s ease-in-out;-webkit-transform-origin:50% 1px;position:relative}
a.openpanel.active{background-color:#660000}
a.openpanel em {width:0px;height:0px;display:block;position:absolute;top:15px; right:15px;border:6px solid transparent;border-top-color:white;}
a.openpanel.active em {top:6px;border color:#222222;}
div.paneline {height:0px;-webkit-transition: all .15s ease-in-out;-webkit-transform-origin: 50% 1px;}
div.hompiPanel {padding:10px 20px 20px;margin:0px 0px !important;}

Jika sudah, kemudian kamu masukan lagi code dibawah ini tepat diatas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
var panelSelector = '#comments',
openPanelText = "Tampilkan Komentar",
closePanelText = "Tutup Komentar",
slideDownPanelSpeed = 600,
slideUpPanelSpeed = 400;
//]]>
</script>
<script type='text/javascript'>
</script>
<script src='https://lioneldandy.googlecode.com/files/show-hide-comment.js' type='text/javascript'/>
Setelah itu Save Template.
Selesai.

Pengertian :

kode pertama yaitu CSS, jika ingin mengubah tampilannya bisa anda ganti sendiri cssnya.
Sekian dari saya, semoga artikel ini bisa bermanfaat untuk anda.
Terimakasih.

Postingan terkait:

40 Tanggapan untuk "Cara Membuat Show-Hide Comment Pada Blog"

  1. Ini bukannya yang di DTE itu ya ? --"

    ReplyDelete
    Replies
    1. Oh...kgk tau dte ye ? kgk jadi deh.

      Delete
    2. DTE Masa Gag Tau Sih --"

      Nih Linknya: www.dte.web.id
      Lihat,, Ane Aja Belajar Di Situ

      Delete
    3. owh,maav ane ga tau, jrng belajar disitu, ane belajar di w3school doank :v wkkwkwk
      thx kk dah ngasih tau :v

      Delete
  2. thankz ya sob atas tutor nya
    http://greenz-blogger.blogspot.com/

    ReplyDelete
  3. Hasilnya kyk blog agan ya?
    Wah keren juga nih ^^

    ReplyDelete
  4. Nice Artikel ny
    Id-cyb3r.blogspot.com

    ReplyDelete
  5. Nice Info dan Keren Pula
    visit baack:
    http://didil-cyber.blogspot.com

    ReplyDelete
  6. Terima kasih infonya, meskipun saya udah tau cara ini dari dulu , hehe

    ReplyDelete
  7. coba ah,, ngetest.. :D

    come back..

    ReplyDelete
  8. tapi di pasang di tempalte ane kok gk bisa ya kk

    ReplyDelete
  9. @Z-T Blog : silahkan sob hehehhee (y)
    @Bondowoso Community : gabisa nya kenapa kk ???

    ReplyDelete
  10. Nice tutor nya sob
    iizin praktek ye,
    commentback
    http://ryuugakure.blogspot.com/

    ReplyDelete
  11. Nice tutor
    follow + comment balik yah sob : gkp-inside.blogspot.com

    ReplyDelete
  12. Koq aq gg berhasil ya kk??
    udh keluar sih tombolnya,,,tpi gg ada reaksi setelah klik tombolnya kk...

    ReplyDelete
  13. nice inpoh sob...
    #commentback http://altecdz.blogspot.com/

    ReplyDelete
  14. @Candra : DL -_-
    @Patuih : thx sob hehehe... :)

    ReplyDelete
  15. mksih infonya,.,
    visit ya http://farhanbreaker.blogspot.com/

    ReplyDelete
  16. Ijin coba gan :)

    komenback

    rpl-yes.blogspot.com

    ReplyDelete
  17. Keren gan infonya... ane praktekin. Sukses buat blog anda juga


    Setiyono
    www.jayabhaya.com

    Yogyakarta

    ReplyDelete
  18. Alhamdulillah bisa di blog ane, dan sedikit editan supaya nyocokkin ama templat blog ane, terima kasih banyak gan

    visit back, OK
    http://www.xyraclius.com/

    ReplyDelete
  19. @Lukman : ok bro... selamat
    @Setiyono : ok thanks bro atas dukungannya :)
    @Nabil : Oke :)
    @Bfc : ok silahkan :)

    ReplyDelete
  20. Nice share bro .
    Ijin pake yee :D
    coment+visit back : http://infoterupdatedanterbaru.blogspot.com

    ReplyDelete

Catatan :
- Dilarang Menggunakan Link Aktif / Live Link
- Dilarang Promosi Iklan
- Dilarang Nyepam
- Untuk Menyisipkan Kode, Gunakan tag <i rel='code'> Taruh Kode Disini </i>
- Untuk Menyisipkan Kode Panjang, Gunakan tag <i rel='pre'> Taruh kode panjang disini </i>
- Untuk Menyisipkan Catatan, Gunakan <b rel='quote> Taruh Catatan disini </b>
- Untuk Menyisipkan Gambar, Gunakan <i rel="'image> URL Gambar </i>
- Untuk Menyisipkan Youtube, Gunakan <i rel='youtube'> URL Youtube </i>

Sebelum menyisipkan kode silahkan gunakan Tools Konversi Kode.
Caranya tinggal klik tombol "Konversi Kode" yang berada di Form Komentar.