Jul 8, 2016

Add Responsive Author Box to Blogger Post's Footer

data:blog.title
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


]]></b:skin>
  •   Paste following code just above of this code.
 /*  About Author Box by:   www.MyBloggerGuides.com
      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('http://1.bp.blogspot.com/-FzCdLYOA4ms/U1DnVwbvYGI/AAAAAAAAAnY/M-EpS75hQNA/s1600/header_bg1.png' )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;
margin-right:5px;
                          }
#about-opacity:hover{
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;
                          }
.about-picture{
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;
                          }
.about-picture{
border:4px solid #ccc;
cursor:pointer;
                          }
#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='http://2.gravatar.com/avatar/36385217f6c2ea9f4d3751db14bf8c3d?s=320' 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="http://www.facebook.com/MyBloggerGuides" target='_blank' rel='nofollow' title="Join on Facebook"><i class="fa fa-facebook"></i></a>
   <a href="http://www.twitter.com/MyBloggerGuides" target='_blank' rel='nofollow' title="Follow on Twitter"><i class="fa fa-twitter"></i></a>
   <a href="http://plus.google.com/+MyBloggerGuides" target='_blank' rel='nofollow' title="Follow on Google+"><i class="fa fa-google-plus"></i></a>
   <a href="http://www.pinterst.com/MyBloggerGuides" target='_blank' rel='nofollow' title="Follow on Pinterest"><i class="fa fa-pinterest"></i></a>
   </div></div>
<div class="MBG-About-Credit"><a href="http://www.mybloggerguides.com/2016/07/add-responsive-author-box-blogger-posts.html"><i class="fa fa-download" aria-hidden="true"></i>
Get Widget</a>
</div></div></div></div></b:if>


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


<link href='http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.css' rel='stylesheet'/>
<link href='https://fonts.googleapis.com/css?family=Oswald|Lobster:400' rel='stylesheet' type='text/css'/>


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

Conclusion:

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!

2 comments:

  1. Why do I follow you guide my blogger templates which are not. Could you help me? Thank you.
    Please visit our website: http://hatcainuoctroi.blogspot.com/

    ReplyDelete
    Replies
    1. First disable mobile template of your blog and i can't understand what you actually want to say.

      Please clearify the question.

      Thanks for visiting.

      Delete

We’re eager to see your comment. If you have any query related to the topic then drop a comment below. We will help you out of sure. However, Please Keep in mind that all comments are moderated manually by our human reviewers. According to our comment policy all link are nofollow so keep in mind that never use links in comments, we consider link comments as a spam.