Resimli İlgili Yazılar Eklentisi

Kasım 02, 2015
blogger-benzer-yayinlar-yapma

Blogger Resimli İlgili Yazılar Eklentisi. Benzer yazılar eklentisi de denilen bu şey yazılarınızın sonuna otomatik olarak eklenir ve o yazınızla alakalı diğer yazıları alt alta sıralar ve site içi bağlantı verir. Benim bloğumda da bu eklentinin resimsiz olanı var yazı sonuna gelince göreceksiniz. Bu eklentinin çalışma mantığı etikete bağlı diğer yazılarınızı da otomatikman gösterir. Benim bu yazımın etiketi "blog eklentileri" ve yazımın sonunda bu etikete bağlı diğer yayınları da göreceksiniz.

İlgili yazıların gösterilmesinin faydası nedir? 

Bloğunuza benzer yazılar eklentisini kurduğunuz zaman ziyaretçilerinizin blogta daha fazla zaman geçirmesini sağlayabilir, konuyla alakalı diğer yazılarınızın da okunmasının yolunu açabilirsiniz. Okuyucularınızın blogta uzun süre kalması seo açısından çok önemlidir. Google bu konuya dikkat ediyor. Sadece bir yazısı kısa süre okunup diğer yazılarına geçiş yapılmayan blogları kayda değer görmüyor ve dikkat çekici değil diyerek sıralamada aşağı çekiyor. Bu yüden ziyaretçilernizin diğer yazılarınızı da okuması ve zaman geçirmesi çok önemli.

Yazı sonlarında aynı kategoriye ait diğer yazıları görüntülememize yarayan bu canım eklentinin yapım aşamalarını on adımda anlattım. Sırayı iyi takip edin çok basit kurarsınız. Hadi bakalım.

Resimli Benzer Yazılar Eklentisi Nasıl Kurulur?

1. Blogger yönetici panelinize girin.
2. Şablon
3. HTML'yi Düzenle
4. CTRL F tuşlarına basarak ]]></b:skin> kodunu bulun
5. Bu kodun üst satırına aşağıdaki kodları kopyalayıp yapıştırın.


/* Blog Bakkalı Benzer Yazılar Eklentisi */
#related_posts{margin:20px 0;}
#related_posts h4{background:#4f93c5;color:#fff;padding:12px;margin:0 0 5px;font-size:110%;}
#related_img{margin:0;padding:0;}
#related_img:hover{background:0}
#related_img ul{list-style-type:none;margin:0;padding:0}
#related_img li{min-height:62px;border-bottom:1px solid #f1f1f1;list-style:none;margin:0 0 5px;padding:5px;}
#related_img li a{color:#2672a0;}
#related_img li a:hover{text-decoration:underline}
#related_img .news-title{display:block;font-weight:bold!important;margin-bottom:5px;font-size:14px;}
#related_img .news-text{display:block;font-weight:normal;text-transform:none;color:#888;font-size:11px;}
#related_img img{background:#fefefe;float:left;margin-right:10px;width:60px;height:60px;max-width:100%;border-radius:4px;}

6. Şimdi aynı arama kutusunu kullanarak </head> kodunu bulun.
7. Bu kodun üst satırına aşağıdaki kodları ekleyin.

<script type='text/javascript'>/*<![CDATA[*/var relnum=0;var relmaxposts=5;var numchars=135;var morelink=" ";function saringtags(r,l){for(var e=r.split("<"),n=0;n<e.length;n++)-1!=e[n].indexOf(">")&&(e[n]=e[n].substring(e[n].indexOf(">")+1,e[n].length));return e=e.join(""),e=e.substring(0,l-1)}function relpostimgthum(r){for(var l=0;l<r.feed.entry.length;l++){var e=r.feed.entry[l];reljudul[relnum]=e.title.$t,postcontent="","content"in e?postcontent=e.content.$t:"summary"in e&&(postcontent=e.summary.$t),relcuplikan[relnum]=saringtags(postcontent,numchars),postimg="media$thumbnail"in e?e.media$thumbnail.url:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf8wVufBUGuwwFB8JXrD7r1bDqyZlT-cJ_7TU03HHFautr8sjH4QMKyhXaCgD-P0pAiU3Ol0zDsi4QkCyzzRIiuDy3OGo6Vh_-yJg2LOAItRyQgYUbNzg5SC-aRdt-0hxs-VQOQSvfhFmR/d/noimagethumb.gif",relgambar[relnum]=postimg;for(var n=0;n<e.link.length;n++)if("alternate"==e.link[n].rel){relurls[relnum]=e.link[n].href;break}relnum++}}function contains(r,l){for(var e=0;e<r.length;e++)if(r[e]==l)return!0;return!1}function relatpost(){for(var r=new Array(0),l=new Array(0),e=new Array(0),n=new Array(0),t=0;t<relurls.length;t++)contains(r,relurls[t])||(r.length+=1,r[r.length-1]=relurls[t],l.length+=1,l[l.length-1]=reljudul[t],e.length+=1,e[e.length-1]=relcuplikan[t],n.length+=1,n[n.length-1]=relgambar[t]);reljudul=l,relurls=r,relcuplikan=e,relgambar=n;for(var t=0;t<reljudul.length;t++){var a=Math.floor((reljudul.length-1)*Math.random()),u=reljudul[t],s=relurls[t],i=relcuplikan[t],o=relgambar[t];reljudul[t]=reljudul[a],relurls[t]=relurls[a],relcuplikan[t]=relcuplikan[a],relgambar[t]=relgambar[a],reljudul[a]=u,relurls[a]=s,relcuplikan[a]=i,relgambar[a]=o}for(var g,m=0,h=Math.floor((reljudul.length-1)*Math.random()),c=h,d=document.URL;m<relmaxposts&&(relurls[h]==d||(g="<li class='news-title clearfix'>",g+="<a href='"+relurls[h]+"' rel='nofollow' target='_top' title='"+reljudul[h]+"'><img src='"+relgambar[h]+"' /></a>",g+="<a href='"+relurls[h]+"' target='_top'>"+reljudul[h]+"</a>",g+="<span class='news-text'>"+relcuplikan[h]+" ... <a href='"+relurls[h]+"' target='_top'>"+morelink+"</a><span class='news-text'>",g+="</li>",document.write(g),m++,m!=relmaxposts))&&(h<reljudul.length-1?h++:h=0,h!=c););}var reljudul=new Array,relurls=new Array,relcuplikan=new Array,relgambar=new Array;/*]]>*/</script>

8. Şimdi <data:post.body/> kodunu bulun ve bu kodun bittiği yere yani sağ tarafına aşağıdaki kodları ekleyn. Bu koddan karşınıza birkaç tane çıkacak ikincisinin veya diğerlerinin sağına ekleyeceksiniz. (Hangisine ekleyeceğiniz kendi temanızın kodlanmasına bağlı olduğu için net değil sırayla deneme yanılmayla eklemekte fayda var).


<div id='related_posts'>
        <h4>Benzer Yazılar</h4>
        <b:loop values='data:post.labels' var='label'>
          <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=relpostimgthum&amp;max-results=50&quot;' type='text/javascript'/>
        </b:loop>
        <ul id='related_img'>
      <script type='text/javascript'>relatpost();</script>
   </ul>
</div>

9. Şablonu kaydedin.
10. Tebrikler benzer yayınlar eklentiniz hazır.

Bonus: Bu kadar emek karşılıksız değil tabiki sağdan izleyicilere katıl. Parayla değil yahu  

Altı yıldır blog işleriyle uğraşıyorum. Edindiğim tecrübeleri sizlerle paylaşıyorum.

11 Yorum
avatar

gerçekten çok faydalı şeyler paylaşıyorsunuz :)
teşekkürler

Yanıtla
avatar

Ben teşekkür ederim yorumunuzla güzellik kattığınız için :)

Yanıtla
avatar

teşekkür ederim. geliyorum hemen :)

Yanıtla
avatar

Konu ile alakasız olabilir ama blog ana sayfasındaki yayın resimlerinin üzerine gelince hover efekti ile beraber yayın ikonu gözüken bir eklenti bulabilir misiniz.?

Yanıtla
avatar

Bulabilirsem haberdar ederim :)

Yanıtla
avatar

Blogunuz çok şık , temanız harika, zevkle takip ediyorum...

Yanıtla
avatar

Merhaba ben kodu kendi bloguma ekledim fakat eski ve sildiğim kayıtlar undefined olarak gözüküyor onu nasıl kaldırabilirim ve bazı yazılarımın resimler gözükmüyor bunu nasıl düzenleyebilirim ? https://journalhealtmanagemant.blogspot.com.tr , harika bir iş çıkarmışsınız bu arada tebrik ederim :)

Yanıtla
avatar

devamını oku yazısından sonra gelmesinin yolu var mı

Yanıtla
Bu yorum yazar tarafından silindi. - Hapus

Yorumlarda Kod vs. Kullanmak İÇİN
  • Lütfen sadece bu konuyla ilgili yorumlarınızı bırakınız.
  • Yoruma kod eklemek için <i rel="code"> kodu bunun yerine yazın </i>
  • Daha uzun kod eklemek için <i rel="pre"> kodu bunun yerine yazın </i>
  • Tırnak işareti kullanmak için <i rel="quote"> yorumu bunun yerine yazın </i>
  • Resim eklemek için <i rel="image"> resim url </i>
  • Video eklemek için [iframe] URL embed kodunu buraya yapıştırın [/iframe]
  • Sonra aşağıdaki butona basın ve kodları dönüştürün.
  • © 2015 Blog Bakkalı ✔