Cara Memasang Widget Related Post atau Artikel Terkait Pada Blog

Related post atau artikel terkait ialah artikel yang berhubungan dalam satu label posting, maksudnya ialah apabila kita membaca suatu artikel maka akan pula ditampilkan artikel yang lain dengan label yang sama. Biar gak bingung dengan penjelasan saya yang berbelit-belit tadi langsung dicoba aja sobat 

 

ikuti tutorial di bawah ini.

 

1. Login blogger atau klik di sini.
2. Pilih rancangan.
3. Pilih template.
4. Centang Expant template widget.
5. Cari code seperti ini <data:post.body/> untuk mempermudah pencarian klik F3.
6. Copy code di bawah ini dan paste di bawah <data:post.body/>

<b:if cond=data:blog.pageType == "item">
<div class=similiar>
<div class=widget-content>
<h3>Artikel Anyar yang Berhubungan</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>
</b:if>

Catatan:

• Tulisan yang berwarna biru bisa sobat ganti sesuai selera.

7. Dan yang terakhir simpan template

Selamat mencoba, Happy Blogging

Baca juga:

• Cara membuat related post part 2
• Cara membuat related post part 3
• 32 Macam Menu Navigation Horizontal
• Cara Membuat Label Bergerak Ketika Disentuh Cursor