Stylish Recent Comments Widget With Avatar For Blogger

Stylish Recent Comments Widget With Avatar For Blogger


Recent Comments Widget
In this blogsphere there are lots of popular blogger gadgets that you can put into your blog to enhance  its performance and look. Like if you need to show related posts below every post then you can use related posts widget, to show most trendy posts of our blog you can put popular post widget into our  blog sidebar, instead of showing popular posts you can also list our recent published posts into sidebar using recent post widget to increase your blog traffic and reduce blog bounce rate. All of these gadgets have their own benefits. And today I bring another gadget for you which can be used to show recent comments with avatar in your blogger blog that will help you to maintain your blog readership. Let see the live demo first.

Live Demo

  • karmveer
    karmveerReally nice and easy way to get more com…
  • Shahadat Hossen Chowdhury
    Shahadat Hossen Chowdhurythis is very much useful for me and my w…
  • Dhiraj Barnwal
    Dhiraj BarnwalReally a great post Ankit. These steps w…
  • Pawan Paudel
    Pawan Paudel@Ankit As far I know those blogs which e…
  • Ariful Haque
    Ariful HaqueThat was very interesting topic. and its…

  • If you are interested to add this stylish recent comments widget into your blogger blog then follow below steps.

    Add Recent Post Widget


    1. Go to blogger >> Layout >> Add a Gadget >> HTML/JavaScript

    2. Paste the below code in it.

    <style type="text/css">
    ul.btt_recent_comments {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .btt_recent_comments li {
        -webkit-transition: .5s;
        -moz-transition: .5s;
        -ms-transition: .5s;
        -o-transition: .5s;
        transition: .5s;
        border: 2px solid transparent;
    }
    .btt_recent_comments li:hover {
        -webkit-transform: scale(1.2) translate(15px);
        -moz-transform: scale(1.2) translate(15px);
        -ms-transform: scale(1.2) translate(15px);
        -o-transform: scale(1.2) translate(15px);
        transform: scale(1.2) translate(15px);
        box-shadow: 0 0 20px 1px #aaa;}
    .btt_recent_comments li {
        background: none!important;
        margin: 5px!important;
        padding: 5px!important;
        display: block;
        clear: both;
        overflow: hidden;
        list-style: none;
    }
    .btt_recent_comments li .avatarImage {
        padding: 3px;
        background: #fefefe;
        -webkit-box-shadow: 0 1px 1px #ccc;
        -moz-box-shadow: 0 1px 1px #ccc;
        box-shadow: 0 1px 1px #ccc;
        float: left;
        margin: 0 6px 0 0;
        position: relative;
        overflow: hidden;
    }
    .avatarRound {
        -webkit-border-radius: 100px;
        -moz-border-radius: 100px;
        border-radius: 100px;
    }
    .btt_recent_comments li img {
        padding: 0;
        position: relative;
        overflow: hidden;
        display: block;
    }
    .btt_recent_comments li span {
        margin-top: 3px;
        color: #666;
        display: block;
        font-size: 12px;
        line-height: 1.4;
    }
    </style>
    <script type="text/javascript">
    //<![CDATA[
        // Recent Comments Settings
        var
     numComments  = 5,
     showAvatar  = true,
     avatarSize  = 45,
     roundAvatar = true,
     characters  = 40,
     showMorelink = false,
     moreLinktext = "More ?",
     defaultAvatar  = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXe8H1uuY9-ujCpR6WDD85ZuEuyHfM0XEJWK2IMj_Rbcd_WeAdZxwa4siDxpUkitJAV5KEeX33sSwFwv6ZD4SyBcA7_ty_cEUgb2_RdOtnGz0-62ltXeLHxgiujvMitDRbDQC605PBUgGE/s320/avatar.png",
     hideCredits = true;
    //]]>
    </script>
    <script type='text/javascript'>
    //<![CDATA[
    eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('9 G=G||5,8=8||1z,w=w||1w,m=m||"j://V.L.g/1i/?d=1b",F=F||" 1c &1D;",x=(A x===\'B\')?h:x,o=(A o===\'B\')?Q:o,q=(A q===\'B\')?h:q,r=(A r===\'B\')?Q:r;18 14(C){9 7;7=\'<R J="14">\';U(9 i=0;i<G;i++){9 z,y,2,k;4(i==C.O.e.D)X;7+="<10>";9 e=C.O.e[i];U(9 l=0;l<e.E.D;l++){4(e.E[l].19==\'1a\'){z=e.E[l].v;X}}y=e.M[0].1x.$t;2=e.M[0].1E$16.N;4(2.f("/P/")!=-1){2=2.p("/P/","/s"+8+"-c/")}b 4(2.f("/S/")!=-1){2=2.p("/S/","/s"+8+"-c/")}b 4(2.f("/T-c/")!=-1&&2.f("j:")!==0){2="j:"+2.p("/T-c/","/s"+8+"-c/")}b 4(2.f("H.g/n/17-W.I")!=-1){2="j://3.Y.Z.g/-1d-1e/1f/1U/1g/s"+8+"/1h.11"}b 4(2.f("H.g/n/1j-W.I")!=-1){2="j://3.Y.Z.g/-1k/1l/1m/1n/s"+8+"/1o.11"}b 4(2.f("H.g/n/1p.I")!=-1){4(m.f("L.g")!=-1){2=m+"&s="+8}b{2=m}}b{2=2}4(x===h){4(q===h){k="1q"}b{k=""}7+="<12 J=\\"1s "+k+"\\"><n J=\\""+k+"\\" N=\\""+2+"\\" 1t=\\""+y+"\\" 1u=\\""+8+"\\" 1v=\\""+8+"\\"/></12>"}7+="<a v=\\""+z+"\\">"+y+"</a>";9 13=e.1y.$t;9 6=13.p(/(<([^>]+)>)/1A,"");4(6!==""&&6.D>w){6=6.1B(0,w);6+="&1C;";4(o===h){6+="<a v=\\""+z+"\\">"+F+"</a>"}}b{6=6}7+="<u>"+6+"</u>";7+="</10>"}7+=\'</R>\';9 K="";4(r===h){K="15:1F;"}7+="<u 1G=\\"1H-1I:1J;15:1K;1L-1M:1N;"+K+"\\">1O 1P <a v=\\"j://V.1Q.1R/\\">1S</a></u>";1T.1r(7)}',62,119,'||authorAvatar||if||commBody|commentsHtml|avatarSize|var||else|||entry|indexOf|com|true||http|avatarClass||defaultAvatar|img|showMorelink|replace|roundAvatar|hideCredits|||span|href|characters|showAvatar|authorName|commentlink|typeof|undefined|btt|length|link|moreLinktext|numComments|blogblog|gif|class|hideCSS|gravatar|author|src|feed|s1600|false|ul|s220|s512|for|www|rounded|break|bp|blogspot|li|png|div|commHTML|btt_recent_comments|display|image|b16|function|rel|alternate|mm|More|AaI8|1X32ZM|TxMKLVzQ5BI|QYau8ov2blE|btt_blogger_logo|avatar|openid16|9lSeVyNRKx0|TxMKMIqMNuI|AAAAAAAABYc|8iasY0xpLzc|btt_openid_logo|blank|avatarRound|write|avatarImage|alt|width|height|40|name|content|60|ig|substring|hellip|raquo|gd|none|style|font|size|10px|block|text|align|right|Widget|by|SoftGlad|com|SoftGlad|document|AAAAAAAABYY'.split('|'),0,{}))
    //]]>
    </script>
    <script src="/feeds/comments/default?alt=json&amp;callback=btt_recent_comments&amp;max-results=5" type="text/javascript"></script>

    Customization:
    • Change below values from 5 to the number of recent comments you want to show in your blog.
    • numComments  = 5 and max-results=5

    • Replace below URL with your own image URL if you want to change default Avatar Image.
    defaultAvatar  = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXe8H1uuY9-ujCpR6WDD85ZuEuyHfM0XEJWK2IMj_Rbcd_WeAdZxwa4siDxpUkitJAV5KEeX33sSwFwv6ZD4SyBcA7_ty_cEUgb2_RdOtnGz0-62ltXeLHxgiujvMitDRbDQC605PBUgGE/s320/avatar.png",
    1. Save the gadget.

    2. You are done!
    Share on Google Plus

    About Unknown

      Blogger Comment
      Facebook Comment

    0 commentaires:

    Enregistrer un commentaire