About The Author Widget For Blogger Blog

-----------------------------------Share This Article! Tweet --

The author is the heart and soul of a blog. It is the author who creates a beautiful blog that shares knowledge and other wonderful things with other people. Its natural that people are curious to know more about the person behind the blog who writes the posts. At times the blog visitors want to talk with the author and discuss about the things that he blogs. At such times, the "About The Author" widget is very useful for both the Author and also the readers.

You can also check other tutorials that have been published here:

• Add A Polaroid Effect To Blogger Images
• Add Mashable Style Social Media Widget To Your Blog
• Add YouTube Style Search Button To You Blog

In this post we will  explain how to add About the author widget to a Blogger/Blogspot blog. For adding this widget, you will have to add HTML and CSS code in the blog template.We will try to keep it as simple as possible so that it becomes easy for everyone to add it to their blog.
First, you will have to visit the Edit HTML section which is present in the Design section of your blog. Once you reach there, click on Expand Widget Templates. Now you will have to add CSS part of the code in the template. If you don't know where to find CSS section, then search (Ctrl+F) ]]></b:skin> in the template and add the following code just above it.

.about-author {
background:#EBF3FB none repeat scroll 0 0;
border:1px solid #D4E2E8;
font-size:1em;
line-height:1.5em;
margin:0 0 20px;
padding:10px;
}

.about-author img {
background:#FFFFFF none repeat scroll 0 0;
border:1px solid #9ED0DE;
display:inline;
float:left;
margin:0 15px 0 0;
}

You can change the background colour of the About the Author widget by changing the Hexadecimal value in bold in the above code. Now that you have added the CSS section, you will have to add the remaining HTML code in the template.

To add the HTML part of the code, search <data:post.body/> in the template and add the following code below it.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='about-author'>

                    <img alt='Your Name' height='80' src='Image URL' width='80'/>  
                   
                        <h4>Author: <a href='Add any link over here' target='_blank'>Your Name</a></h4>

                        <p>Write something about yourself here with links to your Twitter, Facebook or other profiles.
</p>
</div>
</b:if>

You can change all the part of the code in bold according to your needs. Now click on Save Template and check any post in your blog. Remember that this widget will appear only on Post Pages and not on the Home Page.

If you found this post useful then please share it with your friends and if you are facing any problem, then use the comments section below.