Membuat Komentar Show Hide pada Blog

Jika anda memiliki komentar yang sangat banyak pada blog dan ingin memperpendek komentar tersebut mengapa tidak mencoba trik yang satu ini. Tentunya pada postingan kali ini kita akan membahas bagaimana cara membuat komentar show hide pada blog. Ketika membuka halaman posting seluruh komentar belum muncul kecuali anda menekan tombol komentar. Tombol tersebut juga akan menampilkan jumlah komentar yang masuk pada posting anda. Oke, jika ingin mencobanya langsung saja ke triknya yang satu ini:

1. Masuk ke Blogger
2. Pilih Rancangan --> Edit HTML
3. Klik "Expand Widget"
4. Kopi kode di bawah ini lalu paste diatas kode ]]></b:skin>

/* SHOW-HIDE COMMENTS */
#panel {
clear: both;
display: none;
overflow: auto;
padding: 10px;
}

.slide {
background: #f1f1f1;
border-bottom: 1px solid #c3c3c3;
border-top: 1px solid #c3c3c3;
margin: 1.5em 0 0;
padding: 0;
}

.btn-slide {
cursor: hand;
cursor: pointer;
display: block;
font-weight: bold;
margin: 0 auto;
padding: 10px;
text-align: center;
}

5. Kopi script dibawah ini dan paste diatas </body>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(&#39;.btn-slide&#39;).click(function(){
$(&#39;#panel&#39;).slideToggle(&#39;slow&#39;);
});
});
</script>

6. Cari kode elemen komentar seperti dibawah ini:

<b:includable id='comments' var='post'>
<div id='panel'> <!-- sisipkan (id) panel di sini -->
<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<h4>
<b:if cond='data:post.numComments == 1'>
1 <data:commentLabel/>:
<b:else/>
<data:post.numComments/> <data:commentLabelPlural/>:
</b:if>
</h4>
<b:if cond='data:post.commentPagingRequired'>


... <!-- menandakan kode yang sangat panjang -->


<div id='backlinks-container'>
<div expr:id='data:widget.instanceId + &quot;_backlinks-container&quot;'>
<b:if cond='data:post.showBacklinks'>
<b:include data='post' name='backlinks'/>
</b:if>
</div>
</div>
</div>
</div> <!-- merupakan akhir dari #panel -->
<div class='slide'>
<p class='btn-slide'>
Masukan kata-kata <!-- Silakan ganti ini -->
</p>
</div>
</b:includable>

Keterangan:
- Warna biru merupakan tanda supaya anda menyisipkan kode tersebut.
- Warna Merah silahkan ganti dengan text sesuai keinginan anda.

Contoh: SHOW/HIDE atau anda bisa menggantinya dengan kode ini. Kode di bawah berfungsi untuk menampilkan jumlah komentar yang ada.

7.) Simpan dan lihat hasilnya.

Selamat mencoba!