Blogger Resimli Benzer Yazılar Eklentisi

Yazar: Adsız| Zaman: 11:30 | 6 Yorum
Merhaba blogger severler... Benzer yazılar eklentisinin ne amaçla kullanıldığı ve ne işe yaradığı hakkındaki bilgileri Blogger Benzer Yazılar Eklentisi başlıklı makalemde anlatmıştım. O makalede paylaştığım eklentide yalnızca benzer yazıların başlıklarını sıralıyorduk. Burada vereceğim kodlarda ise hem başlık bağlantıları hemde yazılara ait resimler bir arada görüntülecek. Ayrıca eklenti içerisinde resim eklemediğiniz yazılar için otomatik tanımlanmış bir görsel de bulunuyor. Bu da kötü görüntü oluşmasını engelleyecektir.
Eklentiyi blogumda bende kullanıyorum. Önizleme için bu yazının en alt kısmına bakabilirsiniz. Ben direk anlatıma geçiyorum.

Resimli benzer yazılar eklentisi nasıl kurulur?

› Blogger paneline giriş yapın.
› Blogunuzu seçip sol menüden Şablon kısmına gelin.
› Açılan sayfada Ctrl+F komutu ile aşağıdaki kodu bulun.

</head>

</head> kodunun hemen üzerine aşağıdaki kodları ekleyin.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {float:center; text-transform:none; height:100%; min-height:100%; padding-top:5px; padding-left:5px;} 
#related-posts h2{font-size: 16px; font-weight: bold; color: #5D5D5D; font-family: Verdana; margin-bottom: 15px;} 
#related-posts a{border-right: 1px dotted #DDDDDD; color:#5D5D5D;} 
#related-posts a:hover{color:black; background-color:#EDEDEF;} 
</style> 
<script type='text/javascript'> var defaultnoimage=&quot;http://4.bp.blogspot.com/-cQQoD4MoTpA/Uk1z0LXdNuI/AAAAAAAAATY/V4T2xOaRBRs/s1600/resim-yok.jpg&quot;; var maxresults=4; var splittercolor=&quot;#DDDDDD&quot;; var relatedpoststitle=&quot;Benzer Yazılar&quot;; </script> <script src='http://hitadam.googlecode.com/files/ayni.js' type='text/javascript'/></b:if>

Şimdi tekrar Ctrl+F ile bir arama yapın ve aşağıdaki kodları bulun.

<div class='post-footer'>

Bu kodun hemen üzerine aşağıdaki kodları kopyalayıp yapıştırın ve bir önizleme yapıp hata alıp almadığınızı kontrol edin. Hata almadıysanız devam edin temanızı kaydedin.

<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=4&quot;' type='text/javascript'/></b:loop> 
<script type='text/javascript'> removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;); </script>
</div><div style='clear:both'/>
</b:if>

Düzenlemeler

› Resim eklenmeyen yazılarda görünün önizleme resmi: http://4.bp.blogspot.com/-cQQoD4MoTpA/Uk1z0LXdNuI/AAAAAAAAATY/V4T2xOaRBRs/s1600/resim-yok.jpg
› Gösterilecek yazı adedini arttırıp azaltmak için: maxresults=5;

Hepinize iyi bloglamalar...

Bir önceki yazımız olan "Blogger Seo Dostu Breadcrumb Navigasyon Eklentisi" başlıklı makalemizde breadcrumb seo eklentisi hakkında bilgi edinebilirsiniz.
Devamı »
Etiketler: , ,

Blogger Benzer Yazılar Eklentisi

Yazar: Adsız| Zaman: 10:04 | 7 Yorum
BloggerBenzer yazılar eklentisi, yazılarınıza eklediğiniz etiketleri baz alarak okuduğunuz yazıyla aynı etikete sahip yazıları sıralı şekilde gösterme temeline dayanır.
Bir şekilde blogunuzdaki herhangi bir yazıya ulaşmış kullanıcıyı benzer yazılar eklentisi ile aynı kategorideki diğer yazılara yönlendirme sitenize oldukça olumlu katkı yapacaktır.
Bu yazıda sizlere içinde bulunduğu yazıyı tekrar etmeyen, başlıkların üzerine geldiğinizde yazının yayınlanma tarihini gösteren ve aynı etikete sahip başka bir yazı bulunamadığında ise belirleyeceğiniz notu düşen bir eklenti paylaşacağım. Aşağıdaki adımları uygulayarak benzer yazılar eklentisine sahip olabilirsiniz.

---------------------------------- Demo ----------------------------------

Benzer yazılar eklentisi nasıl kurulur?

› Blogger.com'a giriş yapın.
› Eklentiyi kurmak istediğiniz blogun ismine tıklayın.
› Açılan sol menüden Şablonu seçin ve Html'yi Düzenle Deyin. Aşağıdaki gibi bir görüntü gelecek.

Blogger

› Html'yi düzenle kısmında klavyenizin Ctrl+F komutu ile aşağıdaki kodu bulun.

<div class='post-footer'/>

Yukarıdaki kodun hemen üzerine aşağıdaki kodları ekleyin. Bu koddan temanızdan birden fazla olabilir, tek tek deneyerek ekleyin.

<b:if cond='data:blog.pageType != &quot;static_page&quot;'> 
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>//<![CDATA[
var titles=new Array();var titlesNum=0;var urls=new Array();var time=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(d.link[a].rel=="alternate"){urls[titlesNum]=d.link[a].href;time[titlesNum]=d.published.$t;titlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);var c=new Array(0);e=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]}}titles=c;urls=b;time=e}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)}}var c=Math.floor((titles.length-1)*Math.random());var b=0;document.write("<ul>");if(titles.length==0){document.write("<li>Maalesef, benzer yazı bulamadık.</li>")}else{while(b<titles.length&&b<20&&b<maxresults){if(y!=-1){urls[c]=urls[c]+'?m=0'}document.write('<li><a href="'+urls[c]+'" title="'+time[c].substring(8,10)+"/"+time[c].substring(5,7)+"/"+time[c].substring(0,4)+'">'+titles[c]+"</a></li>");if(c<titles.length-1){c++}else{c=0}b++}}document.write("</ul>");urls.splice(0,urls.length);titles.splice(0,titles.length)};
//]]></script>
    <div class='related-posts'>
<h3>Buna benzer diğer yazılar :</h3>
<ul><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=10;removeRelatedDuplicates();printRelatedLabels(&#39;<data:post.url/>&#39;);</script></ul><div class='clear'/>
</div>
</b:if></b:if>

› Ardından bir önizleme yapın ve hata olup olmadığını kontrol edin. Yok ise devam edin ve aşağıdaki kodu bulun

]]></b:skin>

Yukarıdaki kodu hemen üzerine aşağıdaki css kodlarını ekleyin.

.related-posts{width:560px;border:1px solid #ddd;border-radius:4px;margin-top:5px;color:#666;background:#fff;padding:5px}
.related-posts h3{font-weight:700;font-family:Tahoma,sans-serif;font-size:14px;padding:5px 0 0}
.related-posts ul{width:560px;margin:0;padding:6px 4px 6px 1px}
.related-posts li{float:left;width:277px;list-style-position:inside;list-style-type:none;list-style-image:url(http://1.bp.blogspot.com/-IzoxOS8c7r0/UhHdVWC3-fI/AAAAAAAAANM/Cq93stBpmbo/s1600/resim.png);overflow:hidden;margin:0;padding:3px 0}

İşlem tamamdır. Eklenti blogunuzla uyum sağlamazsa width:560px; değerini değiştirerek uzunluğunu ayarlayabilirsiniz. Yapamadığınız bir yer olursada yorum formunu kullanın.

Hit Adam
Devamı »
Etiketler: ,