Add Responsive Author Box to Blogger Post’s Footer

In one of our previous post we have share Responsive Subscription Box Widget which you can add to the footer or above of your Blogger posts. After our previous widget we have received many requests by mail for Responsive About Author Box widget which we can add to the end of our each Blog post on Blogger. So today we are here with about author box widget. You can add this widget to your each blogger blog post at once. Below we have given Demo screenshot of this widget for you. You can also view live demo of this widget from below Demo link.

Stylish Responsive About Author Box for Blogger

Live Demo

Qualities Of Author Box

  1. Pro Looking,
  2. Easy customizing of Text.
  3. Fully Responsive,
  4. Social Profile Links, &
  5. Fast Loading.

A Blogger always want some different and good looking widgets for their blog which can attract more readers to their blog. Good looking widgets can increase your blog traffic and blog rank. So, If you want to add this widget on your blogger blog then follow below guide carefully.

Our Recommended Blogger Widgets

  1. WordPress Like Floating Social Sharing Widget for Blogger with Counter.
  2. AllInOne Admin Box Widget with Social buttons and Subscription Box.
  3. Add Sticky Notification Bar To Blogger with Show/Hide Button.
  4. Stylish Contact Form For Blogger! Add to Static Page, Responsive & Pro Version.
  5. Cute & Stylish Email Popup Subscription Widget.

How To Add Author Box to Blogger Post Footer?

So finally if you have decided to add this widget on your blogger blog then read following step by step guide.

Note : Before doing any customization in your template we highly recommended to Download a backup of your Blogger template.

  • Go to Blogger >> Template >> Edit HTML.
  • Click anywhere inside the code area.
  • Search for below code by pressing CTRL+F


  •   Paste following code just above of this code.

 /*  About Author Box by:
      Keep These Credits Intact, Do Not Remove   */

div#MBG-About-Box:before {
content: ”  f007   About Author  “;
background: #FFFF00;
font-family: Lobster, FontAwesome;
padding: 17px 10px 26px 10px;
position: relative;
overflow: hidden;
z-index: 10;
top: 53px;
right: px;
transition: .3s;
div#MBG-About-Box .wrap-me {
margin: 0 auto;
display: block;
padding: 30px 20px;
background-color: #404040;
box-shadow: 2px 4px 2px 2px #444444;
border-top: 65px solid #FF0000;
color: #444444;
box-sizing: border-box;
background: #000 url(‘’ )no-repeat 0px 0px;
padding: 10px 5px 10px 5px;
clear: both;
text-align: center;
display: block;
margin: 10px 0;
height: auto;
.MBG-About-Credit {
text-align: right;
padding-right: 10px;
padding-bottom: 10px;
color: #CAFFFD;
font-size: 10px;
  font-family: Lobster, FontAwesome;
margin-top: 7px;
.MBG-About-Text {
text-shadow: 2px 2px 2px #444343;
text-align: center;
color: #CAFFFD;
font-size: 16px;
  font-family: Lobster, FontAwesome;
line-height: 1.5em;
margin-top: 7px;
margin-bottom: 4px;
#about-opacity {opacity: 0.5;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
-moz-transform: rotate(7deg);
-o-transform: rotate(7deg);
-webkit-transform: rotate(7deg);
-ms-transform: rotate(7deg);
transform: rotate(7deg);
filter: progid:DXImageTransform.Microsoft.Matrix(
                    M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod=’auto expand’);
zoom: 1;
opacity: 1;
margin-left: 0px;
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
filter: progid:DXImageTransform.Microsoft.Matrix(
                    M11=1, M12=0, M21=0, M22=1, sizingMethod=’auto expand’);
zoom: 1;
-moz-box-shadow: 1px 1px 4px #000;
-webkit-box-shadow: 1px 1px 4px #000;
box-shadow: 1px 1px 4px #000;
border:0px solid #888; margin:2px 15px 0px 0px; padding:2px;
border-radius: 50px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
-o-border-radius: 50px;
border:4px solid #ccc;
#MBG-About-Box .social_profiles {
  line-height: 1.2em;
  display: table;
  float: none;
  margin: 0px auto;
  text-align: center;
  min-width: 157px;
  padding: 5px 0px;
  border: 0;
#MBG-About-Box .social_profiles a:hover {
  color: #FFF;
  background-color: #FF0000;
  border-color: #FFF;
#MBG-About-Box .social_profiles a {
  color: #000000;
  margin: 0 5px;
  text-align: center;
  float: left;
  display: table;
  padding: 4px 5px;
  background-color: #CAFFFD;
  border-radius: 50px;
  border: 2px solid #2D2D2D;
  width: 20px;
  height: 20px;
  line-height: 0;
  font-size: 20px;
  transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;

  •  Now search for <data:post.body/> tag and paste below code just below of this tag.

Note : If you are using read more button on your blog then you can find this tag 2 to 3 times. So paste below code which suite on your blog. Generally second one is right selection

 <b:if cond=’data:blog.pageType == &quot;item&quot;’> <div id=”MBG-About-Box”><div class=”wrap-me”>
<img align=’left’ class=’about-picture’ height=’100px’ id=’about-opacity’ src=’′ width=’100px’/><div id=’about’></div>
<div class=”MBG-About-Text”>I’m Paramjot singh, a young addicted Blogger  &amp; Author at My Blogger Guides Blog. I’ve good knowledge of web designing &amp; always love to share my Blogger resources. </div><div class=”clr”>
<div class=”social_profiles”>
   <a href=”” target=’_blank’ rel=’nofollow’ title=”Join on Facebook”><i class=”fa fa-facebook”></i></a>
   <a href=”” target=’_blank’ rel=’nofollow’ title=”Follow on Twitter”><i class=”fa fa-twitter”></i></a>
   <a href=”” target=’_blank’ rel=’nofollow’ title=”Follow on Google+”><i class=”fa fa-google-plus”></i></a>
   <a href=”” target=’_blank’ rel=’nofollow’ title=”Follow on Pinterest”><i class=”fa fa-pinterest”></i></a>
<div class=”MBG-About-Credit”><a href=””><i class=”fa fa-download” aria-hidden=”true”></i>
Get Widget</a>

  • Change Yellow highlighted Color with yours.
  • Now Search for </head> tag and paste following code just above of </head> tag.

<link href=’’ rel=’stylesheet’/>
<link href=’|Lobster:400′ rel=’stylesheet’ type=’text/css’/>

  • Now, Hit on Save template.
  • That’s it. You are done.


So above guide is about How To Add Responsive About Author Box to Blogger Post’s Footer? Hope by this guide you can easily add this widget on your blogger blog. If anyhow problem persist after following all above steps then drop a comment below. We will help you out of sure.
Thank you!

Paramjot Singh

Hey, How you all are? Myself Paramjot Singh, A young (Not Old :P) addicted Blogger from Lucknow, India who want to learn Aha to Shit of the Blogging. I'm blogging since 2 years, and here on My Blogger Guides, I'm sharing my little mind knowledge which I learned in these past two years. :)

Click Here to Leave a Comment Below 2 comments