Cara Membuat Artikel Terkait Related Post atau You Might Also Like

Cara membuat Artikel Terkait untuk upaya validasi template pada blog sendiri tak pernah surut malah jadi suatu tantangan yang menarik untuk terus ditaklukan.Ya..,setidaknya bisa meminimalisir error pada template standart blogger Minima yang saya pakai sekarang, meski tak lulus validasi di W3 Markup Validation Service.  

Sembari ngabuburit di dumay,saya mengutak-atik  kode html atau script yang dinyatakan error di validasi W3.Artikel Terkait, Related Post,atau You Might  Also Like yang saya pakai kemarin termasuk salah satu dari penyumbang error di validasi W3.Maka saya ganti kode script Artikel Terkait lama dengan yang saya pakai sekarang. Guna atau manfaat artikel terkait pada blog kita adalah mempermudah pembaca dalam mencari artikel lainnya.Artikel Terkait yang kita bahas adalah artikel terkait yang dikelompokan atas dasar label postingan blog.Untuk membuatnya ikuti langkah berikut,jangan lupa biasakan setiap mau "oprek" template,download terlebih dahulu template sobat,guna menjaga kemungkinan yang tidak diinginkan:

1.Pastikan sobat login di akun blogger.
2.Kik Rancangan kemudian pilih Edit HTML,centang Expand Template Widget
3.Pencarian kita mulai dengan mencari kode <data:post.body/> (gunakan Ctrl+F untuk mempermudah pencarian).

Bila di template telah terpasang script Readmore, maka akan terdapat dua kode <data:post.body/> Pasang script Artikel Terkait atau Related Post di bawah  <data:post.body/>  yang ke 2 ,lebih tepatnya di bawah tag </b:if> jika sudah ketemu,copy paste-kan kode script dibawah  ini persis  dibawahnya.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<br/>
<br/>
<H2>Artikel Terkait:</H2>
<div class='rnbox'>
<div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid
#ccc;'>
<div id='albri'/>
<script type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 10;
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;albri&#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>
<script type="text/javascript">RelPost();</script>
</div>

 <a href="http://www.raihanrn.com/2011/08/membuat-artikel-terkait-related-post.html" target="blank"><font color="red">[Get This Widget]</font></a>
</b:if>

Sebenarnya langkah diatas sudah selesai untuk sebuah Artikel Terkait yang lolos di validasi W3, tinggal save template saja.Namun jika sobat mau menambahkan efek hover pada background artikel terkait(silahkan backgroundnya sesuaikan dengan selera sobat)tambahkan kode dibawah ini, diatas kode ]]></b:skin>

 .rnbox{border: 2px solid #FFFFFF;padding: 5px;

-moz-border-radius:9px; margin:5px;}

.rnbox:hover{background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh2pVDJaWaGZFGdr2Km9JkM8KltS7ANa_sy2jlS2ovLt4f-8louMd4ZZUBXpUZu45ELY2j5XAwVjnzxol1VrtYgkkbzdezgB4-Q7gdy4EeTSrgeLrutEp0lBVYO6e0fAyV7NnDYkgPacAv/s1600/NavMNrn+%2528FILEminimizer%2529.png);}

Simpan template.
Semoga ada manfaat dan Happy Blogging !