0 Add Author Info Box at the bottom of every Blog Post

Today I will share with you 3 beautiful Author box widget below every blogger posts. We know that a author box contain small information about the site owner/Author. And it will appearing at the bottom of every  post. Now a day's various author box we introduced by blogger. But I have tried to add some extra spice in my Author Box widget with Twitter, Facebook and Google links on it. Thus a visitor can give you likes from your author box. And this Author box is very simple and fast loading. You can select any author box among 3 style. It will match all types of blog templates.

Live Demo

Step 1 Log in to your Blogger Account and Go to your Blogger Dashboard

Step 2 Now click on -> Template -> Edit HTML

Step 3 Now Find this code ]]></b:skin> by pressing Ctrl + F

Step 4 Paste the below code  Before/above ]]></b:skin> and Save the templates.

CSS Part For the Author Info Box

Author Box-1

/* Author Box by www.bloggerspice.com */
.admin-bs {display:block; width:auto; background:#EABFFE; border:5px solid #660099; box-shadow:0 1px 3px #000; -moz-box-shadow:0 1px 3px #000; -webkit-box-shadow:0 1px 3px #000; padding:0; margin:30px 0 10px 0; font:normal 12px Arial,Sans-Serif; color:#222}
.admin-bs .kontainer{padding:5px}
.admin-bs h1{background:#D580FE; border:none; border-bottom:1px solid #C0C0C0; color:#fff; text-transform:normal; text-shadow:0 1px 0 rgba(0,0,0,0.4); font:bold 12px Arial,Sans-Serif; padding:5px 10px; margin:0 0 0 0; display:block}
.admin-bs h1 a{color:#FEEA83}
.admin-bs img{width:70px; height:70px; margin:0 10px 0 0; float:left; border:0px solid #E6E6FA; padding:2px; background:#E6E6FAbox-shadow:none; -moz-box-shadow:none; -webkit-box-shadow:none}

Author Box-2

/* Author Box by www.bloggerspice.com */
.admin-bs {display:block; width:auto; background:#FED9BF; border:5px solid #B24700; box-shadow:0 1px 3px #000; -moz-box-shadow:0 1px 3px #000; -webkit-box-shadow:0 1px 3px #000; padding:0; margin:30px 0 10px 0; font:normal 12px Arial,Sans-Serif; color:#222}
.admin-bs .kontainer{padding:5px}
.admin-bs h1{background:#00477D; border:none; border-bottom:1px solid #C0C0C0; color:#fff; text-transform:normal; text-shadow:0 1px 0 rgba(0,0,0,0.4); font:bold 12px Arial,Sans-Serif; padding:5px 10px; margin:0 0 0 0; display:block}
.admin-bs h1 a{color:#FEEA83}
.admin-bs img{width:70px; height:70px; margin:0 10px 0 0; float:left; border:0px solid #E6E6FA; padding:2px; background:#E6E6FAbox-shadow:none; -moz-box-shadow:none; -webkit-box-shadow:none}

Author Box-3

/* Author Box by www.bloggerspice.com */
.admin-bs{display:block; width:auto; background:#F5F5F5; border:3px solid #C0C0C0; box-shadow:0 1px 3px #000; -moz-box-shadow:0 1px 3px #000; -webkit-box-shadow:0 1px 3px #000; padding:0; margin:30px 0 10px 0; font:normal 12px Arial,Sans-Serif; color:#222}
.admin-bs .kontainer{padding:5px}
.admin-bs h1{background:#C0C0C0; border:none; border-bottom:1px solid #C0C0C0; color:#fff; text-transform:normal; text-shadow:0 1px 0 rgba(0,0,0,0.4); font:bold 12px Arial,Sans-Serif; padding:5px 10px; margin:0 0 0 0; display:block}
.admin-bs h1 a{color:#FEEA83}
.admin-bs img{width:70px; height:70px; margin:0 10px 0 0; float:left; border:0px solid #E6E6FA; padding:2px; background:#E6E6FAbox-shadow:none; -moz-box-shadow:none; -webkit-box-shadow:none}

HTML Part For the Author Info Box

After applying CSS Part now you have to go for HTML coding. Just follow the belowsteps-

Step 1 Now Click on Template ->Edit HTML

Step 2 Now click on  Check box to Expand the templates 

Step 3 Now find <data:post.body/> by pressing Ctrl + F 

Note: You will find 3/4 time this code go for second one. 

Step 4 Now Copy the below code and Paste it before /above code.

<div class="admin-bs">
<h1>Founded by : <a href="https://plus.google.com/u/0/102331886274459115104/posts">Mohammad Fazle Rabbi</a> - Written 50+ Awesome Articles </h1>
<div class="kontainer">
<img src="http://4.bp.blogspot.com/-AUlnsFGtuYA/UMIYuhZF76I/AAAAAAAAAVc/VEbCdsa08ZM/s1600/Rabbi.jpg" width="80" height="85"></img>
I love to blogging and sharing tips and tricks with my readers. I am a Part time blogger. Design Blogger template, Web Developing and Designing. If you think that this article help you little bit then please  do not forget to subscribe by entering your email in column Get Updates Via Email.
  <p><span style='float:left;text-align:left;'>
Join Me On: <a href='http://www.facebook.com/BloggerSpice' rel='nofollow'>Facebook</a> | <a href='http://www.twitter.com/BloggerSpice' rel='nofollow'>Twitter</a> | <a href='https://plus.google.com/102331886274459115104/' rel='nofollow'>Google Plus</a></span>
<span style="float:right;font:italic 10px Arial, Sans-Serif;"><a href="http://bloggerspice.com" target="_blank">:: Thank you for visiting ! ::</a></span></p>
<div style="clear:both;"></div>
</div>
</div>

Step 5  Now Save Your Templates,

Customization:

Change this link http://4.bp.blogspot.com/-AUlnsFGtuYA/UMIYuhZF76I/AAAAAAAAAVc/VEbCdsa08ZM/s1600/Rabbi.jpg with your image link. 
Change BloggerSpice with your Twitter and Facebook ID
Change 102331886274459115104 with your Google Plus ID