Blogger için son yorumlar eklentisi ile bloğunuzu canlandırın

• Sadri Ercan
• >Categories: Blogger
• 3 Ağustos 2016

Blogger için son yorumlar eklentisi muhtemelen daha önce bloğunuza kurmadığınız oldukça güzel ve özellikli bir eklentidir.

WordPress için oldukça geniş kapsamlı olan eklentiler ile birbirinden farklı özellik ve görünüme sahip yeni konular, son yorumlar vb detayları listelemek mümkün.

Blogger için de oldukça güzel görünümlü ve kullanışlı eklentiler elbette mevcut. Bu makalemde size Blogger için oldukça güzel ve Json destekli bir eklenti tanıtıp kurulumunu anlatacağım.

Blogger için son yorumlar eklentisi

Blogger için son yorumlar eklentisi özellikleri

1. JavaScript ve JSON Feed API Destekli
2. Yazar profil resmi ve avatar gösterebilme
3. Yazar Avatarından Google+ profiline link verebilme
4. Hareketli resim efekti
5. Makale başlığı gösterebilme
6. Yorum tarihini gösterebilme
7. Yorumların kısa özetini gösterebilme
8. Devamını Oku linki ekleyebilme
9. Bloğunuzu kasmayan bir kod yapısı
10. Responsive
11. Detayları gösterirken Tooltip özelliği kullanma

Tooltip desteğinin olduğunu söylemiştik. Mouse ile detaylar üzerinde gelindiğinde aşağıdaki gibi bir tooltip açılmaktadır.

Blogger için son yorumlar eklentisi kurulumu

NOT: Eğer bloğunuza daha önce jquery entegre etmişseniz bu adımı atlayabilirsiniz.

Adım 1 : Blogger hesabınızdan Önce Şablon daha sonra da HTML’yi Düzenle tıklıyoruz. Gelen kod ekranından </head> kodunun hemen üzerine aşağıdaki kodu ekliyoruz.

<script async='' src='https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>  <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'/>

Adım 2 : Yine aynı kod bloğu içerisinde ]]></b:skin> kodunu bulup üzerine aşağıdaki kodları ekliyoruz ve kaydediyoruz.

/*############son yorumlar eklentisi##################*/  .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'; }

Kodlar içerisinde yer alan orange kısmını dilediğiniz renk seçeneği ile değiştirebilirsiniz.

Adım 3 : Blogger panelinizden Şablon menüsüne tıklıyoruz. Sayfanızda hangi kısma son Yorumlar eklentisini eklemek istiyorsanız o kısımdaki Gadget Ekle kısmına tıklayın ve açılan seçeneklerden HTML / Javascript seçin. Açılan pencere içerisine aşağıdaki kodları ekleyip kaydedin.

<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= "'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 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>delicious comments posted so far!</i></div></ul>');   }   </script>  <script>   var ListCount = 5;   var ChrCount = 90;   </script>   <script src="http://www.siteisminiz.com/feeds/comments/default?alt=json-in-script&callback=mbtcmts"></script>   <script>document.getElementById("mbtloading").style.display = "none";</script>

Kodların son kısmında yer alan www.siteisminiz.com kısmını kendi site adresiniz ile değiştirmeyi unutmayın.

Yine kodlar içerisinde bulunan ListCount = 5 değeri gösterilecek yorum sayısını, ChrCount = 90 değeri ise yorumlara ait gösterilen özetin karakter sayısını belirtmektedir.