Recent Comment Modifikasi

Pertamanya pusing banget mikirin json blogger tapi tetep belajar sedikit demi sedikit akhirnya keinginanku untuk memodifikasi widget recent comment blogger tercapai juga.

1. Rata-rata thumbnail komentar berukuran lebih dari 100, aku pernah melihat source kodenya dan ini yang aku lihat

http://3.bp.blogspot.com/-MEgug9ut2aw/Ub_LRzuiV1I/AAAAAAAADxE/xW9s-sWk7uI/s220/IMG0687A.jpg

//lh5.googleusercontent.com/-A0xKwQlCt5U/AAAAAAAAAAI/AAAAAAAADrs/9hUiXRRFeA0/s512-c/photo.jpg

Perhatikan 220 dan 512 Itu adalah ukuran gambar yang cukup besar jika diload dan mungkin agak lama proses muatnya, tapi aku udah menemukan cara untuk meResize ukuran gambarnya, kodenya aku temukan pada postingan Readmore otomatis terbaru dan pas aku coba ternyata url thumbnailnya berhasil berubah seperti yang kita mau. aku juga udah buat agar judul postingnya tampil jadi kita bisa melihat postingan mana yang dikomentari, tapi kekurangannya judul postingannya gak bisa tampil secara Full jadi terpaksa aku manipulasi menggunakan titik-titik karena meskipun tampil judulnya akan terputus jadi enaknya dikasi titik-titik aja.

ILUSTRASI

Silahkan tambah Gadget HTML/Javascript dan simpan script dibawah ini,

<script type="text/javascript">
/**
 * Beauty JSON Commentator Sidebar 1.0 (May 29, 2011)
 * copyright (c) 2011 Hendriono from http://modification-blog.blogspot.com
 * Modified by Taufik Nurrohman @ http://hompimpaalaihumgambreng.blogspot.com
 * Last Modified By Zhinto : http://zhinto.blogspot.com/
 */
//<![CDATA[
//Jumlah komentar yang tampil
var jmlkomentar = 10,
//Jumlah karakter judul
  jmlkarakter = 25,
//ubah dengan URL blog anda
  home_page = "http://namabloganda.blogspot.com",
//Mengubah ukuran thumbnail gambar menjadi 40
  lebargambar = 40,
  blank = "http://1.bp.blogspot.com/-Ix8myg1Zkms/UXkZxaDxwOI/AAAAAAAADjA/8dY3mARO01M/s40/bg.png";

function tampilkankomentar(json) {
  document.write('<div id="komentar"><ul>');
  var entry, urlkomentar, isikomentar, lihatkomentar;
  for (var i = 0; i < jmlkomentar; i++) {
    entry = json.feed.entry[i];
    if (i == json.feed.entry.length) break;
    for (var k = 0; k < entry.link.length; k++) {
      if (entry.link[k].rel == 'alternate') {
        urlkomentar = entry.link[k].href;
        break
      }
    }
    document.write('<li>');
    var judul = urlkomentar.replace(/-/g, " ").substring(urlkomentar.lastIndexOf('/') + 1, urlkomentar.lastIndexOf('.')),
      urlgambar = entry.author[0].gd$image.src.replace(/\/s(220|512)/, "\/s" + lebargambar);
    if (judul.length > jmlkarakter) {
      judul = judul.substring(0, jmlkarakter) + "..";
    }
    if (entry.author[0].name.$t == "Zhinto") {
      document.write('<span class="gambar admin"><img src="' + urlgambar + '"/></span>');
    } else if (entry.author[0].gd$image.src == "http://img1.blogblog.com/img/openid16-rounded.gif") {
      document.write('<span class="gambar"><img src="' + blank + '"/></span>');
    } else {
      document.write('<span class="gambar"><img src="' + urlgambar + '"/></span>');
    }
    document.write('<a rel="nofollow" href="' + urlkomentar + '" target="_blank">' + entry.author[0].name.$t + '</a> :');
    document.write(' Mengomentari Postingan <br/>' + judul);
    document.write('</li>');
  }
  document.write('</ul></div>');
}
document.write('<scr' + 'ipt src="' + home_page + '/feeds/comments/default?redirect=false&alt=json-in-script&callback=tampilkankomentar"><\/script>');
//]]>
</script>

Lalu simpan kode css dibawah ini diatas ]]></b:skin>

#komentar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    font: normal 13px/20px Arial,sans-serif;
    background: #E09494;
    clear: both;
    }
#komentar ul li {
    list-style-type: none;
    padding: 10px;
    background: #EEE1D3;
    margin: 0 0 1px 0
    }
#komentar .gambar {
    overflow: hidden;
    width: 40px;
    height: 40px;
    display: block;
    float: left;
    margin: 0 10px 0 0
    }
#komentar .gambar.admin {
    -moz-border-radius: 100px;
    border-radius: 100px;
    -webkit-border-radius: 100px;
    opacity: 0.2;
    }
#komentar .gambar img {
    width: 100%;
    height: 100%;
    }
#komentar a {
    color: blue;
    text-decoration: none
}
#komentar a:visited {
    color: #DD5549;
}

Simpan template dan lihat hasilnya, oh iya pada javascriptnya ada beberapa penambahan kode yang aku lakukan diantaranya kode untuk membedakan komentar admin dan user lain, dan juga mengganti avatar user yang berkomentar menggunakan openID perhatikan nama Zhinto pada javascriptnya, silahkan ganti nama tersebut sesuai nama profile blogger anda. untuk para komentar openID avatarnya akan berubah sesuai pengaturan URL blank yang ada pada javascriptnya.