Terwujud

Cara Membuat Show Hide Kotak Komentar



Jika bermanfaat, Mohon di Share ya !, jika ada unek-unek komen aja
Jika sebelumnya saya telah menjelaskan mengenai Cara Membuat Scroll pada Kolom Komentar Blog, maka pada artikel ini akan dipaparkan secara rinci tentang Cara Membuat Show Hide Kotak Komentar. Mengunakan Show Hide/buka tutup kotak komentar ini bertujuan sama dengan menggunakan scroll, perbedaannya hanya pada tampilan kotak komentarnya.

Menggunakan Show Hide berarti menyembunyikan tampilan kotak komentar secara keseluruhan sebelum anda mengklik tampilan kode untuk membukanya. Namun, bagi anda yang mempunyai keinginan untuk menampilkan kotak komentar dengan tinggi yang dibatasi, maka anda dapat menggunakan Scroll seperti yang telah saya jelaskan sebelumnya.

Untuk membuat Show Hide Kotak Komentar pada blog anda tidaklah sulit, anda cukup mengikuti langkah yang akan saya jelaskan secara rinci. Berikut:

Cara Membuat Show Hide Kotak Komentar
Show Hide-Terwujud.com

1. Masuk ke www.blogger.com
2. Klik menu Template dan klik menu Edit HTML
3. Cari atau klik ctrl+F ]]></b:skin>
4. Copy dan Paste kode di bawah dan letakkan di atas ]]></b:skin>
/* Show Hide Komentar
----------------------------------------------- */
a.openpanel {display:block;width:100%;height:40px;padding:0px 0px;text-align:center;font-weight:bold;line-height:30px;background:#58EF58; url()repeat-x;-webkit-transition: all .15s ease-in-out;-webkit-transform-origin: 50% 1px;position:relative;
 }a.openpanel em {width:0px;height:0px;display:block;position:absolute;top:15px; right:15px;border:10px solid transparent;border-top-color:#187C0B;
 }a.openpanel.active {background-color:#58EF58;}a.openpanel.active em {top:13px;border color:#187C0B;
 }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;}
5. Kemudian cari kode </head>
6. Copy dan Paste kode di bawah dan letakkan di atas 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 = "Lihat Komentar",
 closePanelText = "Sembunyikan Komentar",
 slideDownPanelSpeed = 800,
 slideUpPanelSpeed = 300;
 //]]>
 </script>
 <script type='text/javascript'>
 </script>
<script src='https://googledrive.com/host/0B2J42XkvLqFoN2dOdEZOOHJ5U0E' type='text/javascript'>
</script>
7. Lihat Hasilnya (sebelumnya save dulu template anda untuk berjaga-jaga jika ada error kode)

Keterangan:
  • Kode yang berwarna merah tidak perlu dipasang jika ada kode Jquery yang sejenis
  • Angka 800 kecepatan untuk menutup kotak komentar
  • Angka 300 kecepatan untuk membuka kotak komentar
  • Silahkan anda atur warna panel kotak show hide sesuai keinginan pada kode CSS

Demikian artikel tentang Cara Membuat Show Hide Kotak Komentar, ada yang kurang jelas! silahkan berikan saran dan pertanyaan melalui email atau kotak komentar yang telah tersedia.


Artikelnya sudah di share, makasih ya !

Mau Artikel Gratis! Silahkan Tulis Email Anda.
Print PDF

You Might Also Like:

Previous
Next Post »

Sudah ada 12 komentar

Saya akan sangat senang jika ada komentar yang membangun, tetapi:

*Jangan komentar SPAM
*Jangan menanam link
*Jangan ada unsur sara, Fornografi dan memojokkan

Komentar yang melanggar akan dimasukkan kedalam daftar SPAM dan tidak akan diijinkan lagi.

Klik dan Copy Icon di bawah:
:) :( hihi :-) :D =D :-d ;( ;-( @-) :P :o -_- (o) :p :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ $-) (y) (f) x-) (k) (h) cheer lol rock angry @@ :ng pin poop :* :v 100

By: Terwujud.com
Terima Kasih!!

  1. hasilnya seperti yang ada di blog ini ya pak.. keren :)

    ReplyDelete
    Replies
    1. Ya begitulah mas irpan, jika berkeinginan silahkan diterapkan. :D

      Delete
    2. saya coba belum berhasil mas di blog saya raden mas yuli ini lagi utak utik...nggak muncul yah
      sebentar saya carinya lagi mas...

      Delete
  2. wah saya jadi model komentarnya disitu gan haha udah di coba di blog ane , keren bnget

    ReplyDelete
  3. triknya mantap pak cuma kalo bisa saya juga ingin menampilkan jumlah komentarnya.
    bagaimana cara menampilkan jumlah komentar seperti pada detikcom

    blog saya http://makitam80.blogspot.com

    ReplyDelete
  4. wah setelah saya praktekkan kok "Lihat Komentar" dan "Sembunyikan Komentar" tertutup oleh bagian footer ya mas... hmmm gimana nih solusinya hehehe :D

    makasih penjelasanya :)

    ReplyDelete
  5. kalau boleh tahu ditempatkan di mana ya mbak biar saya tahu penyebabnya

    ReplyDelete
    Replies
    1. saya tempatkan sesuai petunjuk di atas :)

      Delete
    2. tadinya saya menampatkan script di atas di blog juragan cipir, tapi sekarang saya lepas lagi karena tertutup oleh bagian footer yg berisi link kredit :D

      tapi gak apalah mas biarin aja gak jadi saya pasang karena mas ibrahim sendiri telah meremove script tsb dari blog ini, mungkin komentar lebih baik terlihat daripada disembunyikan ya mas hehehe :D

      Delete
    3. ooo gitu ya mbak, sebenarnya saya melepasnya karena untuk meringankan blog ini, sebab setelah saya cek, rupanya scriptnya juga menyumbang loading blog, makanya saya tidak memakainya. Tapi jika ada keinginan mbak untuk memasangnya, mohon konfirmasi kepada saya ya :D

      Delete
Copyright © 2014 Terwujud.com - All Rights Reserved