Read more
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.
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.
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.
Change the highlighted red text with your image, name, description and social media profiles links.
<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>
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.
0 Reviews