16/05/11

Widget Related Post Khusus Untuk Blogger / Blogspot

Rekan netter sekalian,
Related post atau dengan kata lain tulisan terkait, sudah merupakan sebuah kebutuhan dalam blogging. Berikut adalah beberapa manfaat widget related post untuk blog kita :

  • Mengarahkan pengunjung untuk mengunjungi halaman posting lain dari blog kita
  • Bisa meningkatkan traffic impresi dari blog kita.
  • Bisa membuat pengunjung lebih betah berlama-lama di blog kita, terutama jika kita memiliki posting berseri.
  • Pengunjung lebih mudah mendapatkan informasi posting yang terkait dengan posting yang sedang dibaca. 
  • Tentu saja dari sisi SEO blog akan sangat bermanfaat. Dan masih banyak lagi.   

Kalau di dalam Wordpress akan cukup mudah memasangnya karena kita tinggal install pluggin yang banyak bertebaran di jagat maya, anda tinggal pilih dan menginstallnya sesuai dengan keinginan anda. Tapi sayangnya di Blogger/blogspot hal ini tidak bisa dilakukan. Tapi jangan kuatir karena kita juga bisa memasang widget related post ini dengan cara mengakali script templatenya.

Berikut akan saya bagikan panduan untuk memasang widget related post tersebut.

1. Loggin ke Blogger.com dengan akun anda.
2. Masuk ke menu Rancangan (Design) --> html

3. Kemudian beri tanda check/centang (v) di Expand Template Widget dan cari kode berikut <data:post.body/> , (untuk mudahnya pada browser gunakan control+F, kemudian kopi kode ke dalam tombol pencari) atau kalau ada beberapa kode tersebut di dalam script template html anda, cari kode yang paling terakhir, kemudian paste-kan di bawah kode tersebut kode script di bawah ini :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='similiar'>
<!-- *****************http://hoctro.blogspot.com*****Jan,2007****************** -->
<!-- *****************Related Articles by Labels - Take Two****************** -->

<!--
Modified by JackBook.Com to make it easier to use. 
1. Now, users don't need to change anything to use this widget. just copy and paste, and done!
2. The current article will also be listed, now it's no more.
-->

<div class='widget-content'>
<h3>Related Posts by Categories</h3>
<div id='data2007'/><br/><br/>
<div id='hoctro'>
Widget by <u><a href='http://zonarejekiaira.blogspot.com'>Formula bisnis online gratis</a> | <a href='http://captainamericatshirt.co.cc.com'>Captain America T-shirt</a></u>
</div>
<script type='text/javascript'>

var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;

maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 3;


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>

Yang terakhir jangan lupa untu menyimpan hasil editing dari template anda.

4. Kalau semua langkah instalasi di atas anda lakukan dengan benar, maka hasilnya akan terlihat seperti gambar di bawah ini.

Selamat mencoba dan semoga sukses

Semoga bermanfaat
Wassalam / HUGET

sumber gambar dari google image


1 komentar:

  1. mantap sekali infonya pak! semua sudah dijelaskan secara lengkap danrinci. sekali lagi terima kasih pak!
    ditunggu kunjungan baliknya pak : BROKER FOREX INDONESIA

    BalasHapus

Silakan posting komentar anda

◄ Newer Post Older Post ►

Posting Terbaru

 

Copyright 2011 Formula Bisnis Online Gratis | Design by Tutorial Blogspot Published by Template Blogger Toko Online