Posts
Kali ini saya pengen posting Cara Simpel Membuat Artikel Terkait dengan Scroll , nah untuk demo silahkan sobat lihat aja Gambar Diatas , Nah sobat semua tentunya pasti tahu dong apa fungsi dari Artikel Terkait...? Kalau menurut saya sih widget artikel terkait adalah wajib dimiliki oleh Blog kita , apalagi kalau Blogger itu mengincar traffic rank yang tinggi...! karena dengan adanya widget artikel terkait ini kita bisa secara otomatis menampilkan beberapa daftar judul postingan beserta linknya dari artikel yang memiliki kategori yang sama , nah apabila ada pengunjung yang tertarik saat membaca daftar artikel kita tadi so pasti mereka bakal ngeklik itu artikel sob , dan pastinya jumlah penayangan laman kita akan bertambah...!
Oke buat sobat yang pengen pasang widgetnya silahkan ikuti tutorial di bawah ini...!
1. masuk ke akun Blogger
2. Pilih Template --> Edit HTML --> Centang Expand Template Widget di bagian kiri atas
3. Gunakan CTRL+F untuk mencari Kode ]]></b:skin>
4.Kalau sudah ketemu silahkan sobat copas/copy paste kode di bawah ini tepat di atas kode ]]></b:skin> tadi
.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);}
5.Nah setelah itu tugas kita sekarang adalah mencari kode <data:post.body/>
6.Kemudian sobat harus mencopy dan mempastekannya tepat di bawah kode<data:post.body/> tadi
<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>
Penting...!
Khusus Buat Sobat Blogger yang blognya sudah dipasang auto readmore di Templatenya , sobat bisa menpastekan kode diatas tepat di bawah <data:post.body/> yang kedua , nah kode<data:post.body/> yang kedua itu terletak tepat di bawah kode fungsi readmore tadi
7.Setelah itu klik pratinjau untuk menjaga2 apabila ada kode yang error
8.Kalau tidak ada kode yang error silahkan sobat simpan template...!
Mungkin cukup sekian tutorial saya tentang Cara Simpel Membuat Artikel Terkait Dengan Scroll Di Blog
