Bloggerde yazı içine Resimli benzer yazılar eklentisi

Bloggerde yazı içine Resimli benzer yazılar eklentisi İçin Etkili Aramalar : Blogger Eklenti

Blogger kullanıcıların en sevdiği Bloggereklentilerden bir tanesi konu sonunda yer alan benzer yazılar eklentisidir. Benzer konularda ki yazılarınızı ziyaretçilerinize sunmak kullanıcıların sitede daha uzun kalmasına ve zamanla sadık bir ziyaretçi olma yolunda iyi bir yöntemdir. Bu şekilde bir çalışmanın sizlere ne gibi kazanımlar sunacağını daha önce açıklamaya çalışmıştım.  Google Analytics - Sayfa Gösterimleri >> Konu sonlarına Resimli Blogger benzer yazılar eklentisi eklemek için buradan buyurun : Blogger Resimli Benzer Yazılar Eklentisi >> 

Bu gün bahsedeğim eklenti ise farklı bir mantık ile hareket ediyor. Benzer yazılar eklentisini yayının içinde istediğiniz her hangi bir yere ekleyebilirsiniz. Benzer bir bakış olsun diye durumu size farklı bir resim ile açıklamaya çalışayım.

Blogger Yayın içine Benzer Yazılar Eklentisi Kullanımı

1 ) Blogger kumanda paneline gelip Şablon >> HTML'yi Düzenle sekmesiyle kodlarımızı açıyoruz.
2 ) Ctrl + F yardımı ile </head>  kodunu buluyoruz. 
3 )</head>  kodunun öncesine aşağıdaki Blogger Yayın içine Benzer Yazılar Eklentisi kod dizinini ekliyoruz.

 <style>
#related-posts {
float: left;
width: 650px;
border-bottom: 1px solid #ddd;
height: 290px;
}
#related-posts h2 {
margin-top: 50px;
border-bottom: 0px;
border-top: 1px solid #ddd;
padding-top: 20px;
margin-bottom: 10px;
margin-left: 3px;
color: #666;
font-size: 16px;
}
</style>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEzjgzOenW1Tj_fpV3VFKE3HlLQ0zxIsoUviSEOJeC_QFuOm-l6kdmBPYgV3zo1oP1OArcQxarFiMDrQpS98t2vHFxueqPmdRVVeO1qVMu3MLZgZVtaTxStkTVGFrLeE5kAv9tdUFvVBM_/s1600/no_image.jpg&quot;;
var maxresults=3;
var splittercolor=&quot;#fff&quot;;
var relatedpoststitle=&quot;Related Articles:&quot;;
</script>
<script type='text/javascript'>
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
var thumburl = new Array();
function related_results_labels_thumbs(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
try
{thumburl[relatedTitlesNum]=entry.media$thumbnail.url;}

catch (error){
s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);
if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!=""))
{thumburl[relatedTitlesNum]=d;} else {if(typeof(defaultnoimage) !== 'undefined') thumburl[relatedTitlesNum]=defaultnoimage; else thumburl[relatedTitlesNum]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEzjgzOenW1Tj_fpV3VFKE3HlLQ0zxIsoUviSEOJeC_QFuOm-l6kdmBPYgV3zo1oP1OArcQxarFiMDrQpS98t2vHFxueqPmdRVVeO1qVMu3MLZgZVtaTxStkTVGFrLeE5kAv9tdUFvVBM_/s1600/no_image.jpg";}
}
if(relatedTitles[relatedTitlesNum].length>35) relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0, 35)+"...";
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;

}
}
}
}
function removeRelatedDuplicates_thumbs() {
var tmp = new Array(0);
var tmp2 = new Array(0);
var tmp3 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains_thumbs(tmp, relatedUrls[i]))
{
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp3.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
tmp3[tmp3.length - 1] = thumburl[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
thumburl=tmp3;

}
function contains_thumbs(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}

function printRelatedLabels_thumbs(current) {
var splitbarcolor;
if(typeof(splittercolor) !== 'undefined') splitbarcolor=splittercolor; else splitbarcolor="#DDDDDD";
for(var i = 0; i < relatedUrls.length; i++)
{
if((relatedUrls[i]==current)||(!relatedTitles[i]))
{
relatedUrls.splice(i,1);
relatedTitles.splice(i,1);
thumburl.splice(i,1);
i--;
}
}

var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
if(relatedTitles.length>0) document.write('<h2>'+relatedpoststitle+'</h2>');
document.write('<div style="clear: both;"/>');
while (i < relatedTitles.length && i < 20 && i<maxresults) {
document.write('<a style="text-decoration:none;padding:5px;float:left;');
if(i!=0) document.write('border-left:solid 0.5px '+splitbarcolor+';"');
else document.write('"');
document.write(' href="' + relatedUrls[r] + '"><img style="width:200px;height:120px;border:0px;" src="'+thumburl[r]+'"/><br/><div style="padding-left:3px;height:65px;border: 0pt none ; margin: 3px 0pt 0pt; padding: 0pt; font-style: normal; font-variant: normal; font-weight: normal; font-size: 12px; line-height: normal; font-size-adjust: none; font-stretch: normal;">'+relatedTitles[r]+'</div></a>');
i++;

if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
}
document.write('</div>');
relatedUrls.splice(0,relatedUrls.length);
thumburl.splice(0,thumburl.length);
relatedTitles.splice(0,relatedTitles.length);
}
//]]>
</script>
</b:if>

Ardından kod satırları arasında <data:post.body/> kodunu bularak hemen altına aşağıdaki kodu ekleyin. Eğer <data:post.body/> kodunu bulamıyorsanız  <div class='post-footer-line post-footer-line-1'></div> , kodunun altına eklemeyi deneyin.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div></b:if>

 Kodları eklemeniz ardından Blogger Yayın içine Benzer Yazılar Eklentisi sorunsuz olarak çalışmaya başlayacaktır.