Stylish Responsive Author Info Box with Social Buttons

It is always nice to  have a small description of yourself in your blog. So that your readers can have a way to know about the author of the article they’re reading. It also provides a way for the readers to connect with the author.

So author information widget is a must for every blogger. And today I'm sharing a stylish author box widget with a responsive layout. In addition it also has  social connecting widget attached d to it, so that users can connect with you in different social sites. It supports – Facebook, Twitter, Google+ and LinkedIn.


I have listed out the features of this author information widget below :

• Stylish & Responsive
• Social Network Compatible
• Short bio with author photo

CLICK HERE TO SEE LIVE DEMOOF THE WIDGET

Adding it to a Blogger Blog

Adding this author bio box to blogger is simple. Follow the below steps to da that.
I am providing steps to add it at the end of the posts. But you can add it anywhere you want it to appear. Usually it is nice to keep it at the end of the posts.

✔ Go to Blogger Dashboard > Template > Edit HTML
✔ Now search for <data:post.body/> and copy & paste the below code just 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/Bloggslab" rel="nofollow"></a></li>
  <li><a class="twitter" href="http://twitter.com/SarathRaju360" rel="nofollow"></a></li>
  <li><a class="google" href="https://plus.google.com/+SarathRaju360" rel="author"></a></li>
  <li><a class="in" href="http://sa.linkedin.com/in/Bloggslab" rel="nofollow"></a></li>
</div>
  <div class="authorinfo">
<img src="profileimg.png" />
<p>This is Sarath, i am a student from Kerala, India and a part time blogger.
At BloggsLab, I'll be blogging on blogging. Yeah, I'll share with you some basic, best and latest blogging tips and tricks. I'll help you to customize your blogs to the best by writing on tweaking templates and sharing with you some interesting and beautiful widgets, templates and plugins.<a href="#">Read More</a></p>
</div>
</div>
</div>
</b:if>

---

NOTES :
★ Replace the the words highlighted in yellow with you social link urls
★ Replace profileimg.png  with your/author image
★ Replace the bolded part with a description about yourself.

---

✔ Now search for ]]></b:skin> and add the following code just 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("https://dl.dropboxusercontent.com/s/cg3bjfja2sg5ocx/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');
}

✔ Now save changes made to your template. That’s it. Share your views.