Cara membuat widget Relatedpost keren
Seperti yang sobat lihat setelah artikel ini, yaitu Widget Related post berwarna biru. Keren 'kan? Sebenernya, itu widget bawaan template yang lama (Sebelum template Trick-collection menjadi BlogSeno template Yellow =D ) Saya sebut itu widgetnya lumayan bagus. Cara membuatnya mudah setelah saya lihat dan teliti scriptnya.
1. Pertama, login dan masuk pada template rancangan di Blogger sobat > Klik Lanjutkan

2. Klik Expand Template Widget dan cari script dengan menekan tombol CTRL + F. Ketikkan <div class="post-footer"> . Bila telah ketemu, Copy dan paste script berikut tepat di bawahnya atau pada script categories bila ada.
3. Lalu cari kode ]]></b:skin> dan Copas kode berikut Tepat di bawahnya.
4. Simpan dan lihat hasilnya! Semoga sukses dan berhasil :)
(Bila ada kesalahan pada script Mohon dilaporkan :)
1. Pertama, login dan masuk pada template rancangan di Blogger sobat > Klik Lanjutkan
2. Klik Expand Template Widget dan cari script dengan menekan tombol CTRL + F. Ketikkan <div class="post-footer"> . Bila telah ketemu, Copy dan paste script berikut tepat di bawahnya atau pada script categories bila ada.
<b:if cond='data:blog.pageType == "item"'>
<div class='related_posts'>
<div class='widget-content'>
<h4>Related Post:</h4>
<div id='data2007'/><br/><br/>
<script type='text/javascript'>
var homeUrl3 = "<data:blog.homepageUrl/>";
var maxNumberOfPostsPerLabel = 10;
var maxNumberOfLabels = 2;
maxNumberOfPostsPerLabel = 10;
maxNumberOfLabels = 2;
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('data2007').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>
</div>
</b:if>
3. Lalu cari kode ]]></b:skin> dan Copas kode berikut Tepat di bawahnya.
/* Related Post */
#content .related_posts {
margin-top:5px;
padding:0 10px;
border:1px solid #B7E8FF;
background:#E0F5FF;
}
#content .related_posts h4{
color:#111;
font:normal 19px/19px Arial, sans-serif;
letter-spacing:-0.5px;
padding:7px 0;
border-bottom:solid 1px #fafafa;
}
#content .related_posts a {
color:#000;
}
#content .related_posts ul{
padding:0;
}
#content .related_posts ul li {
list-style:none;
padding:4px 5px 4px 17px;
border-bottom:1px solid #f9f9f9;
line-height:18px;
background:url(http://i1121.photobucket.com/albums/l513/iqbalkanci/p-con-li.png) no-repeat 0 7px;
}
4. Simpan dan lihat hasilnya! Semoga sukses dan berhasil :)
(Bila ada kesalahan pada script Mohon dilaporkan :)
panjngan bangat kodenya tidak memberatkan blog nih sob,..
ReplyDeleteenggak ko sob.. :)
Deletepunyaku blm ada related pos nya hehehe,, mau ikutan nyoba ah, siapa tau cocok .. :)
ReplyDeleteSilahkan Mas Eka... :)
DeleteMantab bang,, sekarang sudah saya pasang di blog saya... kalo mau cek silahkan mampir ke www.cofeemix.com ....(Memberikan informasi mengenai blogging, SEO, dan semua tentang blog) hehe
ReplyDeleteOk, TKP gan
Deletewah makasih bnget mas tutorialnya :D
ReplyDeleteSama-sama :)
Deletenanti saya coba deh :DD
ReplyDeletemakasih yaa :D
http://www.asianbrilliant.com
kursus komputer via online
http://www.kaospolos.com |
http://www.rawatweb.com