HOT!Join Our Community For Exclusive Blogging IdeasClick Here

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. You can check a live preview of the Author Box widget by clicking the button below.

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 == &quot;item&quot;'>
<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. 

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. Arrivederci !! (Goodbye in Italian).
How To Add Simple Author Box Below Every Post In Blogger How To Add Simple Author Box Below Every Post In Blogger Reviewed by Sora Blogging Tips on November 23, 2016 Rating: 5

7 comments:

  1. Good morning, I''VE TRIED it but it still doesnt show my author box. I'M RUNNING YOUR TEMPLATE. THIS IS MY BLOG PAGE, lamlaminkings.blogspot.com.ng please help me check it out.

    ReplyDelete
  2. its not working. lamlaminkings.blogspot.com.ng can you please take a look?

    ReplyDelete
    Replies
    1. We can't see the codes you have added, please share the proper location of your code.

      Delete
  3. Please I implemented on my blog Naijcrackgist just as you instructed. But it's not working..

    ReplyDelete
    Replies
    1. You will see more than one <data:post.body/> in your template paste the code in second one or add it untill you see it working.

      Delete
  4. How to setup multiple author boxes?

    ReplyDelete
    Replies
    1. You have to use multiple condition's to show it for multiple authors.

      Delete

Powered by Blogger.