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.


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='related_posts'>
<div class='widget-content'>
<h4>Related Post:</h4>
<div id='data2007'/><br/><br/>
<script type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 10;
var maxNumberOfLabels = 2;
maxNumberOfPostsPerLabel = 10;
maxNumberOfLabels = 2;

function listEntries10(json) {
 var ul = document.createElement(&#39;ul&#39;);
 var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
                json.feed.entry.length : maxNumberOfPostsPerLabel;
 for (var i = 0; i &lt; maxPosts; i++) {
   var entry = json.feed.entry[i];
   var alturl;
   for (var k = 0; k &lt; entry.link.length; k++) {
     if (entry.link[k].rel == &#39;alternate&#39;) {
       alturl = entry.link[k].href;
       break;
     }
   }
   var li = document.createElement(&#39;li&#39;);
   var a = document.createElement(&#39;a&#39;);
   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 &lt; json.feed.link.length; l++) {
   if (json.feed.link[l].rel == &#39;alternate&#39;) {
     var raw = json.feed.link[l].href;
     var label = raw.substr(homeUrl3.length+13);
     var k;
     for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
     var txt = document.createTextNode(label);
     var h = document.createElement(&#39;b&#39;);
     h.appendChild(txt);
     var div1 = document.createElement(&#39;div&#39;);
      div1.appendChild(h);
     div1.appendChild(ul);
     document.getElementById(&#39;data2007&#39;).appendChild(div1);
   }
 }
}
function search10(query, label) {
var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
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 = &quot;<data:label.name/>&quot;;
 
   var test = 0;
   for (var i = 0; i &lt; labelArray.length; i++)
   if (labelArray[i] == textLabel) test = 1;
   if (test == 0) {
      labelArray.push(textLabel);
      var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
             labelArray.length : maxNumberOfLabels;
      if (numLabel &lt; 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 :)

9 comments :

  1. panjngan bangat kodenya tidak memberatkan blog nih sob,..

    ReplyDelete
  2. punyaku blm ada related pos nya hehehe,, mau ikutan nyoba ah, siapa tau cocok .. :)

    ReplyDelete
  3. Mantab 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

    ReplyDelete
  4. wah makasih bnget mas tutorialnya :D

    ReplyDelete