Mostly Comments Posts Widget for Blogger And Wordpress

Socialize It →

Tweet

0

Advertisements

Most of you requested however we tend to created the foremost commented convenience that shows the list of Top10 hottest posts sorted by comment bubbles. you'll see this convenience on our sidebar beneath the heading "Most Discussed". What we tend to did here was victimization existing script from Yahoo! Pipes that uses json to break down and show every post with highest variety of comments announce thereon. victimization CSS3 pseudo properties, we tend to then titled the comment count with comment bubbles. This convenience is just a copy-paste tool which will be put in at intervals seconds. Lets add this dynamic and quick loading convenience to your blogger blogs!


How To ADD Commenting Widget In Blogger  :

1. Go to Blogger >> Layout
2. Click "Add a Gadget"
3. Choose HTML/JavaScript gizmo
4. Paste the subsequent code within it:

        <style> /* ######### Most Commented Widget by MBT ##########*/ .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.mybloggertricks.com &ShowHowMany=6 &_id=390e906036f48772b2ed4b5d837af4cd &_callback=getYpipePP &_render=json" type="text/javascript"></script>


Make these tiny changes:

1. Replace along with your diary URL  WWW.LARGETUTORIALHUB.TK
2. Replace this 6 with what number post titles you would like to show within the list Your Blog.
3. To change the background color of the comment, merely replace the yellow highlighted positional representation system color codes ( #292D30 ) along with your custom color.
4. To change the Text color of the Comment count Replace #FFF.
5. Replace #dedede if you would like to alter the border color that seems below every post title. If you do not wish to point out a border below every list item then merely delete this line:  border-bottom: 1px broken #dedede; 
6.    Save and you're all done View Your Blog

Advertisements

About the Editorial Team

The Editorial Team of Large Tutorial Hub.LTD consists of a group of Professional Blogger geeks Led by Admin (Founder of Large Tutorial Hub).