Blogger renkli son yazılar eklentisi

Blogger (blogspot) bloglarına eklenebilecek harika bir eklenti (widget), renkli son yazılar eklentisi. Son yazıların resimleri, başlıkları, yorum sayısı, tarihi ve içerik özeti eklenti içerisinde mevcut.

2017 yılı baz alınarak yapılan analizlerde bir kez daha anlaşıldı ki site içerisinde fazla vakit harcamak o siteyi bir hayli değerli kılıyor arama motorları için. Bu yüzden ziyaretçilerimizin, elimizden geldiğince blogumuzda fazla vakit harcamasını sağlamalıyız. Tabi bunun için birçok yöntem mevcut. Son yazılar eklentisi de işe yarayabilir.

Aşağıda kodunu paylaştığım renkli son yazılar eklentisinin görünümü yukarıdaki gibi. Gördüğünüz üzere gayet şık bir eklenti. Eklenti içerisinde içerik resmi, içerik başlığı, içerik özeti, tarihi ve yapılan yorum sayısı yer alıyor.

Blogunuza bu şık son yazılar eklentisini eklemek isterseniz eğer, Yerleşim alanından eklenti olarak aşağıdaki kodları eklemeniz yeterli.

Son yazılar eklenti kodları

<style type="text/css">
img.recent-post-thumbnail{float:right;height:50px;width:50px;margin:5px -5px 0px 0px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;padding:3px;background: #fff}
ul.recent-posts-wrap {background: #fff;list-style-type: none; margin: 5px 0px 5px 0px; padding: 0px;font:13px 'Ubuntu', sans-serif;}
ul.recent-posts-wrap li:nth-child(1n+0) {background: #FCD092; width: 94%}
ul.recent-posts-wrap li:nth-child(2n+0) {background: #FFE0B4; width: 94%}
ul.recent-posts-wrap li:nth-child(3n+0) {background: #FFF59E; width: 94%;}
ul.recent-posts-wrap li:nth-child(4n+0) {background: #E1EFA0; width: 94%;}
ul.recent-posts-wrap li:nth-child(5n+0) {background: #B1DAEF; width: 94%;}
ul.recent-posts-wrap li {padding:5px 10px;list-style-type: none; margin: 0 0 -5px; color: #777;}
.recent-posts-wrap a { text-decoration:none; }
.recent-posts-wrap a:hover { color: #222;}
.post-date {color:#e0c0c6; font-size: 12px; }
.recent-post-title a {font-size: 14px;font-weight: bold;color: #444;}
.recent-post-title {padding: 6px 0px;}
.recent-posts-details a{ color: #222;}
.recent-posts-details {padding: 5px 0px 5px; }
</style>
<script type="text/javascript">
function showrpwiththumbs(t){document.write('<ul class="recent-posts-wrap">');for(var e=0;e<posts_number;e++){var r,n=t.feed.entry[e],i=n.title.$t;if(e==t.feed.entry.length)break;for(var o=0;o<n.link.length;o++){if("replies"==n.link[o].rel&&"text/html"==n.link[o].type)var l=n.link[o].title,m=n.link[o].href;if("alternate"==n.link[o].rel){r=n.link[o].href;break}}var u;try{u=n.media$thumbnail.url}catch(h){s=n.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),u=-1!=a&&-1!=b&&-1!=c&&""!=d?d:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjne7UNr7ABshlNDXdl4rfa50QavzPEKCQYoPTpd1v0AlBPSGuIfNzPmvQ2AKFNc0w-6yUsJJJMovgdlAr2iM8hRfj_mRAIXLU2QclJ8aUP8Q6b_l5PffGDjjAgXsHPKAOYBFaaymziUnoY/s1600/no-thumb.png"}var p=n.published.$t,f=p.substring(0,4),g=p.substring(5,7),v=p.substring(8,10),w=new Array;if(w[1]="Ocak",w[2]="Şubat",w[3]="Mart",w[4]="Nisan",w[5]="Mayıs",w[6]="Haziran",w[7]="Temmuz",w[8]="Ağustos",w[9]="Eylül",w[10]="Ekim",w[11]="Kasım",w[12]="Aralık",document.write('<li class="recent-posts-list">'),1==showpostswiththumbs&&document.write('<a href="'+r+'"><img class="recent-post-thumbnail" src="'+u+'"/></a>'),document.write('<div class="recent-post-title"><a href="'+r+'" target ="_top">'+i+"</a></div>"),"content"in n)var A=n.content.$t;else if("summary"in n)var A=n.summary.$t;else var A="";var k=/<\S[^>]*>/g;if(A=A.replace(k,""),1==post_summary)if(A.length<summary_chars)document.write(A);else{A=A.substring(0,summary_chars);var y=A.lastIndexOf(" ");A=A.substring(0,y),document.write(A+"...")}var _="",$=0;document.write('<br><div class="recent-posts-details">'),1==posts_date&&(_=_+w[parseInt(g,10)]+" "+v+" "+f,$=1),1==insidereadmorelink&&(1==$&&(_+=" | "),_=_+'<a href="'+r+'" class="url" target ="_top">Devamını gör!</a>',$=1),1==showcomments&&(1==$&&(_+=" <br> "),"1 Comments"==l&&(l="1 Comment"),"0 Comments"==l&&(l="No Comments"),l='<a href="'+m+'" target ="_top">'+l+"</a>",_+=l,$=1),document.write(_),document.write("</div>"),document.write("</li>")}document.write("</ul>")}
</script>
<script type="text/javascript">
var posts_number = 5;var showpostswiththumbs = true;var insidereadmorelink = true;var showcomments = true;var posts_date = true;var post_summary = true;var summary_chars = 70;</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrpwiththumbs"></script>
<noscript>Your browser does not support JavaScript!</noscript>
<link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css' />

Kodları ekledikten sonra kaydedip blogunuzu kontrol edebilirsiniz. Bu arada değiştirmek istediğiniz alanlar olursa yorum yaparak bildirebilirsiniz. Ayrıca daha önce paylaştığım↴

Blogger son yayınlar eklentisi (widget)