Membuat Show-Hide Komentar

Indolaron kembali akan mencoba menulis artikel Tutorial Blog yakni Membuat Show-Hide Komentar pada blog. Sebenarnya tips ini sudah menjamur di blog-blog para Master,tapi berhubung saya baru menerapkan dan alhamdulillah berhasil,maka saya juga akan berbagi kepada Anda yang sedang mampir di blog sederhana ini. Tutorial ini saya tulis guna kita sesama newbie saling sharing dan berbagi informsai,dan bagi saya Tutorial ini untuk catatan online jika sewaktu-waktu kita membutuhkan.

Bentuk fisik dari Tutorial ini:'sliding' yang bisa sobat buka juga sobat tutup untuk menghemat tempat dan pastinya sudah berhasil saya terapkan.
Ini screenshot Tampilan awal sebelum di Klik:

Dan Ini screenshot Tampilan setelah di klik:

Saya rasa gak perlu panjang lebar saya jelaskan,jika Anda ingin mencoba silahkan baca dan terapkan.

Langkah Membuat Show-Hide Komentar

1. Silakan login ke akun Blogger Anda
2. Selanjutnya pilih Template - Edit HTML - Procced
3. Cari kode berikut </head> (Gunakan Ctrl+F)
4. Letakkan script berikut tepat diatas kode tadi:

<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='http://membuatgempar.net23.net/comment.js' type='text/javascript'/>

5. Setelah itu,cari kode ]]></b:skin>
6. Masukkkan code CSS berikut tepat diatasnya:

a.openpanel {display:block;width:620px;height:30px;padding:0px 0px;text-align:center;font-weight:bold;line-height:30px;background:#000;font-size:20px;font-family:Comic Sans MS;color:#0099FF;border:2px solid #0099FF;text-shadow:0 1px 0 #CCC;-moz-border-radius: 3px;-webkit-border-radius:3px;border-radius: 3px;-moz-box-shadow: 0 1px 3px #C6C6C6, 1px 1px 0 rgba(255, 255, 255, 0.4) inset;-webkit-box-shadow: 0 1px 3px #C6C6C6, 1px 1px 0 rgba(255, 255, 255, 0.4) inset;box-shadow: 0 1px 3px #C6C6C6, 1px 1px 0 rgba(255, 255, 255, 0.4) inset;}
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 {background-color:#ffffff;}
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;}

Terakhir SAVE template
---SELAMAT MENCOBA---