Customized ABOUT ME - AUTHOR BOX For Blogger

Bonjour! I'm back with yet another Blogger tutorial, this time with a whole new Blogger Gadget - CUSTOMIZED AUTHOR BOX For Blogger.
This gadget is similar in appearance to the default ABOUT ME gadget in Blogger yet different because it has links to your Google+, Facebook and Twitter profiles with a small description about the Author, of course with the Author's photo! -

                     

This Gadget can be added in the Blog Sidebar as well as in the Page Footer (like in my blog). This Gadget's background is transparent, so it'll have the same background colour as your Sidebar or Footer.
The Author Box will be very useful if you're the Blog Owner and you've lot of authors in your Blog, You can use this gadget to make your readers know hat you're the Blog Owner/Founder. So let's get started and add this gadget to your Blog - 

1. Go to Dashbord -> Layout -> Add Gadget.

2. Select HTML/Javascript from the Gadget options.

3. Now add the following code to the Gadget - 

<div class='sidebar section'><div class='widget Profile'>
<div class='widget-content'>
<a href='https://plus.google.com/GOOGLEPLUS-ID'><img alt='My Photo' class='profile-img' height='100' src='//YOUR-IMAGE-URL' width='100'/></a>
<dl class='profile-datablock'>
<dt class='profile-data'>
</dt>
<dd class='profile-textblock'>AUTHOR DESRIPTION</dd>
</dl>
<ul>
<li><a class='profile-name-link' href='https://plus.google.com/GOOGLEPLUS-ID' rel='author' style='background-image: url(//www.google.com/images/icons/ui/gprofile_button-16.png);'>YOUR-NAME</a></li>

<li><a class='profile-name-link' href='https://www.facebook.com/FACEBOOK-USERNAME' rel='nofollow' style='background-image: url(//dl.dropbox.com/u/110248421/facebook-icon-16x16.png);'>YOUR-NAME</a></li>

<li><a class='profile-name-link' href='https://twitter.com/TWITTER-USERNAME' rel='nofollow' style='background-image: url (//dl.dropbox.com/u/110248421/twitter-icon%2016x16.png);'>@TWITTER-USERNAME</a></li>

<li> <a style='font-size:10px' href='http://www.the-paradox-blogger.in/2012/12/customized-author-box-for-blogger.html');'><u>Get This widget</u></a></li></ul>
<div class='clear'>
</div></div></div></div>

4. Customizations -

-> Line 3 - Replace "YOUR-IMAGE-URL" with the URL of the photo you want to show in the gadget box.

-> Line 3, 10 - Replace "GOOGLEPLUS-ID" with your own Google+ ID. For example if your Google+ Profile URL is "https://plus.google.com/1110068932542345" then replace the above text with "1110068932542345".

-> Line 7 - Replace "AUTHOR DESCRIPTION" with a short description about yourself.

-> Line 10, 12 - Replace "YOUR-NAME" with your name.

-> Line 12 - Replace "FACEBOOK-USERNAME" with your Facebook username. For example - If your Facebook Profile URL is "www.facebook.com/myprofile"  then replace the text with "myprofile".

-> Line 14 - Replace "TWITTER-USERNAME" with your Twitter username. For example if your Twitter profile URL is "https://twitter.com/mytwitter" then replace the above text with "mytwitter".

5. Now Save the Gadget and you're done!Check your Blog for your very own all new Customized Author Box Gadget ! 
Note :  If you want share this gadget tutorial in your Blog do mention about this Blog with a link as it was originally developed by his Blog.


If this gadget works for you then do Share this post with fellow Bloggers.
To get regular updates about similar Blogger resources Like Our Facebook Page
You can also Add Me on Google+