SEO Search

  • Subscribe to our RSS feed.
  • Twitter
  • StumbleUpon
  • Reddit
  • Facebook
  • Digg

Sunday, 6 May 2012

How to Change Default Anonymous Avatar in Blogger Comments

Posted on 05:31 by Unknown
In the last tutorial, I wrote about how you can change avatars size in blogger comments and in this simple tutorial, I will show you how to change or customize default avatar of anonymous commenters or Blogger users with no picture added on their profiles. After Blogger announced new feature of threaded comment, we can still customize it by adding a jQuery plugin to our template and replacing the default anonymous avatar found at this

URL http://img1.blogblog.com/img/anon36.png
and the one for blogger users http://img2.blogblog.com/img/b36-rounded.png

...with our own.

anonymous, default avatar, blogger blogspot

Step 1.

Go to Dashboard - Template - click on the Edit HTML button and then Proceed



...then select Expand Widget Template (don't forget to make a backup)

    Step 2. Find (CTRL + F) this code in your template:

    </body>

    Step 3. Add the following code just above it:

    <script src='http://code.jquery.com/jquery-latest.js'/>
    <script>
    $(&quot;img[src=&#39;http://img1.blogblog.com/img/anon36.png&#39;]&quot;)
    .attr(&#39;src&#39;, &#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlY8RGkZNBQ-DpJ2mRif3F1HRBWAqWV38VYjlrhpXommTiiIkEKQDCZdyD-s764I5QLhn6e70ZpZor2mNNGwfhbIFd4RnhrsEOohLh-dZR3XtkAy9pN38gTSA0n9Ee-duBGtwqwo8sTUU/s1600/default_avatar.gif&#39;)
    .ssyby(&#39;blank&#39;)
    </script>
    <script src='http://code.jquery.com/jquery-latest.js'/>
    <script>
    $(&quot;img[src=&#39;http://img2.blogblog.com/img/b36-rounded.png&#39;]&quot;)
    .attr(&#39;src&#39;, &#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhERtlIi4duP73i-tObVKDeBx1tUonu577nIR81g6NR4HBamsjUyWWjG0wWrxi9GaCe1yDAXP4gRLei1ylREJToxywjbMcJnlUN1ZrxXrX0MWNlyFZA4llpl-pOaSvIp6gwDoFWibrb574/s1600/blogger-user.png&#39;)
    .ssyby(&#39;blank&#39;)
    </script>

    Step 4. Save the Template

    How to change avatar:

    For Anonymous users: Replace the code in red with the url address of your image
    For Blogger users: Replace the URL in blue with your own.

    You can choose one from these below (copy the url address):


    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlY8RGkZNBQ-DpJ2mRif3F1HRBWAqWV38VYjlrhpXommTiiIkEKQDCZdyD-s764I5QLhn6e70ZpZor2mNNGwfhbIFd4RnhrsEOohLh-dZR3XtkAy9pN38gTSA0n9Ee-duBGtwqwo8sTUU/s200/default_avatar.gif


    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhX2xLlJKGVoe-c5bd3CCAsUzWYDnXgj3K1-F54KxxirA4LwgQDnRtWP42jAD3yfo8pETQ8RjoATF0GgOqdPta4-rTc6f6Qn1LYRAQTZlAJNxvlt0md3gSQj4sh0433nPO-zkiBz2GBMR4/s1600/facebook.gif


    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVBNPo4pRNcw6X946XlsM1NpfJX92MZJn2taGGw2C8ee5k5HX8_b8gSqGJmMy7DAXxz5WWiUk3NOtOm0wc3ibw0h80_oMc8weU_QDnVWyvuEKx8EBlHvuUMb_tvpICxC20wYym7zMgLfw/s1600/anonymous3.png



    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWTWI9YwH2Jx9UrPNMypgIUIwYoD1WqB5EOOmmx3_Oy3NLQX4HgTf0H5-N4801c3QqQuS9NuiOFw0SnwtM9hQ9lJzwPLGODOdPiAqqA-gIaUcfj5zawLJ9T7R9zlXRUcK-tsaRukK-pHxq/s1600/blogger-user.png


    That's it!
    If you liked this post, please consider sharing it.

    Email ThisBlogThis!Share to XShare to Facebook
    Posted in avatars, Blog Design, Comments, comments tricks, Hacks, how to | No comments
    Newer Post Older Post Home

    0 comments:

    Post a Comment

    Subscribe to: Post Comments (Atom)

    Popular Posts

    • How to change Blogger "Post A Comment" Message
      In this tutorial i will show you how to replace the 'Post A Comment' text that appears above the comment form with an image. Also, I...
    • CSS Basics. How to Apply Rounded Corners On Images #1
      This tutorial will explain how to change the outside border of any image using some simple CSS rules to make it round, but this is so easy t...
    • Google adsense optimization tips
      What is Google Ad S ense?  Google AdSense is a free program run by Google that allows you to display Google adverts on your blog/website and...
    • CSS Basics. How to Apply Rounded Corners On Images #2
      In the previous post I have mentioned that we will learn to round images using CSS, without needing to edit them one by one using a program...
    • 4 Different Styles For the Popular Posts Widget
      Blogger allows us to easily add a " Popular Posts " widget, that we select from its list of gadgets, and we can do that by going t...
    • Turn off the lights with jQuery
      For those who enjoy watching videos on the net, this is a very useful script made by Janko with jQuery. So what this script does? It will ...
    • How to Replace Older Posts and Newer Posts Links with Blogger Post Titles
      If you have ever visited a WordPress blog, you might have noticed that the blog pager on these blogs displays the actual post titles, not ju...
    • How to Make the Blogger Posts Have a Calendar for the Date in
      It's quite common to see calendar style dates next to some WordPress posts but for the Blogger platform it isn't always an very easy...
    • Hide/Show Widgets/Gadgets in Home/post/static/archive pages in Blogger
      As some of you may have noticed, all the widgets/gadgets you add to your blog, will be displayed on all the pages by default, including the ...
    • Ways To Increase Page Impressions and Traffic on Your Blog
      What is a Google AdSense "Page Impression"? The page impressions or page views - how much time a user stays on your website and h...

    Categories

    • adsense
    • adsense optimization
    • adsense tips
    • Auto Video Template
    • avatars
    • blockquotes
    • Blog Design
    • blogger
    • blogger posts
    • color code generator
    • Comments
    • comments tricks
    • css
    • emoticons
    • Emoticons/Smileys
    • Facebook
    • feedburner
    • forum
    • Hacks
    • how to
    • how to make a blog
    • Image Effects
    • internet
    • jQuery
    • labels
    • menus
    • Navigation
    • navigation menu
    • popular posts
    • posts
    • read more
    • recent comments
    • recent posts
    • related posts
    • RSS
    • SEO
    • sitemaps
    • slideshows
    • social media
    • social media plugins
    • static pages
    • Templates
    • threaded comments
    • titles
    • tools
    • translating
    • webbligi
    • Widgets

    Blog Archive

    • ►  2013 (57)
      • ►  November (4)
      • ►  October (16)
      • ►  September (13)
      • ►  June (3)
      • ►  May (4)
      • ►  April (5)
      • ►  March (12)
    • ▼  2012 (73)
      • ►  July (1)
      • ►  June (3)
      • ▼  May (9)
        • Add Floating Social Media Sharing Buttons To Blogger
        • Create A Rollover Image Effect (change image on mo...
        • Add Facemoods Emoticons To Your Blogger Comments
        • How to Change Default Anonymous Avatar in Blogger ...
        • How To Change Avatar Size In Blogger Comments
        • How to Hide Blogger Sidebar to Display AdSense For...
        • Show Blogger Image only in Homepage and Hide it in...
        • How to Remove Showing Posts With Label in Blogger
        • Recent Posts Widget with Thumbnails for Blogger/Bl...
      • ►  April (23)
      • ►  March (30)
      • ►  February (7)
    Powered by Blogger.

    About Me

    Unknown
    View my complete profile