Stylish Author Box Widget for blogger 2016

Does your blog have a Professional Author Box? In addition to having the great blog design, you should have "about the author" box on your blog. it contains descriptive information about the author. even professional bloggers always prefer to add about author box at the end of the post on their blog, because they know peoples wants to know little about author who has written the post.

Everyone wants to make his Blog or Website more attractive and professional. Therefore, I thought to share professional author box for blogger platform users who want to change the look of his blog.
In the following tutorial you are going to learn exactly how to add professional author box below every blog post in blogger. You can add an author box to the post footer in your Blogger blog by adding CSS + HTML code in your blogger template.

Professional Author Box Features :

1.  Professional look
2. Fully responsive design 
3. Simple CSS Design
4. Very easy to use and customizable
5. Short code (doesn't affect on your blog loading speed)
6. Suits to your template

 

Adding Professional Author Box In Blogger :

Step 1: Copy the given code!

<style>
.mdauthor_info{float:left;width:100%;padding:2px; background:none;color:#fff;}
.mdauthor_photo{float:left;margin-bottom:5px; margin-right:10px;}
.mdauthor_photo>img{border:1px solid #666;-webkit-transition:-webkit-transform .20s linear;
-moz-transition:-moz-transform .20s linear;-o-transition:-o-transform .20s linear;transition:transform .20s linear;
-webkit-box-shadow:0 3px 6px rgba(0,0,0,.25);-moz-box-shadow:0 3px 6px rgba(0,0,0,.25);box-shadow:0 3px 6px rgba(0,0,0,.25);
padding:5px;-webkit-transform:rotate(+3deg);-moz-transform:rotate(+3deg);-ms-transform:rotate(+3deg);
-o-transform:rotate(+3deg);transform:rotate(+3deg);float:left;}
.mdauthor_photo>img:hover{background:#FFFFFFborder : 1px solid #EEEEEE;-webkit-box-shadow:0px 0px 10px  rgba(0, 0, 0, .3);
-moz-box-shadow:0px 0px 10px  rgba(0, 0, 0, .3);box-shadow:0px 0px 10px  rgba(0, 0, 0, .3);-webkit-transform:rotate(-1deg);
-moz-transform:rotate(-1deg);-ms-transform:rotate(-1deg);-o-transform:rotate(-1deg);transform:rotate(-1deg);}
mdsocial{list-style:none;margin:0;overflow:hidden;}.mdsocial li{background:none !important;padding:0 !important;margin:0 8px; list-style:none;}
.mdsocial>li>a{display:block;width:40px;height:40px;
background:url("http://2.bp.blogspot.com/-IMM_B7aaLQA/T7ObAft4GbI/AAAAAAAADN0/mT6xK72Xe9I/s1600/social.png") no-repeat transparent;
text-indent:-99999em !important;}.mdsocial li a:hover{padding:0 !important;}.mdsocial li.rssicon a{background-position:0 0;}
.mdsocial>li{float:left; margin-left:10px;}
.mdsocial>li.twicon>a{background-position:-50px 0;}
.mdsocial>li.fbicon>a{background-position:-100px 0;}
.mdsocial>li.gicon>a{background-position:-150px 0;}
.mdsocial>li.rssicon>a:hover{background-position:0 -50px;}
.mdsocial>li.twicon>a:hover{background-position:-50px -50px;}
.mdsocial>li.fbicon>a:hover{background-position:-100px -50px;}
.mdsocial>li.gicon>a:hover{background-position:-150px -50px;}
</style>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='mdauthor_info'><a href='aio-solution.blogspot.com'></a>
<div class='mdauthor_photo'>
<img alt='author' height='100' src='https://fbcdn-sphotos-c-a.akamaihd.net/hphotos-ak-xpa1/v/t1.0-9/12654535_232877870378732_3456655734187499822_n.jpg?oh=4c62c4f7edd665a8ea4d5ffd6fa8714d&oe=5724EF3D&__gda__=1462458245_d97b33de3d2c31f5352dff42c4757e37' width='100'/>
</div>
<p>Syed Zaver Abbas is SEO expert in pakistan.
he is web designer, web developer, software developer and graphics designer that means he is multi talented.
he is also learning more about computer science.
</p>
<table width="100%"><tr><td><ul class="mdsocial" style="list-style:none;">
<li class="rssicon"><a href="http://feeds.feedburner.com/Aio-solution">Rss</a></li>
<li class="twicon"><a href="http://twitter.com/SyedZaverAbbas">Twitter</a></li>
<li class="fbicon"><a href="http://facebook.com/SyedZaverAbbas">FaceBook</a></li>
<li class="gicon"><a href="https://plus.google.com/109694380703413252694">Google +</a></li></ul></td></tr>
</table>
</div>
</b:if>

Step 2:

1. open your blog dashboard
2. go to layout
3. click add new widget
4. paste the code 

Step 3:

• Change facbook, twitter, google, and rss url with your own also change the image url with yours.

Thankx for being here...

• Tweet
• Share
• Share
• Share
• Share

About Admin

Syed Zaver Abbas is SEO expert in pakistan. he is web designer, web developer, software developer and graphics designer that means he is multi talented. he is also learning more about computer science.

Related Post