Cara Memasang Artikel Terkait di Samping Posting

Artikel terkait atau biasa disebut related post adalah sebuah widget untuk menampilkan artikel yang berkaitan mengenai kategori atau label dari postingan yang sedang di baca.

Tujuan dari pemasangan widget related post ini adalah memberi rekomendasi kepada pembaca, menambah jumlah pageviews, dan agar pengunjung betah membaca di web/blog kita.

Pemasang artikel terkait ini bisa di letakkan dimana saja, di bawah posting, di sidebar, di atas posting, dan di samping posting.

Dan yang akan di bahas kali ini adalah cara memasang artikel terkait di samping postingan. Untuk demonya bisa lihat disini

• Demo

Berikut Cara Memasang Artikel Terkait di Samping Posting

1. Masuk ke editor template
2. Cari kode ini <data:post.body/>, dengan cara menekan CTRL+F
3. Letakkan kode ini di bawah <data:post.body/>, jika ada empat letakkan yang ke tiga

<!-- Related Post Widget Start -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <div class='related-post' id='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;Artikel Terkait:&lt;/h4&gt;&quot;,
      numPosts: 5,
      titleLength: &quot;auto&quot;,
      containerId: &quot;related-post&quot;,
      newTabLink: false,
      widgetStyle: 1,
      callBack: function() {}
  };
  </script>
  <script src='https://kang-is.googlecode.com/svn/trunk/javascript/related-post.min.js' type='text/javascript'/>
  </div></b:if>
<!-- Related Post Widget End -->

4. Cari kode ]]></b:skin>, dan letakkan kode ini di atasnya

/*Related Post*/
#related-post {background: #FDFDFD;width: 250px;margin: 10px 0 20px 20px;float: right;border-top: 1px solid #C4C4C4;border-bottom: 1px solid #C4C4C4;padding: 8px 0px;}
#related-post h4 {font-size: 14px;margin: 0 0 0.5em;color: #000;padding: 0 0 5px 5px;font-weight: bold;position: relative;font-family: Oswald,Arial, Sans-Serif;text-transform: uppercase;border-bottom: 1px solid #C4C4C4;}
#related-post li {text-indent: 0;line-height: 1.6em;margin: 0;padding: 2px 0px;}
#related-post .widget{margin:0;padding:0}
ul.related-post-style-1 {margin: 0 0 0 20px;font-size: 14px;}

5. Simpan, dan lihat hasilnya

Catatan:

numPosts:5, ubah nilainya jika ingin menampilkan kurang atau lebih dari lima.

Dengan memasang artikel terkait ini pembaca bisa terbantu, artikel apa selanjutnya yang ingin di baca mengenai topik yang berkaitan. Semoga tutorial cara memasang artikel terkait di samping posting ini bermanfaat untuk teman-teman semua.