Recent Posts

settia

Cara Membuat Dan Memasang Widget Related Post (Artikel Terkait) Di Blog

by - Bambang Heda on - Oktober 23, 2020

Baca Juga

Cara Memasang Widget Related Post Di Blogger Dengan Mudah - Widget Related Post atau dalam bahasa indonesia nya adalah 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.

Bagi seorang blogger fitur ini seharusnya memang sudah tidak asing lagi. 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.

Dapat disimpulkan bahwa, dengan semakin banyak nya jumlah artikel yang dibaca, itu dapat berperan penting untuk meningkatkan jumlah page view pada sebuah blog. Dengan banyak nya page view pada suatu postingan blog, merupakan poin yang baik bagi blog tersebut di mata search engine contohnya mbah google.

Sebenarnya ada banyak cara yang digunakan untuk menampilkan widget related post pada sebuah blog. Terdapat bermacam kode atau metode yang bisa menjadi pilihan, tapi bagi yang beruntung, kalian dapat menampilkan related post dengan bantuan dari platform Google Adsense yaitu Matched Content.

Namun untuk mendapatkan fitur matched content tidaklah mudah, blog harus memenuhi suatu syarat dan ketentuan yang telah ditetapkan oleh Google Adsense. Untuk itu disini saya akan membagikan cara yang lebih mudah untuk menampilkan related post. Yaitu dengan menambakan kode javascript di dalam template blogger.

Cara Membuat Widget Related Post (Artikel Terkait) Di Blogger


Tutorial yang saya bagikan ini merupakan untuk membuat widget related post lengkap dengan thumbnail nya. Tapi tentunya jika kalian ingin menampilkan hanya judul nya saja nanti bisa disetting sendiri di javascript nya.

Berikut ini adalah langkah-langkah cara memasang widget artikel terkait:
  1. Masuk ke blogger.
  2. Pilih menu "Tema / Theme", lalu klik pada bagian "Edit HTML".


  3. Salin code CSS yang ada dibawah ini agar tampilan terlihat rapi. Salin dan tempel code ini sebelum/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. Salin code JavaScript dibawah ini. Cari kode <data:post.body/> di dalam template, dan tempatkan kode dibawah ini tepat setelah / dibawahnya. 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.viproaktif.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/AVvXsEh23SUMpHtSG3UCwtHiYCaiFGVWEhfOW92l306FiJ9W1hBx3KUkYg6zqzwqWHQ4gxKzIjzDRN3AyVbGXbk1hQUy6Gw-SQD2UDJu-C-1QLGd5U57HWyXnCgV4eJb16F5hOPbBQWiYJgessg/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.viproaktif.com dengan alamat url blog kamu, misalnya https://www.umrohaji.net 
    • Untuk opsi lain nya bisa disesuaikan sendiri.
  5. Kemudian klik "Simpan Tema / Save Theme".

Jika kalian ingin melihat contoh hasilnya, disini saya sudah membuat demo nya melalui codepen, klik tombol di bawah ini untuk melihat nya.

Demikian tutorial mengenai Cara Membuat Widget Related Post Di Blogger, semoga bisa bermanfaat. Jika ada masalah mengenai tutorial diatas, silahkan kamu sampaikan di kolom komentar di bawah ini.

Tags
Reactions