Header Ads

  • Breaking News

    Most Commented Posts Widget for Blogger

    Today, I'll show you a Gadget for Blogs that shows nicely the articles that have been most discussed on your blog, those with the most Comments!

    We had a delay in posting because almost all previous releases were having problems with Script that did not work on all blogs. We believe that with this release you will find all that you are looking for without problems.

    What we did here was to use the existing Yahoo Script for Comments and configure it in Blogger with some CSS3 touches. Follow these steps to install:

    1) Sign in to Blogger.

    2) Choose Layout.

    3) Select Add Gadget to the point you want.

    4) We select HTML / JavaScript from the list that opens,

    And we add the following code carefully: <style>
    /* ######### Most Commented Widget by BloggerTricks.gr ##########*/
    .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;

    <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 ;
    //to remove comment count delete this line
    <script src="http://pipes.yahoo.com/pipes/pipe.run?

    5) We can change the points with yellow and try what best fits our blog

    6) Save and end

    No comments

    Post Top Ad


    Post Bottom Ad