Cara Memasang Artikel Terkait Simpel di Dalam Postingan

Baca Juga:

Widget artikel terkait banyak digunakan dimana-mana. Biasa nya berada di bawah postingan tepatnya atas komentar. Fungsi widget tersebut ialah untuk menampilakn postingan lain berdasarkan label dalam bentuk link, thumbnail, atau yang lainnya.

Namun di postingan yang sekarang ini widget yang dimaksud berada di dalam atau tengah postingan. Kode yang digunakan merupakan kode yang saya ambil dari http://www.arlinadzgn.com/2017/01/memasang-artikel-terkait-di-dalam-postingan.html lalu saya ubah dikit agar lebih simpel dan sesuai dengan yang saya inginkan.

Di kode yang sebelumnya, artikel yang ditampilkan berjumlah tiga, namun disini hanya menampilkan satu postingan saja, karena jika lebih dari satu maka akan boros ruang pada laman postingan.

Warna widget ini sangat bervariasi, agar tidak terlalu mirip jika banyak yang menggunakan. Bagi yang ingin memasangnya, silahkan ikuti langkah-langkah dibawah ini

Cara Memasang Artikel Terkait Simpel di Dalam Postingan

1. Buka Blogger.com > Template > Tekan Edit HTML > Masukkan 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('<a href="' + relatedUrls[r] + '">' + relatedSimply[r] + '</a>');}
//]]>
</script>
</b:if>

2. Masukkan CSS dibawah ini sebelum kode ]]></b:skin> atau </style>

/* Related Post */
.related-simplify{
    background: #e74c3c;
    color: #ecf0f1;
    padding: 10px;
    border: 2px dashed #c0392b;
    border-radius: 4px;
    font-size: 12pt;
margin: 15px 0 15px 0;
}
.related-simplify a{
    color: #ecf0f1;
}
related-simplify a:hover{
color:#bdc3c7;
text-decoration:underline;
}

Untuk mengganti warna, silahkan rubah warna background dan border menjadi:

Hijau: #2ecc71 dan #27ae60

Biru: #3498db dan #2980b9

Oranye: #e67e22 dan #d35400

Contohnya jika ingin menggunakan warna hijau, maka menjadi seperti ini:

/* Related Post */
.related-simplify{
    background: #2ecc71 ;
    color: #ecf0f1;
    padding: 10px;
    border: 2px dashed #27ae60;
    border-radius: 4px;
    font-size: 12pt;
margin: 15px 0 15px 0;
}
.related-simplify a{
    color: #ecf0f1;
}
related-simplify a:hover{
color:#bdc3c7;
text-decoration:underline;
}

3. Setelah itu cari kode <data:post.body/> lalu ganti kode tersebut menjadi

<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>
<b>Baca Juga: </b>
<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. Simpan Template lalu silahkan lihat hasilnya

Dengan begitu, akan muncul widget yang menampilkan sebuah post random yang diambil berdasarkan label pada postingan. Sekian postingan tentang Cara Memasang Artikel Terkait Simpel di Dalam Postingan. Apabila ada kesalahan, silahkan kontak kami.