Thursday, May 11, 2017

Most Commented Posts Widget for Blogger with Comment bubbles!


One of the best widgets for your blogger is a Most Commented Widget for your Blogger. This lets the visitors to see the trending post and encourages them to click on respective posts to read them. This widget is a simple too basic, however for the modern day websites visitor. This not only makes them read your articles but also attracts them to join the discussions going on your blog. In order to do that you must need a most commented posts widget for Blogger.


This tutorial for a Customized widget on your site is a lot easier than you think. In order to have an effective widget however, you are going to need a few specific things to help you out.



Add Most Commented Widget to Blogger with Comment Bubbles



  1. Go to Blogger > Layout



  • Click "Add a Gadget"

  • Choose HTML/JavaScript widget


 

  • Paste the Following code inside it:


 /* ######### Most Commented Widget by WhizBlogger ##########*/ 
.commentbubble { 
background: #292D30; 
width: 49px; 
float: left; 
margin: 2px 20px 35px 0px; 
font-weight: bold; 
font-size: 1.3em; 
text-align: right; 
font-family: georgia,Helvetica; 
padding: 0px 0px 5px 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 +  "  </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.whizblogger.com 
&ShowHowMany=6 
&_id=390e906036f48772b2ed4b5d837af4cd 
&_callback=getYpipePP 
&_render=json" 
type="text/javascript"></script>

Make these small changes

  • Replace with your Blog URL  http://www.whizblogger.com

  • Replace this 6 with how many post titles you wish to display in the list.

  • To change the background colour of the comment bubbles, Simply replace the yellow highlighted hexadecimal colour codes ( #292D30 ) with your custom color.

  • To change the Text colour of the Comment count Replace #FFF.

  • Replace #dedede if you wish to change the border color that appears below each post title. If you don't want to show a border below each list item then simply delete this line:  border-bottom: 1px dashed #dedede;

  • Save and you are all done!

0 comments:

Post a Comment