Add Author Bio Box in any Blogger Template

Add Author Bio Box In Any Blogger Template
An Author Bio Box is clearly defined as the writer of any written article. Author bio-box is the identity of a blog writer. In general, a blogger aauthor is a person who writes the articles. If you are looking for a fully responsive author bio box for your blog, Simple Author Box could be the one for you. This lightweight piece of code will add an attractive author box at the end of your every blog posts. The author box displays the author name, description and links to various social media accounts.

Including an author box in your blog posts makes sure that your visitors can find more information about the author in the same page. Contrary to popular belief, adding author box after post is very simple. If you wish to give your blog a professional look, then here i will show you excellent trick which let you add author Bio box within no time.

Adding Author Bio Box in Blogger Template

  • Go to your blogger Dashboard > Template > Edit HTML
  • Click anywhere inside the template editor
  • Press Ctrl + F and search for <style type='text/css'>
  • Now just below the <style type='text/css'> add the following code.
.authorboxwrap{background:#fff;margin:10px auto 15px;
padding:20px;overflow:hidden;
border: 2px solid;
border-color: #000000 #000000 #000000;}
.avatar-container {float:left;
margin-right:20px;
border: 1px solid #ECECEC;
padding: 6px;}
.avatar-container img{width:110px;height:auto;max-width:100%!important} .author_description_container h4{font-weight:700;
font-size:17px;display:block;
margin:0;margin-bottom:2px}
.author_description_container h4 a{color:#ef4824}
.author_description_container h4 a:hover{color:#404040}
.author_description_container p{margin:0;color:#212020;
font-size:13px;margin-bottom:8px;font-family: Open Sans;line-height:25px}
</style> </b:if>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style type='text/css'>

  • Search for </article> and add the following piece of code right after the </article> tag and click Save.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='authorboxwrap'>
<div class='authorboxfull'>
<div class='avatar-container'>
<a href=''> <img class='author_avatar' expr:alt='data:post.author' expr:src='data:post.authorPhoto.url' height='110' width='110'/> </a> </div>
<div class='author_description_container'>
<h4>Author: <a href='#' rel='author'><data:post.author/></a>
<i class='fa fa-check-circle' style='color:rgb(17, 143, 249)' title='Verified Author'/> </h4>
<p> <data:post.authorAboutMe/> </p>
<p>Add a long Author description here</a> </p>
<p align='center' style='font-family:arial;font-variant: small-caps'>
<a class='fa fa-facebook' href='put your facebook url here; rel='nofollow' target='_blank'/>
<a class='fa fa-twitter' href='twitter url here' rel='nofollow' target='_blank'/>
<a class='fa fa-google' href='google plus url here' rel='nofollow' target='_blank'/></p> </div> </div> </div>
Customization
Replace the blue text with your username/text/URL
Subcribe to Our Newsletter For Free

Subscribe Now

Recommended For You

Speak Your Mind