Cara Membuat Related Posts Valid HTML5

Related post (artikel terkait) dipasang dengan tujuan agar pengunjung blog bisa melihat postingan kita yang lain, sehingga ini juga bisa berpengaruh pada pageview blog, sehingga pageview blog akan lebih tinggi. Dengan memasang related posts, katanya juga bisa mengurangi bounce rate, sehingga akan berpengaruh baik di SERP.

Sebenarnya ada beberapa faktor yang bisa kita gunakan untuk  mengurangi bounce rate, di antara yaitu kecepatan loading blog, navigasi, kualitas konten, dan lainnya. Nah, untuk membantu mengurangi bouce rate, sebaiknya blog Anda di pasang related post (artikel terkait).

Apalagi related post ini sudah Valid HTML5, saya dapatkan related post ini di blog kang ismet. Sekarang sedang zamannya valid HTML5 jadi jika Anda berminat tinggal pasang related posts ini saja, berikut ini demonya :

Gambar dari Blog.kangismet.net

Related posts ini ditemukan jika postingan itu di Label (kategori) yang sama, sehingga ini juga membuat pengunjung tidak segera pergi keluar dari blog kita. Dan jika anda tertarik menerapkan Related Posts Valid HTML5, berikut tutorialnya.

Cara Membuat Related Posts Valid HTML5

1. Dashboard  > Template > Backup template terlebih dahulu, bertujuan untuk mengantisipasi kesalahan. > Edit HMLT

2. Letakan kode dibawah ini di atas ]]></b:skin>

#related-post background:none;width:100%;margin-top:35px;margin-bottom:10px;padding:5px 0 10px 0px}
#related-post h4{font-size:150%;text-transform:uppercase;margin:0 0 15px;padding:0;font-weight:normal}
#related-post li{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhnxsnHFp_uupswrkZyLMuF0vE2HuPQmsUlLV5SsqRhRAwCzdCiJIiaRqBBNfEYD0y20HeixHINmb2i47b8CKbZXjur_UJNUZrytFo04QhFJNBAvXYNcgK3YnKmnCApH9cxcXoKQxM9FW6/s1600/bullet.png) no-repeat 1px 5px;color:#2c3e50;text-indent:0;line-height:1.6em;margin:0;padding:0 0 3px 19px}
#related-post .widget{margin:0;padding:0}
#related-post ul{list-style:none;margin:0;padding:0}

3. Tambahkan kode ini dibawah <div class='post-footer-line post-footer-line-1'>

<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;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 type='text/javascript' src='https://kang-is.googlecode.com/svn/trunk/javascript/related-post.min.js'/>
</b:if>

4. Simpan template, dan lihatlah bagaimanya hasilnya.

Dan insyaallah lain kali saya akan bagikan related posts dengan gambar (Thumbnail), semoga cara ini bisa mengurangi bounce rate blog Anda.

Tweet