How To Add Gadgets Above Or Below The Header In Blogger



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 ?

45 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. Kelly@imperfect homemakingNovember 10, 2010 at 8:16 PM

    Wow, that was so easy! Thanks a bunch!

    ReplyDelete

  14. Kelly@imperfect homemakingNovember 14, 2010 at 2:04 PM

    Wow, that was so easy! Thanks a bunch!

    ReplyDelete

  15. 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

  16. @ Chanpagne – Hi, Exactly what is it your looking for?

    ReplyDelete

  17. 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

  18. Sandie (Sandie’s Bitchin’ Kitchen)March 29, 2011 at 9:25 AM

    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

  19. Thanks really cool!. Bye!

    ReplyDelete

  20. Thank you! Great Tip!

    ReplyDelete

  21. Yanet @ 3 Sun Kissed BoysMay 19, 2011 at 4:39 PM

    I couldn’t find “header-wrapper” s I searched for “maxwidgets” instead. That did the trick. Super easy, thank you!

    ReplyDelete

  22. Thank you – just changing the maxwidgets to 5 did the trick!! Appreciate you 🙂

    ReplyDelete

  23. It works 🙂 Thank-you very much. My code wasn’t div id=”header-wrapper” though it was div id=’header’ so you might want to add that if a person can’t find the code they should try searching for alterations.

    ReplyDelete

  24. Dani @ PC Tips and TricksApril 1, 2012 at 8:18 AM

    it works on my blog

    ReplyDelete

  25. Never mind the last comment. YES, I found it and so grateful! I had to play around with the pages bar at the top and then the add a gadget showed up. Great. Linda

    ReplyDelete

  26. Guys need your help. See this:

    showaddelement=”no”

    Does a No and Yes affect the blog in some ways?

    Please advise.

    Thank you.

    ReplyDelete

  27. Thanks, it works nicely although my blog’s template has a slight div id difference.

    ReplyDelete

  28. Thankss.. it work….. 😛

    ReplyDelete

  29. Thanks! This is super helpful. I wish there was a way to divide it into 2 sections. For example, have a search bar and a “follow by email” bar in the same row under the header. But I think I’m asking for too much. Haha. Really great post. (:

    ReplyDelete

  30. ms. dreamystargazerJune 20, 2012 at 6:55 PM

    Thanks! Your tutorial is quite helpful! btw i insert link list above my header. How do i re-align this specific gadget to right? thanks:)

    ReplyDelete

  31. Super easy and it worked great!

    ReplyDelete

  32. Thank You So Much ==> It work 🙂

    ReplyDelete

  33. Wow short but simple trick i used it to add your search bar it looks awesome :p

    ReplyDelete

  34. Ok, following the directions, I was able to add a HTML widget above my blog header. Now, using the HTML widget, I’ve added a photo and my blog title. The problem is, I added a background image and now my blog title has migrated next to my photo on the actual page that appears, not in my widget and I know it’s something in my code, but I can’t get my blog title to back under the photo. Help!
    Here’s what my code looks like:
    html {
    background: url(http://img.photobucket.com/albums/v649/rsnider83/Web%20Backgrounds%20and%20Decorative%20Images/TreeSky.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    }
    body {
    background:$bgcolor;
    background-image: url(http://img.photobucket.com/albums/v649/rsnider83/Web%20Backgrounds%20and%20Decorative%20Images/TreeSky.jpg);
    background-repeat: no-repeat;
    background-position: center bottom;
    background-attachment: fixed;
    }

    margin:0;
    color:$textcolor;
    font:x-small Georgia Serif;
    font-size/* */:/**/small;
    font-size: /**/small;
    text-align: center;
    }
    a:link {
    color:$linkcolor;
    text-decoration:none;
    }
    a:visited {
    color:$visitedlinkcolor;
    text-decoration:none;
    }
    a:hover {
    color:$titlecolor;
    text-decoration:underline;
    }
    a img {
    border-width:0;
    }

    /* Header
    ———————————————–
    */

    #header-wrapper {
    width:260x;
    height:320px;
    margin:0px auto 10px;
    border:0px solid $bordercolor;
    }

    #header-inner {
    background-position: center;
    margin-left:0px;
    margin-right:0px;
    }

    #header {
    margin: 5px;
    border: 0px solid $bordercolor;
    text-align: center;
    color:$pagetitlecolor;
    }

    #header h1 {
    margin:5px 5px 0;
    padding:15px 20px .25em;
    line-height:1.2em;
    text-transform:uppercase;
    letter-spacing:.2em;
    font: $pagetitlefont;
    }

    #header a {
    color:$pagetitlecolor;
    text-decoration:none;
    }

    #header a:hover {
    color:$pagetitlecolor;
    }

    #header .description {
    margin:0 5px 5px;
    padding:0 20px 15px;
    max-width:700px;
    text-transform:uppercase;
    letter-spacing:.2em;
    line-height: 1.4em;
    font: $descriptionfont;
    color: $descriptioncolor;
    }

    #header img {
    margin-$startSide: auto;
    margin-$endSide: auto;
    }

    Thanks, Rachael
    http://mylifeinreflection.blogspot.com

    ReplyDelete

     

    Replies

     

  35. Rachael, Did you back up your template before making the changes ?

    Delete

  36.  

  37. Thanks this help me

    ReplyDelete

  38. Thanks youuuuuuuuuuuuuuuuuuuu
    Works great 🙂

    ReplyDelete

  39. How do I center an HTML/Java Header gadget?

    ReplyDelete

  40. this works !!
    thanks .. Visit My Blog

    ReplyDelete

  41. This tutorial very helped me to add gadgets below or above my header. Thanks.

    ReplyDelete

  42. I added a links list above the header but it is now a vertical list rather than horizontal like it was below. Is there anyway to change this?

    ReplyDelete

  43. how to place the css menu below header in blog?it always shows above header…..

    ReplyDelete

  44. Hey, uhm I can only get 1 gadget below my header i want 5 but i only get one wide one across it. Yes i changed max widgets to 5 it still doesnt work. Help?

    http://anonymousony.blogspot.com/

    ReplyDelete

  45. Thank you for giving this tips.. I added in my blog. Thank you..

    ReplyDelete

  46. I added into my blog. Thanks for the tutorial!

    ReplyDelete