pengertian related post
Related Post adalah suatu Elemen yang berguna untuk menampilkan postingan yang terkait dengan artikel yang sedang kita baca, karena itu Artikel terkait adalah sebuah elemen penting dalam dunia blogger.,Namun Related Post yang saya bahas ini berbeda, ini adalah Related Post JSON ( dibaca Jason ) adalah sebuah format ringkas pertukaran data komputer, jadi ringan untuk blog anda alias tidak membuat lambat dan berat. Cara membuatnya mudah, ikuti langkah berikut ini:
- Login ke blogger
- Masuk ke menu tempelate>>edit HTML
- Cari kode ]]></b:skin> pada tempelate anda
- Copy CSS dibawah ini
- Paste tepat diatas kode ]]></b:skin> pada tempelate anda
.rbbox_blitarian4rt{border: 1px solid #000000;padding: 5px;
background-color: #F2F2F2;-moz-border-radius:5px; margin:5px;}
.rbbox_blitarian4rt:hover{background-color: #EFFBEF;}
.rbbox_blitarian4rt 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;}
- Kalau sudah memasang kode di atas
- Masih di edit tempelate,sekarang cari kode <data:post.body/>
- Copy Kode dibawah ini letakan dibawah kode <data:post.body/>
- Jika pada tempelate anda ada 2 kode <data:post.body/>
- Pilih kode <data:post.body/> yang kedua
<b:if cond='data:blog.pageType == "item"'>Kalau sudah preview dulu,jika tidak ada yang error langsung save saja,dan lihat hasilnya sekarang pada blog anda sudah terpasang related post dibawah postingan secara otomatis. .
<p style='font-style:bold;'>ARTIKEL TERKAIT:</p>
<div class='rbbox_blitarian4rt'>
<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 : Anda dapat mengubah kode warna pada background-color: #F2F2F2 dengan kode warna yang anda inginkan untuk kotak related post,background-color: #EFFBEF untuk warna background ketika disorot kursor. Anda juga dapat mengubah angka pada maxNumberOfPostsPerLabel = 50 untuk mengatur jumlah artikel terkait yang akan ditampilkan,dan angka pada maxNumberOfLabels = 3 untuk mengatur jumlah artikel terkait yang ingin ditampilkan
