Blogger Benzer Yazılar Widget’i Stil 4

Blog yazılarınızın altında Linkwithin benzeri (Related Posts) Bunlarda ilginizi çekebilir posts yazılarınızı imleç üzerine geldiğinde ters çevirerek yazı başlık ismini resmin arkasında gösteren Related Posts İlgili mesajların farklı versiyonu. 2015 senesine çok kısa bir süre kaldı. Bu süre içinde birçok site Benzer yazılar eklenti kendilerine yük getirmesinden dolayı uygulamalarını kaldırmaya başlayarak okuyucu pörtföyüne e-posta yolu ile mesaj göndererek Aralık 2014 tarihinden itibaren Benzer yazılar Related Posts App’lerinin artık çalışmayacağını bildiriyor. Dolayısı ile artık blog yazılarınızın altında Linkwithin benzeri farklı uygulamalar çalışmayacak. Maalesef üzülerek sizlere belirtmek isterim ki! Birkaç gündür bu konuda yazı yazıyorum. Böyle önemli bir konuya yaklaşım gösterip de soru soran, Sevdaninsokagi.blogspot yemek kategorisinde yazı yazan ve admin yazar arkadaşımız Sn. +Sevda Şen Ünsev hanfendiye, göstermiş oldukları araştırmacı ruh ve ilgisi için çok teşekkür ederim.
Tüm yazar arkadaşlara bir kez dah hatırlatmak istediğim konu ; Related Posts ilgili mesajlar eklentisi tüm özel tema tasarım ve Blogger varsayılan şablonlarında kullanılmakta olduğudur. DEMO

Related Posts  eklenti kurulum aşamaları :

Öncelikle her türlü hatalara karşı önlem olarak blog’unuzun bir yedeğini alın. Blogger yedek alma ile ilgili konuyu ;

Related Posts Widget Stil 4 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> )
]]></b:skin>
3. Bulduğunuz bu etiketin hemen üstüne aşağıda verilen CSS kodlarını kopyalayıp yapıştırın.
CSS kodlarını yapıştırdıktan sonra blog’u kaydedin.
/* ==== 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;
}

/* Style 5 */
.related-post-style-5,
.related-post-style-5 li {
  margin:0;
  padding:0;
  list-style:none;
  word-wrap:break-word;
  overflow:hidden;
}
.related-post-style-5 .related-post-item {
  display:block;
  float:left;
  width:110px;
  height:auto;
  padding:10px;
  border-left:1px solid #eee;
}
.related-post-style-5 .related-post-item:first-child {border-left:none}
.related-post-style-5 .related-post-item-wrapper {
  display:block;
  position:relative;
  overflow:hidden;
}
.related-post-style-5 .related-post-item-thumbnail {
  display:block;
  margin:0;
  width:110px;
  height:110px;
  max-width:none;
  max-height:none;
  background-color:transparent;
  border:none;
  padding:0;
}
.related-post-style-5 .related-post-item-tooltip {
  display:block;
  background-color:black;
  background-color:rgba(0,0,0,.9);
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  padding:10px;
  line-height:normal;
  font-style:italic;
  color:white;
  overflow:hidden;
  display:none;
}
.related-post-style-5 .related-post-item:focus .related-post-item-tooltip,
.related-post-style-5 .related-post-item:hover .related-post-item-tooltip {display:block}

/* ==== Related Post Widget End ==== */
4. Blog şablanlarında arayacağımız 2. kod birkaç tane olduğundan dolayı sizin bulduğunuz kodun hemen üst kısmında şu etiket ve kodlar vardır. Bu kodları görüyorsanız doğru yerdesiniz.
“ post.hasJumpLink ”
5. Şimdi aşağıda verilen etiketi aratın.
<div class='post-footer'>
6. Bulduğunuz etiketin üst kısmında 4. maddede anlatılan (post.hasJumpLink) etiketi 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: 4,
      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: 5,
      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 -->

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.
Not: Resim ebadını değiştirdiğinizde, CSS kodlarında bulunan width:110px; iki yerde mevcut,  height:110px; değerlerini de değiştirin. Bu değerleri değiştirmezseniz CSS doğru çalışmaz.
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ı, olarak değiştirilmiştir. Kod içinde Türkçe yazılı olduğundan siz istediğiniz bir isim ile değiştirebilirsiniz. Bu anlatım için geçerli değildir.
Anlatımlar devam edeceğinden yukarıda açıklanan konular Genel olarak yazılmıştır. Siz eklentide kullanabileceğiniz kısımları değerlendirin.
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 ⇒ Related Posts hakkında ilgili diğer yazılar.