Membuat Artikel Terkait Di Blogger ~ BLOG BANG YOB

Assalamualaikum... WR...WB...

Baiklah di postingan kali ini saya akan coba membantu sobat yang kepingin memasang artikel terkait di blogger, dan biasanya terletak di bawah postingan blog anda. emang sih kalau menurut saya postingan saya ini udah tidak zaman lagi alias sudah banyak sobat-sobat blogger yg sudah tau dan sudah mengerti cara memasang nya. tapi di sini saya memposting cara memasang artikel terkait ini bagi yang belum tau dan bagi yang pemula di blogger.sewaktu saya baca-baca artikel kayak gini di google, widget artikel terkait (related Post) ini termaksut salah satu syarat agar SEO blog.

cara nya yang jelas login dulu ke akun blogger anda

pilih Tab desain >> edit HTML

kalau kotak edit HTML nya sudah terbuka anda delet dulu sampe kotak EDIT HTML nya kosong, kalau ada yang belum tau caranya seperti ini, tekan control+A di kolom kotak edit HTML nya trus Control+C dan Control+Del, selanjutnya sobat paste kan lagi kode HTML yang di copy tadi ke kotak yg kosong tadi (Control+V). Alasan saya kenapa cara nya seperti itu agar semua kode HTML nya terbuka. tapi kalau anda pingin cara yang lain silakan anda klik terus tanda panah yang berada di samping kiri di kotak Edit HTML blog anda sampai tanda panah nya bener-bener habis.

Selanjut nya cari kode ]]></b:skin>
copy dan pastekan kode CSS di bawah ini tepat di atas kode ]]></b:skin> tadi

.rbbox{border: 1px solid #000000;padding: 5px;
background-color: #F2F2F2;-moz-border-radius:5px; margin:5px;}
.rbbox:hover{background-color: #EFFBEF;}
.rbbox ul li {
display : block;
background : url(http://i1237.photobucket.com/albums/ff469/indolaron/icon/007.png) no-repeat 0px 0;
margin-left : -10px;
padding-top : 0;
padding-right : 0px;
padding-bottom : 1px;
padding-left : 20px;
margin-bottom : 5px;
line-height : 1em;
border-bottom:1px dotted #cccccc;}

Keterangan :

yang berwanah merah background-color: #F2F2F2 adalah warna baground latar (ganti sesuai dengan keinginan anda)
yang berwana merah selanjutnya background-color: #EFFBEF adalah warna baground saat tersentuh kursor (bisa di ganti dngan warna keinginan anda)
yang warna merah selanjutnya http://i1237.photobucket.com/albums/ff469/indolaron/icon/007.png adalah jenis ikon yang di awal bisa di ganti dengan keinginan anda.

Selanjut nya cari kode ini <data:post.body/>

biasanya sih kode diatas tidak hanya satu tapi ada beberapa kode, anda coba aja semua kode tersebut tapi saran saya usahain dari kode yang bawah, kalau kode yang bawah tidak bisa baru coba di kode yang selanjutnya.

salin kode dibawah ini dan pastekan di bawah kode <data:post.body/> tadi.

<b:if cond='data:blog.pageType == "item"'>
<p style='font-style:bold;'>ARTIKEL TERKAIT:</p>
<div class='rbbox'>
<div style='margin:0; padding:10px;height:150px;overflow:auto;border:1px solid #ccc;'>
<div id='albri'/>
<script type='text/javascript'>
var homeUrl3 = "<data:blog.homepageUrl/>";
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 15;
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>

Keterangan :

height:150 tinggi kotak nya ( bisa di setel dengan keinginan anda)
maxNumberOfPostsPerLabel = 50; Jumlah artikel terkait anda
maxNumberOfLabels = 3 Jumlah label yang ingin ditampilkan

selesai deh, mudah-mudahan berhasil ya dan masih work, tapi apa bila di blog sobat ada daftar isi nya pasti terdapat kotak ARTIKEL TERKAIT NYA yang kosong, kalau anda pingin menyembunyikan kotak artikel terkaitnya di postingan daftar isi klik aja di Menghilangkan Kotak Artikel Terkait Di Bawah Postingan Daftar ISI ini

Sudah dulu ya mudah-mudahan bermanfaat. terimakasih udah berkunjung

Membuat Artikel Terkait Di Blogger

Assalamualaikum... WR...WB...

Kategori