Tutup Buka Kotak Komentar

Tutup Buka, Buka Tutup Kotak Komentar adalah pencarian seorang newbie di penelusuran google, namun terdampar di Tutorial For You dengan Cara Membuat Show Hide Pada Komentar Dengan JQuery. Blogger yang baik adalah membutuhkan, mencari, mendapatkanya, menerapkan lalu mengamalkannya (hihi..,mengelak dari sebutan flagiat !).

Yup.., pada awalnya karena memang saya membutuhkan tips untuk Tutup Buka Kotak Komentar blog ini. Semua tips telah saya coba, mulai dari Cara Memberi Efek Spoiler Pada Kotak Komentar, Membuat Toggle Spoiler Untuk Menampilkan dan Menyembunyikan Kotak Komentar Blog, hingga Modifikasi Kotak Komentar, namun semua itu tidak ada yang manjur untuk template yang saya pakai ini.

Hanya Cara Membuat Show Hide Pada Komentar Dengan JQuery yang menjadi jodoh untuk diterapkan di template Shaka InghetS ini. Seperti petuah Mas Admin Andreas bahwa untuk membuat Tutup Buka Kotak Komentar blog, sobat mesti ;

1.    Login ke Blogger
2.    Pilih Design > Edit HTML
3.    Cari kode ]]></b:skin>
4.    Copy kode di bawah ini dan pastekan tepat di atas kode ]]></b:skin>

a.openpanel {display:block;width:100%;height:40px;padding:0px 0px;text-align:center;font-weight:bold;line-height:30px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaWBlqLidKhO42mH4XMhBi-2RLBeKYMtt7s4x58fKtx5jtcGS-emBxR4mjhs14YZ05cuqUzifEs6p5HO_uySFpjzWp567hGkWUo4ozCLesimZkXxMXdtZIN11zEn8QrCOZnIfKVARxx4s0/s1600/topmenueva.jpg)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:6px solid transparent;border-top-color:white;
}a.openpanel.active {background-color:#;}a.openpanel.active em {top:6px;border color:transparent transparent white transparent;
}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 lagi kode </head>
6.    Copy kode di bawah ini dan pastekan tepat 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       = "Buka Komentar",
    closePanelText      = "Tutup Lagi Komentarnya !",
    slideDownPanelSpeed = 600,
    slideUpPanelSpeed   = 400;
//]]>
</script>
<script type='text/javascript'>
</script>
<script src='http://evawangi.googlecode.com/files/slidekomentar.js' type='text/javascript'/> 

7.    Setelah selesai simpanlah template sobat dan lihat hasilnya.

Catatan:
Ada sedikit penambahan pada URL background dengan menambahkan ;
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaWBlqLidKhO42mH4XMhBi-2RLBeKYMtt7s4x58fKtx5jtcGS-emBxR4mjhs14YZ05cuqUzifEs6p5HO_uySFpjzWp567hGkWUo4ozCLesimZkXxMXdtZIN11zEn8QrCOZnIfKVARxx4s0/s1600/topmenueva.jpg
 Lalu pada :
openPanelText = yang dirobah dengan kata-kata sendiri Buka Komentar
closePanelText = yang dirobah dengan kata-kata sendiri Tutup Lagi Komentarnya !