How To Add Gadgets Above Or Below The Header In Blogger


| | 22 comments
In this post i will show you how to edit your blog to allow gadgets be placed above or below your blogs header section.This is great for adding Menu bars, adsense, search bars and moreIn most blogger templates you can add gadgets to your sidebars and under or over your posts but by default not below or above the header area.You can however make a quick change to your blogs html that will allow you to add gadgets below or above your blogs header.

You can also add gadgets like adsense inside your header section Adsense In Header Blogger to see a post on this.

Take a look at how i changed this sample blog to allow the gadgets :


Blogger maxwidgets
In this image you can see the gadget is not allowed below or above the header.









Add gadgets above header blogger
Now once the code is changed we can add gadgets above the header.....










Add gadgets to header blogger
And we can also add gadgets below the header.










Heres how to make the changes :

1.Click 'Layout'-->'Edit Html' for your blog

2.Find the following piece of code in your blogs html :
(use 'ctrl f' for a search bar to find the code)



<div id="header-wrapper">



3.This is the section of code you will see under <div id="header-wrapper">



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


All you have to do is change the 'Maxwidgets' from '1' as seen above to '5' as seen below :



<div id="header-wrapper">
<b:section class="header" id="header" maxwidgets="5" showaddelement="no">
<b:widget id="Header1" locked="true" title="Sample Blog (Header)" type="Header">
</b:widget>
</b:section></div>


We Are Nearly Finished:If you need more help or have an opinion or suggestion Please leave a comment Below.This is a Do-Follow Blog so leaving a comment will also help Your blogs Google rank.

You could change it from 5 to as many as you want but its unlikely you would want to add more than five gadgets.

You can also add a wide gadget across the entire width of your blog under the header check it out !

Click save and your finished Gadgets can now be added above and below the header!

What do you think ?

If You Enjoyed This Post Please Take 5 Seconds To Share It.

Stay Connected With Free Updates

Subscribe via Email

22 comments:

  1. i can't finf the code
    div id="header-wrapper
    and all the next code
    in my template
    can you help me please?

    http://shliches.blogspot.com/
    ReplyDelete
  2. i found.
    b:section class='header' id='header' maxwidgets='1' showaddelement='no'
    and need to change "1" to 2 or 3.. and "no" to "yes"

    anyway, thanks
    ReplyDelete
  3. Hi אלי

    Yes just change the maxwidgets from 1 to 5 and it should be working for you.

    If you need more help let me know..

    Paul.
    ReplyDelete
  4. hi Paul,
    (probably i'm your first visitor left 'profile signature' with Hebrew name, isn't?.. by the way, forgive me if my English is not how it's sould be...)
    i wondering if can you help me with another problem in this subject.
    how do i create more than 1 widget below the header, side by side.

    i just want to create a horizontal menu, and for 3 buttons i need 7 image and JavaScript widgets (3 for butאons and 4 for intervals)

    or do you have another simple way to do it
    Thanks in advance
    ReplyDelete
  5. Hi again

    You most definatly are the first person to comment with a Hebrew signature and your engilsh is better than my Hebrew will ever be :)

    I think i know what you are looking for and it would be somthing you would probably have to add directly to your template html.Basically you would create a 'div left' and a 'div right'.

    Only today i seen a post with some great menu options for Blogger that you could use.This is the post :

    http://www.bloggertipandtrick.net/2010/02/best-17-quality-jquery-navigation-menus.html

    It might not be exactly what you want but it's worth a look.If you cant find somthing there let me know and we will look into it some more.

    Paul.
    ReplyDelete
  6. Actualy i chose in more simple thing:
    table with images in widget below the header.

    the problem is that even i wrote "border=0", there have padding between the images and between the widget to the body.

    how can i find the widget properties (when "expeted bla bla" checked, right?)

    by the way, i added your blog to my tech blogs favorites..
    really nice blog
    in Hebrew we saying: "Achla blog" (אחלה),does mean Cool
    ReplyDelete
  7. What menu have you used, was it a menu from another site or did you make it yourself?

    The css for any gadgets will be ABOVE the ]]></b:skin> tag in your template.

    Paul.
    ReplyDelete
  8. I created by myself a simple table.
    The question is, how i control of the padding of the images and the widget himself.
    http://shliches.blogspot.com/

    This is the table code on Google Docs
    http://docs.google.com/Doc?docid=0ATBxaZRkeHqEZGczcWd3eDZfMWY0dmI5a2R3&hl=iw

    You know article about that?
    I have'nt found code of certain widget, only general.
    ReplyDelete
  9. Thanks! This allowed my to put a statcounter above the header on my blog
    Is Swagbucks A Scam?
    ReplyDelete
  10. @אלי

    W3scools is always the place to go when you want to build a table, take a look at this page.It has an example of cell padding within a table and you can play around with the code on a practice board:
    : http://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_cellpadding

    When you want to share documents on Google Docs you must invite users, I am restricted from seeing the document in your last comment :(

    Paul.
    ReplyDelete
  11. Hi JT,

    Thanks for your comment, Its such an easy trick and yet very effective.

    Paul.
    ReplyDelete
  12. Thank you, Paul, for the link to the Html Editor, useful, i hope that will help to the part inside me that want to dig in the web and to learn more about websites building, but all what i was needed is "cellspacing".
    Now i'm just must to figure out how to delete the space between the header (and the widget below) and the body.

    And also, how to make a random image inside widget - i want to put him like part of the design above the header.

    About the Google Schmucks, it's a share link, it should be work without invitation. But now it's doesn't matter.

    Look like your post page become to a Chat room...

    Eli
    ReplyDelete
  13. Hi Paul,

    I want what the gentleman that speaks Hebrew wanted. However I couldn't understand that other website you sent him to.
    Do you have this somewhere else?

    Otherwise, loving your site.
    Thanks
    ReplyDelete
  14. @ Chanpagne - Hi, Exactly what is it your looking for?
    ReplyDelete
  15. Hi,

    how do i add widget below header like this blog = http://luahfikiran.blogspot.com/

    i really want that widget in my blog. hope u can help me.

    thanks
    ReplyDelete
  16. I edited HTML codes for hours trying to be able to put an HTML gadget box above the header for my webpage, and not a single one of them helped! This did exactly what I was looking for! Thank you!!

    Now I just need to figure out how to make the white areas less significant... :-)
    ReplyDelete
  17. I couldn't find "header-wrapper" s I searched for "maxwidgets" instead. That did the trick. Super easy, thank you!
    ReplyDelete
  18. Thank you - just changing the maxwidgets to 5 did the trick!! Appreciate you :)
    ReplyDelete

Asking a question ? Make sure to click the subscribe by email link below the comment form to get notified of replies !