Cara Membuat Artikel Terkait Atau Related Post (Baca Juga Artikel Berikut)

 

Seo Dulu - Apa kabar sobat seo dulu,apakah blog sobat seodulu terkena dampak dari Google Update Alogaritma Per Bulan September ?

Untuk kamu yang memakai Platform seperti Wordpress sangatlah tidak khawatir,tinggal pasang plugin,terus setting beberapa langkah sudah jadi "Artikel Terkait" Atau Baca Juga Artikel Berikut . 

Namun kali ini saya akan bahas untuk para blogger yang menggunakan platform Blogspot.com atau bawaan dari Google.

Jarang sekali menemui template untuk blogspot yang menyediakan fitur "Baca Juga Artikel Berikut"

Tanpa berlama-lama berikut Scriptnya

Catatan : Harap Backup Template terlebih dahulu,sebelum melakukan ini.

1. Langkah pertama silahkan masuk ke Blogger >> Template >> Edit HTML. Letakkan kode dibawah ini sebelum Kode </head>   atau  &lt;/head&gt;&lt;!--<head/>--&gt; 

<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>

2. Langkah berikutnya yaitu memasang script/code CSS. sebelum Kode ]]></b:skin> atau </style>

/* 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)}}

3. Setelah itu Cari kode <data:post.body/> dan hapus,lalu ganti dengan Script di bawah ini

<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>

4. Langkah terakhir lalu simpan template

Catatan : Biasanya dalam template terdapat lebih dari 3 kode <data:post.body/> jadi harap bersabar dan teliti.

Semoga berhasil,selamat mencoba.