Add Author Box Below Every Post in Blogger

Author box widget for blogger – The author box is a small section in a blog where the blog’s author can display information about itself, social profile and picture. This is a very handy widget for any blog. Through this widget, you can share your bio with your readers. This a best way for your reader knows about you and increase the blog look as well. You might be seen it, in many blogs. If your blog missing this important feature, then here is step by step guide to add author box in below every post in blogger. The below shared author box not only help you to share the information about yourself but also can display the major social media profile links which can help to increase your follower as well.

How to add an author box below the every post in blogger

• Login to your blogger account
• Select template and then edit HTML
• After the opening all codes, search ]]></b:skin> by using Ctrl +f
• Open the below code and copy all coding from appearing pop-up window and paste it just above it.

View Code

Now search <data:post.body/> and add the below code just above it.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
 <div class='wc-aboutauthor'>
 <div class='wc-aboutpic'>
 <img alt='Author image' height='100' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBzyT5px8a3L0VSyxjVmJuyX-Vrkv5RmwbU-tvMQNTkyKvxRzQMHQc1XcpZnasF8Pw0afoi2COrnrGaRrCK-7xY5bZSMRuypDqWUJXWfpoVf-uroYXezHF2vwc-hRjd3Q0XPKKYvl96Fo/s1600/Co-Author.jpg' width='100'/>
 </div>
 <h5>About Me :</h5>
 <div style='text-align: justify;'>
 <b>YOUR BIO HERE</b></div>
 <div class='wc-aboutsoc'>
 <p> Find us on Socail Media
 </p>    <a href='https://facebook.com/ID' rel='nofollow'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvE4eqo9rBjebgyCw1JLFVM0l9-1HZCbEVZs00Pr9h_NpusTcamuSsNm6BXZ2D5Ydgrq6tOiNRwuJkUKHOd_GihhYbySIMwQ8O8Aii2o_XCRUbOVOv1rLz3CqVlWT9T4WDrabKlwqKx8uL/s1600/Facebook+Square.png' target='_blank' width='40px'/></a>
 <a href='https://twitter.com/ID' rel='nofollow'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6SPfCJ8y7CzZ1elstcmR_cEHtwcHD27LNswFnA9WYdhsHBFQ65MJ54e7BhD-NJm2uLPkZIMYakdVFTbJsoVheFpXKZeKxwk0YIm2wWqxmBNa1CteRxTQzY4-w6hie2tivYwnGAkv7k38m/s1600/Twitter+square.png' target='_blank' width='40px'/></a>
 <a href='https://plus.google.com/ID' rel='nofollow'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCHUDJSk4i8c9GxaNQqWGa2gH4vUtI6MqjgL8RXg-Dt5ssrpDN2OCs_0_6tZAIxjBSVGwnGjyHGh2BTiH5hIjrOp-ksHZVD1P_sma-LDGLkNCavkUvpcFJ2CiTV_wagT1La8gOWw7VgvnN/s1600/Google+plus+square.png' target='_blank' width='40px'/></a>
 <a href='http://youtube.com/ID' rel='nofollow'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoj8ZnzYdszl0wJNSY1cKm47GloUIAH4nWb89sQ7iS3A6DynbYHc1WGMqLyXELAiHCw-RKYKiQ4CExHFqQc1XtwaXwePGoLB0FZfOIs3mmg8woJr8RMtu7vbmkQIwtpyLp72h6Zw-6RsQ7/s1600/Youtube+square.png' target='_blank' width='40px'/></a></div>
 </div>
 </b:if>

Customization

Replace ID with Facebook, twitter, google plus and YouTube ids.

Replace https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBzyT5px8a3L0VSyxjVmJuyX-Vrkv5RmwbU-tvMQNTkyKvxRzQMHQc1XcpZnasF8Pw0afoi2COrnrGaRrCK-7xY5bZSMRuypDqWUJXWfpoVf-uroYXezHF2vwc-hRjd3Q0XPKKYvl96Fo/s1600/Co-Author.jpg with your picture (host it on picasa)

YOUR BIO HERE write here about yourself

After the doing all changing, now click on the orange save button. Now visit your blog and preview any post,  hopefully, you will be looking the author box in the below the posts.

Need more help!

This is a tested widget and works on all blogger template except dynamic template which isn’t supporting customization.  However, if you are facing any problem with adding the author box in blogger then place your comment in below. Thank you for visiting our blog.