Oct 1, 2008

Adding Gadets and Widgets to your header

The header is the top portion of your garden blog where your blog's name is located or maybe where you've added a picture. On the templates provided by Blogger the only thing there is room for there is for adding a picture or text. But there is a simple modification that you can do that will allow you to add all of the same gadets and widgets in your header that you can add to your sidebars or footers.
Step #1: Save or Test
To reach the area where you will modify your template to achieve this click on Layout>Edit HTML. At this point it would be a good idea to backup and save your template by clicking on the link that says "Download Full Template." You can save a copy of your template to your computer in case you make a mistake and need to revert back to it. I suggest you do this every time you are about to modify your template. The other suggestion I can make here is to create a test blog where you can practice these modifications out and get comfortable doing them before you do it on your blog.
Step #2: Locate and Change
At the "Edit HTML" page you'll see a lot of confusing and intimidating text which is the code that makes up how your blog looks and operates. Scroll down your template until you come across this bit of code:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Garden Bloggers (Header)' type='Header'/>
</b:section>
</div>


The first time I undertook a modification for my blog I was very nervous and scared I would do something to damage my garden blog. If you're feeling like this at this point, relax. You only have to change the sections in red. Where it says maxwidgets='1' change the 1 to 5 then showaddelement='no' to yes and where it says locked='true' change true to false. That's it.
Step #3: Preview and Save
Click "Preview" and if you did it correctly it should preview what your blog looks like. You won't be able to see any changes on the blog but if it previews without an error warning click "Save Template" and you should get the message that reads "Your changes have been saved." Now at the top of the page click "page elements" and take a look at your handy work.


Adding Gadets and Widgets to your blog headerYour header should look like the image above. Before we did this modification all that there was room for in the header was the title but after the modification as you can now see we can add more gadgets to the header. What you add is up to you, you could add an image below your blog title or you can add ads under your blog title or any combination.

13 comments:

  1. Awesome ! Thank you

    ReplyDelete
  2. Thank you! I just followed your steps and found the information easy to understand and extremely useful. Matter of fact, I followed your directions and was able to make this change to my blog! Cant wait now to play with my new options!

    ReplyDelete
  3. Thank you :-)
    Your explanation is very easy to follow :)

    ReplyDelete
  4. Excellent and Thank you, it's very easy...

    ReplyDelete
  5. thank you, it was very useful! it worked from the first time

    ReplyDelete
  6. I just need to smile: your blog is about gardning but this tip is super! Made my day, thank you. Glenny

    ReplyDelete
  7. You're welcome Glenny.

    ReplyDelete
  8. thanks you works perfectly

    ReplyDelete
  9. thanks!!!!!!!!!
    you really rocks

    ReplyDelete
  10. Thanks so much for this!

    ReplyDelete
  11. Can you put the code for placing a widget side by side with a title header? on the same space, not above/below header.

    ReplyDelete

I hope you find this blog a useful garden blogging resource. Sometimes I may reply to comments with my MrBrownThumb account or I may reply with my Garden Bloggers account. Hope this isn't confusing. If you're looking for gardening information check out "Google For Gardeners"

Note: Only a member of this blog may post a comment.