Southern Listeners

Loading
Thanks to Greenlava for this cool gadget. Get yours here

Tuesday, October 25, 2011

Adding an Image Next to Blogger Post Title


The title of this post is self-explanatory. By default, Blogger's post title is a plain text. In this tutorial, I'll show you how you can easily add an image next to your post title.

Step 1: 

First thing first. Prepare an image. You need a direct link to an image before you proceed further. Click here if you're not sure how to get the direct link for your image. 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

Next, find and delete the following lines:
<b:includable id='post' var='post'>
    <div class='post hentry uncustomized-post-template' 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 3:

Paste the following lines in place of the deleted line in Step 2:
<b:includable id='post' var='post'>
    <div class='post hentry uncustomized-post-template' 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='ssybyposttitle'>
      <img src='http://2.bp.blogspot.com/-dyOiQpo23vE/ToC9yKNJ2YI/AAAAAAAADoM/VyR2emKNstE/s50/autobot.png'/></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>
New code in place



Step 4: 

Now, replace the image address in Line 13 above with that of your image (the one that you've gotten from Step 1).



53 comments:

  1. hi!!! this is so helpful... is it also possible to have different images on different post titles??? if so...could you tell me how to do it?

    Thanks so much!

    I followed some of your tutorials and it's really great :)

    ReplyDelete
  2. @thebeautifulpig: I won't say it is impossible, but it is definitely not practical. Placing a default image doesn't take much doing. But that's not the case for post-selective pictures. And you've have to tweak your HTML each time you want to add a new picture. Not to mention the resources that will be taken to load your page with all the conditional code that you should be putting. In other words, it'll take longer for your page to load, and the solution is not something easy either. If you're still interested in pursuing this, the idea is to use label-dependent post icons.

    ReplyDelete
  3. yes i thought it would be impractical... anyway, thanks so much! :)

    ReplyDelete
  4. Hi really love your site! In my dynamic view though with the new interface. I go to template but it wont let me clik on the edit HTML button :(

    ReplyDelete
  5. @Absurd Traveler: You must be using a Dynamic View template. The tweak above can't be implemented on a DV template because -- no prize for guessing it right -- Blogger doesn't want us to edit the DV template. So we're kinda stuck with lots of things that they've set. We could only do so much to tweak a DV template. Unfortunately, adding an image next to a Dynamic View post title isn't one of them. Sorry..

    Cheers.

    ReplyDelete
  6. Hi if u r able to find the any widget which display recently updated posts on blogger than it would be great thanks.

    -cheers
    http://ispaceexpress.blogspot.in

    ReplyDelete
    Replies
    1. I'm pretty sure there are plenty of widgets that show recently published posts. But I can't say the same about recently updated one. If I know this right, Blogger's post feed doesn't carry any information on date of modification. Sorry about that.

      Delete
  7. hey thanks again for all your hard work...question can u round the corners of the tabs or images in mosaic view and can i hide the title on the header for the mosaic page...thanks...www.thrcenter.com

    ReplyDelete
    Replies
    1. If you were referring to Dynamic View templates, yes you can. For rounded corner in Mosaic view, and to hide your title, add this to your CSS:

      .mosaic .item.hentry{
      -moz-border-radius: 10px !important;
      -webkit-border-radius: 10px !important;
      -goog-ms-border-radius: 10px !important;
      border-radius: 10px !important;
      }
      .title h1{
      display: none !important;
      }

      There isn't any corner in the tabs, so there's nothing to be done there.

      Delete
  8. im sorry seems i didnt understand well what to do and this appeared..
    some help would be very much appreciated
    thanks again for the great job

    ReplyDelete
    Replies
    1. Hi emilio,

      It seems like you're using a dynamic views template. This tutorial won't work on dynamic views templates because there isnt any way to change HTML codes in Dynamic Views.

      Delete
  9. ops!...thank you very much anyway..it worth it to give it a try heh

    ReplyDelete
    Replies
    1. It's not impossible to get a similar effect in Dynamic Views.. I've put it in my queue of things to find out.. I'll publish a tutorial on this one day - not anytime soon though.

      Delete
  10. Hi! I love reading your tutorials, thank you for everything!

    I was wondering if it is possible to move this image at all. I have an image of a vine that I'd like to have flush with the outer wrapper image, as if it's growing from the outer wrapper. When I try to move the post title image, it ends up moving the entire blog post and just disappearing beneath the outer wrapper image.

    Is it possible to just move the image to the left? I hope I'm making sense. Thanks so much!!

    ReplyDelete
    Replies
    1. Hi Kristen

      I can't quite picture that. Perhaps if I have a look at your blog I might be a better help?

      Cheers,
      Yoga.

      Delete
    2. Thanks for such a quick reply! I have a test blog up for my new design right now, it is right here: http://ladybugtestsiteblogtemplate.blogspot.com/

      It's that flower with the vines you see next to the post title...I was hoping to make it flush with the template (like how the vine by the sidebar touches the right side).

      Thank you very much, I really appreciate you taking the time to look!!
      Kristen

      Delete
    3. Easy peasy.. Add this to your CSS:

      #main-wrapper{
      margin-left: 57px;
      }

      h2.date-header, .post-header, .post-body, .post-footer, #blog-pager, .blog-feeds {
      position: relative;
      left: 20px !important;
      }


      Cheers :)

      Delete
    4. aaaaaa!!! I can't thank you enough! I NEVER would have figured that one out. Thank you so, so much--now my site looks just how I want!!! :) :)
      Kristen

      Delete
    5. You're most welcome. Happy Easter to you :)

      Delete
  11. Thanks alot, will sure be handy on my blog!
    Will keep you posted with the results

    ReplyDelete
    Replies
    1. It sure would.. Let your imaginations go wild :)

      Delete
  12. thnx admin its very useful info you wrote here...

    ReplyDelete
  13. I was curious if it was possible to place my own advertisement banner on the side of my post in flipcard dynamic view.

    ReplyDelete
    Replies
    1. The only way to ads to your Dynamic Views front pages is by signing up for AdSense. You could, however, set up a static page (Dashboard - Pages - New Page - Blank Page - HTML) and insert your ads into that page. But it wont be on the front page, so it kinda defeats the purpose.

      Delete
    2. I didn't want it on the front page I wanted it on my posts when they clicked on the pic.

      Delete
    3. Like I mentioned earlier, you have two options. Adsense, or paste your ad's code in the HTML section of your pages/posts - which means the ads will appears inside your posts.

      Delete
  14. what would be the html code for that?

    ReplyDelete
    Replies
    1. Ads originate from sponsors. You need to get this code from the party who's product you're gonna advertise. Usually, they have smart scripts embedded in this code, that they'd automatically know how many of your readers clicked on the ads - and you'd get paid accordingly.

      If you're just looking for a way to promote a product of your own, then just insert your ad like how you'd insert a normal picture into your post.

      Delete
  15. I'm not sure where I should post this but I have an issue with my Post Arrows and 'X' in dynamic view. The arrows and 'x' are not set within their boxes and instead are slightly shifted down and to the right. I cannot figure out how to fix this. I've tried it all. Any help would be much appreciated. You are doing an amazing job! I've been using your site for a while now. You can see my website and the issues I mentioned at www.conradjacob.com

    ReplyDelete
    Replies
    1. Hi Conrad,

      I can see the source of the problem. From your CSS, find and change this:

      img{
      box-shadow: none !important;
      padding: 24px !important;
      border: 0px !important;
      }

      to this:

      .entry-content img{
      box-shadow: none !important;
      padding: 24px !important;
      border: 0px !important;
      }

      That should solve it :)

      Delete
    2. YOU ARE THE BEST!!!! Thank you very much. Worked like a charm.

      Delete
  16. hi Bro.. how to make image post appears after title post automatic..

    ReplyDelete
    Replies
    1. Hi there,

      What do you mean by automatic?

      Delete
  17. This is fantastic, thank you so much! I have used A LOT of your tutorials so far!

    Do you have a suggestion on a "good" size for the image?

    ReplyDelete
    Replies
    1. It depends to the size of your post title font. But as a rule of thumb, I wouldn't use anything bigger than 30x30px. But hey, you know what they say, to each their own :)

      Cheers :)

      Delete
    2. can you do this with page titles? I'd like to have icons in my header bar

      Delete
    3. Just to ensure we're on the same page, you're referring to a static page, right?

      Delete
  18. I don't have expand widget template on mine. I have no knowledge of how to do anything without
    Googling everything. Are the above steps still working without expand widget template?

    ReplyDelete
    Replies
    1. They decided to replace the feature with little black arrows. Skip that part and proceed with the rest. You might wanna use the built in search function to find the portion of code that you're looking for.

      Delete
  19. I can't find that code on mine. Do I have to actually do a post with a title before I can see it?

    ReplyDelete
    Replies
    1. I've updated the tutorial above, by taking into considerations all the new lines that the new HTML Editor has introduced. Could you give it another try?

      Delete
  20. Thank you so much! I was wondering if it would also be possible to have a different icons for different categories? I have two categories and I'd like to use an icon in front of the title to differ between the two. I've seen it on another blog but can't figure out how to do it.. Would love to hear from you. :)

    ReplyDelete
    Replies
    1. Hi Rowan,

      As we're hard-coding the icon into the template, making it dynamic based on the post will be a little too tricky. I believe the example you've seen might have been a different setup altogether. Have you tried contacting the owner of the blog to dig further?

      Delete
  21. thank you so much! it worked at once

    ReplyDelete
  22. ello yo boy, please help me.. i want to change all the images apperaing in the home page that is i am using jump links. See www.cloudslag.com here you can see the image size is too small i want to change the size of these pics. i used
    .post-body img
    {width:250px;
    height:auto;} code but it changes the size of all the pics even in the main post body. Please help me.

    ReplyDelete
    Replies
    1. Hello Udit, use a conditional code to restrict the CSS in the homepage only. Go to Edit HTML, Find for </b:skin> - Paste the following directly below </b:skin> - Then click on 'Save Template'

      <b:if cond='data:blog.pageType == "data:blog.homepageUrl"'>
      <style>
      .post-body img{
      width:250px;
      height:auto;
      }
      </style>
      </b:if>

      Delete
  23. hi..
    i can't find those code. can i add it with css?

    ReplyDelete
  24. hi..
    I want to add an image like current image ( http://aqneey.blogspot.com )..but i added manually..that mean i've to uploaded everytime i'm writing a post. I tried many time the way you did but it still can't. Can you help me please. My blog used the new html version. Thank..hope you can help me.

    ReplyDelete
    Replies
    1. CSS alone will not be able to finish the job. I've just reattempted the tutorial on a fresh template, and it still works:

      http://testblog18-yoboy.blogspot.jp/

      Could you give this another try?

      Delete

Please use the 'Ask a Question' page to shoot questions that are not related to the tutorial in the post above.