Cara membuat dan memasang widget related post pada blogspot

Kami membuat related post di blog ini berdasarkan petunjuk dari tulisan di blog di bawah ini setelah kebingungan karena widget related post (artikel terkait) punya kami tidak berfungsi sebagaimana mestinya. Link-nya adalah sebagai berikut:

https://www.agungdesign.com/2019/03/cara-membuat-related-post-blogger.html

Sebagai dokumentasi, kami akan menyimpan langkah-langkahnya di blog ini juga. Langkah-langkahnya adalah sebagai berikut:

1. Buka blogger, Log In, pilih blog yang ingin diberikan widget ini, kemudian temukan tag ]]></b:skin>, kemudian letakkan kode CSS berikut ini sebelum atau di atasnya. Kodenya adalah sebagai berikut:

.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;}

Temukan <data:post.body/>, bila ada dua, letakkan kode berikut ini di bawah 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://dailyojik.blogspot.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/AVvXsEh6JgKCuyoapB2-xpJ7SLOri9-LKqPSpN78-Jo7_Yt-0ZE6QHL1PfQRXyizuf7_pV9P_aRLpzUTOskA4a4VXEXs6UsHI_7odlcxK5VzcYeh57wZqbLlK05ScELwLTY91K6HsI3fo4lC_UA/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>

Temukan http://dailyojik.blogspot.com pada kode di atas, ganti dengan alamat blog Anda, lalu simpan template.

Demikianlah dokumentasi hasil penelusuran google kami hari ini. Udah, itu aja. Semoga bermanfaat kalau kapan hari kami ada butuh tinggal buka tulisan ini lagi saja.