How To Add Professional Author Box In Blogger Below Every post

Does your blog have a Professional Author Box? In addition to having the great blog design, you should have "about the author" box on your blog. it contains descriptive information about the author. even professional bloggers always prefer to add about author box at the end of the post on their blog, because they know peoples wants to know little about author who has written the post.

Everyone wants to make his Blog or Website more attractive and professional. Therefore, I thought to share professional author box for blogger platform users who want to change the look of his blog.

In the following tutorial you are going to learn exactly how to add professional author box below every blog post in blogger. You can add an author box to the post footer in your Blogger blog by adding CSS + HTML code in your blogger template.

Professional Author Box Features :

 

• Professional look
• Fully responsive design 
• Simple CSS Design
• Very easy to use and customizable
• Short code (doesn't affect on your blog loading speed)
• Suits to your template

 

Adding Professional Author Box In Blogger :

 

 Note: To be on the safe side, I highly recommend you to back up your Blogger template before making changes.

Step 1

Go to your blogger dashboard >> Template >> Edit HTML:

Step 2

Search for the following code by pressing Ctrl+F

]]></b:skin> 

Step 3

Now just before/above this code add the following piece of CSS code.

 /*Professional Author Box CSS Code*/

.about-author {

width : 750px;
overflow : hidden;
margin:10px 0px;
border:0px;
    background: #f2f2ef;
    margin: 0 0 30px 0;
    padding: 10px;
    border: 1px solid #EAEDEF;
    overflow: hidden;
    color: #333333;
    font-size: 14px;
    font-family: Georgia, Tahoma, Verdana;
    line-height: 24px;
}
.about-author img {
display: block;
width: 90px;
height: 90px;
margin: 0 1.2em 0 0;
float: left;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
-webkit-border-radius: 999em;
-moz-border-radius: 999em;
border-radius: 999em;
border: 2px solid #ddd;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}
.about-author h3{
font-family:georgia !important;
font-size:18px !important;
margin:9px 0px !important;
color:#666 !important;
border-bottom:2px solid #666 !important;
border-top:0px !important;
}
.about-author p {
margin:0px;
text-align:justify;
color:#666;
}

/*Professional Author Box CSS Code*/

Step 4

Next search for 

 <data:post.body/>

Step 5

Now just after/below this code add the following piece of HTML code.

/*Professional Author Box HTML Code*/

<div class="about-author">

<h3>About Author:</h3>
<img align="left" src="Paste Your Image URL Here"><p>Write Something About Yourself</p><br/>
<p>Let's Get Connected: <a href="http://twitter.com/shoutersclub" rel="nofollow" target="_blank"><font color="#00aced">Twitter</font></a> | <a href="http://www.facebook.com/shoutersclub" rel="nofollow" target="_blank"><font color="#3b5998">Facebook</font></a> | <a href="http://plus.google.com/109208666606854207231" rel="nofollow"><font color="#dd4b39">Google Plus</font>
</a></p>
</div>
/*Professional Author Box HTML Code*/

 

 Customization :

 

• Paste Your Image URL Here : Add Your Profile Picture
• Write Something About Yourself 
• http://twitter.com/shoutersclub : Replace with your Twitter page URL
• http://www.facebook.com/shoutersclub : Replace with your Facebook page URL
• http://plus.google.com/109208666606854207231 : Replace with your Google Plus page URL

Step 6

Finally, Save your template and see the result.

Final Words! 

Friends! I will come up with a post on the same, but for now if you want to make sure not to miss it, subscribe to our Newsletter!. 

Still if you have any questions or confused about the process then feel free to ask via comments. I would like to help you out. Happy Blogging!