Cara Membuat Show-Hide Komentar Blog. Berikut ini seocips.com tentang Cara Membuat komentar blog Show and Hide, jadi maksudnya disini adalah membuat komentar blogger tersembunyi dan menunjukannya kembali.

Cara Membuat Show-Hide Komentar Blog

Pada waktu yang lalu ketika membagikan template Blogger Responsive Valid Html5 Mini Hitamz, ditemplate itu saya memasang kode dibawah  untuk menyembunyikan dan menunjukan kembali komentar blog, atau yang lebih populernya "Show Hide komentar". Selain untuk menghemat ruang yang terpakai di Postingan Blog, ini juga misalnya karena komentar Blog yang banyak dan memanjang kebawah ini dapat meringankan loading blog yang komentarnya menumpuk, atau juga dapat mempercantik tampilan blog.

Bicara soal mempercantik tampilan blog, maka sobat juga dapat membaca tutorial tentang Memasang slider otomatis artikel terbaru di sidebar blog, Menambahkan efek loading keren di blog, Membuat artikel terkait dengan Thumbnail, dan memasang widget popularpost 3D bergerak ke template anda.

Ok sob Tertarik ingin Membuat Show-Hide Komentar Blog ?

LIVE DEMO ( Masuk ke artikel untuk demonya )

1. Klik Template dan klik Edit HTML
2. Sebelumnya save dulu template yang anda gunakan untuk menghindari hal yang tidak diinginkan misalnya salah edit dll. ( simpan saja semua kode template anda ke Notepad )
3. Cari atau klik ctrl+F ]]></b:skin>
4. Copy dan Paste kode di bawah dan letakkan di atas ]]></b:skin>

a.openpanel {display:block;width:100%;height:40px;padding:0px 0px;text-align:center;font-weight:bold;line-height:30px;background:#222; 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:#222;
 }a.openpanel.active {background-color:#d32301;}a.openpanel.active em {top:13px;border color:#d32301;
 }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 = "Berikan 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. Simpan template dan lihat Hasilnya

Keterangan:
  • Kode yang berwarna merah tidak perlu dipasang jika suadah ada kode Jquery yang sejenis di template anda.
  • 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
Bagaiman sobat mudah bukan? dan semoga sobat berhasil dalam membuat dan memasang show-hide komentar di template Blogger sobat.
2 Komentar untuk "Cara Membuat Show-Hide Komentar Blog"

Dengan melihat demo nya,,_
jadi lebih rapi tata letaknya ya boz :d

kalo kotak komen yang seperti situs mobile detikcom bagaimana caranya om ? pada tombol hide/shownya ada dua fungsi untuk memberi komentar dan sebelahnya ada jumlah total komentar