Cara Membuat Related Post

Hai sahabat bloger.. saya habis otak atik mbah google ni. dan akhirnya saya dapat tutorial blog yang sanat menarik. kali ini saya beri judul Cara Membuat Related Post. oke tanpa panjang berbicara langsung saja kita simak langkah - langkahnya :

Pertama login ke blog sobat.
Selanjutnya download dulu templatenya, hal ini dilakukan untuk mengantisipasi bila terjadi kesalahan
Pada menu pilih Rancangan ➨ Edit HTML.
Pada Edit Template jangan lupa untuk mencentang Expand Template Widget,
Jika sudah sekarang sobat cari kode <data:post.body/> atau <p><data:post.body/></p>
Jika sudah ketemu selanjutnya sobat copy kode berikut dan pastekan di bawah kode tadi.

Keterangan: Jika sobat sudah memasang readmore dan ada dua atau tiga kode <data:post.body/> atau <p><data:post.body/></p> pilih yang kedua, ok langsung aja copas ni code :

<b:if cond='data:blog.pageType == "item"'>
<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 = 50;
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>

NB:
Untuk merubah judul Related Post dengan Articles Terkait atau lainnya, sobat cukup rubah kode pertama yang bewarna biru Related Post dengan kata-kata sobat sendiri.

Masih belum selesai sob, masih di dalam kota Edit Template, sekarang kita akan memasukkan kode modifikasinya, untuk itu sobat cari kode ]]></b:skin> jika sudah ketemu copy kode berikut dan pastekan di atas kode ]]></b:skin&gt;.

/*-- modifikasi related posts by http://klik-hacking.blogspot.com--*/
.rbbox{border: 1px solid #D8D8D8;padding: 5px;
background-color: #E0F8E0;-moz-border-radius:5px; margin:5px;}
.rbbox:hover{background-color: #EFFBEF;}

Simpan. Dan sekarang sobat bisa lihat sendiri perubahan di bagian bawah postingan sobat.

NB: Jika sobat ingin mengganti background related post seperti gambar di atas sobat cukup rubah background-color: #E0F8E0 mejadi background:url(http://letakkan Url gambar sobat disini)

Follow @REFAI_ID Follow @KlikHacking