Browse > Home / / Install Avatar In Blogger Comments


Install Avatar In Blogger Comments

9 comments
Sunday, August 23, 2009 Posted by One-4-All

One of thing that i like form wordpress is their comments form have avatar feature. When some body leave a comment, it will be appear avatar on their comments form. It will be great thing if it can be on blogspot comments form too. But, unfortunately blogger doesn't support it for their comments form.

What is avatar? Avatar is an image (or icon) which is unique to the person who is making the comment. When using comment avatars in your blog, you will easily be able to recognize comment authors, especially those who regularly visit your blog. Also I feel this adds a greater sense of interaction between blog authors and their readers.

Avatar
But now you can install avatar in blogger comments form using MyBlogLog.
MyBlogLog is a social network for the blogger community that is based in part on interactions facilitated by a popular web widget that many members install on their blog. Bloggers can then display widgets on their sites which show MyBlogLog online community members who have recently visited their page. These widgets also contain links to visiting members' community pages, and are one way in which users connect with one another.

There are several steps if you like to install avatar in blogger comments.

  • Log in to your blogger account
  • Click Layout Tab Option on your dashboard
  • Click Layout Tab Option on your dashboard, dont forget to Check Expand Widget Templates
  • Add this script into your template code before </head>
  • <script type='text/javascript'>
    //<![CDATA[
    /*
    Merlinox and Napolux MyBlogLog Avatar Creator
    created by Merlinox (blog.merlinox.com)
    helped by Napolux (www.napolux.com)

    version 0.1 (20061214)
    version 0.2 (20061215)
    compatible with all blogger blog
    */

    if(typeof(myLayer)!='function'){
    function myLayer (x){
    //individuo l'oggetto
    if(document.layers){ // browser="NN4";
    lay=document.layers[x];
    }
    if(document.all){ // browser="IE";
    lay=eval("document.all." + x);
    }
    if(!document.all && document.getElementById){ // browser="NN6+ or IE5+ if you're willing to dump the !document.all stuff";
    lay=document.getElementById(x);
    }
    return lay;
    }
    }

    //lo prendo da blogger
    function myBlogAvatar(codiceCommento,autore,stile){
    //scrivo lo span
    //var myBlogSpan = "myBlog-" + codiceCommento;
    //document.write("<span id='" + myBlogSpan + "'><i>myBlogLog...</i></span>");

    //metto tutto minuscolo perchè indexOf è case sensitive

    if (autore != ""){
    alt="MyBlogLog: " + autore;

    myBlog = "<a target='_blank' href=\"http://www.mybloglog.com/buzz/co_redir.php?href=" + autore + "\" rel='nofollow'><img src=\"http://pub.mybloglog.com/coiserv.php?href=" + autore + "\" alt=\"" + alt + "\" title=\"" + alt + "\" border=\"1\" class=\"myBlogAvatar\" width=\"50px\" height=\"50px\"></a>";
    //myLayer(myBlogSpan).innerHTML = myBlog + myLayer(myBlogSpan).innerHTML;
    //myLayer(myBlogSpan).innerHTML = myBlog;
    document.write(myBlog);
    }
    }
    //]]>
    </script>
  • Search this code in your template code.
    <b:loop values='data:post.comments' var='comment'>
    And then add this code right after that ones.
    <div style='border:0;float:left;margin: 0 5px 0 0;'>
    <script>
    myBlogAvatar('<data:comment.id/>','<data:comment.authorUrl/>');
    </script>
    </div>
  • Save your template
There are something that we should to know when we have install MyBlogLog avatar in our comments form.
  1. MyBlogLog avatars are linked to the URL of your blog. So we must change comment setting. We would need to change our settings for comments, and enable "anyone" to comment, rather than only registered users.
    Comments Setting
  2. To avoid double image between MyBlogLog avatar and Blogger profile image, we should make disable "profile images on comments" in our comments setting.
    Comments Setting
  3. If you are not a MyBlogLog member, you should register your blog first in MyBlogLog. Click this link to get it......MyBlogLog


We can install another hack for your comments form, Comment Numbering Trick

Best Regard
One-4-All

9 comments:

Adsense Blog on August 24, 2009 at 12:07 AM said...

Nice trick
Thanks

Ocim on August 24, 2009 at 12:29 AM said...

thanks infonya sob

keep posting

prafangga permana on August 24, 2009 at 12:34 AM said...

Good Job...
Follow Me Please

David on August 25, 2009 at 8:00 PM said...

Very awesome trick, i was wondering how to integrate an avatar in blogger for ages!

Thanx very much

JUAN MOSA on August 26, 2009 at 5:36 AM said...

123 probando

All You Need Zone on September 25, 2009 at 10:06 PM said...

great hack man....

Anup on December 5, 2009 at 6:23 PM said...

If any buddy has problem of avatar's CSS. Please see this trick. It is good CSS coded and problem solve to all. Arrange your Comments Avatar with CSS in blogger

Thanks!

Cookie Monster on February 4, 2010 at 4:30 AM said...

I have this hack already installed into my blog template and I want to remove it. I planned to just find the codes above and just delete it, but the second code appears more than once and when I tried to delete both it just messed it up. I really really need help on removing this correctly, thanks.

GooTAR on March 25, 2010 at 12:31 PM said...

Thanks for tips

Post a Comment