Banyak tutorial yang membahas bagaimana
cara membuat show hide komentar blog. Berikut ini salah satu tutorial dari
pelajaran-blog blogspot.com, saya terapkan pada
blog piper comex ini karena caranya sangat sederhana.
Fungsi
"Show Hide komentar blog", salah satunya adalah
untuk memperingkas tampilan blog dibawah posting. Apalagi untuk blog
yang banyak pengunjung dan banyak komentarnya. Selain itu show hide
komentar juga dapat mempercepat loading.
Berikut panduan
cara membuat show hide komentar blog.
Pertama,sobat pergi ke Dashboard lalu pilih Tata Letak kemudian contreng
tulisan Expand Widget Templates, dan cari kode berikut (Gunakan
Ctrl+F):
======
</head>
Jika sudah menemukannya, letakkan script berikut diatasnya:
=======
<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'/>
Setelah itu,cari kode berikut:
=====
]]></b:skin>
Jika sudah sobat temukan, letakkan barisan kode ini diatasnya:
=====
a.openpanel {display:block;width:100%;height:40px;padding:0px
0px;text-align:center;font-weight:bold;line-height:30px;background:#ffffff;
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: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;}
Setelah itu simpan template sobat.
Catatan:
Trik ini akan bekerja jika sobat mengaktifkan komentar di blogger, baik
dalam komentar posting maupun settingan secara universalnya.
Jika didalam template sobat sudah ada kode:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>, atau seri jquery berapapun, sebaiknya pakai kode tersebut salah satunya saja, agar script nya tidak bentrok.
Selamat mencoba :D
HAPPY BLOGGING...!!