Cara Membuat Widget Related Post (Artikel Terkait) Di Akhir Postingan Blog

Jagoandzgn.com - Didalam Widget Related Post atau dalam bahasa indonesianya yang sering kita sebut adalah Artikel Terkait, Artikel terkait merupakan sebuah widget yang bertujuan untuk menampilkan artikel-artikel yang memiliki hubungan dengan artikel yang sedang dibaca oleh pengunjung pada sebuah blog. Biasanya widget ini dipasang tepat di bawah artikel atau biasa diakhir postingan.

Bagi seorang blogger fitur ini seharusnya memang sudah tidak asing lagi bagi kita. Related Post dipasang dengan tujuan yaitu agar pada saat pengunjung selesai membaca suatu artikel, pengunjung dapat melihat artikel dibawah nya yang ada kaitan nya dengan artikel yang telah dia baca.

Cara Membuat Widget Related Post (Artikel Terkait) Di Akhir Postingan Blog

1. Silahkan login ke blogger.com dengan menggunakan Gmail kamu.
2. Silahkan masuk ke menu TEMA > klik Edit HTML.
3. Silahkan Copy kode CSS yang ada dibawah ini dan Salin kode ini tepat DIATAS kode ]]></b:skin> atau bisa juga di dalam tag <style>.

.relatedposts {margin-top:20px;font-family:"Segoe UI",Arial,sans-serif;font-size:14px;line-height:1.4em;overflow:hidden;}
.relatedposts h4 {position:relative;margin-bottom:15px;padding-bottom:10px;font-size:16px;font-weight:500;text-transform:uppercase;}
.relatedposts h4:before {content:"";position:absolute;left:0;bottom:-2px;width:100%;height:2px;background:#eee;}
.relatedposts h4:after {content:"";position:absolute;left:0;bottom:-2px;width:30%;height:2px;background:#542a78;}
.relatedposts li {float:left;margin-bottom:20px;margin-right:10px;width:calc((100% - 20px) / 3);vertical-align:top;background:#fff;}
.relatedposts li:nth-child(3n+0) {margin-right:0;}
.relatedposts li a {transition:all 0.2s;text-decoration:none;}
.relatedposts li a:hover {opacity:0.8;}
.relatedposts .thumbnail img {width:100%;height:auto;}
.relatedposts .title a {margin-top:5px;font-size:14px;line-height:1.4em;font-weight:500;overflow:hidden;text-overflow:ellipsis; -webkit-box-orient:vertical;-webkit-line-clamp:3;display:-webkit-box;max-height:58px;}

4. Selanjutnya, Copy kode JavaScript dibawah ini. Cari kode <data:post.body/> di dalam template, dan tempatkan kode dibawah ini tepat DIBAWAH. Kode <data:post.body/> kemungkinan ada lebih dari 1, tempatkan dibawah code <data:post.body/> yang kedua.

<b:if cond='data:blog.pageType == "item"'>
<div class='relatedposts'>
<h4>Related Posts</h4>
<ul id='relatedposts'>
<b:loop values='data:post.labels' var='label'>
<span class='list-item' expr:data-label='data:label.name'/>
</b:loop>
</ul>
</div>
</b:if>
<script type='text/javascript'>
//<![CDATA[
var related_blogUrl = "https://www.showdzgn.com";
var related_total = 6;
var related_thumbnail = 1;
var related_imgWidth = 210;
var related_imgHeight = 118;
(function(){
var relatedNum = 0; var relatedUrl = new Array(); var relatedImage = new Array(); var relatedTitle = new Array(); var relatedTotal = related_total; var callback = "relatedposts"; var containerID = document.getElementById("relatedposts"); var noImg = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4tlmED9BZyUZ4snThJ2-eyxcG2178FWfOAgEnyFJPoGXffkfTOdtU2GX5bEPudoYHON48GgqqEjqFXqrMCllRnfJ47uW1Lonu7cmH5ziqvshnodAtYdRnfQC5w49BTMbgUZN7sOGaMgc/s72-c/no-image.jpg"; var imgSize = [related_imgWidth, related_imgHeight]; window[callback] = function(data){ for (var i = 0; i < data.feed.entry.length; i++){ var entry = data.feed.entry[i]; relatedTitle[relatedNum] = entry.title.$t; for (var j = 0; j < entry.link.length; j++){ if ("alternate" == entry.link[j].rel){ relatedUrl[relatedNum] = entry.link[j].href; break; } } relatedImage[relatedNum] = noImg.replace("/s72-c/", "/w" + imgSize[0] + "-h" + imgSize[1] + "-p-k-no-nu/"); if ("media$thumbnail" in entry) { relatedImage[relatedNum] = entry.media$thumbnail.url.replace("/s72-c/", "/w"+imgSize[0]+"-h"+imgSize[1]+"-p-k-no-nu/"); } relatedNum++; } }; function filterTags(g, h) { var e = g.split("<"); for (var f = 0; f < e.length; f++) { if (e[f].indexOf(">") != -1) { e[f] = e[f].substring(e[f].indexOf(">") + 1, e[f].length) } } e = e.join(""); e = e.substring(0, h - 1); return e; }; function contains(a, e) { for (var f = 0; f < a.length; f++) { if (a[f] == e) return true; } return false; }; function removeDuplicates() { var v = new Array(0); var A = new Array(0); var w = new Array(0); for (var u = 0; u < relatedUrl.length; u++) { if (!contains(v, relatedUrl[u])) { v.length += 1; v[v.length - 1] = relatedUrl[u]; A.length += 1; A[A.length - 1] = relatedImage[u]; w.length += 1; w[w.length - 1] = relatedTitle[u]; } } relatedUrl = v; relatedImage = A; relatedTitle = w; }; function createRelated() { removeDuplicates(); for (var u = 0; u < relatedTitle.length; u++) { var B = Math.floor((relatedTitle.length - 1) * Math.random()); var s = relatedUrl[u]; var C = relatedImage[u]; var i = relatedTitle[u]; relatedUrl[u] = relatedUrl[B]; relatedImage[u] = relatedImage[B]; relatedTitle[u] = relatedTitle[B]; relatedUrl[B] = s; relatedImage[B] = C; relatedTitle[B] = i; } var r = 0; var D = Math.floor((relatedTitle.length - 1) * Math.random()); var z = D; var t = document.URL; var e = ""; while (r < relatedTotal) { if (relatedUrl[D] != t) { e += "<li>"; if (related_thumbnail >= 1) { e += "<div class='thumbnail'>"; e += "<a href='" + relatedUrl[D] + "' title='" + relatedTitle[D] + "'>"; e += "<img src='" + relatedImage[D] + "' alt='" + relatedTitle[D] + "' width='" + imgSize[0] +"' height='" + imgSize[1] + "'/>"; e += "</a>"; e += "</div>"; } e += "<div class='title'>"; e += "<a href='" + relatedUrl[D] + "' title='" + relatedTitle[D] + "'>" + relatedTitle[D] + "</a>"; e += "</div>"; e += "</li>"; r++; if (r == relatedTotal) { break; } } if (D < relatedTitle.length - 1) { D++; } else { D = 0; } if (D == z) { break; } } containerID.innerHTML = e; }; var labels = ""; var ralatedlist = document.querySelectorAll("span.list-item"); ralatedlist.forEach(function(list) { labels += 'label:"' + list.dataset.label + '"|'; }); var js = document.createElement("script"); var blogUrl = related_blogUrl.replace(/\/$/, ""); js.src = blogUrl + "/feeds/posts/summary?v=2&q=" + labels + "&alt=json&callback=" + callback + "&max-results=20"; js.onload = createRelated; document.getElementsByTagName("head")[0].appendChild(js);
})();
//]]>
</script>

Ganti https://www.showdzgn.com dengan alamat url blog kamu.
Untuk opsi lain nya bisa disesuaikan sendiri.

5. Kalau sudah silahkan klik SIMPAN dan Selesai.

Jika kalian ingin melihat contoh hasilnya, disini saya akan memberikan sebuah gambar hasil penerapan kode diatas.

Bagaimana mudah bukan untuk tutorial Cara Membuat Widget Related Post (Artikel Terkait) Di Akhir Postingan Blog untuk kamu yang masih bingung atau memiliki kendala silahkan komen dikolom komentar dibawah artikel ini.