Cara Memasang Artikel Terkait Di Tengah Postingan Blog

Selamat pagi, pada kesempatan yang baik ini admin akan membuatkan tutorial cara memasang artikel terkait di tengah postingan. Mengapa harus memasang fitur ini? Apa untungnya bagi blog saya? Tentu sangat menguntungkan.

Artikel terkait atau yang disebut juga dengan related post ini dibentuk dengan tujuan biar pembaca tidak hanya membaca hanya satu postingan anda, tetapi juga membaca postingan yang lain yang masih saling berkaitan. Hal ini tentu saja berdampak baik adalah bounce rate menjadi turun.

Sebenarnya widget yang satu ini sudah disediakan dibawah tombol share yang ada di bawah konten blog anda. Konsepnya sama, adalah menyajikan daftar artikel yang masih berkaitan dengan artikel yang sedang dibuat. Keterkaitan ini didasarkan menurut label postingan tersebut.

Dengan diletakkan di bab tengah, akan menarik perhatian pengunjung secara pribadi sehingga lebih tertarik untuk mengkliknya. Fitur ini digambarkan menyerupai di bawah ini :

Bagaimana cara memasangnya? Ikuti cara-caranya sebagai berikut :

Cara Memasang Artikel Terkait di Tengah Postingan

Back up dulu tema anda sebelum memulai tutorial ini !

Pertama, masuk terlebih dahulu ke akun blogger anda
Pilih tema, kemudian klik edit HTML
Cari instruksi <data:post.body/> (pilih yang kedua) dan ganti dengan instruksi di bawah ini :

 <div expr:id='&quot;post1&quot; + data:post.id'/>
  <div class='artikel-terkait'>
  <b:if cond='data:post.labels'>
  <b:loop values='data:post.labels' var='label'>
  <b:if cond='data:blog.pageType == &quot;item&quot;'>
  <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=3&quot;' type='text/javascript'/>
  </b:if></b:loop></b:if>
  <h4>Baca Juga Artikel Berikut Ini</h4>
  <script type='text/javascript'>
  removeRelatedDuplicates();
  printRelatedLabels();
  </script></div>
  <div class='artbody' expr:id='&quot;post2&quot; + data:post.id' itemprop='articleBody description'><data:post.body/></div>
  <script type='text/javascript'>
  var obj0=document.getElementById(&quot;post1<data:post.id/>&quot;);
  var obj1=document.getElementById(&quot;post2<data:post.id/>&quot;);
  var s=obj1.innerHTML;
  var t=s.substr(0,s.length/3);
  var r=t.lastIndexOf(&quot;&lt;br&gt;&quot;);
  if(r&gt;0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);}
  </script>

Selanjutnya buat style CSS biar tampilan menjadi lebih menarik dengan menaruh instruksi ini diatas instruksi </style>

 /*Artikel Terkait Ditengah postingan*/
  .artikel-terkait {position:relative;background:#fff;padding:0;margin:12px 16px 0 0;float:center;width:325px;border:1px solid #32BEFF}
  .artikel-terkait h4{background:#32BEFF !important;padding:4px 0 !important;margin:0;text-align:center !important;font-size:14px !important;font-weight:400;text-transform:uppercase;color:#fff !important}
  .artikel-terkait ul {margin:0;padding:0}
  .artikel-terkait ul li {list-style:none !important;padding:6px 0;margin:0 6px;border-bottom:1px dotted #482AEC;line-height:1.4em !important;text-align:left !important}
  .artikel-terkait ul li:last-child{border:none !important}
  .artikel-terkait a {color:#32BEFF;font-size:14px !important}
  .artikel-terkait a:hover {text-decoration:bold}

Berikutnya tambahkan instruksi javascript berikut ini sempurna diatas instruksi </head> atau </head>

 <b:if cond='data:blog.pageType == &quot;item&quot;'>
  <script type='text/javascript'>
  //<![CDATA[
  var relatedTitles = new Array(); var relatedTitlesNum = 0; var relatedUrls = new Array(); function related_results_labels(json) { for (var i = 0; i < json.feed.entry.length; i++) { var entry = json.feed.entry[i]; relatedTitles[relatedTitlesNum] = entry.title.$t; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') {relatedUrls[relatedTitlesNum] = entry.link[k].href; relatedTitlesNum++; break;}}}} function removeRelatedDuplicates() { var tmp = new Array(0); var tmp2 = new Array(0); for(var i = 0; i < relatedUrls.length; i++) { if(!contains(tmp, relatedUrls[i])) { tmp.length += 1; tmp[tmp.length - 1] = relatedUrls[i]; tmp2.length += 1; tmp2[tmp2.length - 1] = relatedTitles[i];}} relatedTitles = tmp2; relatedUrls = tmp;} function contains(a, e) { for(var j = 0; j < a.length; j++) if (a[j]==e) return true; return false;} function printRelatedLabels() { var r = Math.floor((relatedTitles.length - 1) * Math.random()); var i = 0; document.write('<ul>'); while (i < relatedTitles.length && i < 20) { document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>'); if (r < relatedTitles.length - 1) { r++; } else { r = 0;} i++;} document.write('</ul>');}
  //]]>
  </script>
    </b:if>

Terakhir, Klik Simpan dan lihatlah hasilnya.

Itulah hal yang dapat anda lakukan kalau ingin memasang artikel terkait atau related post ditengah postingan blog. Jika ada hal yang kurang dipahami, dapat ditanyakan. Semoga sedikit petunjuk ini bermanfaat bagi semua.