Blog yayınlarının altında okuyucularınıza yazılarınızı öneren İlgili Mesajlar , ( Related Posts ) eklentisi, yatay resim, imleç yazı üzer...

...

Blog yayınlarının altında okuyucularınıza yazılarınızı öneren İlgili Mesajlar, (Related Posts) eklentisi, yatay resim, imleç yazı üzerine geldiğinde üstte açılan yuvarlak köşeli açılır pencere içinde link bağlantınızı gösteren bunlarda ilginizi çekebilir eklentisi. Blogger’un şablon kodlarına CSS stil ve yapılandırma kodlarını ekleyerek tüm yazılarınız için geçerli olan resim ve açılır yuvarlak köşeli link bağlantılı İlgili Makaleler Widget Stillerini kullanabilirsiniz. Related Posts ilgili mesajlar eklentisi tüm özel tema tasarım Blogger şablonlarında kullanılmaktadır. Related Posts eklenti kurulum aşamaları için önce blog’unuzun bir yedeğini alın. Blogger yedek alma ile ilgili konuyu ;

Okuyun ⇒ Blogunuzu iki şekilde yedekleyeceğinizi biliyormusunuz

Related Posts Widget Stil 3 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ğini kullanarak ş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 4 */
.related-post-style-4,
.related-post-style-4 li {
  margin:0;
  padding:0;
  list-style:none;
  word-wrap:break-word;
  overflow:visible;
  position:relative;
  outline:none;
}
.related-post-style-4 .related-post-item {
  display:block;
  float:left;
  width:125px;
  height:auto;
  padding:10px;
}
.related-post-style-4 .related-post-item-thumbnail {
  display:block;
  margin:0 0 10px;
  width:125px;
  height:125px;
  max-width:none;
  max-height:none;
  background-color:transparent;
  border:none;
  padding:0;
  -webkit-border-radius:0px;
  -moz-border-radius:0px;
  border-radius:0px;
}
.related-post-style-4 .related-post-item-title {font-weight:bold}
.related-post-style-4 .related-post-item-tooltip {
  border:1px solid #bbb;
  background-color:white;
  width:150%;
  text-align:center;
  position:absolute;
  bottom:100%;
  left:0;
  z-index:999;
  margin-bottom:-30px;
  padding:10px 10px 12px;
  -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-4 .related-post-item:last-child .related-post-item-tooltip {
  left:auto;
  right:0;
}
.related-post-style-4 .related-post-item-tooltip:before,
.related-post-style-4 .related-post-item-tooltip:after {
  content:"";
  display:block;
  width:0;
  height:0;
  border:10px solid transparent;
  border-top-color:inherit;
  position:absolute;
  top:100%;
  left:60px;
}
.related-post-style-4 .related-post-item-tooltip:after {
  border-top-color:white;
  border-width:9px;
  margin-left:1px;
}
.related-post-style-4 .related-post-item:last-child .related-post-item-tooltip:before,
.related-post-style-4 .related-post-item:last-child .related-post-item-tooltip:after {
  right:60px;
  left:auto;
}
.related-post-style-4 .related-post-item:last-child .related-post-item-tooltip:after {
  margin-left:auto;
  margin-right:1px;
}
.related-post-style-4 .related-post-item:focus {outline:none}
.related-post-style-4 .related-post-item:focus .related-post-item-tooltip,
.related-post-style-4 .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 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: 4,
      summaryLength: 370,
      titleLength: &quot;auto&quot;,
      thumbnailSize: 125,
      noImage: &quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC&quot;,
      containerId: &quot;related-post&quot;,
      newTabLink: false,
      moreText: &quot;Read More&quot;,
      widgetStyle: 4,
      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:80px; height:80px; değerlerinide 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. 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 okuyabileceğiniz yazılar.