Keren Gaul

Browse Manual » Wiring » blog » cara » hide » komentar » membuat » show » Cara Membuat Show Hide Komentar Blog

---

Cara Membuat Show Hide Komentar Blog

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...!!