Cara Membuat Related Articles pada Blog dengan Fungsi Scroll

Udah banyak mungkin ya tentaang cara membuat related article atau related post pada blog. Tapi dari sekian banyaak contoh, ane nemuin satu metod related article yang baagus, plus ruingan, ga hanya ringaan tapi ruingan jadi sobat ga usah khawatir loading blog bakaalan lemot. Pengunjung betah, mbah google pun betah hahaha...

Cara membuat related articles pada blog dengan fungsi scroll

Ikuti langkah-langkah berikut:

Ceklist expand template widget

Sebelum melakukan penaambahan didalam template, sebaiknya backup dulu template kalian, gunanya untuk mengembalikan template kepaada keadaan semula bila terjadi kesalahan, caranya dengan mendownload full template

Temukan kode <data:post.body> dan letakan kode dibawah ini dibawahnya

<b:if cond='data:blog.pageType == "item"'>

<br/>

<br/>

<H2>Artikel Terkait:</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 = 10;

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>

Kemudian cari kode ]]></b:skin> dan tempatkan kode dibawah ini diatasnya

.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);

Catatan : Untuk kode yang berwarna merah silahkan sobat sesuaikan sendiri.

Mudah kan cara membuat related article pada blog dengan fungsi scroll? Sobat juga bisa melihaat artikel lain tentang cara membuat related posts dengan model simple, silahkaan sobat cari di blog ini. Atau mungkin sobat punya cara yaang lebih efektif? :)