Cara Memasang Artikel Terkait dengan Scroll di Bawah Posting - Testimoni, baca dulu: 3 Cara Membuat Artikel Terkait atau Related Post di Blog.
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:
.rbbox{border: 1px solid #D8D8D8;padding: 5px;
background-color: #E0F8E0;-moz-border-radius:5px; margin:5px;}
.rbbox:hover{background-color: #EFFBEF;}
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:
<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>
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.
0 komentar to "Cara Memasang Artikel Terkait Dengan Scroll"
About This Blog
Partner
Popular Posts
-
Alfamart adalah Supermarket terbesar dan terhebat di Indonesia telah menjadi sekaligus berani menjadi menjadi partner yang disebut Al...
-
Apa itu Open ID ? Open ID adalah Identitas Digital (ID) adalah layanan otentikasi bagi pengguna (user) dengan kontrol akses ...
-
Cara Membuat Artikel Terkait di Blogspot - Testimoni, baca dulu: 3 Cara Membuat Artikel Terkait atau Related Post di Blog. Model seder...
-
Cara/Tips Mudah Membuat Read More Otomatis di Blog – banyak para sobat blogger yang masih kebingungan untuk membuat readmore otomatis di ...
-
Sahabat Blogger pada sore ini saya akan memberikan tips - tips tentang 8 Rahasia Percaya Diri , kepercayaan diri salah satu kunci su...
-
Privacy Policy untuk Cara, Tips Dan Imformasi Jika Anda memerlukan informasi lebih lanjut atau memiliki pertanyaan tentang kebijakan pri...
-
Menjaga Kesehatan Telinga. Para sobat blogger kali ini saya cara-tips-dan-informasi akan memberikan beberapa tips Bagaimana Menja...
-
Cara Membuat Artikel Terkait Berbentuk Gambar Thumbnails - Testimoni, baca dulu: 3 Cara Membuat Artikel Terkait atau Related Post ...
-
Mendaftarkan Blog ke Google Webmaster! Mendaftarkan Blog ke Google Webmaster - Pada kesempatan ini saya akan menjelaskan bagaimana...
Label
Translate
Followers
Iklan
Powered by 123ContactForm | Report abuse
Posting Komentar