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 ;

Related Posts Widget Stil 3 kullanımı :

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 ”

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

İlgili Konular ⇒ Related Posts hakkında okuyabileceğiniz yazılar.