Friday, October 31, 2014

Cara Membuat Widget Artikel Terbanyak Dikomentari di Blogger

Cara Membuat Widget Artikel Terbanyak di Komentari di Blogger

CRONOSAL-Sebagian besar Blogger pasti memiliki widget Artikel Terpopuler. Tujuannya, agar pengunjung dapat melihat artikel yang sedang populer di suatu blog, dengan demikian angka Pageview meningkat dan Bounce Rate bisa menurun. Meskipun widget Artikel Terpopuler sudah cukup bagus, menurut saya itu kurang GREGET.

Sebuah widget yang terlupakan dan memang jarang sekali dipakai yaitu Most Commented Posts Widget atau Widget Artikel Terbanyak Dikomentari. Secara desain, widget ini sederhana namun mampu menarik pengunjung jika pencampuran kode CSS sesuai dengan nuansa blog. Saya mempunyai 2 buah widget sejenis namun dengan tampilan yang berbeda.


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 kode di bawah ini

<style>
/* ######### Widget Posts Terbanyak Dikomentari by CRONOSAL ##########*/ 
.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 tulisan berlatar biru dengan alamat blog sobat
  • Pada tulisan berlatar merah ganti sesuai keinginan
  • Pengaturan CSS dapat diubah


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


Kode diatas sudah cukup ringan, namun jika ingin yang lebih ringan dan sederhana bisa juga menggunakan kode sederhana dibawah ini. Metode penggunaannya sama dengan kode 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 adalah mode bold, jika ingin menonaktifkan cukup ubah menjadi false
  • Tulisan berlatar hijau adalah jumlah maksimal posting yang terdeteksi
  • Tulisan berlatar oranye adalah jumlah yang ditampilkan
  • Tulisan berlatar biru adalah homepage blog sobat

Atau pada widget sidebar blog ini (Banyak Dikomentari)


Jika ada pertanyaan, silahkan ajukan lewat kolom komentar.



Sekian



SALAM Blogger

Berlangganan Artikel Via Email



Gunakanlah form komentar dengan bijak, hanya 20% komentar yang disetujui. Jadi jangan buang waktu Anda.

Jika ingin bertanya, berikan informasi yang detil.

Mohon untuk tidak melakukan spamming