Cara membuat artikel terkait di akhir postingan blog dengan fungsi scroll box

Hai Sobat Blogger! kembali lagi nih dengan saya,hehehe,,kali ini rizaldi priantama akan berbagi info seputar blogging nih kawan,pada masih semangat nge-blog kan?harus semangat dong!!hehehe,nah kali ini topiknya dalah Cara membuat related post/artikel terkait dengan fungsi scroll box,yaitu membuat daftar artikel yang kita miliki yang akan ditampilkan ke dalam akhir bagian posting sesuai dengan label yang diterapkan,untuk lebih detail dan jelasnya lihat contoh gambar diatas,
Gimana sobat?tertarik untuk membuatnya?caranya cukup mudah lho,,tinggal pasang dan edit sedikit kodenya sehingga cocok untuk blog sobat :) , oke langsung aja ya,daripada banyak bicara,Mari kita bahas dan kupas tuntas bersama disini, ikuti langkah-langkah ini :

1.) Baca Basmallah
2.) Masuk ke akun Blogger anda
2.) Langsung menuju ke Dashboard > Template > Edit Html > Lanjutkan
3.) Centang tanda Expand template widget
5.) Cari Kode berikut ]]></b:skin>
6.) Lalu setelah ketemu copy kode dibawah ini,lalu paste tepat diatas kode ]]></b:skin>

Kode

6.) Setelah itu cari kode </data:post.body> , lalu letakkan kode dibawah ini tepat diatas kode </data:post.body>

Kode

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

7.) Lakukan pengeditan sendiri jika perlu
8.) Simpan Template dan lihat hasilnya

Share on: Facebook Twitter Google+ Linkedin Technorati Digg LintasMe

Cara membuat auto like facebook Suatu kebanggan bagi para pemilik fans page facebook jika memiliki banyak fans.Di bawah ini saya akan coba membuat tutorial tentang ca ...
Cara membuat read more bergambar otomatis di blogHai sobat blogger ! lama nih gak update postingan, habis try out sih, jadi super sibuk bulan ini, tapi saya sempatkan update artikel d ...
Cara memodifikasi footer blog agar menjadi lebih eleganHai sobat blogger, kali ini saya akan menyempakan diri memposting artikel , setelah kurang lebih beberapa hari ga update. Nah,kali ini ...
Dasar-dasar edit html v2Hai sobat blogger ! udah lama nih ya, ga update . Ya, mungkin gara-gara kurangnya dana buat blogging sob , hehe. Kok jadi curhat gini ...
Cara Buat/Pasang Burung Twitter Terbang Di BlogspotCara membuat / memasang widget burung Twitter terbang di Blogger, mungkin trik ini sudah tidak asing lagi bagi sobat dan sudah banyak ...