DavutErarslan 10 von 109Oy 5 Kritik
Merhabalar, uzun süreden sonra blogger eklentileri paylaşmaya başladım. Bu işede ilk önce Yeni tema çalışmaları an itibariyle başladı ! adlı yazıda gelen bir istek üzerine başlayayım dedim. Siteye eklediğim demosunu her yazının altında görebileceğiniz eklentinin görünümü şu şekilde olacak.



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

1 Efendiler 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.

2 Burada 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>


3 Scripti 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('http://lh3.ggpht.com/_cNpXRtRph18/S76dASm3WGI/AAAAAAAAEJg/AVmw4HhRdsk/rss.png'); 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.

4 Buradan 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 SEO adına yararlı olacağına eminim.

Bir kere Allah razı olsun demeniz kafidir, esen kalın.
bYdUyGuSaL dedi ki...

ya ben ikon ekleyemedim başına nasıl yapıcaz

http://kolaymuzik.blogspot.com/2011/06/serdar-ortac-hile-dinle.html

Nota ikonu koymam lazım her konun basına .s

Admin dedi ki...

Yazıdakileri aynen uyguladığın zaman olması lazım, hem neyi düzenlemen gereken zaten yazıyor yazıda nasıl olmadı ?

bYdUyGuSaL dedi ki...

malesef olmuyoo aynısını yaptm

bYdUyGuSaL dedi ki...

tmm sorunu buldum sendeki " işaretini kabul etmemiş kendim koyunca oldu.

kadir dedi ki...

Merhaba, kaç tane benzer yazı göstereceğini nasıl seçeceğiz? Bir de ben bu eklentiyi yazının altına eklediğimde etiketleri göstermiyor, etiketleri benzer yazılar: yazan yerin yanına arka plana atıyor. Ben etiketlerin gözükmesini istiyorum. Ne yapmalıyım?

Davut dedi ki...

max-results=5 buradaki 5 yerine istediğin sayıyı ekleyebilirsin.

AGA dedi ki...

eline sağlık

Furkan ÖZDEN dedi ki...

Teşekkürler.

Furkan ÖZDEN dedi ki...

Çok manyak oldu he, çok teşekkür ederim :)

Engelsiz Dünyam dedi ki...

En kısa zamanda deneyeceğim.Allah razı olsun.

KıranşaL XP dedi ki...

yeni tamalrda tek başına yok arkasında ve önğünde kodlar oluyo o yüzden eklediğimizde göstermiyo bunu nasıl halledebiliriz

Admin dedi ki...

Dostum ne dediğini anlamadım :/

personel alımı 2014 dedi ki...

Hocam bu benzer yazıları etikete göre değil de random rastgele edebilirmiyiz ? bi yardım et

Yorum gönderirken lütfen alakalı yorumlar yollayın.

Burada yer alan Haber7 haberleri ile güncel hayattan haberdar olun. Davut Erarslan haber eklentisi vardı önceden onu da bir ara eklerim.

Daha fazka haber için tıkla. Haber7 haberleri
blogger"