How To Add A Clean Sidebar About author box in Blogger
Hey guys, welcome to The Kathait blog. Today in this article, we are going to talk about how to handle it. About author box in Blogger. In this article, I'm going to tell you the easiest way to install an About author box in Blogger widget and social media widget in the Blogger sidebar.
Clean Sidebar About author box in Blogger
Another vigil is always important to introduce yourself to your loyal readers and your blog followers. We have a submerged or social media widget with it so that you can easily share your various social media profile links along with your short and simple description. This visit is an ideal option to display any information about you in the most stylish way. It carries space for an image. Your name is a description and social media buttons. Everything is customizable and it is very easy to set up so without wasting any time.
- The very first thing you need to do is log into your Blogger account.
- Then go to layout,
- And click on add gadget.
- HTML, JavaScript.
Now, the title you have to write is as About author box. At the place of content, you have to copy the code which I have given you in the description. But first, we will make some changes in this code at the. Place of P S Kathait or you have to write the author's name. And just below the author's name, you have to write your description. And you have to paste your image link over here. So after making these three changes then you have to copy this code. And then paste it.
<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/AVvXsEj4uAK9WuR2OTzKpTyh63ZrfZnv96KdmmBoGtfQPrk92iOzlunDEiZ8tu8_K1cH3D5Zy7NcvTOATUa8iHQ20GVTd0aOea0ZqvN7kbMpBFqee1l9WLQeVeDsxsWft5N99KeMmvadLFEDYL6NZSLCGMAaXWPxIvoP8u2dpqa0RyLvEyUSnQqbmdWD-BjTUg/s1600/pskathait.jpg" title="Author" width="300">
</div>
</div>
<div class="aboutme-info">
<h4>P S Kathait</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>Then click on save. Now click on View blog. Now you can see the About author box added successfully in the sidebar. So that's all for today's article. If you feel this article was helpful and you want us to keep posting such useful content related to bloggers' tips & tricks, then please do not forget to leave a comment in the comment box below.
एक टिप्पणी भेजें