Fungsi dari Related Post ini adalah untuk menampilkan Postingan Terkait berdasarkan Kategori yang sama yang secara otomatis muncul dibawah postingan Sobat. tujuannya adalah untuk membantu memudahkan pengunjung mencari artikel yang terkait di blog sobat, jadi pengunjungnya tidak perlu pusing-pusing lagi untuk mencari di daftar isi..
Untuk melihat hasilnya, sobat bisa lihat di bawah postingan ini yang di Kolom baca juga, seperti itulah hasilnya nanti. Bagaimana, tertarik untuk mencoba? Ikuti langkah demi langkah berikut :
- Login Ke Akun Blogger
- Pilih Layout / Rancangan - Edit HTML
- Cari Kode <data:post.body/> dengan menekan Ctrl+F
- Jika hasilnya lebih dari satu, pilih <data:post.body/> yang dibawahnya ada code </b:if>
- Copy Script Dibawah ini dan letakkan tepat dibawah <data:post.body/> atau diantara Code <data:post.body/> dengan </b:if>
<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>
Sampai disini sudah selesai, namun jika ingin menambahkan Efek warna background, silahkan tambahkan kode dibawah ini tepat diatas kode
]]></b:skin>
/*-- Related Post Background--*/
.rbbox{border: 1px solid #D8D8D8;padding: 5px;
background-color: #E0F8E0;-moz-border-radius:5px; margin:5px;}
.rbbox:hover{background-color: #EFFBEF;}
Yang berwarna biru adalah warna background kotak Related Post-nya. ia akan berubah warna jika Mouse diarahkan tepat diatas kotak tersebut.
Sekian Dulu Tips bloggernya..
Semoga Bermanfaat.. ^_^
