Memasang Recent Comments di Blogger Fix - New!

Pasang Recent Comments di Blogger
Sebenar sudah banyak banget yang membahas tentang tutorial cara memasang widget recent comments (komentar terbaru) di blogger, namun sebagian besar tutorial tersebut sudah tidak lagi berjalan dengan maksimal.
Ketika saya aplikasikan di blog saya, recent comments nya tidak muncul. sehingga saya browsing di mbah google tentang Memasang Recent Comment Terbaru Dzulcyber, akhirnya saya menemukan sebuah tips memasang recent comments dan yang telah saya coba diblog saya hasilnya 100% WORK!
Recent comments anda tidak muncul? berikut kami sedikit bagikan tips Cara mengatasi recent comments tidak muncul.

Ikutilah langkah menampilkan recent comment dengan Thumbnail:

  1. Masuk ke akun blogger Anda.
  2. Back up template (untuk berjaga-jaga jika terjadi kesalahan)
  3. Klik Template >> Edit HTML
  4. Paste kode berikut tepat di atas kode </head>
    <script async='' src='https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>
    Note: Jika template anda sudah dilengkapi dengan jQuery Library abaikan saja langkah ini.
  5. Untuk memaksimalkan tampilan font pastikan template anda sudah support FontAwesome. Jika belum silahkan copy dan pastekan kode berikut ini sesudah kode <head>.
    <link href='http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css' rel='stylesheet'/>
  6. Selanjutnya letakkan kode CSS berikut ini di atas kode ]]></b:skin>
    .dcyber{list-style-type:none; overflow:hidden; }
    .dcyber li {margin:0px auto 5px auto; clear:both; color:#666;font-size:12px;padding:0px;}
    .dcyber i{color:#999; padding-right:4px;}
    .dcyber .prof {font-size:14px;line-height:1.2;padding-bottom:0margin-bottom:4px;}
    .dcyber .idate {display:block; font-size:11px;text-align: left;padding:3px; margin:0 0 0px 20px}
    .dcyber .icontent{ display:block; color:#444; font-size: 11px;line-height:1;margin-top:3px}
    .dcyber .icontent a {color:#999; text-decoration:none; font-weight: bold;font-style: normal;}
    .dcyber div{line-height:2em; clear:both; border-top:1px solid #eee; margin-top:5px;}
    .dcyber span { margin:5px 0px 0px; padding-right:5px;}
    .dcyber img {border-radius:100%; float:left; margin:0px 5px 2px 0px; border:1px solid #eee; padding:0; width:40px; height:40px;}
    .dcyber .icapital {text-transform:Capitalize; display:inline-block;}
    .dcyber .ititle {font-size:14px; color:orange; font-weight:normal; text-decoration:none;}
    .dcyber .ititle:hover {color:#666;}
    
    .dcyber .idate:before, .dcyber .ipostTitle a:before{font-family:fontAwesome; position:relative; padding-right:5px;}
    .dcyber .idate:before {content:'\f017'; color:#999}
    .dcyber .ipostTitle a {text-decoration:none; color:#999}
    .dcyber .ipostTitle a:before {content:'\f07c'; }
    
    #dcloading{margin: 20% auto;background: url('http://downloads.mybloggertricks.com/Spin%20and%20pulsate.gif') no-repeat left center;width: 80px;height: 80px;}
  7. Simpan Template.
  8. Lalu Klik menu Tata Letak dan klik Tambahkan Gadget.
  9. Pilih HTML/JavaScript kemudian copy dan paste script dibawah ini.
    <div id="dcloading" ></div>
    
     <script type="text/javascript">
    //<![CDATA[
    function dcyber(json) {
    document.write('<ul class="dcyber">');
    for (var i = 0; i < ListCount; i++)
    {
    //################### Variables Declared
    var listing= ListImage = ListUrl = ListDate = TotalPosts = ListTitle = ListImage = ListContent = ListConten = ListAuthor = ListTag = ListProfile = ListComments = thumbUrl = sk = ListMonth = Y = D = M = m =  "";
    
    //################### URL
    for (var j = 0; j < json.feed.entry[i].link.length; j++) {
          if (json.feed.entry[i].link[j].rel == 'alternate') {
            break;
          }
        }
    if(json.feed.entry[i].link[2] != null)
    {
    ListUrl= "'" + json.feed.entry[i].link[j].href + "'";
    }
    else
    {ListUrl = "'#'"}
    
    //################### Info
    TotalPosts = json.feed.openSearch$totalResults.$t;
    ListAuthor= json.feed.entry[i].author[0].name.$t;
    var ListAuth = ListAuthor.split(" ");
    var ListAuth = ListAuth.slice(0, 1).join(" ");
    
    ListProfile= "'" + json.feed.entry[i].author[0].uri.$t + "'";
    
    //################### Content Check
    
    ListConten = json.feed.entry[i].content.$t;
    ListContent= ListConten.replace(/(<([^>]+)>)/ig,"").substring(0, ChrCount);
    
    //################### Date Format
    
    ListMonth= ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
    
    ListDate= json.feed.entry[i].published.$t.substring(0, 10);
    Y = ListDate.substring(0, 4);
    m = ListDate.substring(5, 7);
    D = ListDate.substring(8, 10);
    M = ListMonth[parseInt(m - 1)];                       
    //################### Thumbnail Check
    
    if (json.feed.entry[i].author)
    {
    thumbUrl = json.feed.entry[i].author[0].gd$image.src;
    sk= thumbUrl.replace("/s72-c/","/s60-c/");
    ListImage= "'" + sk + "'";
    }
    else
    {
    ListImage= "'http://4.bp.blogspot.com/-HALLtgFeep0/VfryhQ0C5oI/AAAAAAAAPcY/77mSGND4q84/s200/Icon.png'";
    }
    //################### Printing List
    var listing = "<li class='node"+[i]+"' ><a rel='nofollow' href="+ListProfile+  "><img src="+ListImage+"/></a><a href="+ListUrl +"target='_blank'><span class='prof'><b>"+ListAuthor+"</b></span> | "+ M +" "+ D +", "+ Y +" » <span class='icontent'>"+ ListContent+"...  </span></a></li>";
    document.write(listing);
    }
    document.write('<div class="itotal"> <span> '+TotalPosts+' </span><i>delicious comments posted so far!</i></div></ul>');
    }
    </script>
    
    <script>
    var ListCount = 5;
    var ChrCount = 90;
    </script>
    <script src="/feeds/comments/default?alt=json-in-script&callback=dcyber"></script>
    <script>document.getElementById("dcloading").style.display = "none";</script>
    Lalu klik Simpan, dan lihat hasilnya.
    ListCount = 5 adalah jumlah komentar yang ditampilkan, isi sesuai keinginan Anda. Sedangkan ChrCount = 90 adalah jumlah karakter isi komentar yang ditampilkan, isi sesuai keinginan.
Demikian secuil tutorial singkat, cara menampilkan recent comments di blogger terbaru.

Dalam tutorial masih banyak kekurangan, salah satunya adalah komentar admin blog masih ditampilkan, saya masih mencari tutorial cara menyembunyikan komentar Admin blog di recent comments untuk melengkapi tutorial ini. Terima kasih telah membaca!

Jika berkenan tinggalkan jejak dengan berkomentar sesuai dengan topik.

Artikel Terkait Lainnya:

Blogger
Disqus
Pilih Sistem Komentar

Berkomentarlah dengan topik yang relevan dan tidak melakukan SPAM