Cara Mudah Membuat Artikel Terkait Dengan Kode HTML

Sebenarnya banyak cara untuk membuat artikel terkait. bisa dengan memakai widget Linkwithin atau memasukkan sendiri kode html dengan cara manual. Jika sobat ingin memakai Linkwithin silakan baca Cara Mudah Membuat Artikel Terkait Pada Blog Dengan LinkWithin. 

Nah..untuk membuat artikel terkait dengan memasukkan kode html sendiri itupun ada 2 tipe. Yaitu artikel terkait berbasis gambar dan teks.

Pada tutorial kali ini yang akan saya bahas adalah pembuatan artikel terkait dengan menggunakan metode teks. Selain simple, proses loading nya juga cepat.

Untuk membuat widget artikel terkait pada postingan blog silakan ikuti petunjuk berikut ini :

1. Login ke blogger sobat

2. Masuk ke menu Rancangan > Edit HTML. Backup dahulu template jika nantinya terjadi kesalahan bisa dikembalikan lagi. Untuk membackup template tinggal tekan saja link Download Template Lengkap.

3. Kembangkan widget dengan memberi centang Expand Template Widget. Lalu tekan tombol Ctrl + F. Dalam kotak pencarian ketikkan kode berikut

<data:post.body/>

Selanjutnya cari kata - kata sebagai berikut

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>

Lalu copykan kode berikut dibawah tulisan tadi

<!-- Awal Artikel Terkait -->
<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 = 15;

maxNumberOfPostsPerLabel = 15;
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>
<!-- Akhir Artikel Terkait -->

4. Tinggal simpan template dan lihat hasilnya

Selamat mencoba