03 Ekim 2009

Resimli Benzer Yazı Konusu Güncellenmiştir.

Blogger Yardım konularına Yazı Sonuna Eklenebilen ve Kişiselleştirilebilir Resimli Benzer Yazılar özelliği ile devam edelim. Birçok sitenin kullanmakta olduğu Benzer Yazılar (Related Posts) özelliği, ziyaretçilerin blogda dolaşımını kolaylaştırmak için birebir. Resimli benzer yazıların önerilmesi daha ilgi çekiçi. Linkwithin sitesinin sunmuş olduğu özelliğin çalışma mantığı ile birebir çalışan dahası isteğe bağlı değişikliklerinde yapılabilmenize olanak sağlayan bu özelliği beğeneceğinizi tahmin ediyorum.

Blogger temanızada adapta etmeniz gayet kolay. Yapmanız gerekenler şöyle;

1. Adım: Kumanda Paneli > Yerleşim > HTML Düzenle yolunu izleyin ve Widget Şablonlarını Genişlet kutucuğuna tıklayın.
Ardından CTRL+F tuşları yardımı ile temanızda </head> kodunu bulun.

2. Adım: Bulmuş olduğunuz bu kodun üst satırına alttaki kodu yapıştırın;
<!--Benzer Yazi Baslar-->
<!-- kaldır --><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=6;
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'/>
<!-- kaldır --></b:if>

<!--Benzer Yazi Biter-->

3. Adım: Ardından temanızda alttaki kodu bulun;
<div class='post-footer-line post-footer-line-1'>
Bu kodu temasında bulamayanlar şu şekilde de arama yapabilirler;
<p class='post-footer-line post-footer-line-1'>

4. Adım: Bulmuş olduğunuz koddan hemen sonra alttaki kodu bir alt satıra yapıştırın;
<!-- Benzer Yazi Kodu Baslar -->
<!-- kaldır --><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://takipteyiz.blogspot.com/2009/10/blogger-yardim-yazi-sonuna-resimli.html' style='display:none;'>Resimli Benzer Yazı Ekleme</a><a href='http://takipteyiz.blogspot.com/' style='display:none;'>blogger yardım</a>
</b:if></b:if>

<!-- Benzer Yazi Kodu Biter -->

5. Adım : Yukarıdaki kodda isteğe bağlı olarak şu değişiklikler yapılabilir. Bunlar;

Benzer Yazılar yazısını istediğiniz şekilde değiştirebilirsiniz.

► Yazıların altında görüntülenmesini istediğiniz benzer yazı sayısını değiştirmek için;
max-results=6;
kodunda yer alan sayısı değiştirebilirsiniz.

► Resimsiz yazılarınızda yandaki gibi bir resim görüntülenecektir. Bu resmi değiştirmek ilk kodda yer alan http://i39.tinypic.com/2n67qx5.jpg adresinin yerine kendi tasarladığınız resme ait link adresini yapıştırmanız yeterli.

► Ayrıca yine ilk kodda yer alan .js uzantılı dosyayı (http://www.weebly.com/uploads/2/2/1/0/2210502/related-posts.js) indirin ve .js yükleyebileceğiniz bir siteye yükleyin. Yükleme için şu yazıdan yardım alabilirsiniz.

► Ayrıca her iki kodda yer alan mavi renkli kodlar yazının sadece yazı sayfasında görüntülenmesini sağlar. Eğer her yerde görüntülenmesini istiyorsanız mavi kodları kaldırabilirsiniz. Ya da istediğiniz sayfada gösterebilmek için Hangi Sayfada istersen o sayfada Eklentini Göster yazısından faydalanabilirsiniz.

Takip Listem'de de kullanmaya başlamıştım ama artık farklı bir eklenti kullanıyorum.

Fikirleriniz önemli, lütfen yorumlar kısmında görüşlerinizi belirtin.

Kolay Gelsin...

Kaynak: BP
Yorum
Zottirik.COM dedi ki...
çok güzel olmuş yazı eline sağlık
asssortic dedi ki...
Bütün aşamaları yaptım ama yine de olmadı.bir yerde yanlış yapıyorum ama nerde
Sade dedi ki...
Eğer tüm adımalrı sırasıyla yaptıysanız olmuş olması lazım. birkez daha dener ve hangi kısımlarda sorun yaşadığınızı daha detaylı anlatabilirseniz yardımcı olabilirim.
frankov dedi ki...
Benim temada 3. adımda yer alan iki kodda yer almıyor...
El atarsanız sevinirim.
JOHN DOE dedi ki...
konuyla ilgili bir çok sitede ki açıklamalara göre denemiştim olmamıştı. Şimdi oldu, teşekkürler.
Sade dedi ki...
Frankov, temanızda 3. adımda verilen kod yer alıyor. post-footer-line şeklinde aratın tüm kodu göreceksiniz ;)
Mucize iksirler dedi ki...
Paylaşım için teşekkür ederim. Sitemde uyguladım. Çok güzel oldu.
arananfms dedi ki...
selam

temamda post-footer-line yok bunu alternatifi var mı?
Sade dedi ki...
Açıkcası ana temalarda var olup olmadığını kontrol etmedim ancak benim temamda var. <span class='post-icons'>
<!-- email post links -->

üstteki kodun üstüne de yerleştirilebilir.

Eğer temanızda buda yoksa daha müsait bir zamanımda sizin blogunuzu inceleyip en uygun yeri söyleyebilirim...
incesticide dedi ki...
dediklerini yaptım harfiyen olmadı
yaparken kaydederken hiçbir sorun çıkmadı
http://boddahnirvana.blogspot.com/
Sade dedi ki...
Anlattığım şekilde yapabilirsiniz. Farklı temalarda bu şekilde uyguladım.
Sanırım 3. ve 4. maddelerde bir hata olmuş. 3. maddeden sonrasını lütfen daha dikkatli şekilde uygulamaya çalışın... Kolay gelsin...
Sade dedi ki...
Şuan sitenizde sorunsuz görüntüleniyor. Güle Güle Kullanın...
Mesut Tok dedi ki...
bütün adımları sorunsuz bir şekilde yaptım ve kaydettim.şimdi yazımın altına bu tür benzer yazılar otomatik olarak mı eklenecek yoksa bişeyler yapmam mı gerekiyor.yardımcı olursanınz sevinirim...
Sade dedi ki...
Merhaba Mesut, eğer yazılarında etiket kullanıyorsan otomatik olarak yazılarının hemen altında görünütlenmeye başlayacaktır.
kucuksheyler dedi ki...
bilgiler için çok teşekkür ederim. daha önce linkwithin kullanıyordum, sayfanın yüklenmesi oldukça uzun sürüyordu. onu kaldırıp bunu uyguladım, şimdi daha iyi. ancak öğrenmek istediğim birşey daha var. "benzer yazılar" başlığının rengini değiştirmek mümkün mü? siyah olmasını istemiyorum. kodların arasına renk kodu eklemeye çalıştım, beceremedim. bu konuda bilgi verebilirseniz çok sevinirim.
Sade dedi ki...
Alttaki CSS kodunda yer alan; Color: black;
yazan yerde black erine istenilen renk adı yazılara değiştirilebilir;)

#related-posts h2{
color: black;


kolay gelsin....
kadir dedi ki...
süper oldu teşekkürler
kadir dedi ki...
eski temamda güzel oluyoduda yeni tema da yazıların üstünde görünüyor ???
Sade dedi ki...
alttaki kodu bir alt satıra yapıştırın uyarısını yanlışlıkla üstüne yapmış olabilir misin?
kadir dedi ki...
hayır benimde aklıma geldi tekrar denedim aynı hata
Sade dedi ki...
Normalde bulunması gereken kod, yazının sonunu tanımlıyor. Ancak senin temada etiketlerin bulunduğu yazı başlık alanının altını işaret ediyor.

Temanın kodlarını, temayı yazan kişi, kendine özgü değiştirmiş. Yazı sonunda bulunan addthis tuşlarının olduğu yere yapıştırılması gerekiyor kodların. <div class='post hentry uncustomized-post-template'> yerine eklenebilir. Ancak olmazsa temanın bir yedeğini bana gönder senin için eklerim. Zira benim şuan temanın kodlarını %100 görebildiğim söylenemez.
m d dedi ki...
Mrb cok guzel bi eklenti, linkwithin gibi anasayfayi fazla isgal etmiyor ama ben tum yonergeleri izlememe ve uygulamama ragmen blogda bu eklentinin calistigina dair bir emare goremedim. Hicbir adimda bi hata olmadi ama nedenini de cozemedim calismamasinin. Yardimci olabilirsen sevinirim.

Adresim: www.ihtiyarceviz.com
Sade dedi ki...
Adresinizi kontrol ettim yazıların altında benzer yazılar şuan görüntüleniyor. Dediğiniz gibi sorunsuz yüklemişsiniz. Örnek resim; http://i43.tinypic.com/2earojl.jpg
m d dedi ki...
Cok tesekkur ederim ilgilendiginiz icin ama linkwithin de dolu doluydu o kisim simdikinde cogu konuda hic gorunmuyor, gorunse de bir iki tane. Bu js dosyasindan mi kaynaklaniyor. Bunu nasil duzeltebiliriz acaba, bi oneriniz varsa paylasmanizi isterim, tekrar tesekkurler..
Sade dedi ki...
Eğer etikete ait yeterli yazı varsa --var maxresults=6;-- kısmında yazan yerdeki sayı kadar yazı göstermesi gerekiyor. Daha güne kadar bu özelliği kullanıyordum blogumda sorunsuz şekilde gösteriyordu. Acaba .js dosyası yenileyerek deneseniz nasıl olur diye düşündüm üstün körü; http://blogergadgets.googlecode.com/files/relatedthumbs21.js
Olmazsada artık detaylı br inceleme yaparım.
Sade dedi ki...
@m d: Yazıyı yeniliyorum. Biraz sabır lütfen. Uygulama hakkındaki yorumların / uyarın sayesinde yazıyı yenileyeceğim. Bunun için de sana ayrıca teşekkür ederim.
Sade dedi ki...
Yazı Güncellenmiştir. Deneme, test etme şansım olmadı umarım sorun çıkmaz, çıkarsa lütfen yorumlarda belirtin...
m d dedi ki...
Vallaha durmadan omuz silken sumuklu bebe rolunu oynamaktan hic memnun degilim ama 'lutfen yorumlarda belirtin' e guvenerek devam ediyorum. Dedigim gibi ayni sekilde devam ediyor. Ayni etikete sahip, ayni kelimelerin gectigi yazilar olmasina ragmen benim sitede cikmiyor. Kodlardan anlamiyorum ama linkwithin uzerinde oynanip (ana sayfada cikmasi engellense sadece yeter bana) sunulsa daha iyi olmaz mi?
Sade dedi ki...
Tamam onu da yaparız. Ancak olmaması için bir sebep yok gerçekten.

Linkwith 'i ekle. Sonra "Blogger Eklentilerinizi Sadece Anasayfada, Yazılarınızın Sayfasında ya da Arşiv Sayfalarında Nasıl Görüntüleyebilirsiniz?" yazımdan istediğin özelliği uygula ;)
designer dedi ki...
aslında yazan herşeyi yaptım ama olmadı 2. koddan iki tane var ikisinede yapıştırdım ama blogta hiçbir değişiklik yok daha önce bir çok bilginizden faydalanmıştım ama bunu beceremedim
altından başlayıp kadar kopyalayıp söylediğiniz kodun altına yapıştırıyorum.Kaydediliyor fakat blogta bi değişiklik yok.Yardımcı olursanız sevinirim.Şimdiden herşey için teşekkürler...
Sade dedi ki...
@designer: Merhaba uygulamayı blogunuzda kontrol ettim ve şuan sorunsuz çalışıyor. Başarıyla blogunuza Resimli Benzer Yazıları Eklemişsiniz.

Blogunuzda nasıl görüntülendiğini göstermek amaçı ile sitenizin bir ekran görüntüsünü aldım. Sizde alttaki resimden kontrol edebilirsiniz. http://i42.tinypic.com/mhg3ug.jpg

Not olarak hem de bilgi vermek için şu hatırlatmayı da yapmak isterim; Bu eklenti etiketlere göre yazı önerir, eğer sitenizde yayınlanan yazının etiketine dair 6'dan az sayıda yazı varsa, 6 tane benzer yazı önermesi beklenemez.
m d dedi ki...
Evet bu son yontem benim derdime derman oldu, tesekkurler..
Sade dedi ki...
@işe yaramasına sevindim, kolay gelsin ;)
nocturnal dedi ki...
Güzel eklenti yalnız doğru düzgün çalışmıyor örnek silgi etiketinde 20 yazım var maxresult 15 olduğu halde 5 veya 6 yazıyı gösteriyor. bunun benzeri diğer bir eklenti var gene küçük resimli yazıları alt alta sıralayan o doğru çalışıyor ne kadar gösmek istiyorsan gösteriyor.bunda bir sorun var. sorun giderilmedikçe pek işe yarar bir eklenti olmuyor. ne yapmam lazım 20 dediğim zaman 20 sinide göstermesi için. çalışmalarınızda başarılar dilerim
Altay93 dedi ki...
blogger chucky temasına eklenmiyor birde siz deneyin oluyormu? olursa nasıl yaptığınızı mesaj atın
muhaber dedi ki...
bu özelliği epeydir kullanıyordum. fakat artık ana sayfada bir yazı koyuyorum. ve anasayfada ve yazı sayfasında gözüksün istiyorum. bu haliyle sadece yazı sayfasında çıkıyor. hem anasayfada, hem de yazı sayfasında nasıl çıkar?

teşekkürler.
Melek ATİK dedi ki...
tam istediğim gibi oldu ..çook teşekkür ederim
VoSToK dedi ki...
usta süpersin paylaşım için teşekkürler
SailoursUn dedi ki...
thank you
Blogcu dedi ki...
birinci koddaki http://i39.tinypic.com/2n67qx5.jpg yerine kendi resiminizi ekleyip resmi değiştirebilirsiniz.
Adsız dedi ki...
Bu ne lan azkalsın site çoküyordu mal
Ahmet dedi ki...
bu js dosyası temanın içine nasıl gömülür..
okuyan dedi ki...
çoook teşekkür ederim... ne zamandır araştırıyordum nasıl yapıldığını, sayenizde oldu:)
Adsız dedi ki...
Çok İyi bir yazı :)
tv izle dedi ki...
Kendi sitemdede kullandım,çok güzel paylaşım olmuşi teşekkürler..
tv izle dedi ki...
cık yararlı bir paylaşım sagolun
3 film birden dedi ki...
merhaba. günlerdir deniyorum bir türlü beceremedim. benzer yazıların sadece yazıların altında görüntülenmesini istiyorum. kafayı yemek üzereyim, şablonu size göndersem yardımcı olabilir misiniz?
canlı tv dedi ki...
Denedim ve çok başarılı teşekkürler.