Author Box Widget for Blogger

If you visited a lot of quality blog you will notice that every post there is about the author widget below the body of content. It contains information about the author of the article or blog. You may also write anything on this widget that you think your visitors should know about you and allowing them to connect with you through social media sites that you are available.

If you are building an author box widget you are also building your personal brand which added to the total quality of your blog. Establishing a relationship between the author and visitors of a blog is always a must to increase the visitor engagement. There are more chances that people will comment and share your post if they like your content and when they know who wrote it. It is also a way to build trust and credibility of your own article.

We now know that author box is one of the important widgets we consider to add to our blog. On the other hand, we should also consider making it look attractive and professional to increase the chances of visitor engagement. So I want to share my author box design and you are free to use it on your own blog.

Author Box Features

• It looks simple but professional
• Fully responsive (it adapts to different screen sizes)
• It will load faster (it contain only one image)
• Easy to customize

Adding Author Box Widget below Post on Blogger

1. Go to your Blogger dashboard ->>Template->>Edit HTML
2. Search the following code using CTRL+F on your keyboard

]]></b:skin>

3. Just above the code, copy and paste the following CSS codes provided below.

.i-author {overflow: hidden;padding: .7em;background: #ECF7FF;}.i-author img {float: left;height: 5.5em;padding: 2px;margin: 0px 5px 2.5em 0px;width: 5.5em;border: 1px solid rgb(0, 4, 91) !important;border-radius: 50%;}.i-author h4 {color: #000000;font-size: 1.5em;margin: 0px;padding: 0px 0px .5em 0px;}.i-author p {color: #434343;font-size: 1em;line-height: 1.7em;margin: 0;}.i-social{font-size:1.3em;margin-top: 5px;}

4. Search again for <div class='post-footer-line post-footer-line-1'/>
5. Just above the code, copy and paste the following HTML code provided below

<!– author box –><div class=’i-author’><img alt=” src=’Author Image link ‘/><h4>Aires Halili</h4><p>Write something about yourself</p><div class=’i-social’>Follow me on: <a href=’Your Twitter account link here’><font color=’#00aced’>Twitter</font></a> | <a href=’Your Facebook account link ’><font color=’#3b5998′>Facebook</font></a> | <a href=’Your Google Plus account link ’><font color=’#dd4b39′>Google Plus</font></a></div></div><!– author box end –>

Customization

1. Change the red color with your own profile image url.
2. Aires Halili: change it to “About Author” or to your name.
3. Write something about yourself: Tell your visitors who you are.
4. Replace URLs with your own social network accounts’s URL.

That’s all, I hope you successfully put the author box to your blog. You are free to use the comment box bellow to ask something about this tutorial. Don’t forget to subscribe to get more tutorial like this.