Advance Author Box Widget For Blogger

Showing a small info about the author at end of article will be more useful for readers. When readers (visitors) liked the article very well, they might have to know about the author who wrote? from where?. Therefore blog's author have to add author info box below every blog post. Even it can create a good affability with  readers well.

Did you think info about the person who gave you any valuable thing that you have expected for a long time? You might say Yes. Because it is our pleasure to know about those person who gave us valuable things. So In case of reading article, Readers should have a tasty to know about the author after reading the article.

Advance author box is an widget which show small info of blog author or writer with profile image and social icon. This widget is developed by me. Absolutely It's free of charge. You can use in your blog very easily. Only few simple codes have to add in your blog. It look elegance and premium. Even blog author can gain social media followers through this widget.

Live Demo Download

I would recommend to add this author box below every blogger post. You can add anywhere, no problem! Below article is best place. Go through steps given below to add Advance Author Box in Blogger.

1. Go to Blogger → Select a blog → Template → Edit HTML.
2. Find (Ctrl + F)  <data:post.body/>  and add the following HTML code after it.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class="about-author">
<h3 class="boxtitle">About Author</h3>
<div class="authorbox">
<div class="authorsocial">
  <li><a class="fb" href="http://facebook.com/SoftGlad" rel="nofollow"></a></li>
  <li><a class="twitter" href="http://twitter.com/soft_glad" rel="nofollow"></a></li>
  <li><a class="google" href="https://plus.google.com/114636838169087641091" rel="author"></a></li>
  <li><a class="in" href="http://sa.linkedin.com/in/ashiqhassan" rel="nofollow"></a></li>
</div>
  <div class="authorinfo">
<img src="profileimg.png" />
<p>He known as Ashiq Hassan, is the founder and the brain behind SoftGlad. A 16 
year old teen from kerala, India. He provides high quality tutorials about latest 
web design and technology trends. He loves music and likely to be a musician in 
Vstars Band. <a href="#">Read More</a></p>
</div>
</div>
</div>
</b:if> 

Customize: you have to change few things from above HTML code. Replace all social media site URLs with your social media profile URLs (line #5, 6, 7 and 8). Replace profileimg.png (line #11) with your photo URL. Add your own info in between two <p> </p> tag.

3. Now we have to style the author box by adding CSS code. Again Find  ]]></b:skin>   and add following code before or above  it.

.about-author {
    width: 100%;
}
.authorbox {
    overflow: hidden;
    padding: 0;
    background: #333;
    color: #ccc;
}
.authorbox .authorinfo {
    color: #ccc;
}
.authorbox .authorsocial {
    float: left;
}
.authorbox .authorsocial li {
    list-style: none;
    margin: 0;
    position: relative;
}
.authorbox .authorsocial li a {
    width: 32px;
    display: block;
    background: url("http://softglad.at.ua/images/social-logo32.png");
    height: 32px;
    margin: 0;
}
.authorbox .authorinfo img {
    float: left;
    margin: 4px 10px 4px 5px;
    border-radius: 100%;
    width: 17%;
    background: #fff;
    padding: 5px;
}
.authorbox .authorinfo p {
    margin: 0;
    font-size: 18px;
    padding: 0 5px;
    line-height: 25px!important;
    font: 15px "Armata", Arial;
    text-align: left;
}
.authorinfo p a {
    text-decoration:none;
    color:#fff;
}
.authorbox h3 {
    margin: 0;
    display: inline-block;
    background: #333;
    color: #fff;
    font: bold 20px Arial;
    padding: 5px 10px;
}
h3.boxtitle {
    background: #333;
    color: #fff;
    margin: 0 auto;
    width: 25%;
    padding: 2px 10px;
    font: bold 16px "Armata", Arial
}
.authorbox .authorsocial li .fb {
    background-position: 0px 0px;
}
.authorbox .authorsocial li .twitter {
    background-position: 0px -32px;
}
.authorbox .authorsocial li .google {
    background-position: 0px -64px;
}
.authorbox .authorsocial li .in {
    background-position: 0px -96px;
}
.authorbox .authorsocial li .in:hover {
    background-position: -32px -96px;
}
.authorbox .authorsocial li .google:hover {
    background-position: -32px -64px;
}
.authorbox .authorsocial li .twitter:hover {
    background-position: -32px -32px;
}
.authorbox .authorsocial li .fb:hover {
    background-position: -32px 0px;
}
.authorbox:hover img {
    background: #1BC3F8;
}
.authorbox .authorinfo img, .authorbox .authorsocial li a {
    -webkit-transition: .5s;
    -moz-transition: .5s;
    -ms-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
}
@font-face {
    font-family: 'Armata';
    font-style: normal;
    font-weight: 400;
    src: local('Armata'), local('Armata-Regular'), 
url(http://themes.googleusercontent.com/static/fonts/armata/v3/FG9R9aX-RIX_AvJI8USOWg.woff) format('woff');
} 

4. Save Template.  That's all.

I hope you like this widget. Do post your feedback in comment below and if you get any error tell me in comment. Do Share with your friend and enjoy.

SHARE

Tweet