Cara Membuat Widget Recent Comment di Blog Terbaru

Recent Comment Show Hide Blogger - Pada ulasan kali ini saya akan berbagi tutorial cara membuat Widget Recent Comment dilengkapi dengan tombol Show Hide.

Pada umumnya untuk melihat isi yang ada pada recent comment, kita perlu mengeklik dulu judul postingan. Nah, pada widget satu ini sangat menarik, kita bisa menampilkan atau menyembunyikan isi komentar hanya dengan menekan tombol Show all maka isi komentar akan terbuka semua.

Cara Memasang Recent Comment Show Hide

1. Login keakun Blogger
2. Pilih Tata letak, lalu klik gadget
3. Selanjutnya pilih HTML/Javascript, copy kode dibawah ini dan pastekan pada kolom tersedia.

<style type="text/css" media="screen">
.row-aa {        background: #f2f2f3; }
.row-bb {        background: #F8F5F1; }
.row-div {
  margin:0px;
  padding:5px;
}
.comment-header {
  font-size:0.9em;
//  border:1px solid #E0E0E0;
//  background-color:#F3F3F3;
  padding:4px;
  margin-top:10px;
  margin-bottom:5px;
}
.comment-box {
  margin:0px;
  padding:0px;
  font-size:0.9em;
  height:500px;
  overflow:auto;
}
.comments1  {
//  background: #F3F3F3;
  padding:3px;
  border-left:1px dashed #A6A6A6;
  color: #888888;
  font-style: italic;
  padding-top:4px;
  margin-bottom:5px;
}
.comment-footer {
  text-align:center;
  font-size:0.9em;
  padding:4px;
  margin-top:5px;
}
</style>

<div style="text-align: center" class="comment-header"><input class="comment-button" id="commshowall" type="button" onclick="if (this.value == &#39;Show all&#39;) { unfold_all(this); this.value=&#39;Hide all&#39;; } else { fold_all(this); this.value=&#39;Show all&#39;; }" style="width:8em;font-size:1em;font-family:Verdana,sans" value="Show all" /></div>

<div class="comment-box">
<script type="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/expandable-recent-comments.js"></script>
<script type="text/javascript"  src="http://www.aak-share.com/feeds/posts/default?start-index=1&max-results=999999&alt=json-in-script&callback=showrecentposts">
</script>
<script type="text/javascript"  src="http://www.aak-share.com/feeds/comments/default?start-index=1&max-results=999999&alt=json-in-script&callback=showrecentcomments">
</script>

</div>

4. Simpan perubahan

Catatan : ganti URL yang saya beri warna biru.

Cukup mudahkan sobat, sekian dari saya terima kasih sudah berkunjung dan semoga bermanfaat.