|
Artikel Terkait Scroll |
Tips trik ini membuat arikel terkait berbentuk scroll yang biasa
mondar-mandir’ ke atas dan bawah. Kelebihan teknik scroll ini, sobat
dapat menampilkan jumlah artikel terkait tiap label sebanyak-banyaknya
tanpa mengganggu panjang vertikal dari halaman posting karena disiasati
menggunakan scrolling. Untuk pengunjung tentu dengan leluasa dan bebas
menelusuri Blog sobat.
OK, sekarang berikut tutorial
cara memasang artikel terkait dengan scroll:
1. Pastikan sobat ‘stand by’ di akun Blogger, pergi ke
Template dan klik
Edit HTML,
2. Muncul kotak editor template, sembarang klik disalah satu kotak tersebut,
kemudian tekan Ctrl + F, cari kode
]]></b:skin> dan letakkan CSS
berikut diatasnya:
/* Artikel Terkait */
.rbbox{border: 1px solid #D8D8D8;padding: 5px;
background-color: #E0F8E0;-moz-border-radius:5px; margin:5px;}
.rbbox:hover{background-color: #EFFBEF;}
1.
#E0F8E0 = kode warna kotak background Related Post (ganti sesuai selera sobat),
2.
#EFFBEF = kode warna kotak background 'hover' related post
muncul pada saat disorot mouse (ubah dengan warna kesukaan sobat).
4. Cari kode
<data:post.body/> atau
<div class='post-body>,
letakkan script berikut ini di bawah kode tersebut:
<b:if cond='data:blog.pageType == "item"'>
<H4>Related Post:</H4>
<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 = 5;
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>
Prinsipnya, meletakkan kode tersebut berdekatan dengan
post-entri atau
di bawah postingan sobat. Angka
50 berwarna biru menunjukkan jumlah artikel terkait dalam
satu label, bisa diubah sesuai selera sobat.
6. Klik
Simpan Template, dan sobat silahkan lihat hasilnya.
Judul : Cara Memasang Artikel Terkait dengan Scroll di Bawah Posting
Deskripsi : Artikel Terkait Scroll Tips trik ini membuat arikel terkait berbentuk scroll yang biasa mondar-mandir’ ke atas dan bawah. Kelebihan te...