Cara Menciptakan Widget Artikel Terbanyak Dikomentari Di Blogger

-Sebagian besar Blogger pasti mempunyai widget Artikel Terpopuler. Tujuannya, semoga pengunjung sanggup melihat artikel yang sedang terkenal di suatu blog, dengan demikian angka Pageview meningkat dan Bounce Rate bisa menurun. Meskipun widget Artikel Terpopuler sudah cukup bagus, berdasarkan aku itu kurang GREGET.

Sebuah widget yang terlupakan dan memang jarang sekali digunakan yaitu Most Commented Posts Widget atau Widget Artikel Terbanyak Dikomentari. Secara desain, widget ini sederhana namun bisa menarik pengunjung jikalau pencampuran arahan CSS sesuai dengan nuansa blog. Saya mempunyai 2 buah widget homogen namun dengan tampilan yang berbeda.

DEMO

Cara Membuat Widget Artikel Terbanyak Dikomentari di Blogger

1. Log in ke Blogger.com => Tata letak / Layout =>  Tambah gadget / Add gadget => HTML/Javascript

2. Masukan arahan di bawah ini

<style>

/* ######### Widget Posts Terbanyak Dikomentari by ##########*/ 

.commentbubble { 

background: #292D30; 

width: 39px; 

float: left; 

margin: 2px 10px 35px 0px; 

font-weight: bold; 

font-size: 1.5em; 

text-align: center; 

font-family: trebuchet,Helvetica; 

padding: 0px 0px 10px 0px; 

text-align: right; 

color: #FFF; 

text-shadow: 4px 1px #202022; 

position: relative; 

top: 5px; 

} 

.commentbubble:after { 

content: ' '; 

position: absolute; 

width: 0; 

height: 0; 

right: 0px; 

top: 100%; 

border-width: 5px 8px; 

border-style: solid; 

border-color: #292D30 #292D30 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0); 

top: 34px; 

right: 6px; 

}

</style>

<script type="text/javascript"> 

function getYpipePP(feed) { 

document.write('<ul style="list-style:none; ">'); 

var i; 

for (i = 0; i < feed.count ; i++) 

{ 

var href = "'" + feed.value.items[i].link + "'"; 

var pTitle = feed.value.items[i].title; 

var pComment = + feed.value.items[i].commentcount; 

var pList = '<li style="clear:both; padding:10px 0px 30px 0px!important; border-bottom: 1px dashed #dedede; line-height:2em; "> <div class="commentbubble">' +pComment +  "&#160;&#160;</div>" +  "<a href="+ href + '" target="_blank">' + pTitle ; 

document.write(pList); 

//to remove comment count delete this line 

document.write('</a></li>'); 

} 

document.write('</ul>'); 

} 

</script> 

<script src="http://pipes.yahoo.com/pipes/pipe.run? 

 YourBlogUrl=http://www.cronosal.blogspot.com 

&ShowHowMany=5 

&_id=390e906036f48772b2ed4b5d837af4cd 

&_callback=getYpipePP 

&_render=json" 

type="text/javascript"></script>

Keterangan

• Ganti goresan pena berlatar biru dengan alamat blog sobat
• Pada goresan pena berlatar merah ganti sesuai keinginan
• Pengaturan CSS sanggup diubah

3. Klik Simpan / Save lalu Lihat blog / View Blog

Kode diatas sudah cukup ringan, namun jikalau ingin yang lebih ringan dan sederhana bisa juga memakai arahan sederhana dibawah ini. Metode penggunaannya sama dengan arahan diatas.

<script language='javascript'>

aBold = true;

numposts=9999;

maxshowresult=5;

home_page = "http://cronosal.blogspot.com/";

</script><script type="text/javascript" src="https://googledrive.com/host/0B47y9IEQFP-heEhKSHVtMGRXSVE"></script>

Keterangan

• Tulisan berlatar ungu yaitu mode bold, jikalau ingin menonaktifkan cukup ubah menjadi false
• Tulisan berlatar hijau yaitu jumlah maksimal posting yang terdeteksi
• Tulisan berlatar oranye yaitu jumlah yang ditampilkan
• Tulisan berlatar biru yaitu homepage blog sobat

DEMO

Atau pada widget sidebar blog ini (Banyak Dikomentari)

Jika ada pertanyaan, silahkan usikan lewat kolom komentar.

Source

Sekian

SALAM Blogger

Share this post