19 February 2013

Rounded Comment Avatar Image for Blogger

// // 4 comments
Rounded Comment Avatar Image for Blogger
We again came with some customization for our blogger coment system.More we make it beautiful more chances of getting comment,organic visitors and more traffic for our blog.Hope already know about comment avatar,if not then let me tell it is the pic of commenters we can see on our comment section,but yes while we look for blogger default comment avatar it looks so dumb.Wish to make little tweak with it?Wish to make your blogger default sqare comment avatar image little customization?What if it'll become rounded?like this idea?Then ok today we'll going to do this by putting some extra css code in your blog.

 Must Read : Show Comment Message Before Blogger Comment Box


Add Rounded Comment Avatar Image

  • Navigate to your Blogger Dashboard 
  • Then goto Template > Click on Edit HTML > Proceed
  • Now search(ctrl+f) for the]]></b:skin> code tag and place the below code above it!



.avatar-image-container, .avatar-image-container img { max-width: 50px !important; width: 50px !important; max-height: 50px !important; height: 50px !important; padding: 0 !important; border: 0px; -webkit-border-radius: 999px; -moz-border-radius: 999px; border-radius: 999px; } .avatar-image-container{ border:3px solid #fff !important; -webkit-box-shadow: 0 1px 2px #BBB; -moz-box-shadow: 0 1px 2px #BBB; box-shadow: 0 1px 2px #BBB; }





That's it,now save the template and you're done.

We guess it'll make you blog's comment section looks cute and will attract your reader to comment.Share your experience with us.
Articles You May Like

4 comments: Leave Your Comments

  1. Another fun thing to learn! and yes it';s good if your avatr and comment stand out from the rest. makes the author remember you and hopefully return the visit to your site

    ReplyDelete
  2. i don't find ]]> on my blog :(
    how can I do ?

    ReplyDelete
    Replies
    1. Then you just follow this way
      Goto blogger dashboard->template->customize->advanced->add css
      and just there put the given css code and click on apply to blog on top right.

      Delete