New Published Post: How To Fix Adsense Not Showing After Redirecting Blogger To Custom Domain
Like Us:
Facebook



How to Add Author's Profile Picture Below Post Title In Blogger


Adding author's profile image below post title or above post body is quiete professional in looks since your reader will see or know first who wrote such particular article in your blog.This tutorial will  not be applicable if your blog is run with multi authors but don't worry because I have a separate  tutorial on that topic.
You can see it above this post for the live demo.
add author image above post body


Also Read:

How to Add Author's Profile Pic Beside Post Title
How To Add Author's Profile Picture Below Post In Blogger

Adding Author's Profile Image Just below Your Post Title


Step 1. Go to Blogger Dashboard >> Template >> Edit HTML (back- up your template for your reference)
Step 2.  Find the code below by using the Control F of your keyboard.

Note: There are two occurrences of the code, please choose the second one.
<span class='post-author vcard'>
Step 3. Next to the code in step 2 is a set of codes which may look like the code below:

<b:if cond='data:top.showAuthor'>
          <data:top.authorLabel/>
            <b:if cond='data:post.authorProfileUrl'>
              <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
                <meta expr:content='data:post.authorProfileUrl' itemprop='url'/>
                <a class='g-profile' expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
                  <span itemprop='name'><data:post.author/></span>
                </a>
              </span>
            <b:else/>
              <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
                <span itemprop='name'><data:post.author/></span>
              </span>
            </b:if>
        </b:if>
<span class='post-timestamp'>
        <b:if cond='data:top.showTimestamp'>
          <data:top.timestampLabel/>
        <b:if cond='data:post.url'>
          <meta expr:content='data:post.canonicalUrl' itemprop='url'/>
          <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/></abbr></a>
        </b:if>
        </b:if>
      </span>

We should remove the code above because that is responsible for line " Posted By" with the corresponding date of the post. You can see this line just below your post or article written. See the screenshot below.
show author profile image below post title


Step 4.  After deleting the code above the next  thing is you are going to find the code below. Again choose the second occurrence of the code.
<div class='post-header-line-1'/>
Step 5. Just below it, paste the following code:
<span class='post-author vcard'>
<b:if cond='data:blog.pageType == "static_page"'>
<b:if cond='data:post.author == &quot;AuthorName&quot;'>
<span class='author'><a href='Author-Profile-URL'><img src='http://4.bp.blogspot.com/-s7omNra0EFc/Ur2GWB60gYI/AAAAAAAAB9E/To8_ASb-O1A/s1600/cerwen+profile+pic.png' style='margin-bottom: -3px; margin-right: 1px; padding: 2px; height: 24px; width: 24px; border:1px solid #d0d0d0; '/></a></span>
</b:if></b:if>
        <b:if cond='data:top.showAuthor'>
          <data:top.authorLabel/>
            <b:if cond='data:post.authorProfileUrl'>
              <span class='fn'>
                <a expr:href='data:post.authorProfileUrl' itemprop='author' rel='author' title='author profile'>
                  <data:post.author/>
                </a>
              </span>
            <b:else/>
              <span class='fn'><data:post.author/></span>
            </b:if>
        </b:if>
      </span>

<span class='post-timestamp'>
        <b:if cond='data:top.showTimestamp'>
          <data:top.timestampLabel/>
        <b:if cond='data:post.url'>
          <meta expr:content='data:post.canonicalUrl' itemprop='url'/>
          <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/></abbr></a>
        </b:if>
        </b:if>
      </span>

Also Read:

How To Get Image link (URL) of the Uplaoded Image in Blogger

Customization:


1. Replace the Author Name with your own author name. This must your  Blogger Profile name. In my case 2. my author name  is Cerwenlloyd Gefjun.
3. Replace the image link (URL) with your image URL. Click here on how to get image url
4. And finally customize the css of your profile image:

         margin- I set it with bottom -3px, and right 1px
         padding- which set by 2px
        height- this your image size (24px)
        width- this is the image width  (24px)
        border size - increase in number will make your border bigger also
        border color- you choose another hexadecimal color here

Questions about the post above are always welcome. Please leave it at our comment box below.
Thanks pal for your time!
       
     


About the Author:
tilt  hover effect
Hello folks! This is Viral Apps, the admin of this blog. No words could described my grateful appreciations to all newbie and professional bloggers around the world and most especially to Almighty God who gave me the wisdom...Read More
Follow him @ Twitter |Facebook

No comments :

Post A Comment!

Post A Comment!
We love to hear your feedbacks and suggestions. We will try our best to reply to your queries as soon as time allows. Please keep in mind that all comments are moderated manually by our editors team to minimize spamming, and all the links are nofollow.

Note:
1. To add HTML code in the box, please use our HTML editor generator.
2. Please do not spam. Those type of comments will be deleted upon our review.
3. We should appreciate an individual and suggestive discussion.

Best Regards,

Cerwenlloyd Gefjun

Related Posts Plugin for WordPress, Blogger...