How to Add Author Box Below Blogger Post - welcome to our blog that presents the full content How Gadget, the discussion this time we're discussing that you find that How to Add Author Box Below Blogger Post, we have provided complete information with images that are easy to understand, the explanation is simple but complete, therefore please read until the end :)

This is about : How to Add Author Box Below Blogger Post
And this article : How to Add Author Box Below Blogger Post

How to Add Author Box Below Blogger Post

If you are using a custom blogger template, sometimes the blogger default author box will not be displayed under your blog post, although you activate "Show Author Profile Below Post" option in Blogger settings. If you have the same problem follow the steps given below to display it in your blog.

Find this in "Edit HTML":

<b:includable id='post' var='post'>

Now scroll down slowly until you this line:

<div class='post-footer'>

Add below code just before above line:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:post.authorAboutMe'>
<div class='author-profile' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
  <b:if cond='data:post.authorPhoto.url'>
 <img expr:src='data:post.authorPhoto.url' itemprop='image' width='50px'/>
  <b:else/>
 <img itemprop='image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfY8xzWjmOJg6AzioTJD7MTmAK7_14pIzqWMQtDAu2KiR_pmN3q8gPLMSCC-7mLMv8XoFB6YJ2tFt4TGa0QRFAll18q39ZjGjwNIbT-7ScOPkaCsSyYbnIi41KuKM_KtRwz6y0VNymMCM/s1600/no-avatar-50.png' width='50px'/>
  </b:if>
  <div>
 <a class='g-profile' expr:href='data:post.authorProfileUrl' itemprop='url' rel='author' title='author profile'>
   <span itemprop='name'><data:post.author/></span>
 </a>
  </div>
  <span itemprop='description'><data:post.authorAboutMe/></span>
</div>
</b:if>
</b:if>

To understand it better, see this image:

Now find this:

]]></b:skin>

Add this CSS code just before above code:

.author-profile {
    background: #f6f6f6;
    border: 1px solid #eee;
    margin: 15px 0 15px 0;
    padding: 8px;
    overflow: hidden;
}

.author-profile img {
    border: 1px solid #ddd;
    float: left;
    margin-right: 10px;
}

Save your template. Final result will be look like this:

SHARE this with others...THANKS. 

Information How to Add Author Box Below Blogger Post has been completed we present

A few of our information about the How to Add Author Box Below Blogger Post, we hope you benefit from this article

You have just read the article How to Add Author Box Below Blogger Post and many articles about gadget in our blog this, please read it. and url link of this article is https://howtomonetizeeverything.blogspot.com/2015/10/how-to-add-author-box-below-blogger-post.html Hopefully discussion articles on provide more knowledge about the world of tech gadgets.

Tag :

Tweet