Blog yazı altında Linkwithin benzeri (Related Posts) Bunlarda ilginizi çekebilir posts yazılarınızı link olarak gösteren ve imleç üzerin...

...

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 ;

Okuyun ⇒ Blogunuzu iki şekilde yedekleyeceğinizi biliyormusunuz

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 -->