Cara Membuat Related Post Otomatis di Postingan Blog

komputerdia.com - Related post atau Artikel terkait merupakan salah satu element penting yang harus kalian terapkan pada blog atau website. Pasalnya artikel terkait ini merupakan salah satu cara yang paling dianjurkan untuk bisa mendongkrak popularitas blog yang kalian kelola.

Related Post juga merupakan salah satu cara yang bisa kalian lakukan untuk membuat SEO onpage pada sebuah blog, karena dengan adanya related post ini, para pengunjung blog kalian akan merasa sangat nyaman dalam meng-Eksplore selluruh isi blog kalian

Dalam artikel ini, saya akan menjelaskan bagaimana cara membuat artikel terkait otomatis di tengah-tengah postingan blog dengan gaya yang sangat menarik

Baca Juga Artikel Menarik Lainnya :

Cara Membuat Related Post Otomatis di Postingan Blog

Cara Membuar Artikel Terkait Otomatis di Postingan Blog

  • Masuk ke akun blogger kalian, buka menu Tema kemudia klik tombol Edit HTML
  • Cari kode </head> dan letakkan kode dibawah ini tepat diatas kode </head>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
var relatedSimply = new Array(); var relatedSimplyNum = 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]; relatedSimply[relatedSimplyNum] = entry.title.$t; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') {relatedUrls[relatedSimplyNum] = entry.link[k].href; relatedSimplyNum++; 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] = relatedSimply[i];}} relatedSimply = 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((relatedSimply.length - 1) * Math.random()); var i = 0; document.write('<ul>'); while (i < relatedSimply.length && i < 20) { document.write('<li><a href="' + relatedUrls[r] + '">' + relatedSimply[r] + '</a></li>'); if (r < relatedSimply.length - 1) { r++; } else { r = 0;} i++;} document.write('</ul>');}
//]]>
</script>
</b:if>
  • Pastikan dalam blog kalian sudah memasang script Font Awesome agar script ini dapat bekerja dengan baik
  • Jika belum terpasang, kalian letakkan kode dibawah ini tepat diatas kode </head>
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>
  • Langkah selanjutnya silahkan kalian cari dan ganti kode <data:post.body/> dengan kode dibawah ini
  • Jika terdapat banyak kode <data:post.body/> , silahkan kalian cari kode tersebut pada bagian tag kondisional postingan seperti <b:if cond='data:view.isPost'> … </b:if> atau <b:if cond='data:blog.pageType == "item"'> … </b:if>. Penempatan kode ini terkadang berbeda, tergantung dari template yang kalian gunakan, maka dari itu silahkan kalian coba satu persatu
<div expr:id='&quot;post1&quot; + data:post.id'/>
<div class='related-simplify'>
<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'><p><data:post.body/></p></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/2);
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>
  • Langkah terakhir silahkan kalian letakkan kode di bawah ini, tepat diatas kode </style> atau kode ]]></b:skin>
/* Related Post Style 1 */
.related-simplify{position:relative;padding:0;margin:15px auto;width:100%;}
.related-simplify h4{background:#3498db;padding:8px 12px;margin:0;font-size:15px;font-weight:400;color:#fff;border:1px solid #2e88c5}
.related-simplify ul{margin:0;padding:0}
.related-simplify ul li{background:#f6f6f6;position:relative;list-style:none;padding:9px;margin:auto;line-height:1.4em;border:1px solid rgba(0,0,0,0.1);border-bottom:0;transition:all .3s}
.related-simplify ul li:nth-child(odd){background:#fefefe}
.related-simplify ul li:last-child{border-bottom:1px solid rgba(0,0,0,0.1)}
.related-simplify ul li:before{content:'\f138';font-family:fontawesome;position:absolute;margin:0 9px 0 4px;color:#2ecc71;overflow:hidden;transition:all .3s}
.related-simplify ul li:hover:before{content:'\f138';font-family:fontawesome;-webkit-animation:bounceright .3s alternate ease infinite;animation:bounceright .3s alternate ease infinite}
.related-simplify a{color:#0383d9;font-size:13px;margin:0 0 0 30px;}
.related-simplify a:hover{color:#0383d9;text-decoration:underline}
.related-simplify ul li:nth-child(n+4) {display:none;}
@-webkit-keyframes bounceright{from{-webkit-transform:translateX(0)}to{-webkit-transform:translateX(3px)}}
@keyframes bounceright{from{transform:translateX(0)}to{transform:translateX(3px)}}
  • Simpan template kalian dan lihat hasilnya
Cara Membuat Related Post Otomatis di Postingan Blog
  • Selesai dan semoga bermanfaat untuk kalian semuanya

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2