Blogger Son Yorumlar Eklentisi Hızlı ve Mobil Uyumlu

Share:
Hızlı-ve-mobil-uyumlu-son-yorumlar-kodu


  Blogger kullanıcıları için paylaştığım bir çok eklenti oldu. Son yorumlar eklentisi de bunlardan birisi. Önceki yazılarımda son yorumlar eklentisini bulabilirsiniz ancak bu yazıda vereceğim kod ile daha detaylı ve mobil uyumlu bir son yorumlar eklentisine sahip olacaksınız. Hem görüntüsü hem de sağladığı kullanım özellikleri sayesinde blog sayfanıza çok yakışacak. Farklı seçenek olması için her kodun bir çok versiyonunu eklemeye çalışıyorum. Aşağıdaki adımları takip ederek hemen kuruluma başlayabilirsiniz.

blogger-mobil-uyumlu-son-yorumlar-eklentisi

Hangi Özelliklere Sahip?

* Yazar profili için avatar gösterme
* Avatardan Google+ profilinize link verme
* Makale başlığını gösterme
* Yorum tarihini gösterme
* Devamını oku özelliği
* Mobil uyumlu
* Detayları tooltip ile gösterme
* Hareketli resim efekti

  İlk olarak Tema ve HTML'yi Düzenle sekmelerini takip ederek </head> kodunun hemen üzerine aşağıdaki kodları ekleyin. (Eğer daha önce eklediyseniz bu adımı atlayın.) 

<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'/>

  Bu işlemi tamamladıktan sonra aynı yerde ]]></b:skin> kodunu bulup hemen üzerine gelecek şekilde aşağıdaki kodu ekliyoruz. İsterseniz kod içerisinde color:orange kısmını istediğiniz renk ile değiştirebilirsiniz.

/*############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'; }

  Son olarak "Gadget Ekle" bölümüne aşağıdaki html kodunu eklememiz gerekiyor. Kodu ekledikten sonra istediğiniz ayarları yaparak kullanmaya başlayabilirsiniz. Kırmızı ile belirlediğim alanları kendinize göre uyarlayabilirsiniz. Liscount=5 değeri yorum sayısını ifade eder. Chrcount=90 değeri de yapılan yorumların ne kadarının gösterileceğini ifade eder.

<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://dogushakanyilmaz.blogspot.com/feeds/comments/default?alt=json-in-script&callback=mbtcmts"></script>
<script>document.getElementById("mbtloading").style.display = "none";</script>

✔ Bu yazı Doğuş Hakan Yılmaz tarafından yazılmıştır.

4 yorum:

  1. İlerde eklemeyi deneyeceğim, çok teşekkürler :))

    YanıtlaSil
    Yanıtlar
    1. Rica ederim, uyguladığınızda memnun kalırsınız.

      Sil
  2. HTTPS kullanıyorum hocam. Uyum sağlar mı ?

    YanıtlaSil
    Yanıtlar
    1. Sorun olmaz eğer çalışmasında problem olursa http olanları https olarak değiştirip deneyin.

      Sil

YORUM YAPARAK KATKIDA BULUNABİLİRSİNİZ...

1) Yaptığınız yorumun, yazıyla alakalı olmasına özen gösterin.
2) Yazım ve dil bilgisi kurallarına mümkün olduğunca dikkat edin.
3) Kullandığınız üslubun sizi yansıttığını unutmayın.
4) Yorum yaparken link eklemeyin.