Resimli İlgili Yazılar Eklentisi

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  

Paylaş Facebook

Paylaş Twitter

Paylaş Google+

Paylaş LinkedIn