Cara Membuat Related Post Di Dalam Postingan Blog

Selamat datang agan atau aganwati kali ini saya akan berbagi tips blogging yaitu cara membuat related post di dalam postingan blog. Mungkin sudah banyak orang diantara kalian yang sudah mengenal related post, related post merupakan widget yang memuat artikel-artikel terkait dengan posting yang anda publikasikan biasanya artikel-artikel yang ditampilkan terkait dengan kesamaan label atau kategori pada artikel tersebut.



Widget related post mungkin sudah banyak yang terpasang secara default pada bawaan template yang berada di bawah postingan, namun kali ini kita akan mencoba membuat widget tersebut tampil di dalam postingan anda. Sebelumnya kita akan beri tahu manfaat tentang memasang widget related post. Manfaat kita memasang widget ini kita dapat mencoba memancing para pengunjung untuk membaca artikel lainnya yang terkait sehingga dapat meningkatkan jumlah page view kita serta membuat artikel kita lebih mudah meningkat jumlah pembacanya. Nah untuk itu saya akan berbagi cara untuk membuat related post di dalam postingan, berikut tutorialnya :

Langkah

1. Login pada blog anda masing-masing,

2. Pada menu dashboard pilih menu template, lalu pilih menu edit html,

3. Setelah itu cari kode ]]></b:skin> atau juga bisa </style> dengan cara

Ctrl

+

F

,

4. Setelah itu copy script di bawah ini lalu paste tepat di atas kode ]]></b:skin> atau </style> ,

 
/*Related Post Renaldy Ways*/
.post-reways{display:block;position:relative;background:#fff;padding:0;margin:15px auto 20px;width:100%}.post-reways h4{background:#07ACEC;padding:7px 10px;display:inline-block;font-size:12px;text-transform:uppercase;color:#fff;border-radius:3px;line-height:normal;border:0}.post-reways h4:before{display:none}.post-reways ul{margin:0;padding:0}.post-reways ul li{list-style:none;padding:1px 0;line-height:1.5em}.post-reways a{color:#07ACEC;font-size:13px}.post-reways a:hover{color:#000;text-decoration:underline} 

5. Setelah itu cari kode <data:post.body/> yang kedua atau juga bisa yang ketiga dengan cara

Ctrl

+

F

,

6. Setelah itu hapus kode <data:post.body/> yang kedua atau yang ketiga pilih salah satu, lalu ganti dengan script di bawah ini ,

 <div expr:id='&quot;post1&quot; + data:post.id'/>
<div class='post-reways'>
<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</h4>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</div>
<div expr:id='&quot;post2&quot; + data:post.id' class='artbody' 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> 

7. Setelah itu cari kode </head> dengan cara

Ctrl

+

F

,

8. Setelah itu copy script di bawah ini lalu paste tepat di atas kode </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> 

9 Setelah itu simpan dan lihat hasilnya.

Demo 

Nah itu saja dari saya semoga bermanfaat tentang cara membuat related post di dalam postingan blog, jangan lupa bagikan serta tinggalkan komentar anda, terima kasih.

Referensi script http://www.idblanter.com/2015/12/cara-memasang-related-post-di-dalam-postingan.html

Share this