Yeni Stil Benzer Yazılar Eklentisi

DEMO

Blogger benzer yazılar eklentilerini farklı olanları buldukça sizlerle paylaşıyorum ve bu benzer yazılar eklentisi oldukça değişik ve farklı bir stilde.Demo örneğine baktığınızda sizinde görmüş olduğunuz gibi eklenti oldukça güzel üzerine gelince yazı başlığını gösteren tıkladığınızda ayrı bir sayfaya yönlendiriyor.Daha önce sizlere paylaşmış olduğum Blogger Yazılı Benzer Yazılar Stilleri yazımıda tekrar vereyim.

Blogger Paneli >>> Şablon >> HTML'yi Düzenle >> CTRL+F tuşuna basın ve ]]></b:skin> kodunu bulun aşağıdaki kodları üstüne yerleştirin.

/* Blogger Turkey Benzer Yazılar Başlangıç --- */
.related-post .post-thumbnail {
 z-index: 1;
 position: relative;
 width: 98px;
 height: 98px;
 margin: 0;
 display: block;
 border-right: 1px solid #fff;
 border-bottom: 1px solid #fff;
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 border-radius: 5px;
 -webkit-box-shadow: inset 2px 2px 5px #444;
 -moz-box-shadow: inset 2px 2px 5px #444;
 box-shadow: inset 2px 2px 5px #555;
}
.related-post {
 float: left;
 position: relative;
 width: 98px;
 height: 98px;
 margin: 0 10px 10px 0;
 background: #F6F6F6;
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 border-radius: 5px;
 }
.related-post .related-post-title {
 display: none;
 float: left;
 background: #000;
 color: #fff;
 text-shadow: none;
 font-weight: bold;
 padding: 10px;
 position: absolute;
 top: -20px;
 left: 40px;
 z-index: 2;
 width: 200px;
 -webkit-box-shadow: 0 0 2px #444;
 -moz-box-shadow: 0 0 2px #444;
 box-shadow: 0 0 2px #444;
}
.related-post:hover .related-post-title {display: block;}

Şimdi arayacağımız kod bu bir kaç tane bulabilir siz bulduklarınızın hemen altına aşağıdaki kodları yapıştırın bu kodun  <data:post.body/>  altına yerleştirin.

<div id='related-posts'>


<b:if cond='data:blog.pageType == &quot;item&quot;'>


<script type='text/javascript'>//<![CDATA[


var ry='<h3>Related Posts</h3>';rn='<h3>&nbsp;&nbsp;&nbsp;No related post available</h3>';rcomment='comments';rdisable='disable comments';commentYN='no';


var dw='';titles=new Array();titlesNum=0;urls=new Array();timeR=new Array();thumb=new Array();commentsNum=new Array();comments=new Array();function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];titles[titlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if('thr$total' in d){commentsNum[titlesNum]=d.thr$total.$t+' '+rcomment}else{commentsNum[titlesNum]=rdisable};if(d.link[a].rel=="alternate"){urls[titlesNum]=d.link[a].href;timeR[titlesNum]=d.published.$t;if('media$thumbnail' in d){thumb[titlesNum]=d.media$thumbnail.url}else{thumb[titlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCbys9HZPtrU1tCZazxiK7nedqpaugfasWc78cUaX1yTxR7hapBnV2LTwqwEluOTi4abtla2DkAA04pKtU2rdyyEDcl0pmsvTQgp3GZxQE48KxRFrgheNG-S3n1RZQu9ZHe8WYBhJ_t6l-/'};titlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);c=new Array(0);e=new Array(0);f=new Array(0);g=new Array(0);for(var a=0;a<urls.length;a++){if(!contains(b,urls[a])){b.length+=1;b[b.length-1]=urls[a];c.length+=1;c[c.length-1]=titles[a];e.length+=1;e[e.length-1]=timeR[a];f.length+=1;f[f.length-1]=thumb[a];g.length+=1;g[g.length-1]=commentsNum[a]}}urls=b;titles=c;timeR=e;thumb=f;commentsNum=g}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){var y=a.indexOf('?m=0');if(y!=-1){a=a.replace(/\?m=0/g,'')}for(var b=0;b<urls.length;b++){if(urls[b]==a){urls.splice(b,1);titles.splice(b,1);timeR.splice(b,1);thumb.splice(b,1);commentsNum.splice(b,1)}}var c=Math.floor((titles.length-1)*Math.random());var b=0;if(titles.length==0){dw+=rn}else{dw+=ry;dw+='<div class="clear"/></div><ul>';while(b<titles.length&&b<20&&b<maxresults){if(y!=-1){urls[c]=urls[c]+'?m=0'}if(commentYN=='yes'){comments[c]=' - '+commentsNum[c]}else{comments[c]=''};dw+='<div class="related-post"><div class="related-post-title">'+titles[c]+'</div><a href="'+urls[c]+'" rel="nofollow"><img border="0" class="post-thumbnail" alt="'+titles[c]+'" src="'+thumb[c]+'"/></a></div></div>';if(c<titles.length-1){c++}else{c=0}b++}dw+='</ul>'};urls.splice(0,urls.length);titles.splice(0,titles.length);document.getElementById('related-posts').innerHTML=dw};


//]]></script>


<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=related_results_labels&quot;' type='text/javascript'/>


</b:loop>


<script type='text/javascript'>varmaxresults=6;removeRelatedDuplicates();printRelatedLabels(&#39;<data:post.url/>&#39;);</script>


</b:if>


</div>


<div class='clear'/>

Kod içersinde maxresults=6 bu kod eklediğiniz benzer yazıların kaç adet olmasını istiyorsanız onu ayarlamak içindir.

İşlem tamamdır.Şablonu Kaydet diyoruz.