Southern Listeners

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

Wednesday, December 29, 2010

Utilising Unused Space in Blogger Header

This is an interesting question from a Blog reader - Jamie. Jamie wants to know if there is way to utilize the unused space in Blogger header. The answer is yes. When you use an image in your header, your image will be aligned to the left. Some of you would want the image to be centered and you'd settle for that. But if you want your image to stay where it is (left), and add a gadget at the unused space on the right side, wouldn't that be cool?



Step 1:

When you go to Page Elements/Layout, you will see boxes where you can 'Add a Gadget'. Those are sections (not technically, but for the sake of simplicity, just assume it is). You can generally split a section, but splitting in two is not the aim of this tutorial, as your header will be half the width of your entire header. That's not what we want.

We want the header to be intact. So, we need to measure the width of the unused space. You can use various methods to measure the width of your unused space:

  1. Use an add-on called MeasureIt. If you're using Firefox for this tutorial, I suggest you get this add-on.
  2. You can use FireBug to see the width of the surrounding elements and then estimate the width of your unused space.
  3. Trial and error. Use a value, preview and see if it's fine. Then use another one, and keep doing it till you're satisfied with the results.
I used MeasureIt as it's the easiest way to find this width. The width of my unused space is 310px:




Step 2:

If you're using the old Blogger interface: Go to Dashboard - Design - Edit HTML - Back Up (Download Full Template) -

If you're using the new Blogger interface:
Go to Dashboard - Template - Backup/Restore - Download Full Template - Close - Edit HTML - Proceed -

Find for these lines:
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
        <b:widget id='Header1' locked='true' title='Test Blog 18 (Header)' type='Header'>
 <b:includable id='main'>…</b:includable>
 <b:includable id='description'>…</b:includable>
 <b:includable id='title'>…</b:includable>
        </b:widget>
      </b:section>
Note: The 'title' attribute in this line will be different in your template. Don't worry about it, just delete these lines.


Step 3:

Paste the following line directly above the lines found in Step 2:
<table><tr><td>
You have to insert the width of your unused space in line 5 above. Change 310px to the value that you've gotten in Step 1. Click on Save Template once you're done.

And then, insert the following line directly below the lines found in Step 2:
</td>
<td style="width: 310px;">
<b:section class='header' id='header2' maxwidgets='1' showaddelement='yes'/>
</td></tr></table>
You have to insert the width of your unused space in line 2 above. Change 310px to the value that you've gotten in Step 1. Click on Save Template once you're done.

This is what the final code should look like after the two additions above:
<table><tr><td>
      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
        <b:widget id='Header1' locked='true' title='Test Blog 18 (Header)' type='Header'>
 <b:includable id='main'>…</b:includable>
 <b:includable id='description'>…</b:includable>
 <b:includable id='title'>…</b:includable>
        </b:widget>
      </b:section>
</td>
<td style="width: 310px;">
<b:section class='header' id='header2' maxwidgets='1' showaddelement='yes'/>
</td></tr></table>

Step 4:

Go to Dashboard - Design - Page Elements (or Dashboard - Layout) and a brand new section will be waiting for you there. Add your gadget there as you wish.


I thought my previous post will be the last post of the year. But I was wrong. So, again, have a blasting new year! Happy 2011!

30 comments:

  1. worked like a charm! much thanks!

    ReplyDelete
  2. ariel.s: Glad you like it. Cheers.

    ReplyDelete
  3. Brilliant tip, Yoboy! It was a question I was planning to ask at some point in the future, when the opportunity to use that space arose.

    Cheers.

    ReplyDelete
  4. Thanks Trebor. If you have any particular tweak or trick that you want to achieve and you're not sure how, don't wait for the future, ask it now.

    Regards.

    ReplyDelete
  5. It was nice I created my own template using it

    ReplyDelete
  6. @Tutors: Looking good. Thanks for the feedback.

    Regards.

    ReplyDelete
  7. Well, I've just tried it and it works fine. However, I would have preferred it if it was aligned in exactly the same area as my right-hand side gadgets. Also, I've messed around with the widths and I can't get it to the very end of the right-hand side of the screen (like the gadgets).

    Any way of doing this?

    ReplyDelete
  8. @Trebor: Yes you can place your new gadget far to the right of your header and align it with your sidebar. Go to Dashboard - Design - Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog:

    #header2{
    position: relative;
    left: 200px;
    }

    Adjust the value 200 accordingly. Regards.

    ReplyDelete
  9. Perfect! Now I can control both the left-hand and right-hand sides, I'm good to go!

    Many thanks for your help! :-)

    ReplyDelete
  10. @Trebor: Glad you asked by the way. I'm sure it will be helpful for those who try this tweak. And glad you got it working :)

    Regards.

    ReplyDelete
  11. Hi Yoboy,

    I'm getting the 'laptop symdrome' again - after adding the code, the header briefly flashes then disappears. I've since reverted the code back to how it was originally, and checked on the same laptop, and the header is now okay.

    Any idea why this is happening?

    ReplyDelete
  12. @Trebor: I'm not sure what happened. Perhaps if you leave the header as it is, I could check and see what's up.
    Regards.

    ReplyDelete
  13. Yoboy,

    I've just changed it back to how it was before I noticed the problem.

    Many thanks.

    ReplyDelete
  14. Is it possible to utilize the space in the section where the title resides without messing with the description width?

    I like the width of my description, but would like to use the space to the right of the title only.

    Thank you.

    ReplyDelete
  15. @Deb: It is possible, but not via the method in this post. Although it is something similar. The steps:

    1) Go to Dashboard - Design - Page Elements - Add the gadget that you wanna add, but in your sidebar first.
    2) Identify the the Gadget's ID.
    3) Go to Edit HTML, Find the entire div tag for the gadget (using the ID) and the div tag for the blog's title.
    4) Place these two div tags in a table.

    Well, that's the idea. Deb, email me if you want to get this done.

    Cheers.

    ReplyDelete
  16. @Deb: It is possible, but not via the method in this post. Although it is something similar. The steps:

    1) Go to Dashboard - Design - Page Elements - Add the gadget that you wanna add, but in your sidebar first.
    2) Identify the the Gadget's ID.
    3) Go to Edit HTML, Find the entire div tag for the gadget (using the ID) and the div tag for the blog's title.
    4) Place these two div tags in a table.

    Well, that's the idea. Deb, email me if you want to get this done.

    Cheers.

    ReplyDelete
  17. hai yoga, iam using firefox, and also installed the addon measureit, but dont know how to measure the length of unused space. can u pls explain this?

    ReplyDelete
  18. @rajkumar: When you've installed measureit, you'll see a ruler kind of icon, somewhere near the bottom of your Firefox. Click on it, and you'll be able to click and drag on anything on your pageview, and measureit. Alternatively, you could just use a random value like 200px, then see how it goes in your preview, then adjust accordingly from that value.

    Cheers.

    ReplyDelete
  19. awsome, thankx soo much for this trick, I really appreciate it....... I have a question, could you please tell me how to add google+1 button to wordpress.com blog...... I really need that.... please help........
    my blog www.thebloggingtutorial.blogspot.com

    ReplyDelete
  20. @Wasif: I haven't got a clue. I've never had a wordpress account, and probably never will. Sorrt mate, can't help much on this one.

    ReplyDelete
  21. hey dear its very good, but after made dis one i noticed that my header1 and 2 not showing in internet explorer.
    we can see in firefox,crome. why its happening like dis? cud u plz check dis issue?
    thanks

    ReplyDelete
  22. @Aswin: Hi there. What's your blog's address?

    ReplyDelete
  23. Is it possible to do this with dynamic views? For instance, www.letsridebikes.ca, can I have a gallery or video bar showing in my header, where the hidden search box would be?

    ReplyDelete
    Replies
    1. Unfortunately nope - at least not until the HTML/Javascript gadget becomes available for Dynamic View templates..

      Delete
  24. The same as the above question. Does it make a difference if you have your own host? Can you make a field for html/javascript in the header section of dynamic view templates that is stored somewhere else (i.e.: not in Blogger)?

    ReplyDelete
    Replies
    1. DV templates are never meant to support modifications. I'm afraid any attempt to introduce hardcoded HTML anywhere in your template is just gonna result in your template being broken at one point of time.

      Delete
  25. Hi, I have manage to add a widget, more or less as you've described, but the new widget refuses to display next to the header - it gets added to the sidebar instead. Any ideas?

    Robert

    ReplyDelete
    Replies
    1. An old one this is - not sure if it'll still work though. Can I have a look at what you're working on at the moment? It'll be easier for me to help you that way.

      Delete
  26. It's a fairly standard dynamic views site: http://f-j-p.com I'd like to add a widget to the right of the header. Your changes resulted in a new "add widget" area appearing in the layout window, but when I added an image to it, it just displayed in the sidebar.

    ReplyDelete
    Replies
    1. I'm afraid DV templates aren't very customisable. The walkthrough above was meant for non-DV templates.

      Delete

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