Blogger benzer yazılar eklentisi

Blogger benzer yazılar eklentisi

Resimdede gördüğünüz gibi 10 tane benzer yazıyı etiketlere göre listeliyor. Efendim diğer benzer yazılar eklentilerinde olduğu gibi "Türkçe karakter sorunu" yada "Her etiketin ismini ayrı ayrı yazıp sıralaması" gibi bir derdi yok bu eklentinin. Yapmanız gerekenler aşağıda yer alan adımlar uygulamak olacak. Aslında eklediğiniz widgetin bir köşesinde reklam olacak diye düşünüyordum ama bundan vazgeçtim. İstediğiniz gibi reklamsız bir şekilde kullanabilirsiniz.

Benzer yazılar için adımlar

Zorluk:Orta derece

1Efendiler ilk önce temanıza bir script eklemeniz gerekecek. Ekleyeceğiniz bu scripti kendi hostunuza yüklemeniz gerekecektir. Blogger kullanan çoğu kişide host olmadığı malum ancak bunu dert etmenize gerek yok. JS dosyalarını ücretsiz yüklemek için izin veren siteler var. Ben sizin için buraya yükledim. Ancak burada her zaman kalıcı olmayabilir. Siz isterseniz kendi hostunuza yükleyip kullanın.

2Burada göreceğiniz kodları temanızın </head> kodunun hemen üstüne yapıştırın. Bu script kodunda yer alan js dosyasının yerine kendinize göre değiştirirsiniz.

<script src='http://yourjavascript.com/93119162210/benzer.js' type='text/javascript'></script>

3Scripti ekledikten sonra şimdi sıra benzer yazılar eklentisi görsel düzenlemesine.. Bir sonraki adımda ekleyeceğim kodların CSS düzenleme kodları bu adımda gördüğünüz kodlar. Ben size neyin neye yarayadığını söylüyorum. Sizde istediğiniz gibi düzenlemeler yapabilirsiniz. Toplu olarak kodu buraya yapıştırdım. Buradan kodu alıp sitenizin CSS bölümüne yani ]]></b:skin> kodundan önce ekleyin. Şimdi bu kodda neyin neye yaradığını söyleyeyim.

#related-posts { float : left; width : 540px; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 11px Verdana; }

Bu kodda görüğünüz birimlerin anlamlarını listeledim. İşte hepsinin anlamı;
float : left; sola yasla.
width : 540px; genişliği 540px olsun.
margin-top:20px; yukarından 20px aşağıda olsun.
margin-left : 5px; soldan 5px uzak olsun.
margin-bottom:20px; aşağıdan 20px yukarıda olsun.
font : 11px Verdana; yazı boyutu 11px ve türü verdana olsun.

Burada görüğünüz kodların benzerleri aşağıdada bulunacaktır. Tekrar açıklamayacağım. Bunları eklenti sitenizde bazı bölümlere göre sığmayıp kötü görüntü oluşturur diye ekliyorum. Yani lafı uzatmaya gerek yok.

#related-posts h2 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; }

Bu koddaki tüm birimlerin açıklaması bir önceki kod açıklamasında mevcut, o yüzden tekrarlamaya gerek yok. Bilmeniz gereken bu kod "benzer yazılar" yazısının özelliklerini düzenlemek için kullanılacak.

#related-posts a { text-decoration : none; }
#related-posts a:hover { text-decoration : none; }

Öncelikle bu kod benzer yazılar sekmesindeki linklerin görünümünü için kullanılacak. Yani bu CSS içinde en işinize yarayacak olanı budur diyebiliriz.
text-decoration : none; Linklerin dekorunun nasıl olacağını anlatıyor. None(yok) ile birşey tanımlanmamış isterseniz siz text-decoration buradan şekillendirebilirsibiz.

#related-posts ul{padding:5px; margin:0px; width:550px}
#related-posts ul li{padding:3px 0px 3px 0px; margin:0px; float:left; width:270px; list-style-position:inside; list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuKrWEXq1yaw1ZfDKAjQrkzsiE1VMNhqknM27qy_CvXQz_S8BP6gCdKiEiE8S6skD_HNz65hOMJKvmC2JkBUeOjIt1NgZq9g16r6hJsI0poxGtL0ePbfZZczEWscLGOgpxMWXGWUoi0Ts/'); list-style-type:none; overflow:hidden; height:16px;}

Bu kısımda oldukça önemli diyebiliriz. Burada listenin şeklini tanımlamış. Burada düzenlemeniz ve bilmeniz gereken yerler.
list-style-image:url('http:/.. Bu listenin diziliminde size istediğiniz resmi eklemenize yarayan kod. Buraya ufak iconlar ekleyerek görsellik sunabilirsiniz.
overflow:hidden; height:16px; Burada yüksekliği 16px olarak belirledim çünkü uzun başlıklar hiç hoş durmuyor. Yazınızın başlığı biraz uzunsa bir kısmı görünmeyecektir.

4Buradan sonra eklemeniz gereken tek şey yazı bölümüne benzer yazıları gösterme kodumuz. <data:post.body/> adlı kodu bulun. Tabii önce widget şablonunu genişletin. Daha sonra bu kodun altına şu kodları yapıştırın.

<b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<font face='Arial' size='3'><b>Benzer yazılar : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><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&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div></b:if>

Bu kodda görüğünüz <b:if cond='data:blog.pageType == "item"'> kodu ile benzer yazılarımızın sadece yazı sayfalarında görünmesini istedik isterseniz bu kodu ve sondaki b:if kodunu kaldırarak tüm sayfalarda gösterirsiniz.

Bu ekleyeceğin benzer yazılar ile sitenizdeki kullanıcılar için bir alternatif oluşturmuş olursunuz ve bu sayede daha fazla sayfa gezinimi ve süre ortaya çıkar. Siteniz için SEOadına yararlı olacağına eminim.
Kaynak:davuteraslan.blogspot.com