Blogger İlgili Makaleler Widget Stil 1

Blogger kullanıcıları için, yazı altında okuyucularınıza diğer yazılarınızı öneren İlgili Mesajlar, (Related Posts) gibi alt alta sıralanmış linklerden oluşan navigasyon Widget Stil eklentisi. Birçok sitenin ücretsiz sunduğu, Related Posts, ilgili mesajlar eklentisini durdurması ve hatta ücretli sunarak birde reklam ve kendi eklentilerini ön planda göstermesi üzerine biz ne yapabiliriz düşünce ile biraz araştırma yaptım. Bu araştırmalar sonucunda sizlere hergün farklı ilgili mesajlar veya diğer adı ile “Bunlarda ilgilizi çekebilir :”, Widget stillerini ücretsiz hiçbir bağlantı gerekmeyen tamamen kendinizin özelleştirebileceği kodları yayınlamayı düşündüm. Blog şablon kodlarınıza ekleyeceğiniz CSS stil ve yapılandırma kodlarını ekleyerek artık kimseye bağımlı kalmayacak tamamen özgürce istediğiniz gibi Blogger İlgili Makaleler Widget Stillerini kullanabileceksiniz. Daha önce, Blogger İçin Özel İlgili Mesajlar Eklentisi başlıklı yazımda ilk eklentiyi belirtmiştim. Bugünden itibaren sizler ile paylaşacağım Related Posts ilgili mesajlar şu anda tüm özel tema tasarım Blogger şablonlarında kullanılmaktadır. Arzu eden blog yazar arkadaşlarım Linkwithin benzeri bu kodları gönül rahatlığı ile kullanmaya başlayabilir. Uygulamaya başlamadan önce blogunuzu yedekleyin.

Related Posts Widget Stil 1 kullanımı :

1. Blogger kumanda paneline giriş yapın.
2. Şablon kodlarınızı açın. İmlecinizi kod içinde bir yere tıklayın ve CTRL + F arama özelliği ile şu etiketi bulun.
]]></b:skin>
3. Bulduğunuz bu etiketin hemen üstüne aşağıda verilen CSS kodlarını kopyalayıp yapıştırın.
/* ==== Related Post Widget Start ==== */

.related-post {
  margin:2em auto 0;
  font:normal normal 11px/1.4 Arial,Sans-Serif;
}
.related-post h4 {
  font-size:150%;
  margin:0 0 .5em;
}

/* ==== Related Post Widget End ==== */
4. CSS kodlarını yapıştırdıktan sonra blog’u kaydedin.
5. Blog şablanlarında arayacağımız 2. kod birkaç tane olduğundan dolayı sizin bulduğunuz kodun hemen üst kısmında şu etiket vekodlar vardır. Bu kodları görüyorsanız doğru yerdesiniz.
“ post.hasJumpLink ”
6. Şimdi aşağıda verilen etiketi aratın.
<div class='post-footer'>
7. Bulduğunuz etiketin üst kısmında 5. maddede anlatılan etiket varsa doğru yerdesiniz. Arama sonucu bulduğunuz etiketin hemen üstüne aşağıdaki kodları ekleyin ve blog’u kaydedin.
<!-- Related Post Widget Start -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <div id='related-post' class='related-post'/>
  <script type='text/javascript'>
  var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
          &quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
      </b:loop></b:if>];
  var relatedPostConfig = {
      homePage: &quot;<data:blog.homepageUrl/>&quot;,
      widgetTitle: &quot;&lt;h4&gt;Bunlarda ilginizi çekebilir :&lt;/h4&gt;&quot;,
      numPosts: 5,
      summaryLength: 370,
      titleLength: &quot;auto&quot;,
      thumbnailSize: 110,
      noImage: &quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC&quot;,
      containerId: &quot;related-post&quot;,
      newTabLink: false,
      moreText: &quot;Read More&quot;,
      widgetStyle: 1,
      callBack: function() {}
  };
  </script>
  <script type='text/javascript' src='http://blogger-json-experiment.googlecode.com/svn/resources/related-post/related-post.min.js'/>
</b:if>
<!-- Related Post Widget End -->
8. Tüm ağır işlemleri bitirdiniz. şablon kodlarınız açık iken üzerinde farklı değişikler yapabilirsiniz. Bu değişikler nelerdir aşağıda görelim. Öneri : Ayrıca eklediğiniz bu kodları bir metin dosyasında düzenleyerekte şablona ekleyebilirsiniz.

Related Posts Widget Stil 1 kodların özelleştirilmesi :

1. widgetTitle : “Bunlarda ilginizi çekebilir” farklı bir yazı ile değişebilirsiniz.
2. numPosts : Yazı altında görülmesini istediğiniz link sayısı.
3. summaryLength : Özet yazı uzunluğu
4. titleLength : Mesaj başlığı otomatik ayarlıdır.
5. thumbnailSize : Resminizin ebadını belirler. Değerleri temanızın genişliğine göre değiştirin.
6. noImage : Yazınızda görülmeyen resimlerin yerine çıkan otomatik resimdir.
7. containerId : Bu ayarı ellemeyin. Kod taşıyıcı ıd.
8. newTabLink : Yazı linkini yeni sekmede açan kod bağlantısıdır. False : linki yeni sekmede açar. True : Linki ana sayfa içinde açar. Tercih sizin. false ve true küçük harfle yazın.
9. moreText : Yazının, Devamını oku, anlamında olup ilk stil anlatımım da bu kodlardan bazılarını kullanamayacaksınız. Anlatımlar devam edeceğinden yukarıda açıklanan konular Genel olarak yapılmıştır.
Bir sonraki yazılarımda dikey, yatay, hover vs. gibi resimli Related Posts benzer yazılar eklentimiz de buluşmak üzere.
NOT: Kodlar üzerinde değişiklik yaparken lütfen tırnak işaretlerinin silinmemesine dikkat edin. Eklediğiniz kod çalışmıyorsa silin ve tekrar kaydedin. Ana sayfanızda kontrol ederken birkaç dk. bekleyin. Kısa bir süre sonra kodlar çalışmaya başlayacaktır.
İlgili Konular ⇒ Tema Tasarımı