Bumerang - Yazarkafe

Blogger icin "Benzer Yazilar" Eklentisi-Resimli Benzer Yazilar Eklentisi

Daha önce Link Within ile blogunuza Resimli Benzer Yazılar Eklentisini nasıl kuracağınızı anlatmıştık.Link within ile benzer yazılar eklentisi ana sayfada ve ara sayfalarda görünmesi ayrıca resimlerin altında Link Within linkinin olması kötü bir görünüme sebep oluyordu.Şimdi ise sizlere Blogger Resimli Benzer Yazılar Eklentisini istediğiniz yerde gösterme(ister ana sayfada,isterseniz sadece tıklanan yazılarınızın altında) ve hiçbir reklam ve link olmadan sade bir görünümle  yayınlama imkanı verecek olan blogger resimli benzer yazılar eklentisini blogunuza nasıl ekleyebileceğinizi anlatacağız.
Öncelikle Blogger Resimli Benzer Yazılar Eklentisini bloguma neden ekliyeyim? diyorsanız.
1-Blogunuzu gelen ziyaretçi herhangi bir yazınızı okuduğunda yazı sonunda blogunuzda bulunan okuduğu yazıya benzeyen diğer yazılarınızada göz atacak.
2-Böylelikle yazılarınızın tıklanma oranı artacak
3-Ziyaretçiler blogunuzda daha fazla zaman geçirecek
4-Görsel açıdan blogunuza güzellik katıp kalitenizi yükseltecek bir eklenti.Kısacası faydalı gördüğüm bir eklenti, blogunuza eklemenizi tavsiye ederim.
Resimli Benzer Yazılar Eklentisini Bloguma Nasıl Uygulayabilirim?diyorsanız.
1.Adım: Blogger Hesabımızla giriş yapıyoruz.Kumanda Paneli>Tasarım>Htmlyi Düzenle yolunu takibediyoruz.Widget Şablonlarını Genişlet kutucuğunu işaretliyoruz.
2.Adım:Ctrl+F Yardımıyla kodlar içerisinde </head> kodunu aratıp buluyoruz.
3.Adım:Aşşağıdaki kodu bulduğumuz </head> kodunun hemen üstüne yani bir üst satırına yapıştırıyoruz.
<!--blogokulu.blogspot.com kod baslangici-->
<!-- 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>

<!--blogokulu.blogspot.com kod bitisi-->
4.Adım:Kodlar içerisinde aşşağıdaki kodu bulun
<div class='post-footer-line post-footer-line-1'>
veya
<p class='post-footer-line post-footer-line-1'>
5.Adım:Bulduğunuz kodun hemen alt satırına aşşağıdaki kodu yapıştırın.
<!-- blogokulu.blogspot.com kod baslangici -->
<!-- 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>

<!-- blogokulu.blogspot.com kod bitisi -->
Kodları yapıştırıp şablonumuzu kaydettikten sonra Resimli Benzer Yazılar Eklntimiz kullanıma hazır.
Kodlar İçerisinde Yapabileceğiniz Değişiklikler:
Burda vereceğim kodları kodlar içerisinde renkli olarak belirttim.
1-Benzer Yazılar:Resimli Benzer Yazılar Eklentimizin Başlık kısmı.Başlıkta görünmesini istediğimiz metni buraya yazabilirsiniz.(Benzer Yazılar,Bunlarda İlginizi Çekebilir,Şunlarada Bir Göz Atın gibi...)
2-max-results=6;Yazılarınızın altında görüntülenmesini istediğiniz Resimli Benzer Yazı Sayısını burdaki değeri değiştirerek ayarlayabilirsiniz.
3-http://i39.tinypic.com/2n67qx5.jpg:Resimsiz Yazılarınızda görüntülenmesini istediğiniz farklı bir resim varsa resim adresinizi buraya yazabilirsiniz.
4-Her iki kod içerisinde mavi renkle yazdığım kodlar benzer yazıların sadece tıklanan yazılarınızın altında görünmesini sağlar.Eğer ana sayfada ve her yerde resimli benzer yazılar eklentisinin görünmesini istiyorsanız mavi renkle yazdığım kodları kaldırmanız yeterli.
PAYLAŞ PAYLAŞ PAYLAŞ

BLOG OKULU

Merhabalar, 2012 yılından beri editörlüğünü yaptığım blogokulu.org sitesinde blogger kullanıcıları için gerekli olan bir çok bilgiyi bulabilrsiniz.Blogger temaları,blogger eklentileri ve blogger dersleri ile blog yazarlarına elimizden geldiğince yardımcı olmaya çalışıyoruz.

  • Image
  • Image
  • Image
  • Image
  • Image
    Disqus Yorumları
    Facebook Yorumları

7 yorum:

  1. Innocent_bonny12 Mart 2012 23:31

    Ben yapamadım. T.T

    YanıtlaSil
  2. denedim olmuyor 

    YanıtlaSil
  3. olmuyor 
    Şu kimliğe sahip birden çok widget bulundu: Navbar1. Widget kimlikleri benzersiz olmalıdır. diyor .yardmcı olur musun

    YanıtlaSil
  4.  kodlar içerisinde navbar1. isimli başka bir widgetiniz var, oyüzden böyle bir uyarı alıyorsunuz. kodlar içinde bu navbar1. i bulup navbar9. veya 10 gibi bir isimle değiştirirseniz sorun çözülür.

    YanıtlaSil
  5. SALİHA MATAR16 Ağustos 2012 15:57

    Allah bin kere razı olsun.Bu eklentiyi 1 haftadır başka sitelerden yapmaya çalıştım olmadı.Sizin sayenizde 1 kere denedim ve oldu :)) Üstümden büyük bir yük kalktı.O kadar ayrıntılı anlatmışsınız ki,benim gibi yeni başlayanlar için süper olmuş.Çok teşekkür ederim.Sizi takipeyim :)

    YanıtlaSil
  6. bu eklenti için yardım edermısınız 4. sıradakı bulamadım ..

    uzakdiyar_60@hotmail.com

    YanıtlaSil
  7. zaferkarademirnet2 Kasım 2012 18:34

    Hocam tüm adımları yaptım fakat kod çalışmadı. bi bakarsanız sevinirim 

    http://zaferkarademir.net

    YanıtlaSil

Belirtmek istediğiniz farklı konular varsa Burdan Yazabilrisiniz...