Komentar Show/Hide Blogger

Alhamdulilah saya masih diberi kesempatan untuk update lagi, hehe... kali ini saya akan berbagi sedikit ilmu yang telah saya dapat yaitu Cara Membuat Komentar Slider (Show/Hide) di Blogspot. Langsung saja kita ke TKP...

1.) Silahkan Login Ke Blogger
2.) Masuk ke "Rancangan" --> "Edit HTML"
3.) Klik "Expand Widget"
4.) Kopikan kode di bawah ini di atas 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.) Lalu copikan scipt di bawah ini di atas </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.) Temukan kode elemen komentar sepeti di bawah 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> <!-- menrupakan akhir dari #panel -->
<div class='slide'>
<p class='btn-slide'>
Blablabla <!-- Silakan ganti ini -->
</p>
</div>
</b:includable>

Keterangan: - warna biru merupakan tanda supaya anda menyisipkan kode tersebut.
- Warna Kuning silahkan ganti dengan text sesuai keinginan anda.
misalnya: SHOW/HIDE atau anda bisa menggantinya dengan kode ini.

<b:if cond='data:post.numComments == 1'>
1 <data:commentLabel/>:
<b:else/>
<data:post.numComments/> <data:commentLabelPlural/>:
</b:if>

kode di atas berfungsi untuk menampilkan jumlah komentar yang ada.

7.) Simpan dan lihat hasilnya.