Blogger renkli son yazılar eklentisi

06 Kasım, 2017
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.
Blogger renkli son yazılar eklentisi
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.
Blogger Gadget Ekle

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:"http://2.bp.blogspot.com/-C3Mo0iKKiSw/VGdK808U7rI/AAAAAAAAAmI/W7Ae_dsEVAE/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)

18 yorum:

  1. Fena durmuyor evet, denemek lazım. Teşekkürler paylaşım için...

    YanıtlaSil
  2. Yaptımmmmm,çok ta güzel ve hoş oldu..Teşekkür ederim.Ben çok beğendim..Emeğine sağlık..
    https://yesimlehertelden.blogspot.com.tr/ sizce nasıl olmuş?

    YanıtlaSil
  3. Ben çok beğendim elinize sağlık gerçekten çok güzel oldu.
    Müsaadenizle paylaşıyorum eminim çok kişi beğenecektir.
    Tekrar teşekkürler...

    YanıtlaSil
  4. Ellerinize sağlık görünüm olarak çok güzel olmuş iyi çalışmalar dilerim.

    YanıtlaSil
    Yanıtlar
    1. Teşekkürler, size de iyi çalışmalar dilerim.

      Sil
  5. Merhabalar çok güzel bir içerik olmis ben kendi sitemde denedim muhteşem bir şey olmuş
    linktikla.com

    YanıtlaSil
  6. Harika ya. Çok beğendim. Kullanıyorum :)

    YanıtlaSil
  7. Güzel ve faydalı bir yazı olmuş teşekkürler. Bir sorum olacak;

    Bu eklentinin kenarda değil de LinkWithin tarzı yazılarımızın altında görünmesi için ne yapmamız gerekir? LinkWithin eklentisini çok beğenerek kullanmama rağmen maalesef SSL ile birlikte kullanmam mümkün olmadı.

    Eğer bu eklentiyi dediğim şekilde kullanmak mümkün değilse bu tarz resimli bir "Benzer İçerik" eklentisi var mı acaba?

    YanıtlaSil
    Yanıtlar
    1. Merhabalar, farklı kaynaklardan benzer yazılar eklentilerine kolayca ulaşabilirsiniz. Yazıda yer alan eklenti en son paylaşılan içeriklerin listesini sunuyor. Tabi bu eklentiyi de kullanabilirsiniz. Yerleşim kısmında Blog kayıtları eklentisinin hemen altına ekleyip daha sonra ise (https://www.blogtecrubem.com/2016/11/blogger-eklentisini-widget-sadece-yayin-sayfalarinda-gosterme.html) bu yazımda yer alan kodu uyguladığınızda eklenti sadece yayın sayfalarında yazıların hemen altında görünüyor olacaktır. Tabi eklentiyi HTML kısmına da ekleyebilirsiniz.

      Sil
    2. Cevabınız için teşekkür ederim. Resimli Benzer Yazılar eklentisi ile ilgili güncel bir yazıyı Blog Tecrübemde de görmek isterim açıkçası.

      Renkli son yazılar eklentisi ile ilgili bir sorum daha olacak; renkleri mavi, siyah, gri, beyaz olarak değiştirmek istiyorum. Kodun içerisinde "color" yazan kısımları buldum ama çok karışık geldi. Bahsettiğim renklere dönüştürmek için ne yapmalıyım?

      Sil
    3. En kısa zamanda paylaşmaya çalışırım. Renkleri düzenlemek için öncelikle eklemek istediğiniz renklerin kodlarını bulmanız gerekir. Bu https://www.color-hex.com/ site işinize yaracaktır. Daha sonra dilediğiniz rengi eklentiye eklemek için yukarıda yer alan kod kısmında 6, 7, 8, 9 ve 10. satırda yer alan background: #FCD092 şeklindeki kodları düzenlemeniz gerekir.

      Sil
    4. Çok teşekkür ederim verdiğiniz bilgilerden dolayı.

      Sil
    5. Rica ederim, iyi çalışmalar.

      Sil

Yorum yaparken:
1. İçerik konusuyla alakalı olmasına özen gösterin.
2. Aktif link bırakmayın, aksi taktirde yorumunuz silinir.
3. Yazım ve dil bilgisi kurallarına uymayı ihmal etmeyin.
Konu ile ilgili olmayan sorularınız için ise Blogger Yardım veya İletişim sayfalarını kullanınız.

Copyright © 2016 - 2019 www.blogtecrubem.com · Duyuru · İletişim · Yasal Uyarı