How To Add Simple Author Box Below Every Post In Blogger
Today we are going to share an awesome post about How To Add Simple Author Box Below Every Post In Blogger, About the author widget is one of the compulsory and important widget to add in your blog. It helps the visitor to know more about the author and his/her blog. The widget which we have shared today is very minimal and elegant and doesn't affect your blog loading time . Lets move further and see How To Add Simple Author Box Below Every Post In Blogger.
What Is Special In Our Widget ?
Ohh! is see !! About the author widget is important thing and we must have in it our blog, but whats special in this widget, Ahh! See the most important thing we care about is SEO now days and having a fast loading blog is mandatory. Our widget is completely based on HTML and CSS, We have maintained very neat and tidy coding. Also our widget works automatically for the guest authors .
Let's Start Step-1 ( Adding CSS )
Before Editing we recommend you to make a backup of your template, so that anything goes wrong you still have your blog design safe.
The First thing you need to do is to login into your Blogger account and go to >> Templates >> Edit HTML and search for the ending ]]></b:skin> tag and just above it paste the following code.
/* ######## Author Widget By Sorabloggingtips.com ######################### */
.sora-author-box {
border: 1px solid #f2f2f2;
background: #f8f8f8;
overflow: hidden;
padding: 10px;
margin: 10px 0;
}
.sora-author-box img {
float: left;
margin-right: 10px;
border-radius: 50%;
}
.sora-author-box p {
padding: 10px;
}
.sora-author-box b {
font-size: 20px;
}
Step-2 ( Adding HTML )
In the template, search for the <data:post.body/> tag and just below it paste the following HTML Coding. In case, you are unable to find <data:post.body/>, then you can paste it just below <div class='post-footer'> or <div class='post-footer-line post-footer-line-1'></div>.
<b:if cond='data:blog.pageType == "item"'>
<div class='sora-author-box'>
<img alt='Author Image' class='avatar avatar-60 photo' expr:src='data:post.authorPhoto.url' height='100' width='110'/>
<p>
<b>About <data:post.author/></b>
<br/>
Soratemplates is a blogger resources site is a provider of high quality blogger template with premium looking layout and robust design</p>
</div>
</b:if>
Note :- If you want to display the widget in every page ( Homepage, postpage, indexpage, searchpage, archive page etc.) Then remove the lines which are marked in red from the above code.
Note* :- Change the text in blue line with your detail.
Note* :- Change the text in blue line with your detail.
Conclusion
Congrats !! You have made it. now you have learned that How To Add Simple Author Box Below Every Post In 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.
No comments