Skip to content Skip to sidebar Skip to footer
Home / trik / widget

Memasang Widget Komentar Terbaru Versi Blogger 2017

By MasukAngin.ID Post a Comment
Widget Komentar Terbaru memang sudah tersedia dalam sajian 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 gres ini, saya rasa akan sangat banyak blogger yang akan mencoba memodifikasi tampilan widget komentar versi blogger ini.


Widget Komentar Terbaru memang sudah tersedia dalam sajian widget blogger secara default Memasang Widget Komentar Terbaru versi Blogger 2017

Kenapa ada versi Blogger pada judul artikel ini?

Karena saya melihat sudah aneka macam blogger yang memanfaatkan beberapa system komentar menyerupai Komentar versi Disquss, Komentar versi Google+ dan Komentar versi Facebook.

Mungkin masih banyak lagi system komentar yang sanggup dipakai kedalam system blogger yang belum saya tahu.

Baca juga : Widget Komentar Terbaru versi Disquss


Apa saja sih akomodasi yang akan kau sanggup disaat kau 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 dikala Loading.
  • Menampilkan Judul Postingan.
  • Menampilkan Tanggal Komentar.
  • Menampilkan Snippet Komentar.
  • Menambahkan Link Read More.
  • Tampilan sudah Responsive.
  • Menampilkan Tooltips sebagai info.

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

Segera Modifikasi Tampilan Widget kau kini juga.

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

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

Namun sebelum melanjutkan pembahasan ini, saya menyarankan semoga kau membackup template yang kau gunakan dikala ini ya.
Widget ini memakai fungsi jquery, jadi silahkan kau cek dulu apakah script jquery ini sudah ada dalam template yang kau gunakan dikala ini. Jika template kau sudah memakai script jquery, maka lewati langkah ini. tapi kalau template kau belum memasang script jquery, silahkan kau 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 kau salin tag dibawah ini, dan letakkan tag ini sempurna sebelum arahan </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 kau salin arahan CSS dibawah ini dan letakkan diatas arahan ]]></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 gres dan letakkan arahan 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/AVvXsEjw4COPHQfaky6PCJ_X-AgxEMD2obPnb1eHV0ELFk3cNXeNpykhJBrHE-2J23_G7LV6GLdJ4fGi918qlZyiasxBlAA2FkuMb3jMY5uezZSZxrML_kVl892qjWACOHpxyNz3rmxGZFfT4Qs/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 arahan yang sudah saya tandai diatas yang sanggup kau rubah sesuai kebutuhan.

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

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

Semoga sobat Kang Wira tidak mengalami kesulitan dikala mempraktekkan trik ini.

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

sumber : MBT

Post a Comment for "Memasang Widget Komentar Terbaru Versi Blogger 2017"