Cara Membuat Widget Related Post Responsive (Artikel Terkait) Di Akhir Postingan Blog
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.expxo.net";
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 = "//3.bp.blogspot.com/-FHhLnZncaZE/XF-c-Ey_n2I/AAAAAAAAAkA/TXD5_-NJvH0nWEVliT1vS0RR_R2lsr0TQCLcBGAs/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.expxo.net 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.
Belum ada Komentar untuk "Cara Membuat Widget Related Post Responsive (Artikel Terkait) Di Akhir Postingan Blog"
Posting Komentar