7 Langkah Membuat Show Hide Kotak Komentar

Jika sebelumnya saya telah menjelaskan mengenai 7 Langkah Membuat Scroll Kolom Komentar Blog, maka pada artikel ini akan dipaparkan secara rinci tentang 7 Langkah Membuat Show Hide Kotak Komentar. Mengunakan Show Hide/buka tutup kotak komentar ini bertujuan sama dengan menggunakan scroll, perbedaannya hanya pada tinggi 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:

7 Langkah Membuat Show Hide Kotak Komentar

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>
</head>

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 7 Langkah Membuat Show Hide Kotak Komentar, ada yang kurang jelas! silahkan berikan saran dan pertanyaan melalui email atau kotak komentar yang telah tersedia.

*) P.S: Jika anda benar-benar mengalami kendala untuk mendapatkan wanita pujaan anda,
saya sarankan anda bergabung di www.pencinta-wanita.com , silahkan mendaftar menjadi anggota dan pelajari materi-materi yang dikirimkan Ronald Frank lewat email atau baca langsung di member area, untuk sementara pendaftaran anggota gratis. Daftar sekarang juga dan dapatkan bonus senilai Rp10.000.000,- (dibaca sepuluh juta).