Yazılarınızın Altına Resimli İlgili Yazilar Ekleyin

Blogunuzu ziyaret edenler ne kadar fazla blogunuzda kalırlarsa blogunuzun alexa değerleri için o kadar iyi bir gelişme olur.Bu yüzden okuyucularınızın blogunuza erişmesini sağlamanız gerektiği gibi aynı zamanda onların blogunuzda fazla vakit geçirmesiniz de sağlamalısınız.Bunu gerçekleştirmenin yolu kaliteli içeriğin yanında onları benzer yazılara sürüklemek de önemlidir.Bu yüzden İlgili Yazılar widget ı blogların vazgeçilmezidir.
Takip edenler bilirler değişik şekillerde blogumuza ilgili yazılar widget ı ekledik:
>>>Yazılarınızın Altına Resimli İlgili Yazılar ve Mail Abone Kutusu Ekleyin
>>>Blogunuza Yeni Outbrain İlgili Yazıları Ekleyin
Bu yazımızda blog okuyucularımdan birisinin isteği üzerine şu an blogumda kullandığım sadece resimli ve üzerine gelince yazı başlığı görünen ilgili yazılar eklentisini sizlerle paylaşacağım:
blogger-ilgili-yazılar
Aşağıdaki kod değişiklikleri uygulamadan blogunuzun şablonunu yedeklemenizde fayda var:
Blogger hesabınıza giriş yaparak Şablon >>>Html Düzenle kısmına gelin.Şablonu genişlet kutucuğunu işaretleyin.
Aşağıdaki kodu arayın :
]]></b:skin>
Bu kodun hemen üzerine aşağıdaki kodları yapıştırın :
#related-posts{float:left}
#related-posts ul{margin:5px 0;width:524px;padding:0;list-style-type:none}
#related-posts ul li{position:relative;float:left;border:0 none;margin-right:11px;width:76px}
#related-posts ul li:hover{z-index:98}
#related-posts ul li:hover img{border:3px solid #BBB}
#related-posts ul li:hover div{position:absolute;top:40px;left:10px;margin-left:0;width:200px}
#related-posts ul li img{border:3px solid #DDD;width:70px;height:70px;background:#FFF}
#related-posts ul li div{position:absolute;z-index:99;margin-left:-999em}
#related-posts ul li .title{border:1px solid #CCC;background:#FFF;padding:5px 10px}


Daha sonra aşağıdaki kodu bulun :



<div class='post-footer'>



Bu kodun hemen altına aşağıdaki kodu ekleyin :


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='clear:both'/>
<div id='related-posts'>
<script type='text/javascript'>var ry='<h2></h2>';rn='<h2></h2>';rcomment='Yorum';rdisable='Yorum';commentYN='yes';</script>
<script type='text/javascript'>
//<![CDATA[
var nothumb='http://lh3.ggpht.com/--Z8SVBQZ4X8/TdDxPVMl_sI/AAAAAAAAAAA/jhAgjCpZtRQ/no-image.png';dw='';titles=new Array();titlesNum=0;urls=new Array();time=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;time[titlesNum]=d.published.$t;if('media$thumbnail' in d){thumb[titlesNum]=d.media$thumbnail.url}else{thumb[titlesNum]=nothumb};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]=time[a];f.length+=1;f[f.length-1]=thumb[a];g.length+=1;g[g.length-1]=commentsNum[a]}}urls=b;titles=c;time=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);time.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+='<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+='<li><a href="'+urls[c]+'" rel="nofollow"><img alt="'+titles[c]+'" src="'+thumb[c]+'"/></a><div class="title"><h3><a href="'+urls[c]+'" rel="nofollow">'+titles[c]+'</a></h3><span>'+time[c].substring(8,10)+'/'+time[c].substring(5,7)+'/'+time[c].substring(0,4)+comments[c]+'</span></div></li>';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'>var maxresults=6;removeRelatedDuplicates();printRelatedLabels('<data:post.url/>');</script>
</div>
<div style='clear:both'/>
</b:if>


Evet şimdi yaptığınız çalışmaları kaydedin.Blogunuzda yer alan herhangi bir yazı sayfasını görüntüleyin.Değişikliği farkedeceksiniz.

Ozan Başer

Merhaba ben Ozan Başer. EhliBlog'da ve elbette Ehliforum (Blogculara Özel Forum)'da yazıyorum. Blogger, seo, adsense, sosyal medya ve google ürünleri hakkında faydalı ve kaliteli içeriği okuyucularıma sunmaya çalışıyorum. C#, PHP, Javascript gibi uğraşılarım var. Web ve online teknolojiler ile ilgili birçok konuda fikirlerimi sizlerle paylaşıyorum.

7 yorum:


  1. CTRL+F ile altına ve üstüne kod yapıştıracağımız iki kodu da arattım.

    2. kod var ama ''hemen üzerine ekleyin'' dediğiniz 1.si hiçbir şekilde yok, bulamıyorum..

    Sebebi nedir sizce?

    YanıtlaSil
  2. ]]> Bu kodu kastediyorsanız mutlaka vardır.Olmamamasına imkan yok.Olmadı İletişim bölümünden bana mail gönderin şablonunuzu düzenleyip göndereyim size

    YanıtlaSil
  3. Evet, o kodu kastediyorum.
    Gerçekten yok ama. İlk kez başıma geliyor böyle bir şey..

    Navbarı saklayan kod bile kullanmıştım ben şablonumda. Belki de o türlü sebepler yüzünden çıkmıyordur. Bir şekilde bulursam uygulama yaparım, bulamazsam kalsın..

    İlginiz ve yardım teklifiniz için çok teşekkür ederim.
    İyi çalışmalar...

    YanıtlaSil
  4. Bu Kodun script dosyası hangi sitede barınmakta?

    YanıtlaSil
  5. script kodları yukarıdaki kodların içerisinde yer almaktadır

    YanıtlaSil
  6. Merhaba, seninle aynı temayı kullanıyoruz fakat ben bir türlü kaydın hemen altına Asense ekleyemedim. Sen nasıl yaptın bunu?

    YanıtlaSil
  7. "div class='post-footer-line post-footer-line-3'>" bunun hemen altına ekleyebilirsiniz olmadı line-1 deneyin

    YanıtlaSil

Yorumunuza gelecek cevabı takip etmek "beni bilgilendir" kutucuğuna işaretleyebilirsiniz.