Blogger Son Yazılar Eklentisi Profesyonel Tasarım

  Bugüne kadar gördüğünüz ve bildiğiniz tüm son yazılar eklentisinden daha profesyonel ve özellikli bir kod yapısına sahip. Blogger için son yazılar eklentisi için bir kaç yöntem tanıtmıştım. Benim blog sayfamda yayınlamadığım onlarca daha eklenti de vardır. Görsel bir tasarım olsun ve aynı zamanda da işlevsel olsun istiyorsanız bu yazıdaki son yazılar eklentisi tam size göre. Tek hamlede bir çok şeye hakim olmak istiyorsanız yazıyı okumaya devam edin.

✪ Blogger İçin Son Yazılar Eklentisinin Özellikleri

1) Yazınızın başlığını eklenti de gösterebiliyorsunuz.
2) Yazıya ait görsel ile eklentiye renk katıyorsunuz.
3) Devamını oku linki ile kısa bir özet gösterebiliyorsunuz.
4) Yazınıza verdiğiniz etiketleri bu eklenti ile gösterebiliyorsunuz.
5) Yazar ismi göstererek detay verir.
6) Her yazı için kaç tane yorum yapıldığını görüyorsunuz.
7) Yazıyı düzenlemek isterseniz eklenti de bunun için bağlantı veriliyor.
8) Yazının yayınlanma tarihini görebiliyorsunuz.
9) Mobil uyumlu bir altyapıya sahip.

✪ Son Yazılar Eklentisi Nasıl Kurulur?

  Blogger kullanıcı panelinizde Tema sekmesine tıkladıktan sonra HTML'yi Düzenle butonu ile kodların bulunduğu alana geliyoruz. Ctrl+F yardımı ile kodlar içerisinde </head> kodunu aratarak hemen üstüne aşağıdaki kodu ekliyoruz.

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

  Eğer daha önce eklediyseniz yukarıdaki kodu eklemenize gerek yoktur. Diğer bir aşama için aynı yerde ]]></b:skin> kodunu bulup hemen üstüne aşağıdaki kodu ekleyin ve kaydedin.

/*############Recent Posts Widget##################*/
.mbtlist {list-style-type:none;overflow:hidden; padding:10px!important;}
.mbtlist li {margin:0px auto 20px auto; clear:both; color:#666; font-family:helvetica; font-size:12px; }
.mbtlist i{color:#999; padding-right:4px; }
.mbtlist .iline{line-height:2em; clear:both; border:1px solid #eee; margin-top:10px; padding: 0px 4px;   font-size: 12px;}
.mbtlist div span{margin:0 10px 0 0; display:inline-block;}
.mbtlist span {display:block; margin:5px 0px 0px; padding-right:5px;}
.mbtlist .icon {color: #999;font-family: verdana;font-size: 12px;text-align: justify;}
.mbtlist img {float:left; margin:0px 10px 10px 0px; border:6px solid #fff; padding:0px; width:150px; height:100px; box-shadow:-1px -1px 4px #777; }
.mbtlist .mbttitle {font-family:oswald; font-size:18px; color:#0080ff; font-weight:normal; text-decoration:none;    line-height: 1.4em;}
.mbtlist .mbttitle:hover, .mbtlist .itotal a:hover  {color:#00A5FF;}
.mbtlist .iedit a{text-decoration:none; color:#999; cursor:pointer}
.mbtlist .iedit:before, .mbtlist .iauthor:before, .mbtlist .itag:before, .mbtlist .icomments:before, .mbtlist .idate:before, .mbtlist .itotal span:before{font-family:fontAwesome; position:relative; padding-right:5px;}
.mbtlist .iauthor:before {content:'\f007';}
.mbtlist .itag:before {content:'\f02c';}
.mbtlist .icomments:before {content:'\f086';}
.mbtlist .idate:before {content:'\f017';}
.mbtlist .iedit:before {content:'\f040';}.mbtlist .imore {font-size:12px; font-weight:bold; text-decoration:none; color:#999;}.mbtlist .itotal {color:#333;  padding:5px 10px; border:1px solid #eee;}.mbtlist .itotal a {font-family:oswald; font-size:12px; font-weight:normal; color:#0080ff; text-decoration:none}.mbtlist .itotal span:before {content:'\f07c';}.mbtlist .itotal span font {padding:0px 3px; color:#333; font-family:georgia; font-size:15px; font-weight:bold}#mbtloading1{ margin: 20% auto;
background: url('http://downloads.mybloggertricks.com/Spin%20and%20pulsate.gif') no-repeat left center;width: 80px;height: 80px;}
/*------ CSS3 Tooltip Shortcode -------------*/
.tooltip1{outline:none;text-decoration:none!important;position:relative;color: orange!important; font-weight: bold;}.tooltip1:hover {border-bottom: none;}.tooltip1 strong{line-height:30px}.tooltip1 > span{max-width:300px;width:115px;padding:5px 8px;opacity:0;bottom:170%;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}.tooltip1 > span img{float:right;width:110px;margin:0 0 30px 10px;padding: 0;border: none;}.tooltip1:hover > span{opacity:1;text-decoration:none;visibility:visible;overflow:visible;display:inline;margin-left:-90px}.tooltip1 span b{width:15px;height:15px;right:25px;bottom:-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}.tooltip1 > span{color:#fff;background:orange;border:1px solid #ffffff}.tooltip1 span b{background:orange;border-bottom:1px solid #ffffff;border-left:1px solid #ffffff}

#  Eklediğiniz kod içinde değişiklikler yapmak mümkündür. Yazı başlık rengi için 0080ff kodunu değiştirebilirsiniz. Ayrıca görselin boyutunu ayarlamak için width:150px;height:100px değerlerini kendinize göre değiştirebilirsiniz. Bu aşamadan sonra son olarak "Gadget Ekle" bölümüne aşağıdaki kodu ekliyoruz.

<div id="mbtloading1" ></div>
<script type="text/javascript">
//#################### Defaults
var ListBlogLink = window.location.hostname;
var ListCount = 5;
var ChrCount = 150;
var TitleCount = 66;
var ImageSize = 200;
//################ Function Start
function mbtlist(json) {
document.write('<ul class="mbtlist">');
for (var i = 0; i < ListCount; i++)
{
//################### Variables Declared
var listing= ListImage = ListUrl = ListTitle = ListImage = ListContent = ListConten = ListAuthor = ListTag = ListDate = ListUpdate = ListComments = thumbUrl = TotalPosts = sk = ListMonth = Y = D = M = m = YY = DD = MM = mm = TT =  "";
//################### Category
if (json.feed.entry[i].category != null)
{
for (var k = 0; k < json.feed.entry[i].category.length; k++) {
    ListTag += json.feed.entry[i].category[k].term;
if(k < json.feed.entry[i].category.length-1)
{ ListTag += ", ";}
}
}
//################### URL
for (var j = 0; j < json.feed.entry[i].link.length; j++) {
      if (json.feed.entry[i].link[j].rel == 'alternate') {
        break;
      }
    }
ListUrl= "'" + json.feed.entry[i].link[j].href + "'";
//################### Info
TotalPosts = json.feed.openSearch$totalResults.$t;
if (json.feed.entry[i].title!= null)
{
ListTitle= json.feed.entry[i].title.$t.substr(0, TitleCount);
}
if (json.feed.entry[i].thr$total)
{
ListComments= json.feed.entry[i].thr$total.$t;
}
ListAuthor= json.feed.entry[i].author[0].name.$t.split(" ");
ListAuthor=ListAuthor.slice(0, 1).join(" ");
//################### 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)];                     
ListUpdate= json.feed.entry[i].updated.$t.substring(0, 16);
                         YY = ListUpdate.substring(0, 4);
                        mm = ListUpdate.substring(5, 7);
                         DD = ListUpdate.substring(8, 10);
                         TT = ListUpdate.substring(11, 16);
                         MM = ListMonth[parseInt(mm - 1)]; 
//################### Thumbnail Check
// YouTube scan
if (json.feed.entry[i].content.$t.match(/youtube\.com.*(\?v=|\/embed\/)(.{11})/) != null)
{
    var youtube_id = json.feed.entry[i].content.$t.match(/youtube\.com.*(\?v=|\/embed\/)(.{11})/).pop();
 
    if (youtube_id.length == 11) {
        var ListImage = "'//img.youtube.com/vi/"+youtube_id+"/0.jpg'";
        }
}
else if (json.feed.entry[i].media$thumbnail)
{
thumbUrl = json.feed.entry[i].media$thumbnail.url;
sk= thumbUrl.replace("/s72-c/","/s"+ImageSize+"/");
ListImage= "'" + sk.replace("?imgmax=800","") + "'";
}
else if (json.feed.entry[i].content.$t.match(/src=(.+?[\.jpg|\.gif|\.png]")/) != null)
{
// Support For 3rd Party Images
ListImage =  json.feed.entry[i].content.$t.match(/src=(.+?[\.jpg|\.gif|\.png]")/)[1];
}
else
{
ListImage= "'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWdR_q4BE0RvkIEnEgUYLtWhIiSHUFMEy4dcgz7PLM9-iDzn3XVn_BKtUPS3pqbzfKQ_b3zqBJ8rTL05GSiXGkP7YsUgh1GauSjcrIkmbQ8o20DpNJvsxAqRmttMeJNLgynYoDNgnIk70/s200/Icon.png'";
}
//################### Printing List
var listing = "<li class='node"+[i]+"' ><a href="
+ ListUrl+
  "><img src="
+ListImage+
"/></a><a class='mbttitle' href="
+ ListUrl+
"target='_blank'>"
+ ListTitle+
"</a> <span class='icon'>"
+ListContent+
" ...  <a href="
+ListUrl+
" class='imore'>Devamı »</a></span><div class='iline'><span class='iauthor'>"
+ListAuthor+
"</span><span class='itag'>"
+ListTag+
"</span><span class='icomments'>"
+ ListComments+
"</span><span class='idate'>"
+ M +
" "
+ D +
", "
+ Y +
"</span><span class='iedit'> <a class='tooltip1'>Düzenle<span><b></b>On ► "
+ MM +
" "
+ DD +
", "
+ YY +
" at ► "
+TT+
" </span></a> </span></div></li>";
document.write(listing);
}
document.write("<div class='itotal'><span> <a href='"+ListBlogLink+"/search'>Tümünü Göster <font>"+TotalPosts+"</font> posts</a></span></div></ul>");
}
</script>
<script>
var ListBlogLink = "https://www.siteadresiniz.com";
var ListCount = 5;
</script>
<script>
document.write("<script src='"+ListBlogLink+"/feeds/posts/default?alt=json-in-script&callback=mbtlist'></"+"script>");
</script>
<script>
document.getElementById("mbtloading1").style.display = "none";</script>

  Yukarıdaki kod içerisinde www.siteadresiniz.com yerini kendinize göre değiştirin.
*  Gösterilen son yazı sayısını artırmak isterseniz ListCount=5 değerini arttırın.
*  Yazınızın başlık uzunluğu için TitleCount=66 değerini değiştirin.
*  Son yazı için özetin kaç karakterden oluşacağını ChrCount=150 değerini değiştirebilirsiniz. Gerekli düzenlemeleri tamamladıysanız son yazılar eklentisini artık kullanabilirsiniz.

✔ Bu içeriği beğendiyseniz lütfen paylaşın ⤵