Blogger İçin Resimli Benzer Yazılar Eklentisi

Blogger (blogspot) ile oluşturduğunuz bloğunuzda, yazı sonlarında resimli benzer konuları göstermek ziyaretçilerin sitenizde daha uzun süre kalmasına yardımcı olacaktır. Kullanmış olduğunuz etiketler (label) arasından seçilen benzer konuları sitenize nasıl ekleyeceğinizi aşağıdaki adımları takip ederek öğrenebilirsiniz.


1. Yönetim paneline giderek Şablon -> HTML'yi Düzenle tuşlarını tıklıyoruz.

2. Şablon sayfasında herhangi bir kodun olduğu yere tıklayın ve "CTRL+F" tuşlarına basın.
3. Gelen arama kutusuna "</head>" kelimesini yapıştırıp arayın.
4. Aşağıdaki kodu "</head" etiketinin üzerine yapıştırın.

<!--Resimli Benzer Yazılar Eklentisi Script ve Stil Kodları Başlangıcı-->
<!-- kaldır--><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts{float:left;width:auto;}
#related-posts a{border-right: 1px dotted #eaeaea;}
#related-posts a:hover{background: #f2f2f2;}
#related-posts h2{margin-top: 10px;background:none;font:18px Oswald;padding:3px;color:#999999; text-transform:uppercase;}
#related-posts .related_img {margin:5px;border:4px solid #f2f2f2;width:100px;height:100px;transition:all 300ms ease-in-out;-webkit-transition:all 300ms ease-in-out;-moz-transition:all 300ms ease-in-out;-o-transition:all 300ms ease-in-out;-ms-transition:all 300ms ease-in-out;}
#related-title {color:#222;text-align:center;padding: 0 10px;font-size:14px Oswald; line-height:16px;text-shadow:0 2px 2px #fff;height:28px;width:100px;}
#related-posts .related_img:hover{border:4px solid #E8E8E8;opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}</style>
<script type='text/javascript' src='http://helplogger.googlecode.com/svn/trunk/relatedposts.js' />
<!-- kaldır--></b:if>
<!--Resimli Benzer Yazılar Eklentisi Script ve Stil Kodları Sonu-->

Not:
- Resimlerin genişliğini ve yüksekliğini değiştirmek için kırmızı renkteki 100px değerlerini değiştirin.
- Benzer yazılar başlığının rengini ve boyutunu değiştirmek için mavi renkli değerleri değiştirin. 
- Benzer konuların ana sayfada da gösterilmesini istiyorsanız mor renkli olan kısımları kaldırın.


5. Şablonu kaydetmeden önce "<div class='post-footer'>" kodunu arayın. Aramanızı ikinci kez bulunduğunda bitirin. 
6. Aşağıdaki kodu, yukarıdaki aramanın sonucunda bulduğunuz etiketin üstüne yapıştırın.

 <!--Resimli Benzer Yazılar Eklentisi Başlangıcı-->
<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>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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=5&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle=&quot;<b>BENZER KONULAR:</b>&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div class='clear'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://helplogger.blogspot.com'><img alt='Blogger Tricks' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwSeWE9fPKMWFKNJmfpmkJ-ddKqce4j6r3CanflBP9884stKKwpwPidEW99gjNWi7Kzja5JQmIIfhaUjKa-8iAbK6VFNFCKRV5CbZk1dG1CsnOm0T7U1EdIe5Fp5p8WQTYxUYA9NfBGcic/s1600/best+blogger+tips.png'/></a>
</b:if></b:if><!--Resimli Benzer Yazılar Eklentisi Sonu-->

Not:
- Gösterilecek olan yazı sayısını değiştirmek için maxresults=5; değerindeki 5 yerine istediğiniz sayısı yazın. 

- Benzer konuların ana sayfada da gösterilmesini istiyorsanız mor renkli olan kısımları kaldırın.

7. Şablonu kaydedin.

Hayırlı olsun...