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



How to Add Author's Profile Image Beside Every Post Title




add author's profile beside post titleSearch Engine Optimization (SEO) is always the heart of   every blogging  career, no doubt that as a goal oriented one, you must have to maximize your blog to be visible in the Search Engine Results Page (SERP). One of the best things to work with is putting your profile photo beside  every post title, in that way the people that land to your pages will think that somebody (YOU) is working your blog and not through robots who work for you. Please take look with the screenshot of this post to have a glance for what we are going to achieve in this tutorial.

Adding Author's Image Before Post Title


Step 1. Choose a picture of yours and upload it via Blogger and get  the URL or the picture link You don't want to see a huge image next to your post title. Best sizes are 24 px by 24 px to 28 px by 28 px

Also read:
How to upload Image in Blogger and get the URL

Step 2. Go to Blogger Dashboard >> Template >> Edit HTML (back -up Template for your reference)
Step 3. Look for the  opening code below
<b:includable id='post' var='post'>
until you reach these closing code below just a few lines from the code above

<data:post.title/>
        </b:if>
      </b:if>
      </h3>
    </b:if>

Step 4.  After you find that opening and closing code please  delete all the codes being enclosed on it including the opening and the closing code.
Here is the complete set of code to be deleted.
<b:includable id='post' var='post'>
  <div class='post hentry' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
    <b:if cond='data:post.firstImageUrl'>
      <meta expr:content='data:post.firstImageUrl' itemprop='image_url'/>
    </b:if>
    <meta expr:content='data:blog.blogId' itemprop='blogId'/>
    <meta expr:content='data:post.id' itemprop='postId'/>

    <a expr:name='data:post.id'/>
    <b:if cond='data:post.title'>
      <h3 class='post-title entry-title' itemprop='name'>
      <b:if cond='data:post.link'>
        <a expr:href='data:post.link'><data:post.title/></a>
      <b:else/>
        <b:if cond='data:post.url'>
          <b:if cond='data:blog.url != data:post.url'>
            <a expr:href='data:post.url'><data:post.title/></a>
          <b:else/>
            <data:post.title/>
          </b:if>
        <b:else/>
          <data:post.title/>
        </b:if>
      </b:if>
      </h3>
    </b:if>

Step 5. Paste the following code in the place of the deleted code in Step 4.
 <b:includable id='post' var='post'>
  <div class='post hentry' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
    <b:if cond='data:post.firstImageUrl'>
      <meta expr:content='data:post.firstImageUrl' itemprop='image_url'/>
    </b:if>
    <meta expr:content='data:blog.blogId' itemprop='blogId'/>
    <meta expr:content='data:post.id' itemprop='postId'/>

    <a expr:name='data:post.id'/>
    <b:if cond='data:post.title'>
      <table><tr>
        <td class='posttitle'><a href='http://www.bloggingtipsandtrix.blogspot.com' target='_blank'>
          <img src='http://4.bp.blogspot.com/-s7omNra0EFc/Ur2GWB60gYI/AAAAAAAAB9E/To8_ASb-O1A/s1600/cerwen+profile+pic.png' style='margin-bottom: 0px; margin-right: 3px; padding: 2px; height: 28px; width: 28px; border:1px solid #d0d0d0; '/></a> </td>
        <td><h2 class='post-title entry-title' itemprop='name'>
      <b:if cond='data:post.link'>
        <a expr:href='data:post.link'><data:post.title/></a>
      <b:else/>
        <b:if cond='data:post.url'>
          <b:if cond='data:blog.url != data:post.url'>
            <a expr:href='data:post.url'><data:post.title/></a>
          <b:else/>
            <data:post.title/>
          </b:if>
        <b:else/>
          <data:post.title/>
        </b:if>
      </b:if>
      </h2>
        </td>
        </tr></table>
   
      <style>
        h2.post-title {
       
          margin-left: -10px !important;
        }
      </style>
<style>
        posttitle {
       
    border: 5px solid #000000;
        }
      </style>
 
    </b:if>
Step 6. Replace the orange highlighted text with your G+ link or any link like facebook fan page or to your blog's home page URL. This is the link when you click your image icon beside the post title.
Step 7. Replace the IMAGE-URL  highlighted text in pink color from above with the URL address of your image (the one that you've gotten from Step 1).
Step 8 . Save the Template and that's it! Enjoy :)

Also  Read:

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...