Add Professional Author Box - For blogger Blog

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.
You may like:

Professional Author Box Features:

Professional look

Fully responsive design

Simple CSS Design

Very easy to use and customizable

Shortcode (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 backup 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.

<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/omeber" rel="nofollow" target="_blank"><font color="#00aced">Twitter</font></a> | <a href="http://www.facebook.com/fomeber" rel="nofollow" target="_blank"><font color="#3b5998">Facebook</font></a> | <a href="https://plus.google.com/112605113398493992975" rel="nofollow"><font color="#dd4b39">Google Plus</font>
</a></p>
</div>

Customization :

Paste Your Image URL Here: Add Your Profile Picture

Write Something About Yourself

http://twitter.com/fomeber: Replace with your Twitter page URL

http://www.facebook.com/fomeber: Replace with your Facebook page URL

https://plus.google.com/112605113398493992975: Replace with your Google Plus page URL

Step 6

Finally, Save your template and see the result.

Final Words:

Use this professional author box to make your blogging professional. It will increase your visitors attention toward you and get likes and shares. Hope you like this post, for more post like our blog and keep visiting for like this post.
Thanks :)

Add Professional Author Box - For blogger Blog | Fomeber

Professional Author Box Features: