Cara Membuat Widget Related Post / Artikel Terkait di Sidebar

Pada kesempatan kali ini saya ingin membagikan tutorial mengenai cara membuat related post atau artikel terkait. Widget related post ini sendiri merupakan widget yang ada di blog saya ini juga. Lebih jelasnya silahkan tengok ke kanan (sidebar). Nah, kurang lebih widget yang akan saya berikan kali ini seperti itu.

Di atas merupakan screen shoot widget related post yang saya ambil dari blog sebelah. hihihi Nah, bagaimana. Kerenn bukan. Anda sudah tidak sabar ingin memasangnya, okelah langsung cekidot ke langkah-langkahnya :

1. Login ke Blogger

2. Klik Tab Rancangan → Edit Html

3. Tekan CTRL + F dan masukkan kode ]]></b:skin>

4. Letakkan kode di bawah ini di atas kode di atas :

#related-post {
background: none repeat scroll 0% 0% blue;
border: 1px solid blue;
width:300;
color:#fff;
padding-left:4px;
padding-right:4px
}

5. Masih di Edit Html, tekan CTRL + F lagi dan masukkan kode </head>

6. Letakkan kode di bawah ini di atas kode di atas :

<script type='text/javascript'>
//<![CDATA[
var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];relatedTitles[relatedTitlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if(d.link[a].rel=="alternate"){relatedUrls[relatedTitlesNum]=d.link[a].href;relatedTitlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);var c=new Array(0);for(var a=0;a<relatedUrls.length;a++){if(!contains(b,relatedUrls[a])){b.length+=1;b[b.length-1]=relatedUrls[a];c.length+=1;c[c.length-1]=relatedTitles[a]}}relatedTitles=c;relatedUrls=b}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(){var b=Math.floor((relatedTitles.length-1)*Math.random());var a=0;document.write("<ul>");while(a<relatedTitles.length&&a<30){document.write('<li><a title="'+relatedUrls[b]+'" href="'+relatedUrls[b]+'">'+relatedTitles[b]+"</a></li>");if(b<relatedTitles.length-1){b++}else{b=0}a++}document.write("</ul>")};
//]]>
</script>

7. Setelah itu Simpan

Setelah proses di atas selesai, silahkan ikuti instruksi di bawah ini :

1. Buka Tab Rancangan → Elemen Halaman

2. Click Tambah Gadget (pilih bagian sidebar) → HTML / Javascript

3. Masukkan kode di bawah ini di kotak munculan :

<div id='related-post'>
<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>
</div>

4. Setelah itu, click Simpan dan lihat hasilnya. Kalau berhasil jangan lupa pencet tombol Share di atas

Tutorial Blogspot

• Cara Menampilkan Update Artikel Blog atau Website ke Twitter dan Facebook
• Cara Membuat Daftar Isi Blog
• Membuat Widget Recent Post dengan Gambar
• Cara Membuat Stripe-Ad di Blogspot
• Tips SEO ( Search Engine Optimization) Lengkap
• Cara Membuat Widget Sharing is Sexy
• Cara Memodifikasi Tampilan Facebook Fans Page
• Cara Mengganti Template di Blogspot
• Memodifikasi Tampilan Template "Bloggerpedia 007 Style Template"
• Membuat Widget Recent Post Slider
• Cara Mendaftarkan Blog di Ask.Com

Tutorial Blog

• Cara Menampilkan Update Artikel Blog atau Website ke Twitter dan Facebook
• Cara Membuat Daftar Isi Blog
• Membuat Widget Recent Post dengan Gambar
• Cara Membuat Stripe-Ad di Blogspot
• Cara Melakukan Review Blog di Alexa
• Tips SEO ( Search Engine Optimization) Lengkap
• Cara Membuat Widget Sharing is Sexy
• Cara Memodifikasi Tampilan Facebook Fans Page
• Cara Mengganti Template di Blogspot
• Memodifikasi Tampilan Template "Bloggerpedia 007 Style Template"
• Membuat Widget Recent Post Slider
• Tata Cara Tukeran Link di Blog Ini
• Cara Mendaftarkan Blog di Ask.Com

Posting yang berjudul Cara Membuat Widget Related Post / Artikel Terkait di Sidebar ini Diposting oleh Coba Coba pada 6/26/2011 07:22:00 PM
Label: Tutorial Blog, Tutorial Blogspot
Jangan lupa berikan komentar anda pada artikel yang berjudul Cara Membuat Widget Related Post / Artikel Terkait di Sidebar ini :DD