How To Install Author Info Box inwards Blogger Posts?
The steps are straightforward for those who know a picayune nearly basic HTML because during the tutorial nosotros would besides present yous how this widget would fetch the Images from the Blogger’s profile. Consider the next instructions.
Step#1: Go To Blogger.com >> Template >> Edit HTML >> Proceed. Before, nosotros deed ahead it is essential to expand the Widget Box. On the top left corner of your screen, at that spot would locomote a Small Check box only conduct (Tick) it together with decease along to the side past times side step.
Step#2: Now inside the template’s coding search for the ]]></b:skin> tag and only inwards a higher house it glue the next CSS coding. Since, everyone likes to customize the gadget according to their color Scheme. Therefore, to practise modifications regard the next 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/AVvXsEh0uxqB2xYKW14yYPA3xsvenSto9CRtKwJpSGxg8Q5nD4Ap8HGDfvBO5cMUD3TUpVIOrZ2tFAsSkYP5MCnYBx3JcpBjxy2w8iNc-fzF1CyE3LAxbyh0u9_mKeQE3WGLRliWvEvSluSpZw0/s1600/1rib.png) no-repeat;
z-index: 7;
position:absolute;
}
.mblautbox {border: #4f5966 venture 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 venture 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 i time once again inside the template search for <div class='post-footer'> tag together with only inwards a higher house it glue the next JavaScript + HTML coding. Almost all templates convey the Post footer tag, therefore this tutorial universally applies to each together with every blogger template.
<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['Syed Faizan Ali'] = '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="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 nether the MIT together with 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= novel 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 advert should locomote written every bit it is shown on Blogger Profile. Remember: The name which are adding, should locomote inwards the listing of authors of the blog.
- Replace Information_Here with the modest biography of the individual who has written the article. Make certain it should non overstep to a greater extent than than fifteen to twenty words.
- Replace Profile_Url with the profile URL of your blogger's Profile. Remember: Its non must that a individual should add together the URL because the whole information is fetch through the username.
All Done: Now subsequently customizing the gadget it’s fourth dimension to salve the Template past times pressing orangish “Save Template “button introduce at the bottom of your screen. That is it, similar a shot catch ship pages of your site together with at the terminate of each together with every article it would display an incredible "Mr.Editor Box.
No comments:
Post a Comment