RESİMLİ BENZER YAZILAR EKLENTİSİ

Blog Hocam'da görüp beğendiğim resimli benzer yazılar eklentisini tabiki kaynak göstermeyi unutmadan burada paylaşmak istedim. Çoğu blogger yazarı için gayet kullanışlı bir eklenti. Blog Hocam yazarı Serdar Kara kendisinin de kullandığı bu eklentiyi paylaşırken birçok blog yazarının LinkWithin widgeti içindeki bağlantı adresinden rahatsız olduğunu ve bu sebeple kendisinden bağlantısız, sade bir resimli benzer yazılar kodu paylaşmasını rica ettiklerini söylüyor. Ki bence bunda haklı. Ama yine de emeğe saygı felsefemiz gereği (dünya çapında ün yapmış birçok popüler blog site dahi kullandıkları kodlamalarda kaynak belirtiyorlar) böyle bir şeyin gereksizliğine değinmeden de edemeyeceğim.

Benzer Yazılar biz blog yazarları için vazgeçilmez bir nimet. (Bu konu hakkında daha önce bir yazı yazmıştım.) Kullanıcı okuyup da beğendiği yazıyla alakalı başka bir yazının başlığını hemen altta görünce iç güdüsel olarak tıklamak isteyecektir. Bu sayede hem diğer yazıyı okuyacak hem de site içinde bulunma süresini ve amacını uzatacak. Unutulmamalı ki hedeflerden biri ziyaretçiyi siteye bağlamak ve ziyaretçiyi sitede uzun süre tutmaktır.

Elbette bunu ne kadar görsel şova dönüştürürsek işin zevki o kadar artıyor. Bir nevi yatırım gibi düşünelim. Benzer yazılarımızı resimli yaparsak daha hoş bir görüntü ortaya çıkar. Hele bir de flash hale getirip boyutlandırılmış bir görsellikle sunduğumuzu hayal edersek, değmeyin keyfimize :)

Şimdi gelelim kodlarımıza.

Öncelikle Şablonumuzu açıp 

</head>

kodunu buluyoruz ve hemen üstüne aşağıdaki kodları aynen ekliyoruz.

<!--Resimli Benzer Yazılar Eklentisi Stiller Ve Scriptler Başlangıcı--> 
<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: #F1921A; 
font-family: Times New Roman; 
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:none; 
border: 1px solid #ddd 
} 
</style> 
<script type='text/javascript'> 
var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHUGggI_l4grYrJblvwHaE_Qzad4-JBNYW3zSiG2JN7ktO4AQstw25kuA9XmIWJZQxc1RWakwF6xyiHoHZA0ZSUb_xTJ0Bqs105khlLrSJixuQw9zkq5DDitrd0OmU581tRa_YpMDHKac/s72/no-image.PNG&quot;;
var maxresults=5; 
var splittercolor=&quot;#E6E7E8&quot;; 
var relatedpoststitle=&quot;Benzer Yazılar:&quot;; 
</script> 
<script src='http://dl.dropbox.com/u/60346665/resimli-benzer-yazilar.js' type='text/javascript'/> 
<!-- remove --></b:if> 
<!--Resimli Benzer Yazılar Eklentisi Stiller Ve Scriptler Bitişi-->

Yukarıdaki kodu ekledikten sonra vakit kaybetmeden şu kodu arayıp bulun:

<div class='post-footer'>

ve hemen altına aşağıdaki kodları eklemeyi unutmayın.

<!-- remove --><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'/> 
<!-- remove --></b:if>

İşimiz bitti. Kaydedip blogunuza dönüp bakın işe yaramış mı diye! Bir sorun olursa, beklemediğiniz bir problemle karşılaşırsanız ben buradayım. Ben olmasam da bloghocam.blogspot.com adresini ziyaret edip Serdar Kara'ya sorabilirsiniz.

Kolay gelsin :)