HOT!Buy Ready-Made Authority WebsitesClick Here

Making Blogger Professional, Important Updates !!

Hello SoraBloggingTips Readers, If you are reading this, then we would like to appreciate your efforts for being supportive. We know its har...

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 SoraBloggingTips on November 23, 2016 Rating: 5

17 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
    2. Could you please explain what condition is? I use and doesn't work.
      Thanks in advice

      Delete
  5. It worked for me when I used the second step after the second or third data:post.body.
    But my layout automatically scales all the images to fit the post width. How do I stop that for the author image?

    ReplyDelete
  6. http://vonmri.blogspot.de But I have currently left out step 2 in my code, because I don't want the stretched author's image underneath my blogposts. I'm using your Check My Style template (btw I couldn't reply to your comment in the Safari Browser)

    ReplyDelete
    Replies
    1. Please follow the step 2 also, since it is important, so that we can inspect the issue properly.

      Delete
  7. Replies
    1. Image is automatically taken from google plus profile.

      Delete
  8. Hi
    Ihave google plus profile with an img but is not showing

    ReplyDelete
    Replies
    1. Image is automatically taken from google plus profile.

      Delete
  9. Author Name and Image is Not appearing. Here is my blog https://yoproductreviews.blogspot.com/

    ReplyDelete

Note : -We have stopped giving support to free version users, please read this article Making Blogger Professional, Important Updates !!. If You Are Facing Any Problem While Setting Up The Free Theme, Then We Recommend You To Read Our FAQ(Frequently Asked Question) Page.