How to Add Author Info Box Widget in Blogger

Hello and Welcome to GetWebInfo.Com. Here on this post you can be able to find out Latest Article About Author Box widget in Blogger. This is a important part of any website in blogger. If you can add a author box under every post in blogger so it can increase Bounce rate and google will automatically increase your bloge page ranking. If you are looking for a professional multiple author info box widget in blogger then today i come up with the author box widget that you must have in addition to increase your blog design and authority. This widget automatically fetch blogger info like profile image. Introduction so you don't have to add additional info for you and your guest author.



First of all go to your Blogger Info Page and add your blog description. You can upload your Blogger profile image in this section and also add your blogger information like what is the name of your blogger and description also. You can add your blog description in Addition Information> Introduction Section.

Author Box Feature 


  • Multiple Authors Support
  • Auto Pic Information from Blogger Profile
  • Professional Look
  • Shor Codes ( Does Not effect on to your blogger loading speed)
  • Simple CSS desingn
  •    Very Easy to install and Customization 
  • Suits to Your Template

Install Author Box Widget in To Blogger



Step 01: First of all Login to your Blogger Blog

Step 02: Search for ]]></b:skin> the following code by pressing CTRL+F 

Step 03: Now just above this code add following CSS Code


 /* Multiple Author Box CSS Code*/
.authorboxwrap{background:#fff;margin:10px auto 20px;padding:20px;overflow:hidden;border-top:4px solid #bdc3c7;}
.avatar-container{float:left;padding:10px;margin:0 20px 0 0;background:rgba(0,0,0,0.07);border-radius:100%}
.avatar-container img{width:90px;height:auto;max-width:100%!important;border-radius:100%;transition:all .3s;}
.avatar-container img:hover{transform:rotate(-15deg)}
.author_description_container h4{font-size:18px;font-weight:600;display:block;margin:0;margin-bottom:2px}
.author_description_container h4 a{color:#333}
.author_description_container p{margin:0;color:#333;font-size:16px;margin-bottom:8px;line-height:25px;font-weight:400}
.social-links li{list-style:none!important;float:left}
.social-links a{border-bottom:none}
.social-links a:after,.social-links a:before{content:none!important}
.social-links li a{background:rgba(0,0,0,0.5);color:#fff;font-size:13px;text-align:center;display:inline-block;padding:0;margin:0 10px 0 0;width:30px;height:30px;line-height:30px;border-radius:100%}
.social-links li:nth-child(1) a{background:#516ca4;}
.social-links li:nth-child(2) a{background:#00c3f3;}
.social-links li:nth-child(3) a{background:#f20000;}
.social-links li a:hover{opacity:.9;color:#fff}
/* Multiple Author Box CSS Code*/

Step 04: Now find <div class='post-footer'> and just above it paste the following piece of HTML code.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='authorboxwrap'>
<div class='authorboxfull'>
<div class='avatar-container'>
<a href=''>
<img class='author_avatar' expr:alt='data:post.author' expr:src='data:post.authorPhoto.url' height='90' width='90'/>
</a>
</div>
<div class='author_description_container'>
<h4><a href='#' rel='author'><data:post.author/></a>
<i class='fa fa-check-circle' style='color:rgb(17,143,249);font-size:14px;' title='Verified Author'/></h4>
<p><data:post.authorAboutMe/><b/>
</p>
<div class='social-links'>
<li><a class='external external-link' href='#' rel='nofollow' target='_blank'><i class='fa fa-facebook'/></a></li>
<li><a class='external external-link' href='#' rel='nofollow' target='_blank'><i class='fa fa-twitter'/></a></li>
<li><a class='external external-link' href='#' rel='nofollow' target='_blank'><i class='fa fa-youtube'/></a></li>
<div class='clr'/>
</div>
</div>
</div>
</div>
<div style='clear:both'/>
</b:if>
Step 05: Add Facebook, Twitter and YouTube links in above code and finally Save your Blogger Template. 

Customize Your Blogger Profile Click Here



Now you can need to activate "Show Author Profile widget" Just Go to Blogger>Layout>Blog Post Section> Click on Edit button and Now scroll down and tick mark the "Show Author Profile Below post" Option that i have also given picture example under this line.



Finally Save your Blogger Setting and You can all Done!!!!!

I Hope this Article is really helpful for you if you like this article so please share it on Social Media With your Friends. Thanks for Reading.

Hello and Welcome to GetWebinfo.com. Here on this site you can be able to find out Latest Articles are about Blogger, SEO, AdSense, WordPress,. You can also be able to find out Latest Tips that can you really need one. You can also Download Premium themes free from this site.