Cara Membuat Related Post Dengan dengan Gambar (Thumbnail) Keren di Blog - Versi 1

Related Post adalah suatu navigasi yang memungkinkan pengunjung untuk menjelajahi blog/website anda lebih lanjut dengan membaca artikel terkait. Pada suatu template yang terpasang di sebuah blog, ada template yang langsung meng-include-kan fitur ini, dan ada pula yang tidak. Jika template anda tidak terpasangkan Related Post/Artikel terkait, silahkan baca thread ini lebih lanjut.

Related Post/Artikel terkait adalah salah satu unsur penting yang mempengaruhi Search Engine Optimization (SEO) blog, percaya tidak percaya, navigasi yang satu ini dapat meningkatkan Pageview (PV) anda sebanyak 20-40%, angka ini akan semakin meningkat seiring dengan banyaknya artikel yang memiliki kesamaan topik di blog anda. Berikut adalah fungsi lain Related Post yang perlu anda ketahui:

1. Meningkatkan pageview (PV)
2. Mempercantik tampilan blog
3. Memfasilitasi pengunjung untuk mempermudah mereka mencari artikel lain yang memiliki kesamaan topik
4. Menjadi salah satu syarat yang harus dipenuhi blogger jika ingin menjadi publisher adsense (Kategori Navigasi)

Pemasangan related post sendiri tidak terlalu sulit, dimana anda hanya harus melakukan copy-paste pada script yang saya berikan dibawah ini.

Pada kesempatan kali ini, saya akan memberikan sejumlah script dengan berbagai style, mulai dari related post yang hanya memperlihatkan tulisan (judul) ataupun gaya yang menampilkan gambar. Jadi, silahkan pilih style related post yang sesuai dengan selera anda. Berikut adalah beberapa style related article yang kami sediakan:

Related Post Polosan

Style related post pertama yang ingin saya perkenalkan adalah Related Post polosan, dimana style ini adalah style paling ringan & responsive diantara semua style yang saya bagikan, namun sebagai gantinya, tampilan dari style ini dirasa tidak begitu menarik karena hanya menampilkan judul artikel terkait. Berikut cara pemasangannya:

Login ke Dashboard Blog Anda
1. Pilih menu Template--> Edit HTML

2. Tekan CTRL+F dan cari kode <data:post.body/>


3. Copy-paste script dibawah ini dibawah kode <data:post.body/>
    (biasanya kode tersebut lebih dari 2, silahkan pilih kode yang terakhir atau coba satu per satu)

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

4. Silahkan klik Pratinjau, jika sudah sesuai, klik Simpan Template


Tidak suka dengan Related Post versi Polosan? anda bisa mencoba ini :
Cara Membuat Related Post Dengan dengan Gambar (Thumbnail) Keren di Blog - Versi 2
Cara Membuat Related Post Dengan dengan Gambar (Thumbnail) Keren di Blog - Versi 3
Cara Membuat Related Post Dengan dengan Gambar (Thumbnail) Keren di Blog - Versi 4
Cara Membuat Related Post Dengan dengan Gambar (Thumbnail) Keren di Blog - Versi 5