• RSS
  • Delicious
  • Digg
  • Facebook
  • Twitter
  • Linkedin
  • Increase Website And Blog Traffic:latest article for Increasing Blog and website Traffic free gide.....
  • Create and Upload Site Map to Google:Google is fist largest Search Engine by upploading SITE MAP Google Easily Search Links from Ur site in Searching.......
  • Fix WEB SITE Errors:Google and other search engines always take those site in there fist page in searching which ha too less web Errors...
  • Top 20 Search Engine:Submit Ur site to top 20 Search Engines to Increasing Ur Site Traffic and making money top search engines like as Google, Yahoo, Ask, AOl, MSN...
  • Top Social Sites:Top 100 Social sites which real help U make a Affliate Marketer and in Pormoting ur Producdts...

New Posts

How to add an image next to Blogger Post Title

Posted by Mohsin On 4/07/2012 10:56:00 AM No comments

blogger posts, gadgets for blogger, blogger tutorials

It has often been said that a picture says a thousand words, so in the struggle for the attention of the reader, we can add a picture or an icon to our post title, as I have put in the title of the post in the screenshot above.

Show Image Icon before Blogger Post Title

Step 1:

First thing first you have to do is to prepare an image. After that you'll need a direct link to an image before you proceed further. You can upload it to tinypic.com and copy the URL located in the Direct Link for Layouts box. Also, make sure your image is sized appropriately. You don't want to see a huge image next to your post title.

Step 2: Go to Dashboard - Template - Edit HTML - Proceed if needed
    Step 3. Click anywhere inside the code area to find (using CTRL + F) the following code:
    <b:includable id='post' var='post'>
    Step 4. After you found it, click on the left arrow next to it to expand the widget's code


    Step 5. Then delete it until you reach to <div class='post-header'>:
                  <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>
    The code to be deleted:


    Step 6:

    Paste the following code in the place of the deleted code in Step 5:
    <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='IMAGE-URL'/></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>

    Step 7:

    Replace the IMAGE-URL text in blue 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 :)

    0 comments:

    Post a Comment

    All types of Comments are welcome