Blogger Benzer Yazılar Eklentisi

Benzer yazılar eklentisi, blogunuzdaki ziyaretçilerin hem diğer yazılarınızı okumaları, aynı kategori içerisindeki yazılarınızın dikkat çekmesi ve okunması açısından önemli bir etkendir.

Örneğin, siz blogunuzda Java dersleri yayınlıyorsunuz ve bu dersleri Java Dersleri etiketi altında topluyorsunuz. Sitenize bir arama motorundan gelen ziyaretçi ise Java içerisinde if ' in kullanımını merak etmekteydi, bu yolla arama motorundan sitenize rastladı ve girdi. Bu ziyaretçi demekki Java konusundan yararlanmak istiyor ve sitenizde başka Java dersleri de var. Bir şekilde ziyaretçinin ilgisini en kolay yoldan çekebilmeniz lazım ve bu durumda devreye benzer yazılar eklentisi girmekte.

Geçelim bu eklentinin blogunuza nasıl ekleneceğine...

• Öncelikle blog sitenize giriş yapın ve sol tarafta bulunan menülerden Şablon sekmesine gelin. Şablon kısmında sitenizin tasarım kodları yer almakta. Biz burada yazı altında kullanmak üzere benzer yazıların eklentisinin kodlarını gerekli yerlere ekleyeceğiz.

• Şablon sekmesine geldikten sonra ekranda yer alan HTML'yi Düzenle butonuna tıklayın ve kod sayfasının içeriğinin açılmasını bekleyin. 3-5 saniye sürebilir.

• Evet, kod bölümümüz açıldığına göre artık gerekli eklemeleri yapabiliriz. Öncelikle kod editöründe herhangi bir yere tıklayıp klavyenizden Ctrl+F kombinasyonunu gerçekleştirin ve sol üstte açılan boş text alanına </head> kodunu aratın. Bu kod bulunduktan sonra kodun üzerine bir satır açın ve oraya şu kodları yapıştırın : 

<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: 1.6em; font-weight: bold; color: black; font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif; margin-bottom: 0.75em; margin-top: 0em; padding-top: 0em; } #related-posts a{ color:black; }
#related-posts a:hover{ color:black; }
#related-posts a:hover { background-color:#d4eaf2; }
</style>
<script type='text/javascript'> var defaultnoimage="http://i39.tinypic.com/2n67qx5.jpg"; var maxresults=4; var splittercolor="#d4eaf2"; var relatedpoststitle="Benzer Yazılar";
</script>
<script src='http://www.weebly.com/uploads/2/2/1/0/2210502/related-posts.js' type='text/javascript'/>
</b:if> 

• Bu yapıştırdığımız kodlar, benzer yazılar eklentisi için gereken CSS ve JavaScript kodları. Üzerlerinde oynamalar yaparak kendi temanıza ve istediğiniz uygun görünüş haline getirebilirsiniz. Şimdi yapmamız gereken bir işlem daha var. Bu sefer gerekli olan HTML kodlarını, kodlarımızın arasında yazı alanının footer yani alt kısmını bulmamız gerekli. Bunun için yine Ctrl+F yapın ve bu sefer <div class='post-footer-line post-footer-line-1'> kodunu aratın, bu kodun altına da şu alttaki kodları ekleyin : Bu koddan bir kaç tane çıkabiliyor bazen, o yüzden sırayla deneyerek doğru olanı bulmalısınız.

<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><div style='clear:both'/> <!-- kaldır --></b:if> <b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'> <a href='http://blogger-hakkinda.blogspot.com/2012/08/blogger-resimli-benzer-yazilar-eklentisi_12.html' style='display:none;'>Resimli Benzer Yazı Ekleme</a><a href='http://blogger-hakkinda.blogspot.com' style='display:none;'>blogger yardım</a> </b:if></b:if> 

İşlemimiz bu kadardı. Yapamadığınız veya takıldığınız kısımlar olursa, yorum yazınız. Mutlaka bildiğim yerlerde yardımcı olurum.