2 September 2012

Add a Page Element on Blogger Header

Add a Page Element on Blogger Header
While surfing something on this web you may came through several blog where you may saw a extra page element added before the blogger header.Those blog use that part for some eye-catching widget for ther visitor or to show some ads in that particular place,but when you came to your template desiring to do something like that you may found there is no option do so on your template.Adding this extra element section above your blog header will always give you the opportunity to add something extra on your blog and if placed it before the header section of your blog it'll always a pretty good thing,asif visitors can see that thing very easily.So isn't there a way to add this?Yes of course there is a way,so now the question is how to make this happen?You can do this just using a simple template hack,what we're going to discuss just here.So go through the tutorial below.

Reason Behind Adding This

Now it's time to know the importance behind this easy tweak.Just with the help of this simple tweak you can be able to add a new element/widget on your blog header.Which we think would be very useful for any blog.As this will allow us to put some ads or something like that  on there.Which could  also help us to earn some extra money cause our blog reader always prefer to take a look on our blog header at first.We hope  now you got the reason of importance about this simple tweak.

Add It On Blogger

To add this page element follow the below steps

  • Login to your blogger dashboard
  • Goto template
  • Click on EDIT Html tab
  • Now  search(ctrl+f) for this line of code 

<div id='header-wrapper'> <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

 Notes: In this section of the code the header wrapper defines the space on which you want to add the page element, so basically if you wish to add a page element on any other space of your blog, just went for <div id='sidebar'> or <div id='main-wrapper'> for instance, this line of code may change in accordance with other blogger templates( This is just an example).

maxwidgets='1', this defines the number of page elements you want to add on a particular space of your blog, suppose the header wrapper on maxwidgets 1 when made to 3 would give in total of 3 widgets that you can add.

The showddelement would simply allow you to add page elements when made to yes,so for that you just have to make the following changes.

  • Change the above code to

<div id='header-wrapper'> <b:section class='header' id='header' maxwidgets='3' showaddelement='yes'>

 Must Read : Email Subscription Box For Blogger

Now this will allow you to give in total of 3 page elements on your header space of your blog.If you do wish to add more than 3 then increase it as more as you wish.That's all.If you do have any quary then simply use the below comment box.

Articles You May Like

4 comments: Leave Your Comments

  1. Good post

  2. Cool! Great tip for those who want to spice up their blogs. :)

  3. Now that you mad a post about this this does seem cool. I'm not quiet sure how it would look though. Would you happen to have screenshots or sample images? :)