Display Author Bio Box Under Blogger Posts

Guest Posting is common these days and most of the blogs allow guest posting. There are many benefits of guest posting as you get free High quality back links from popular blogs and you also build reputation. Guest posting also helps you get traffic and build relationships with other bloggers. 

If you are a blog owner then guest posting can help you get great free content for publishing. Today I'll show you How to Display Author Bio Box under Blogger Posts, You can use this widget to display Guest Author Bio or Your Information etc. This is a simple widget and is fully customizable, So you can easily blend it according to your site design.

Display Author Bio Box Under Blogger Posts

Installation

The Installation process is very simple and anyone can do it without any problems. Just follow the steps given here. 

Step 1: From Blogger Dashboard, Go to Template > Edit HTML.

Step 2: Search for ]]></b:skin> and just above ]]></b:skin> Paste the following code.

.area51-author-bio {
background: #FFFFFF;
margin: 0 0 30px 0;
padding: 10px;
border: 1px solid #424242;
overflow: hidden;
color: #333333;
font-size: 14px;
font-family: Arial, Tahoma, Verdana;
line-height: 24px;
}
.area51-author-bio p {
margin: 0;
padding: 0;
}
.area51-author-bio img {
background: #BDBDBD;
float: left;
margin: 0 10px 0 0;
padding: 4px;
border: 1px solid #FAC506;
}

Step 3: Now Save Template

Done!!! Now you've successfully added the CSS code in your template. Now for the author box to appear, follow the below steps.

Adding Author Bio

Adding box is very simple, All you have to do is Copy-Paste the below code at the end of your blog post. For example, After finishing your blog post, insert the below code at the bottom of your post and press publish. The Author box will appear at the end your blog post.

<div class="area51-author-bio">
<div>
<img alt="guest author area 51" class="avatar avatar-85 photo" src="http://gg.gg/guest1" height="85" title="" width="85" /> <span style="font-size: large;"><span style="font-family: Verdana,sans-serif;"><b>About </b></span></span><br />
<span style="font-family: Verdana,sans-serif;">Jimmie Luthra is founder of The-Area51.com. He is a Cadet in Merchant Navy and a Part time Blogger. He is 20 and lives in Mumbai. You can Follow him on <a href="http://www.twitter.com/jimmieluthra" target="_blank">Twitter</a>, <a href="http://www.facebook.com/thearea51blog" target="_blank">Facebook</a> and <a href="https://plus.google.com/u/0/117521503834739609237" target="_blank">Google+</a></span><br />
<br /></div>
</div>

Now make the following changes to the code:

     - Replace with Avatar (Image) URL
     - Replace with Author Bio (Description)
     - Replace with Twitter URL
     - Replace with Facebook Profile URL
     - Replace with Google+ URL

 Done!!!

You can also put this code inside HTML/Javascript widget on Blogger and the Box will appear. For multi-author blogs you can make changes to the above HTML code and place the code at the end of the blog post.

Questions, Doubts, comments are welcomed. I hope this was a helpful post. Please let us know if you liked it.

About Author
Jimmie Luthra is founder of The-Area51.com. He is a Cadet in Merchant Navy and a Part time Blogger. He is 20 and lives in Mumbai. You can Follow him on Twitter, Facebook and Google+

SHARE

About Jimmie Luthra

Jimmie Luthra is a Mariner, Tech enthusiast, Blogger and Gadget reviewer. He is fond of technology and is usually found playing with some piece of tech. He is also a Guitarist, Music lover & fitness freak.