Memasang Widget Related Post Dengan Scroll
- Selamat pagi sahabat blogger, kali ini saya akan menjelaskan
bagaimana cara membuat widget related post / artikel terkait dengan
scroll. Widget related post menurut saya adalah widget yang sangat
penting untuk kita pasang seperti yang telah saya bahas pada artikel
yang sudah saya bahas sebelunya dalam artikel "Widget Yang Harus Dipasang di Blog". Dalam artikel tersebut saya membahas widget apa saja yang penting untuk dipasang dalam blog.
Ok saya rasa sudah cukup basa-basinya, dan kita mari kita mulai membahas bagaimana cara memasang widget related post di blog :
Memasang Widget Related Post Dengan Scroll :
1. Login ke akun blogger
2. Klik template --> Edit HTML
3. Centang pada :
4. Copy kode css berikut ini, kemudian letakan diatas kode ]]></b:skin> :
.rbbox {border: 1px solid #333; padding: 5px; background-color: #F2F2F2;-moz-border-radius:0px; margin:5px;}
.rbbox:hover {background-color: #F2F2F2;}
.rbbox ul li {display : block; background : url(http://i1237.photobucket.com/albums/ff469/indolaron/icon/005.png) no-repeat 0px 0; margin-left : -10px; padding-top : 0; padding-right : 0px; padding-bottom : 1px; padding-left : 10px; margin-bottom : 5px; line-height : 1em; border-bottom:1px dotted #cccccc;}
6. Lalu copy kode script dibawah ini, kemudian letakan dibawah kode "<data:post.body/>". Dan jika anda menemukan kode "<data:post.body/>" lebih dari satu, letakan kode script dibawah ini dibawah kode "<data:post.body/>" yang ke 2 atau 3!
<b:if cond='data:blog.pageType == "item"'>
<b>Artikel Terkait :</b>
<div class='rbbox'>
<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 = 50;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 50;
maxNumberOfLabels = 4;
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>
7. Kemudian simpan template. Selesai
Catatan :
"Jika anda ingin mengganti nama widgetnya, silahkan edit kode yang berwarna merah"
Related Post:
tutorial blog
- PENYEBAB ANJLOKNYA PERINGKAT BLOG
- Contoh Penulisan KODE Background Image
- Daftar widget keren untuk blogger
- Cara mudah Bikin Template Blog Sendiri
- Cara Termudah Membuat Slider Popular Post
- Cara Cepat dan Akurat Memantau Pengunjung Blog/ Website
- Tips Cara Membuat Animasi Semut berjalan di blog
- Cara Mudah Memasang Iklan Melayang di Bawah Footer Blog dengan tombol Close
- Cara Memasang Widget Admin Blog Lagi Online dan Offline
- Cara Mudah Memasang Widget Radio Online Multy Chanel Di Blog/Website
- Cara Memasang Siaran Radio Online di Blog
- Membuat Gambar dan Keterangan di atas Kotak Komentar blog
- Cara Mengetahui Harga Jual Sebuah Blog/Website
- cara mudah membuat judul blog kita berjalan di atas postingan blog
- Cara Mudah dan cepat Pasang TV Online di Blog
- Cara Melaporkan Blog yang Copas tanpa izin Agar di Hapus Google
- Menambah Kolom Diatas dan Dibawah Postingan Blog
- Cara Membuat Tweet Box Dibawah Postingan
- Membuat 3 Kolom di Bawah Header Blogspot
- Cara Membuat Tombol Share di Bawah Postingan Blog
- Cara membuat widget reader di postingan blog
- Cara Memasang Like / Share Button di Setiap Postingan Blogger
- Cara Pasang Widget Lintaskan/Lintas Me di Blog
- Cara membuat link otomatis di blogger