How To Add Clean Sidebar Author Box With Social Buttons Widget For Blogger

How To Add Clean Sidebar Author Box With Social Buttons Widget For Blogger

Today we have came with a tutorial about How To Add Clean Sidebar Author Box With Social Buttons Widget For Blogger. This guide will tell you the most easy way to install an author widget and social media widget in blogger's sidebar. An author widget is always important to introduce yourself to your loyal readers and blog followers, we have submerged a social media widget with it, so that you can share your various social media profile links along with your short and simple description.
This widget is an ideal option to display some information about you in most stylish but clean way. It carries space for image, your name, your description and some social media buttons. Everything is customizable and its very easy to setup. So without wasting any time, let's begin. 

See DemoLive Preview

Adding The Widget 

The First thing you need to do is to login into your Blogger account and go to >> Layout >> Click add a gadget anywhere into your layout >> Add HTML/JAVASCRIPT widget and paste the below code in the blank space.

<div class="widget-content">
<div class="sidebar_about_author">
<div class="inner_wrapper">
<div class="aboutme-img">
<img alt="Author" class="img-responsive" height="auto" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdAC0-BdDR3nwQ5eMQOlrZGsTxe6MrD1baRwkkqJVhD88e3NTNtAXYLXZieeHYsuVcLvaHlYjJj2GbJVqVq0poHfMHcv9sJtFZJ85uMODtNmfMs1scux_IPInw-FsErqOnJFH2VbvWZOPJ/s360-c-h257/048.jpg" title="Author" width="300">
</div>
</div>
<div class="aboutme-info">
<h4>Author Name</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim</p>
</div>
<div class="aboutme-wrpicon">
<ul class="extender">
<li class="aboutme-icon"><a href="#" rel="nofollow" target="_blank" title="Facebook"><i class="fa fa-facebook"></i></a></li>
<li class="aboutme-icon"><a href="#" rel="nofollow" target="_blank" title="Twitter"><i class="fa fa-twitter"></i></a></li>

<li class="aboutme-icon"><a href="#" rel="nofollow" target="_blank" title="GitHub"><i class="fa fa-github"></i></a></li>
<li class="aboutme-icon"><a href="#" rel="nofollow" target="_blank" title="Google+"><i class="fa fa-google-plus"></i></a></li>
<li class="aboutme-icon"><a href="#" rel="nofollow" target="_blank" title="Pinterest"><i class="fa fa-pinterest-p"></i></a></li>
</ul>
</div>
</div>
<style>
.aboutme-img {
    position: relative;
    max-height: 150px;
    overflow: hidden;
}
.aboutme-img img {
    max-width: 100%;
    width: 100%;
}
.aboutme-info {
    margin-top: 20px;
    font-size: 13px;
}
.aboutme-info h4 {
    margin-bottom: 10px;
    font-size: 16px;
    text-transform: uppercase;
    color: #888;
    font-weight: 700;
}
.aboutme-info p {
    margin: 5px 0;
}
.aboutme-wrpicon {
    display: block;
    margin: 15px auto 10px auto;
    position: relative;
}
.aboutme-wrpicon .extender {
    width: 100%;
    display: block;
}
.extender {
    text-align: center;
    font-size: 16px;
}
.extender .aboutme-icon {
    background: rgba(0,0,0,.06);
    display: inline-block;
    border: 0;
    margin: 0;
    padding: 0;
    border-radius: 3px;
}
.extender .aboutme-icon a {
    display: inline-block;
    font-family: fontawesome;
    font-weight: 400;
    color: #aaa;
    height: 32px;
    width: 32px;
    line-height: 32px;
    border-radius: 3px;
}
</style>
</div>

Change the highlighted red text with your image, name, description and social media profiles links. 

Conclusion

Congrats !! You have made it. now you have learned that How To Add Clean Sidebar Author Box With Social Buttons Widget For Blogger. Visit your blog and check the awesome widget live in action, hope you liked this tutorial, if you enjoyed then please share it with your friends, we are working hard to develop more such awesome widgets please stay tuned with Us.