Aug 21, 2016

Below Posts Admin/Author Box with Social Icons for Blogger

data:blog.title
Admin box for blogger, author box for blogger, below posts about admin box, below posts about author box
Hey guys, Hope you all are fine and enjoying your day by doing blogging. In previous we have also shared a dark theme stylish & responsive below posts about admin box for blogger users and now again we came up with second version of that blogger widget with light skin. Below we are going to attach a live demo screenshot of this below post about admin box. Have a look on it. If you want to see live it then you can see it by clicking on live demo button which are also given below.

Below Posts About Admin Box, Add Below Posts Author Box, About Admin Box for Blogger, Author Box for Blogger

Live Demo

The admin bio box is a small section where you can display information about the admin of the blog means who is behind of the blog with links to their website and social profiles.So we highly recommend everyone to must add a admin box below of each post on your blog.

Actually, This light theme widget we have created for our recently launched "Viral Grid-Mag Blogger Template" which is totally free and looks like professional due to its stylish features and theme. So, now we are going to share this widget with all of you. You should know about the features of this below posts admin/author box widget before understanding the method of how to add admin/author box to below each post in blogger.

Also Read: Another Stylish Below Post Email Subscribe Box for Blogger.  
Also Read: BlackReen Free Blogger Theme - A Responsive Blogger Template

Features Of Below Posts Admin/Author Box Widget

  1. Neat & Clean Widget.
  2. Very Fast to Loading.
  3. Social Button with Integration of FontAwesome Icons.
  4. Light Theme.
  5. Pleasant Look for Eyes.
  6. Gradient Background with the Help of CSS Language.
  7. No need to say, It is too stylish. ;)
Now, we are going to explain the whole method about adding this widget just below of each post in blogger with few steps. So, follow instructions carefully which are given below.

How To Add Admin/Author Box Below of Each Post?

Note1: Before doing any customization inside your blogger template code are must download a backup copy of your blogger template to save yourself to facing a big problem if you do any mistake. Having a backup copy of blogger template before doing customization is a good habit of blogger users.

STEP1] Go To Blogger >> Choose Your Blog >> Click on Template >> Now Click On Edit HTML.

STEP2] Now, Using CTRL+F (Windows) or CMD+F (Mac) Search for <head> tag inside your blogger template code are and paste below FontAwesome Stylesheet Link just below of this.

<link href='http://netdna.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.css' rel='stylesheet'/>

STEP3] Now, Using CTRL+F (Windows) or CMD+F (Mac) Search for ]]></b:skin> tag inside your blogger template code are and paste below code just above of this.

Note2: You don't have permission to share my codes on your blog in any condition. Respect the hard work of developers.


/* About Author Box by: www.MyBloggerGuides.com Keep These Credits Intact, Do Not Remove */
div#MBG-About-Box:before { content: " \f007 About Author "; background: #0c6aff; font-family: Lobster, FontAwesome; padding: 16px 10px 24px 10px; position: relative; overflow: hidden; z-index: 0; top:70px; transition: .3s; color:#fff; float:right; } div#MBG-About-Box .wrap-me:hover{box-shadow: 4px 4px 4px 4px #444444;} div#MBG-About-Box .wrap-me { margin: 0 auto; display: block; padding: 30px 20px; background:linear-gradient(135deg,#f4f8ff 0,#f4f8ff 49%,#e5efff 49%,#e9e8f2 100%);border-top:1px solid #cfe1ff; box-shadow: 4px 4px 4px -4px #444444; color: #444444; box-sizing: border-box; background: linear-gradient(135deg,#f4f8ff 0,#f4f8ff 49%,#e5efff 49%,#e9e8f2 100%) 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-Credit a{color:#0c6aff;} .MBG-About-Text { text-shadow: 2px 2px 2px #fff; text-align: center; color: #0; font-size: 18px; font-family: normal, FontAwesome; line-height: 1.5em; margin-top: 35px; margin-bottom: 4px; } #about-opacity {opacity: 0.7; -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 #0c6aff; 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 #0c6aff; cursor:pointer; } #MBG-About-Box .social_profiles { line-height: 1.2em; display: table; float: none; margin: 0px auto; text-align: center; min-width: 300px; padding: 5px 0px; border: 0; } #MBG-About-Box .social_profiles a:hover { color: #FFF; background-color: #111; border-color: #0c6aff; } #MBG-About-Box .social_profiles a { color: #fff; margin: 0 5px; text-align: center; float: left; display: table; padding: 4px 5px; background-color: #0c6aff; border-radius: 50px; border: 2px solid #fff; 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; }
STEP4] In above step we have added the CSS Part of this widget. Now wea re going to Add HTML Part of This about/admin author box widget. To add HTML Part Search for <div class='post-footer-line post-footer-line-1'> and paste below HTML Code just after of it.

(Don't save it, Changing required in this code area. To see what you have to change scroll down this post.)

  <!-- Below-Post-About-Author-Box-Start -->
    <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 class='MBG-About-Text'>I&#39;m Paramjot singh, a young addicted Blogger  &amp; Author at My Blogger Guides Blog. I&#39;m from Lucknow, Uttar Pradesh, India. I&#39;ve good knowledge of CSS &amp; HTML. I always love to share my Blogger resources and will continue to add my two cents that might be helpful in your Blogging journey. :) </div><div class='clr'>
    <div class='social_profiles'>
       <a class='ripple-effect' href='http://www.facebook.com/techfrnz' rel='nofollow' target='_blank' title='Join on Facebook'><i class='fa fa-facebook'/></a>
       <a class='ripple-effect' href='http://www.twitter.com/techfrnz' rel='nofollow' target='_blank' title='Follow on Twitter'><i class='fa fa-twitter'/></a>
       <a class='ripple-effect' href='http://plus.google.com/+MyBloggerGuides' rel='nofollow' target='_blank' title='Follow on Google+'><i class='fa fa-google-plus'/></a>
       <a class='ripple-effect' href='http://www.pinterst.com/paramjotsingh' rel='nofollow' target='_blank' title='Follow on Pinterest'><i class='fa fa-pinterest'/></a>
       </div></div>
    <div class='MBG-About-Credit'><a class='ripple-effect' href='http://www.mybloggerguides.com/2016/08/below-posts-author-box-with-social-icons-for-blogger.html'><i aria-hidden='true' class='fa fa-download'/>
    Get Widget</a>
      </div></div></div>
    <!-- /Below-Post-About-Author-Box-Ends -->
</b:if>
Possible Customization
This Color = Change This Color With your Profile Link URL.
This Color = Change This Color with your little Biography.
This Color = Change This Color with your Social Profile Links.

STEP5] Now, Click on save template button.

That's it. You have added about admin/author box widget to the footer of each post on your blogger blog. Open any post of your blog and see it live on your blog.

Also Read: How To Add Stylish Email Subscription To Each Post's Footer in Blogger?
Also Read: Add Jumbo Social Sharing Counter Widget to Blogger

Conclusion:

So above guide is about "How To Add About Admin/Author Box to the Below Of Each Post in Blogger?" We hope by this guide you have added this on your blogger blog. If anything goes wrong or you are facing any problem in its responsiveness then drop a comment below. We will help you out of sure.  Did you like this author box widget? Do Subscribe us to get our Next Updates direct into your mailbox. Do Share it. 
Thank You! Stay Blessed!

No comments:

Post a Comment

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.