Widget Artikel Terkait Sederhana Untuk Blogspot

Dengan terpasangnya widget ini, akan memudahkan pengunjung blog untuk membaca artikel yang juga bersangkutan dengan artikel yang sedang dibaca nya.
Kali ini saya akan memberikan widget ini dengan tampilan yang sederhana, apabila anda ingin lebih cantik tampilannya, silahkan di lakukan experimen sendiri pada bagian CSS nya.

Langkah Langkah Pemasangannya

1. Masuk Dasboard lalu pilih Template dan pilih Edit HTML
2. Cari kode ]]></b:skin> atau </style>
3. Salin kode dibawah ini dan letakkan diatas / sebelum kode tersebut

/* ==== Related Post Widget Start ==== */

.artikel-terkait {
  margin:2em auto 0;
  font:normal normal 11px/1.4 Arial,Sans-Serif;
}
.artikel-terkait h4 {
  font-size:150%;
  margin:0 0 .5em;
}

/* ==== Related Post Widget End ==== */

4. Cari kode <div class='post-footer'>
4. Salin Javascript dibawah ini dan letakkan dibawah kode yang anda temukan tadi

<!-- Related Post Widget Start -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <div id='artikel-terkait' class='artikel-terkait'/>
  <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;Artikel Terkait:&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: false,
      moreText: &quot;Read More&quot;,
      widgetStyle: 1,
      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 -->

Pratinjau Template anda, apabila tidak ada kesalahan lanjutkan dengan Simpan Template.

Sumber : DTE:]