Membuat Related Post Di Dalam Artikel Blogspot

Related post sangat bagus untuk blog anda, terutama supaya pengunjung lebih tahan lama berada dalam blog anda. Baiknya related post ini ditempatkan pada lokasi yang mudah dilihat oleh pengunjung, bisa di dalam postingan atau di bawah postingan. Postingan ini akan memberikan tips bagi anda yang menginginkan related post berada dalam artikel.

Sebelumnya, anda pasti sudah sering membaca informasi dari media berita online seperti kompas, detik, bbc, dan sebagainya. Rata-rata mereka menempatkan related post di dalam artikelnya. Blogger yang menggunakan platform blogspot pun juga bisa membuat related post ini. Jadi jangan khawatir. Dari sinilah, kemudian bloggerafif berinisiatif untuk membagi informasi bagaimana membuat related post di dalam artikel blogspot.

Tampilan hasil akhir related post anda akan menjadi seperti ini :

Berikut ini cara membuat related post di dalam artikel blogspot :

1. Masuk ke Dasboard, lalu Design, Edit Html, dan pastikan anda terlebih dahulu melakukan backup template. Lalu centeng Expand widget template
2. Tambahkan script dibawah ini sebelum </head> 
   

   <script type='text/javascript'>
   //&lt;![CDATA[
   var relatedTitles = new Array();
   var relatedTitlesNum = 0;
   var relatedUrls = new Array();
   function related_results_labels(json) {
   for (var i = 0; i &lt; json.feed.entry.length; i++) {
   var entry = json.feed.entry[i];
   relatedTitles[relatedTitlesNum] = entry.title.$t;
   for (var k = 0; k &lt; entry.link.length; k++) {
   if (entry.link[k].rel == &#39;alternate&#39;) {
   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 &lt; 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 &lt; 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;
   
   while (i &lt; relatedTitles.length &amp;&amp; i &lt; 20) {
   document.write(&#39;&lt;li&gt;&lt;a href=&quot;&#39; + relatedUrls[r] + &#39;&quot;&gt;&#39; + relatedTitles[r] + &#39;&lt;/a&gt;&lt;/li&gt;&#39;);
   if (r &lt; relatedTitles.length - 1) {
   r++;
   } else {
   r = 0;
   }
   i++;
   }
   
   }
   //]]&gt;
   </script>

3. Cari kode <div class='entry entry-content'> lalu paste kode berikut ini dibawahnya
   

   <b:if cond='data:blog.pageType == &quot;item&quot;'>
   <div style='float:right;'>
   <div class='related-posts'>
   <p>Related posts:</p>
   <ol>
   <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=5&quot;' type='text/javascript'/>
   </b:if>
   </b:loop>
   <script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script>
   </ol>
   </div>
   </div>
   </b:if>

4. Simpan. Sampai disini related post anda sudah jadi. Untuk lebih mempercantik tampilan, silahkan tambahkan kode css berikut sebelum ]]></b:skin>
   

   .related-posts {
   border:1px solid #ddd;
   background:#D8DFEA;
   font-weight:bold;
   width: 80%;
   float:right;
   }
   .related-posts p {
   margin:5px 10px 5px;
   }
   .related-posts ol {
   font-weight:normal;
   margin:0 0 0 25px;
   }
   .related-posts li {
   margin-bottom: 2px;
   }

Sebagai catatan tambahan, related post ini secara default akan berada di sebelah kanan artikel postingan blogspot. Namun akan menjadi berada diatas artikel postingan jika di dalam artikel anda terdapat image atau gambar yang berdekatan dengan related post ini. Dengan kata lain image postingan menggeser lokasi related post ini. Seperti ini

Jadi, usahakan ketika anda ingin menambahkan image kedalam postingan, pastikan image tersebut berada jauh dari related post, paling tidak pada paragraf ke-3 dan seterusnya.

Silahkan dicoba, jika bermanfaat silahkan dishare dengan yang lainnya.