Add “Author Bio” Box below Each Post To Your Blog

Today I am giving you a beautiful widget .An author box is a small box, appearing at the bottom of every  post, that contains information about the author. An author box can include information such as the author’s name, a short bio data about the author and a small thumbnail picture of the author. You can add an author box to the post footer in your Blogger blog by editing the blog’s template HTML code.

1. Log in to blogger account and Click drop down.

2. Now select "Template" Like Below.

3. Now you can see Live on blog, Click EDIT HTML Button"

4. Now click Proceed button.
   
5. Find this tag by using Ctrl+F    ]]></b:skin>

6. Paste below code Before ]]></b:skin> tag

CSS CODE

/* Author Box */ .author-box { background: #fff; margin: 10px 0 40px 0; padding: 10px; border: 1px solid #E6E6E6; overflow: auto; -moz-box-shadow: 0 0 5px 5px #888; -webkit-box-shadow: 0 0 5px 5px#888; box-shadow: 0 0 5px 5px #888; } .author-box p { margin: 0; padding: 0; } .author-box img { background: #FFFFFF; float: left; margin: 0 10px 0 0; padding: 2px; border: 1px solid #E6E6E6; }

7. After that search these code.

 <div class='post-footer-line post-footer-line-3'><span class='post-location'>
        <b:if cond='data:top.showLocation'>
          <b:if cond='data:post.location'>
            <data:postLocationLabel/>
            <a expr:href='data:post.location.mapsUrl' target='_blank'><data:post.location.name/></a>
          </b:if>
        </b:if>
      </span> </div>

8. Paste the below code before

 <b:if cond='data:blog.pageType == "item"'>
<p style="display:none;">Author Box by <a href="http://www.blogetrick">BlogETrick</a></p>
<div class="author-box">
  <p><img alt="" class="avatar avatar-70 photo" height="70" src="http://lh4.googleusercontent.com/-14HFkZL_hHM/AAAAAAAAAAI/AAAAAAAAAHw/v-xgPuYBKok/s512-c/photo.jpg" width="70"/><b>About the Author</b>
    <div style="text-align: justify; font-family: verdana; color: #000;">I am<b> <a href="https://plus.google.com/103580587001840213936" rel="author"> Rishi Vivek</a></b> From India and i am the founder of the blog "<a href="http://blogetrick.blogspot.com">Blog E Trick"</a>.I Very Much interest in blogging by  reading articles online. Mine thirst for learning latest web technologies like HTML, CSS and JavaScript equipped me with an art of web designing. I am now a good designer…’</div></p>

  </div>
        </b:if>   

Replace The Link : In Red Color  and Also Your Image Link

9. Save your template. you done it.
go back to your home page and refresh it and see the difference..Hope you liked this article. Thanks for reading.