Blogger Bunlarda İlginizi Çekebilir Widget’i Stil 5

Blog yazı altında Linkwithin benzeri (Related Posts) Bunlarda ilginizi çekebilir posts yazılarınızı link olarak gösteren ve imleç üzerine geldiğinde pup-up açılır pencerede yuvarlak köşeli, yazıdan alıntı ve resim görselli Related Posts İlgili mesajlar eklentisi. Blogger, blog yazılarınızın altında kullandığınız Bunlarda ilginizi çekebilir eklenti uygulamasını birçok site artık çalıştırmayacak.
Benzer yazılar eklenti uygulamasını kamuya açık çalıştıran bu siteler artık, kendilerine yük getirmesinden dolayı uygulamalarını kaldıracaklar. Dolayısı ile; Aralık 2014 tarihinden sonra, Ocak 2015 sene başlangıcında Benzer yazılar Related Posts App’lerinin artık çalıştırılmayacağı bilgisi kullanıcılara bildiriliyor. Bu sorunu ortadan kaldırması için birkaç gündür farklı görünüm ve uygulamaları sizlere paylaşıyorum. Bugüne kadar sizler ile paylaştığım 5 ad. Related Posts ilgili makaleler, diğer kullanım ismi ile Bunlarda ilginizi çekebilir eklentileri, Blogger Özel Tema Tasarım bloglarında kullanılmakta olup, tüm veriler kendi blogunuzdan çekilmektedir. Bu neden ile farklı sitelerde farklı eklentiler arayışına girmenize gerek yok. Çünki başka bir eklenti mevcut değil. Yeni eklentimizin nasıl çalıştığını görmek için Adnan Güney klasik blog’umdan inceleyin.
Açılan sayfayı her yenilediğinizde etiketlere bağlı olarak farklı yazılar göreceksiniz. Yazı linki üzerine imleci yanaştırın pop-up açılan köşeleri yuvarlak, yazı başlığı, yazı açılmasını gösteren pencereyi kontrol edin. Eklentiyi kendi blog’unuzda kurmak için aşağıda anlatımı takip edin.

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 6 */
.related-post-style-6 li {position:relative}
.related-post-style-6 .related-post-item-thumbnail {
  width:80px;
  height:80px;
  max-width:none;
  max-height:none;
  background-color:transparent;
  border:none;
  padding:0;
  -webkit-border-radius:0px;
  -moz-border-radius:0px;
  border-radius:0px;
  float:left;
  margin:0 10px 0 0;
}
.related-post-style-6 .related-post-item-title {
  display:block;
  font-weight:bold;
}
.related-post-style-6 .related-post-item-summary {
  display:block;
  overflow:hidden;
  font-size:11px;
}
.related-post-style-6 .related-post-item-tooltip {
  position:absolute;
  top:100%;
  left:-10px;
  z-index:999;
  margin-top:10px;
  border:1px solid #bbb;
  background-color:white;
  padding:10px;
  width:90%;
  height:auto;
  -webkit-box-shadow:0 1px 3px rgba(0,0,0,.2);
  -moz-box-shadow:0 1px 3px rgba(0,0,0,.2);
  box-shadow:0 1px 3px rgba(0,0,0,.2);
  -webkit-border-radius:8px;
  -moz-border-radius:8px;
  border-radius:8px;
  display:none;
}
.related-post-style-6 .related-post-item-tooltip:before,
.related-post-style-6 .related-post-item-tooltip:after {
  content:"";
  display:block;
  width:0;
  height:0;
  border:10px solid transparent;
  border-bottom-color:inherit;
  position:absolute;
  bottom:100%;
  left:35px;
}
.related-post-style-6 .related-post-item-tooltip:after {
  border-bottom-color:white;
  border-width:9px;
  margin-left:1px;
}
.related-post-style-6 li: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: 5,
      summaryLength: 370,
      titleLength: &quot;auto&quot;,
      thumbnailSize: 80,
      noImage: &quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC&quot;,
      containerId: &quot;related-post&quot;,
      newTabLink: true,
      moreText: &quot;Devamı&quot;,
      widgetStyle: 6,
      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 5 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.