Membuat Related Post Dengan Beberapa Label Pada Template Bawaan Blogger

Setelah sekian lama saya mencari cara bagaimana membuat related post dan menemukan banyak sekali ragam caranya dan ternyata cara membuat artikel terkait hasil semua pencarian saya di google tidak berhasil diterapkan di template bawaan blogger. Akhirnya setelah bereksplorasi dan bereksperimen sendiri, saya menemukan cara membuat related artikel dengan cara saya sendiri.

Upaya untuk menarik minat pembaca salah satunya adalah dengan mencantumkan related post atau artikel terkait di bawah postingan. Related post ini berfungsi agar pembaca tidak meninggalkan blog bergitu saja setelah membaca artikel. Dengan adanya related post kemungkinan pembaca akan membaca artikel yang berkaitan dengan artikel yang telah dibacanya. Maka, pada kesempatan kali ini saya akan menjelaskan langkah-langkah membuat related post dengan beberapa label pada template bawaan blogger, berikut adalah langkah-langkahnya.

1. Masuk blogger > klik template > edit html > tekan Ctrl+F dan cari kode ini ]]></b:skin>
2. Masukkan kode css di bawah ini tepat di atas kode ]]></b:skin>

#related-posts{float:left;width:100%;border-bottom:1px solid #aaa;border-top:3px solid #bbb;margin:5px 0 10px;padding:15px 0 10px}
#related-posts .widget h2,#related-posts h2{font:16px Oswald;color:#111;text-transform:none;margin:0 0 10px;padding:0}
#related-posts a{color:#333;font:12px Tahoma}
#related-posts li{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibjVivZOzHEIO90hJzZ-fD8kY8oKlEX3pOzmmCauR7RnEgn1tWSpBvibtUTfYWmrv3wdFwYQqWBrnAeus-wNta4GaOudcnrhfaKwf0oe1nRWV6w8yrE3mm_jSAELfLZelOn9DT4VnW81o/s1600/bullet-list.gif) no-repeat 0 10px;text-indent:0;line-height:1.2em;border-bottom:1px dashed #ddd;margin:0;padding:3px 0 3px 12px}
#related-posts a:hover{color:#2482d6;text-decoration:none}
#related-posts .widget{margin:0;padding:0}
#related-posts ul{list-style:none;margin:0;padding:0}

3. Masih di edit html, cari kode berikut.

<b:if cond='data:post.hasJumpLink'>

4. Masukkan kode di bawah ini tepat di atas kode <b:if cond='data:post.hasJumpLink'>

<div id='related-posts'>
<div class='similiar'>

<div class='widget-content'>
<h3>Artikel terkait:</h3>
<div id='data2007'/><br/><br/>
<script type='text/javascript'>

var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;

maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 3;


function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;

for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;

if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;data2007&#39;).appendChild(div1);
}
}
}
function search10(query, label) {

var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}

var labelArray = new Array();
var numLabel = 0;

<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;

var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
</div>
</div>
</b:if>

5. Save template dan lihat hasilnya.

Bagaimana? Mudahkan? Semoga langkah-langkah membuat related post ini bermanfaat ya. Ok terima kasih banyak sudah berkunjung :))

Related:

Search Post

Label :