How To Add Author Info Box at the bottom of every Blog Post?

Hello friends. Today I will share with you 3 beautiful Author box widget below every blogger posts. it will show at the bottom of every  post.

 Go to your Blogger
Template >> Edit HTML
Now Find this code ]]></b:skin> (ctrl+f)
Paste the below code  Before/above ]]></b:skin> and Save the templates.

]]></b:skin>

 Author Box-1

 /* Author Box by www.tricksteacher.blogspot.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}

  Author Box-2

/* Author Box by www.tricksteacher.blogspot.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 by www.tricksteacher.blogspot.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}

After CSS Part now you have to go for HTML coding.

Template ->Edit HTML

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


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


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/106080909507696381306/posts">Asad tariq</a> - Written 50+ Awesome Articles </h1>
<div class="kontainer">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitsV1Nxn8z57adTQDd_VpnCGU4jmiR3VwcjjH3ASnZZ4fLkKJrLllsKwJPUIQbXAbT2i-m4YV8oyBa0hFy_wUfXdOEwkMkC4WY384yzx3Mq2eUyH2qeLwvHAgURcrqzswArBpCbBUkUoGJ/s1600/as.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/asadtariq786' rel='nofollow'>Facebook</a> | <a href='http://www.twitter.com/asadtariq77' rel='nofollow'>Twitter</a> | <a href='https://plus.google.com/106080909507696381306/' rel='nofollow'>Google Plus</a></span>
<span style="float:right;font:italic 10px Arial, Sans-Serif;"><a href="http://tricksteacher.blogspot.com/2013/05/how-to-add-author-info-box-at-bottom-of.html" target="_blank">:: Thank you for visiting ! ::</a></span></p>
<div style="clear:both;"></div>
</div>
</div>

And save template.

Change this link https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitsV1Nxn8z57adTQDd_VpnCGU4jmiR3VwcjjH3ASnZZ4fLkKJrLllsKwJPUIQbXAbT2i-m4YV8oyBa0hFy_wUfXdOEwkMkC4WY384yzx3Mq2eUyH2qeLwvHAgURcrqzswArBpCbBUkUoGJ/s1600/as.jpg with your image link.

Change BloggerSpice with your Twitter and Facebook ID

Change 106080909507696381306  with your Google Plus ID