On this quick blogspot tips, we will show you how to add an author box inside your blogger posts. So many bloggers need to add them author bio inside them blogspot website. Its nice to get an about author on the sidebar but its much better to get this box showing up under all the posts. You can add information about you and your blog, add your social networks, include your photo and much more other features.
You can achieve this goal by following 2 options, the first one is simple and can be done through the blogger settings and the second one is more technique and will need to include some CSS/HTML Codes to your template :
Add Author Box : Option 1
1- Open your blogger dashboards
2- Click on => Layout
3- Click on => Add Gadgets ( The one just Under “Blog Posts” )
4- Scroll down and click on => Profile
5- Change the author Name if you want to and Save.
6- Back to your Layout just Drag this Widget below the Blog Posts and Save the Arrangement.
7- Check your blog post, the Author Box must be There.
Add Author Box Option 2 :
Open your Dashboard => Template => Edit HTML => Check the box (Expand Widget Template) and Proceed.
To change Background Color: Replace #ffffff.
To change the Font Color: Replace black.
Search for this :
]]></b:skin>
Just above it paste this code :
#seodesign {
width: 111px;
height: 111px;
margin-left:-15px;
margin-top:-15px;
background: url(https://lh5.googleusercontent.com/-8x_H46ct3z8/UgTyYGpYyRI/AAAAAAAAAnI/pRgWe_aYOXY/s109/author-up.png) no-repeat;
z-index: 7;
position:absolute;
}
.seodesignbox {border: #4f5966 solid 3px; width:610px;}
.seodesign-name { text-decoration:underline;}
.seodesignbox a:hover {
color: #afafaf;
text-decoration: underline;
outline: none;
}
.seodesignbox a {
color: #afafaf;
text-decoration: none;
outline: none;
}
.seodesigninfo {
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;
}
.seodesign-auto-box {
font-size:20px;
margin-top:-20px;
}
.seodesignbox{
background:#ffffff;
line-height:1.7em;
float:center;
padding:10px 10px 10px 10px;
margin:0 0 5px 5px;
color:black;
font-family: 'Open Sans', Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 24px;
}
.seodesignbox-right-min{
border-left:solid 0px #e8e8e8;
height:auto
}
#seodesigncontent {
position:absolute;
width: 111px;
height: 111px;
margin-left:565px;
margin-top:-5px;
}
Now search for :
<div class='post-footer'>
Just above it paste the following Code :
<div class='post-footer'>
<b:if cond='data:blog.pageType == "item"'>
<script type="text/javascript">
//<![CDATA[
var aut_desc = {};
var auth_url = {};
var multiAuthor = true;
var onePost = "article";
var manyPosts = "articles";
aut_desc['Seodesign.us'] = 'Information_Here<a href="Profile_Url">Read More</a><br/><b>Join me on:</b> <a href="http://www.facebook.com/mybloggerlab">Facebook</a> | <a href="https://twitter.com/#!/mybloggerlab">Twitter</a> | <a href="https://plus.google.com/106374439082237286396">Google+</a> | <a href="http://pinterest.com/fosterzone">Pinterest</a>.';
//]]>
</script>
<br />
<div class="seodesignbox">
<div id="seodesign"></div>
<div id="seodesigncontent"></div>
<a class="authorinfolink" href="Profile_Url">
<img border="1" class="seodesigninfo" src="" />
</a><br /><div>
<div class="seodesign-auto-box">
<b>Posted by: </b>
<span class="seodesign-name"></span></div>
<div class="authorinfodescription">
</div></div><div>
<span class="seodesign-name">
</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 = "Seodesign.us";
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>
Note :
– The name should be written as it is shown on Blogger Profile.
– The name which are adding, should be in the authors list.
– Replace Information_Here with the biography of the article’s Author (15 to 20 words Max)
– Replace Profile_Url with the profile URL of your blogger’s Profile.
– Replace Seodesign.us with your Blogger display name.
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.
Enjoy!
