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 Demo Live 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 any where 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/AVvXsEi3H4ds2prfRBetkBqPjmwsQKLwzYDC3lsjxC5zoAl-crzbnLwk5Sn5car-2rTYgehc0QU8U-CVZwu3vLpIGSGW3tv3Q3vZb6l9IsUwPhpW4as4Xno-VfNAHhZva2mPlr-DcLclvUvj-WAU/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.

How To Add Default About the Author Widget In Blogger Blogs

Having a Professional Author Box Widget is very important for a blog, That's why we have cam up with a tutorial about How To Add Default About the Author Widget In Blogger Blogs. Establishing a relationship between the author and visitors of a blog is always a must to increase the visitor engagement. This widget will let your visitors and blog readers know more about you and your blog authors, you can add various information about your self and ask your blog authors to do the same.There are more chances that people will comment and share your post if they like your content and when they know who wrote it. You don't have to add any extra coding or widget, every template in blogger has this function inbuilt and you just have to activate it from settings.

See Demo Live Preview

Let's Start Step-1 ( Activating The Widget ) 

The First thing you need to do is to login into your Blogger account and go to >> Layout >> Edit the blog post widget by clicking the edit button or pencil icon, then check the 'Show Author Profile below post' option as we have shown in the below image.

Step-2 ( Adding Information In Your Profile ) 

The widget receives the blogger profile information automatically, As long as your profile is marked as public.

To Edit the Information just visit this link below and then add the information about you.

Blogger Settings: Go to https://www.blogger.com/edit-profile.g

Note :-  In the above image you can see we have pointed some of the settings, those are mandatory, missing any of them will make the widget not work properly.

Conclusion

Congrats !! You have made it. now you have learned that How To Add Default About the Author Widget In Blogger Blogs. 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. Arrivederci !! (Goodbye in Italian).