Blogger Resimli Benzer Yazılar Eklentisi

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.