How To Add Gadgets Above Or Below The Header In Blogger




| 45 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 ?


Join over 5000 Subscribers! Please sign up to receive Updates.

SUYB has its Focus on Quality. If we post Crap, you can unsubscribe.

No Spam and No Garbage! - Use RSS, Twitter & Facebook as an Alternative


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

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. 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
  19. 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
  20. 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
  21. Guys need your help. See this:

    showaddelement="no"

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

    Please advise.

    Thank you.

    ReplyDelete
  22. Thanks, it works nicely although my blog's template has a slight div id difference.

    ReplyDelete
  23. 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
  24. 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
  25. Super easy and it worked great!

    ReplyDelete
  26. Thank You So Much ==> It work :)

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

    ReplyDelete
  28. 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
    1. Rachael, Did you back up your template before making the changes ?

      Delete
  29. Thanks youuuuuuuuuuuuuuuuuuuu
    Works great :)

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

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

    ReplyDelete
  32. 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
  33. how to place the css menu below header in blog?it always shows above header.....

    ReplyDelete
  34. 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
  35. Thank you for giving this tips.. I added in my blog. Thank you..

    ReplyDelete
  36. I added into my blog. Thanks for the tutorial!

    ReplyDelete



Important - If you ask a question make sure you tick the "Notify Me" box below the comment form to be notified of follow up comments and replies.


Hire Us