Blogger: Installing a Post Header (Image in the Title of your Blog's Post)

View a sample here on Jane's blog. She is a UK Stampin' Up! Demonstrator using an image in her Post Title area.  She has her small house in the front of the Post Title. Then notice there is a dotted line beneath her Post Title.

http://www.cheshiredesignhouse.blogspot.com/

Storing Your Images
If you need a place to store your images, I would recommend and personally use PhotoBucket (www.photobucket.com).

• Create a free account.
• Upload the images.
• Under each image you will see code...copy the code for DIRECT LINK and that is the path you will substitute and use in the code below.

Editing HTML Code
If you would like to add a graphic as a border below your post title and/or a small image in front of your post title, you need to:

 

• Layout.
• Edit HTML.
• Click on Expand Widgets.
• CTRL + F to find "post-title" or simply scroll through your code.
• Look for the line:
  <h3 class='post-title entry-title'>
• You only have to ADD the HIGHLIGHTED CODE only (in the code below).
• Note the highlighted areas in RED (in the code below).  That is where you would replace with your image locations.
• The 1st highlighted area is for the small house you see in her Post Title.
• The 2nd highlighted area is the image with the dotted border that is sitting below the post title.
• Save Template.
• View Blog.
• You're done.

 

**** SAMPLE CODE ****

 <h3 class='post-title entry-title'>

     <b:if cond='data:post.link'>
       <a expr:href='data:post.link'><data:post.title/></a>
     <b:else/>
        <b:if cond='data:post.url'>
          
          <a expr:href='data:post.url'>
<img src='path to your image/post-header.png'/>
          <data:post.title/></a>

<img src='path to your image/post-sep4.png'/>

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

Have fun!

Comments

[Julia]

Thank you very much!

[marven niffi]

That just made me want to read it more .http://www.logo-genie.com

[MT4 Trade copier]

When I use my search engine to look for blogs to read yours has come up several times on different categories. That just made me want to read it more, I can see why. It is excellent. Keep up the awesome work and I will continue reading.

[Ashley Mann]

Please help me! This is brilliant advice and was working for me but doesn't any more. My code looks like the code above... please help.