Memasang Widget Komentar Terbaru versi Blogger 2017

Widget Komentar Terbaru memang sudah tersedia dalam menu widget blogger secara default.

Namun pada artikel kali ini, saya akan membagikan sebuah trik untuk memodifikasi tampilan Widget Komentar versi Blogger ini menjadi lebih nyaman dilihat.

Dengan tampilan yang baru ini, saya rasa akan sangat banyak blogger yang akan mencoba memodifikasi tampilan widget komentar versi blogger ini.

Kenapa ada versi Blogger pada judul artikel ini?

Karena saya melihat sudah banyak sekali blogger yang memanfaatkan beberapa system komentar seperti Komentar versi Disquss, Komentar versi Google+ dan Komentar versi Facebook.

Mungkin masih banyak lagi system komentar yang bisa digunakan kedalam system blogger yang belum saya tahu.

Apa saja sih fasilitas yang akan kamu dapat disaat kamu merubah tampilan Widget Komentar Terbaru Versi Blogger 2017 ini?

Menampilkan Thumbnail Profile dari setiap Komentator.
Link Thumbnail Profile yang Sync ke Profile Google+.
Gambar Animasi saat Loading.
Menampilkan Judul Postingan.
Menampilkan Tanggal Komentar.
Menampilkan Snippet Komentar.
Menambahkan Link Read More.
Tampilan sudah Responsive.
Menampilkan Tooltips sebagai info.

Nah setelah kamu melihat beberapa feature yang sudah ditambahkan pada tampilan widget komentar terbaru versi blogger ini, apalagi yang kamu tunggu?

Segera Modifikasi Tampilan Widget kamu sekarang juga.

Nah untuk memodifikasi Widget Komentar Terbaru versi Blogger ini, kamu bisa ikuti langkah-langkahnya dibawah ini.

Langkah pertama yang perlu kamu lakukan pastinya masuk kedalam akun blog kamu dan buka tab Edit HTML pada menu template.

Namun sebelum melanjutkan pembahasan ini, saya menyarankan agar kamu membackup template yang kamu gunakan saat ini ya.

Widget ini menggunakan fungsi jquery, jadi silahkan kamu cek dulu apakah script jquery ini sudah ada dalam template yang kamu gunakan saat ini. Jika template kamu sudah menggunakan script jquery, maka lewati langkah ini. tapi jika template kamu belum memasang script jquery, silahkan kamu salin script jquery dibawah ini dan letakkan sebelum tag </head>.

<script async='async' src='https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>

Langkah selanjutnya, silahkan kamu salin tag dibawah ini, dan letakkan tag ini tepat sebelum kode </head>.

<link href='http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css' rel='stylesheet'/>

<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>

Lalu silahkan kamu salin kode CSS dibawah ini dan letakkan diatas kode ]]></b:skin>.

/*############Recent Comments Widget##################*/
.mbtcmts{list-style-type:none; overflow:hidden; } 
.mbtcmts li {margin:0px auto 20px auto; clear:both; color:#666; font-family:helvetica; font-size:12px;padding:0px;} 
.mbtcmts i{color:#999; padding-right:4px;} 
.mbtcmts .idate {display:block; font-family:arial; font-size:11px;text-align: left;padding:3px; margin:0 0 0px 40px} 
.mbtcmts .icontent{ display:block; font-family:Georgia; color:#999; font-style:italic; line-height:1.5em;} 
.mbtcmts .icontent a {color:#999; text-decoration:none; font-weight: bold;font-size: 16px;font-style: normal;} 
.mbtcmts div{line-height:2em; clear:both; border-top:1px solid #eee; margin-top:5px;} 
.mbtcmts span { margin:5px 0px 0px; padding-right:5px;} 
.mbtcmts img {border-radius:100%; float:left; margin:0px 20px 20px 0px; border:1px solid #eee; padding:3px; width:50px; height:50px;box-shadow: 2px 2px 4px #ddd; } 
.mbtcmts .icapital {text-transform:Capitalize; display:inline-block;} 
.mbtcmts .ititle {font-family:oswald; font-size:14px; color:orange; font-weight:normal; text-decoration:none;} 
.mbtcmts .ititle:hover {color:#666;}
.mbtcmts .idate:before, .mbtcmts .ipostTitle a:before{font-family:fontAwesome; position:relative; padding-right:5px;} 
.mbtcmts .idate:before {content:'\f017'; color:#999} 
.mbtcmts .ipostTitle a {text-decoration:none; color:#999} 
.mbtcmts .ipostTitle a:before {content:'\f07c'; }
#mbtloading{ 
  margin: 20% auto;background: url('http://downloads.mybloggertricks.com/Spin%20and%20pulsate.gif') no-repeat left center;width: 80px;height: 80px;}
/*------ CSS3 Tooltip Shortcode -------------*/ 
.tooltip{outline:none;text-decoration:none!important;position:relative}.tooltip:hover {border-bottom: none;}.tooltip strong{line-height:30px}.tooltip > span{text-transform:capitalize;width:150px; padding:5px 5px;opacity:0;top:120%;left:0px; visibility:hidden;z-index:10;position:absolute;font-family:helvetica;font-size:12px;font-weight:bold;border-radius:2px;box-shadow:2px 2px 5px #999;-webkit-transition-property:opacity,margin-top,visibility,margin-left;-webkit-transition-duration:0.4s,0.3s,0.4s,.3s;-webkit-transition-timing-function:ease-in-out,ease-in-out,ease-in-out,ease-in-out;transition-property:opacity,margin-top,visibility,margin-left;transition-duration:0.4s,0.3s,0.4s,.3s;transition-timing-function:ease-in-out,ease-in-out,ease-in-out,ease-in-out}.tooltip > span img{float:right;width:110px;margin:0 0 30px 10px;padding: 0;border: none;}.tooltip:hover > span{opacity:1;text-decoration:none;visibility:visible;overflow:visible;display:inline;margin-left:-50px}.tooltip span b{width:15px;height:15px;left:30%;top:-9px;display:block;position:absolute;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);display:none\0/;*display:none}.tooltip > span{padding-top:10px;color:#fff;background:orange;border:1px solid #ffffff}.tooltip span b{background:orange;border-top:1px solid #ffffff;border-right:1px solid #ffffff}.mbtcmts .itotal {color:#333; padding:3px 3px 3px 10px; border:1px solid #eee; font-family:arial; font-size:12px;} 
.mbtcmts .itotal i {font-style:normal;} 
.mbtcmts .itotal span{font-family:oswald;  font-weight:normal; color:#333; text-decoration:none} 
.mbtcmts .itotal span:before {font-family:FontAwesome; position:relative; content:'\f075'; }

Simpan Template dan buka tab Layout dan buatlah sebuah widget HTML/JavaScript baru dan letakkan kode JavaScript berikut ini.

<div id="mbtloading" ></div> 
<script type="text/javascript"> 
function mbtcmts(json) { 
document.write('<ul class="mbtcmts">'); 
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 = "'#'"}
//####################### Splitting URL into Title
if(json.feed.entry[i].link[2] != null) 
{ 
var mbt_slit = json.feed.entry[i].link[j].href; 
        var M_slit = mbt_slit.split("#"); 
        M_slit = M_slit [0]; 
        var K_slit = M_slit.split("?"); 
        K_slit = K_slit[0];     
        var B_slit = K_slit.split("/"); 
        B_slit = B_slit[5]; 
        B_slit = B_slit.split(".html"); 
        B_slit = B_slit [0]; 
        var T_slit= B_slit.replace(/-/g, " ").charAt(0).toUpperCase()+ B_slit.replace(/-/g, " ").slice(1).substring(0, 50); 
        var Link_slit= T_slit.link(K_slit); 
}
//################### 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= "'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj89JpyZAuQZsKn5TPXuxcnFflExttr6WiO7BvZ_eBbIF3xgNivDgQc9ZYnbKbQGdy0ERPWoUBV_5FLPFO4cNKZvx6AHjnbZxjAozVhsDvumyqWio7STWFK_8CXzva0k3d1oplpQun81Ho/s200/Icon.png'"; 
} 
//################### Printing List
var listing = "<li class='node"+[i]+"' ><a rel='nofollow' href=" 
+ListProfile+ 
  "><img src=" 
+ListImage+ 
"/></a><a class='ititle tooltip' href=" 
+ListUrl + 
"target='_blank'><span><b></b>" 
+ListAuth+ 
" Commented on » " 
+ M + 
" " 
+ D + 
", " 
+ Y + 
"</span>" 
+ ListAuthor+ 
"</a> <i> posted in</i>  <span class='ipostTitle'><a class='tooltip'  href='" 
+K_slit+ 
"'><span><b></b>" 
+T_slit+ 
"</span></a></span><span class='icontent'>" + ListContent+" ...   <a href="+ListUrl+">  » </a></span><div></div></li>"; 
document.write(listing); 
} 
document.write('<div class="itotal"> <span> '+TotalPosts+' </span><i>Komentar Terbaru 2017</i></div></ul>'); 
} 
</script>
<script> 
var ListCount = 5; 
var ChrCount = 90; 
</script> 
<script src="http://www.kangwira.com/feeds/comments/default?alt=json-in-script&callback=mbtcmts"></script> 
<script>document.getElementById("mbtloading").style.display = "none";</script>

Simpan Widget dan lihat hasilnya.

Ada beberapa kode yang sudah saya tandai diatas yang dapat kamu rubah sesuai kebutuhan.

ListCount = 5 artinya jumlah komentar terbaru yang tampil dalam widget.
ChrCount = 90 artinya jumlah karakter Snippet Komentator yang tampil dalam widget

Demikianlah Trik Memasang Widget Komentar Terbaru versi Blogger yang saya bagikan kali ini.

Semoga sahabat Kang Wira tidak mengalami kesulitan saat mempraktekkan trik ini.

Jangan sungkan untuk meninggalkan komentar dibawah ini apabila ada pertanyaan atau mengalami kesalahan saat menyalin kode yang saya bagikan diatas.

sumber : MBT