Blogger Pro

how to add an author info box in blogger

February 18, 2020
0 comments

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.

How To Change Your Display Name in Blogger Blogspot

February 18, 2020
0 comments

While starting a Blog People take it as a funny game and thus select an uneventful Display Names like Admin, Owner and etc. However, after achieving the success they always feel regrets for not selecting their real name. Ultimately, they have to create a new account on their real name. However, those people who are using Blogger Platform can easily change their display name or the Author name without facing any hesitation whatsoever. There is no need to create a new account, or to connect external accounts with your blog because Blogger Platform provides an option within the Profile area that helps in changing the display name. Therefore, today in this article, we will learn how to Change Your Display Name in Blogger.

There is no rocket science behind changing the display name because Google provides a built-in option for changing the display names. Therefore, in order to change your display name or author name form Blogger Platform just login to your Blogger Account.

Now on the Blogger Dashboard on the Top right corner of the screen, there will be an option just Select Blogger profile >> Edit Profile. We have attached a screenshot below so everyone can easily understand what we are trying to say.

Now From here you can edit your profile as much as you like. Under the “Identity” category there will be three options such that, Username, Email Address, and Display Name. Out of these three only two are editable such that, “Display Name” and “Email Address”.

Now it is up to a person what he wants to change, either edit the “Display Name” or the email address. After customizing your profile, scroll down to bottom of the page and just save the profile by pressing “Save Profile” button.

This tip may appear to be a small one, but believe me there are tons of peoples who spends days and nights in discovering how to change their Author name. I have also seen lots of people who create a new profile for that sake of showing their real name. To be honest, I was also unaware of this feature because we hardly edit our Blogger Profiles. Similarly, many other peoples are also unaware of this functionality. What are your thoughts about this tip? Does anyone was aware of this technique. Take a lot care of yourselves till then, Peace, Blessings and Happy learning.

how to add an author info box in blogger

How To Install Author Info Box in Blogger Posts?

From the Editor's Desk:

How To Change Your Display Name in Blogger Blogspot

Popular Posts

adshare

adshare2

adshare1

Featured Post

Boost Your Blog Traffic With Facebook Fan Page

Labels