Cara Pasang Artikel Terkait Otomatis

AKUMARU.com 12:42 AM Tutorial Blogger 5 comments

Hallo friend, saya mau share bagaimana caranya memasang Artikel Terkait/Related Post Seperti yang ada di sittus ini. Apa sih artikel terkait itu?? Artikel terkait itu yang ada di bawah postingan ini loh friend.. Silahkan di lihat dulu.. Atau bisa juga lihat gambar di bawah ini :

Jika Anda ingin memilikinya juga, silahkan ikuti langkah di bawah ini.

Tapi sebelumnya saya ingin berikan informasi betapa pentingnya Artikel Terkait ini di pasang di website anda. Alasannya supaya pengunjung website anda di mudahkan untuk mencari artikel yang masih berkaitan dengan artikel yang di bacanya tanpa perlu mencari cari lagi.

Artikel terkait ini di buat sesuai dengan label, jadi yang postingan yang berlabel sama dengan artikel yang sedang di baca akan muncul, anda tidak perlu mengupdate artikel terkait lagi, karena ini bekerja secara otomatis bila labelnya sama.

Ikuti langkah berikut agar tidak tersesat hehehe :

Pastikan Anda sudah masuk ke akun blog anda,
Klik Template,
Sebelum mengedit HTML nya saya anjurkan untuk membackup template Anda yang sekarang agar saat terjadi error, Template anda masih bisa di slamatkan. Caranya klik Backup/Restore lalu pilih Download full Template,
Setelah di backup, klik edit HTML
Centang Expand Template Widget, tujuannya agar saat di search kata yang di inginkan terdeteksi,
Setelah di expand coba cari kata berikut :
<data:post.body/></b:if>
Cara mencarinya klik Ctrl + F lalu ketikan <data:post.body/></b:if>, lalu cari kata yang sama seperti yang ada di atas
Lalu copy kode berwarna hijau ini di bawah code tadi :

# Anda dapat mengcopy code dibawah disini #

<b:if cond='data:blog.pageType == "item"'>
<br/>
<br/>
<H2>Related Post:</H2>
<div class='rbbox'>
<div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'>
<div id='albri'/>
<script type='text/javascript'>
var homeUrl3 = "<data:blog.homepageUrl/>";
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 9999;
maxNumberOfLabels = 3;
function listEntries10(json) {
var ul = document.createElement('ul');
var maxPosts = (json.feed.entry.length <= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i < maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement('li');
var a = document.createElement('a');
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 < json.feed.link.length; l++) {
if (json.feed.link[l].rel == 'alternate') {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k<20; k++) label = label.replace("%20", " ");
var txt = document.createTextNode(label);
var h = document.createElement('b');
h.appendChild(txt);
var div1 = document.createElement('div');
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById('albri').appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement('script');
script.setAttribute('src', query + 'feeds/posts/default/-/'
+ label +
'?alt=json-in-script&callback=listEntries10');
script.setAttribute('type', 'text/javascript');
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 = "<data:label.name/>";
var test = 0;
for (var i = 0; i < labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length <= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel < maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
<script type="text/javascript">RelPost();</script>
</div>
</b:if>
Klik Save Template
Sebenarnya itu sudah jadi, namun jika ingin di tambah kotak luarnya bisa mengikuti langkah selanjutnya
Cari code ]]></b:skin>
Lalu CoPas code ini di bawah code ]]></b:skin> :
# Anda dapat mengcopy code dibawah disini #

.rbbox{border: 1px solid rgb(192, 192, 192);padding: 5px;
background-color: #f0f0f0;-moz-border-radius:5px; margin:5px;}
.rbbox:hover{background-color: rgb(255, 255, 255);}
Jangan lupa klik Save Template