Add Image Icon Next to The Post Title of Blog

It is said that picture speaks itself. So as in our daily life picture is also important in web world. I mean to say that if you make your blog or site's looking good, then many unique visitors can also return in your blog or site. So that adding the image icon just before your post title may a good idea for increasing the visitors.

Here is some steps that you should consider to add image icon:

1. First of all you should make a good icon that suits your sits. Then you should upload it into www.tinypic.com and then copy the link of this picture. But your image icon size should be appropriate.

2. And then go to Dashboard and click on template>>edit html

3. Find the code below

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

4. When you find this code then you should click on the left arrow seeing there to expand that widget code.

5. After that you should delete until you reach to <div class='post-header'>

6. And then paste the following codes in that place.
 <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'>           <img src='IconUrl'/></td>        <td><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>        </td>        </tr></table>           <style>        h3.post-title {          margin: 0px !important;        }      </style>       </b:if>

8. At last you should replace the IconUrl text in red color URL

9. Finally click on save template.

Wow You have successfully done.

Post a Comment

0 Comments