Membuat Recent Comments Fantastik

ILUSTRASI

Kesempatan yang cukup luang ini saya akan mencoba membagikan triks Blogger yang lain, yang sebelumnya Cara Membuat Menu Navigasi Simpel. Kali ini mengenai Recent Comments. Tentunya Anda sudah cukup tau apa itu Recent Comments. Kemudian yang saya share ini saya beri nama Membuat Recent Comments Fantastik. Mengapa Fantastik ? Ya, alasannya cukup simpel, yaitu pada efeknya. Penasaran dengan efeknya ? Bisa Anda cek melalui tombol ilustrasi.

Berikut kode CSS

.muncul { position:relative; width:500px; height:195px; margin:20px auto; z-index:1; box-shadow:0 2px 10px rgba(0,0,0,0.3); }
.muncul p { color:black; text-align:center; margin:0; }
.slide_in { overflow:hidden; }
.slide_in .left_gate { background:#0F83A0; opacity:0.6; }
.slide_in .right_gate { background:#0F83A0; opacity:0.6; }
.left_gate { position:absolute; background:#AD3000; bottom:0; right:50%; left:0; top:0; transition:all 0.7s ease-out; }
.muncul:hover .left_gate { right:100%; left:-50%; opacity:0.1; }
.right_gate { position:absolute; bottom:0; left:50%; right:0; top:0; transition:all 0.7s ease-out; }
.muncul:hover .right_gate { left:100%; right:-50%; opacity:0.1; }
#komentar { padding:5px; background:#0F83A0; clear:both; }
#komentar ul { list-style-type:none; margin:0; padding:0; font:normal 13px/20px Segoe UI,sans-serif; background:#ddd; clear:both; }
#komentar ul li { list-style-type:none; padding:10px; background:linear-gradient(#ddd,#eee); border-bottom:1px solid #d4d4d4; margin:0 0 1px 0; transition:all .2s linear 0s; }
#komentar .isi { color:#333; }
#komentar .gambar { overflow:hidden; display:block; border:2px solid #AD3000; width:40px; height:40px; float:left; margin:0 10px 0 0; }
#komentar .gambar.admin { opacity:0.4; transition:all .3s linear 0s; }
#komentar .gambar.admin:hover { opacity:2; transition:all .3s linear 0s; }
#komentar .gambar img { width:100%; height:100%; }
#komentar a { color:blue; text-decoration:none; }
#komentar a:visited { color:#24B035; }

Lalu, berikut kode HTML

<div class="muncul slide_in">
<div class="left_gate"></div>
<div class="right_gate"></div>
<p><script type="text/javascript">
//<![CDATA[
//Jumlah komentar yang tampil
var jmlkomentar = 3,
//Jumlah karakter judul
  jmlkarakter = 38,
//ubah dengan URL blog anda
  home_page = "http://mas-jin.blogspot.com",
//Mengubah ukuran thumbnail gambar menjadi 40
  lebargambar = 40,
  blank = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCmvWXYBJEQpCM0cZPtRluy6w49RAphKD9qQ23UJ9Fri4T90d3DC3aPPmNrh0P7Sw0IWG4z7lBJBZuY-_MFv1p6liMaq-NIgd-unNbEmpx0cUP56bUhaNDXJ72KhZzF7NY7nq6Lme7VHI/s1600/Anonim20.jpg";

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 == "Fajrin Ilham H") {
      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(' <span class="isi">Posting :</span><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></p></div> 

Bagaimana ? Cukup fantastik bukan ? Hehe, semoga dengan triks yang saya bagikan ini dapat membantu Anda yang sedang memodifikasikan Bloggernya. Selamat mencoba.