Add banner, Adsense or search box in header

A reader asked me how to add a search box on the right of blog title. I thought I’d share my answer in this post.

Actually, you can add anything inside your header -be it an ad banner, a search bar, social media buttons, Adsense ad or just about any widget you can get your hands on. But how?

header with search boxBy simply adding a new section in the header. A section functions as widget container and is represented by a dashed-lined box in the Layout and usually comes with an Add A Gadget link thingy. Once you get the Add A Gadget added in there, the rest is easy.

(Update: There is another way to Add widgets next to Blogger header, check it out.)

Here we go:

 

1. Adding a section (in HTML)

  1. Login to your Blogger account.
  2. Go to Template > Edit HTML.
  3. Back up your template.
  4. Make sure the Expand Widget Templates checkbox is UNCHECKED.
  5. Look for the following lines in your HTML code:
    <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> 
    <b:widget id='Header1' locked='true' title='My Test  Blog (Header)' type='Header'/> 
    </b:section>
  6. To add a section, insert the following code right under (after) it:
    <b:section id='header-right' showaddelement='yes'/>
    <div style='clear: both;'/>
  7. So the final code should look like this:
    <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> 
    <b:widget id='Header1' locked='true' title='Blogger Sentral Widget Showcase (Header)' type='Header'/> 
    </b:section> 
    <b:section id='header-right' showaddelement='yes'/>
    <div style='clear: both;'/>

You now have two sections in the header, the section with the existing blog title on top and the new section below it.

 

2. Styling the section (in CSS)

Position the sections side by side, by floating the section containing the blog title to the left,  and the new section to the right.

To achieve that,

  1. Locate this line of code (you are still on Template > Edit HTML page):

    ]]></b:skin>

  2. Add the following CSS code right before (on top of) the line.
    #header, body#layout #header {width:50%;display:inline-block;float:left;}
    #header-right, body#layout #header-right {width:35%;display:inline-block;float:right;padding:15px;}
    #header-right .widget {margin:0;}

3. Installing the widget

Now it is time to add the banner, search box, Adsense ad unit or whatever. Do as you’d normally do when you want to install a widget,

  1. Go to Layout page.
  2. Click the new Add A Gadget link and add your widget.
    split header Note: The header wireframes may not appear side by side for Designer templates, nevertheless they should show up just fine on your blog.
  3. Save and view your blog.

4. Fine-adjusting the position

If the added widget shows up under the blog title (instead of on the same level, on it’s right), go back to the CSS code in step 2.2.

Change header(code line 1) and header-right (code line 2) widths. Experiment with different values until you get it right.


Enjoy!

266 comments to "Add banner, Adsense or search box in header"

«Oldest ‹Older 1 – 200 of 266 Newer› Newest»
Marly May 13, 2010 at 9:20 AM    

I think it's great that you provide this instruction to people. I'm lucky because my husband is a website designer, but I know with a little hard work I could figure things out. Especially with wonderful people like you who share what you know. The more we can help each other the better, eh? What's the saying? A rising tide lifts all ships!

Anup May 13, 2010 at 10:01 AM    

Thanks for sharing friend :)

Greenlava May 13, 2010 at 6:12 PM    

@Marly
Thanks...I always believe what you give, you get back, somehow :)

@Anup
My pleasure

Metilparaben May 13, 2010 at 8:36 PM    

Thank tou for the article: I tried to install the widget, but the right header section comes below the title image, even if on the right, also when i save and look at the blog. Any idea?

Greenlava May 13, 2010 at 10:07 PM    

@Metilparaben
I've modified the CSS code slightly, see if that solve your problem. BTW which blog are you installing the widget to?

Metilparaben May 14, 2010 at 12:52 AM    

http://metilparaben.blogspot.com/
I'm going to try your new code: I'll tell you!
Thanks a lot!

Metilparaben May 14, 2010 at 12:58 AM    

No way, same problem. The widget goes under my header: You can see it here.

Greenlava May 14, 2010 at 1:30 AM    

@Metilparaben
Could you leave the widget there for a while, so I can take a look at it?

chybee May 14, 2010 at 2:53 AM    

thanx for the info!

Greenlava May 14, 2010 at 7:18 AM    

@chybee
Thanx for dropping by.

Metilparaben May 14, 2010 at 7:23 PM    

An another thing: even if i reduce the lenght of the widget, decreasing the number of the buttons, the space between the end of the header and the first post increases a bit...

Metilparaben May 14, 2010 at 7:23 PM    

Yes, i put it in my draft blog:
http://metilparamusic.blogspot.com/
I succedeed in putting the code in the right place, so that the header and the widget come one besides the other, but as you can see the widget doesn't fit in the space, and moreover the header image is cut...

Metilparaben May 14, 2010 at 7:27 PM    

Ok, guess i succeeded in modifying slightly the code (paddings etc.) and made it! Thanks a lot!

Metilparaben May 14, 2010 at 7:50 PM    

No. Nothing. When i put the same code in my real blog, even if the template should be just the same of the other (except for some slight differences) the widget goes back down. And look: the "add a gadget" box that you show in this post is shown half the width of the above header... Don't understand.

Greenlava May 14, 2010 at 10:04 PM    

@Metilparaben
I managed to "catch" your layout just now, when you added the buttons.
1. It seemed you left out the #header part of the CSS code in 2.2
2. You also need to change padding:15px; to padding:0 15px. And increase the width from 300px to 400px.

Admin May 27, 2010 at 1:24 PM    

Thank you for the article. I tried to install the widget, but the right header section comes below the title image, even if on the right, also when i save and look at the blog. Can you help me ? http://geekastuces.blogspot.com

Admin May 27, 2010 at 4:11 PM    

Hello,
Thank you for the code. This works fine on Firefox. For Internet Explorer it causes deviation in header. For exemple with http://motdecas.blogspot.com/
Thank you very much for your help

Greenlava May 27, 2010 at 7:58 PM    

@Philippe Tyrode
In 2.2 #header, try removing the underscore in _float:left;

Admin May 27, 2010 at 9:05 PM    

It's good. Thank you

DClass Blogger May 28, 2010 at 12:57 PM    

I've tried to follow the above instructions, and even made some changes in padding, and realize I have two adsense gadgets. I could use your help. Thanks. http://bankruptcydirectory.blogspot.com/

Greenlava May 28, 2010 at 5:05 PM    

@DClass Blogger
Welcome to Blogger sentral...
1. Remove the extra Adsense gadget
Go to Layout>Edit HTML and make sure you the Expand Widget Templates checkbox is UNTICKED. Then find and delete this line of code:
[b:widget id='AdSense1' locked='false' title='' type='AdSense'/]
Preview before saving.

2. Making the blog title and Adsense sit side by side.
Reduce the paddings from 50px to 10px:
#header-right {width:40%;display:inline-block;float:right;padding:0 10px;}
Preview before saving.

DClass Blogger May 29, 2010 at 12:06 PM    

Greenlava,

This is a step forward. Thankyou! However, I am still stuck. When I go to Layout > Page Elements and look for the new Add A Gadget link, there isn't one there. The Page Elements show the (Header) as a full box, not a split box which I was expecting to see. Am I missing something? As you can see on the blog itself there is a space for the gadget, but the Page Elements shows no split?

Thanks for walking this out with me!

Greenlava May 30, 2010 at 2:17 PM    

@DClass Blogger
Hmm...that's odd.
Anyway let's start over by removing the 2 header-rights that you added. This time tick the Expand widget Templates checkbox, find and remove these (2 instances):
[b:section id='header-right' showaddelement='yes'/]
[div style='clear: both;'/]

Once removed and saved, put the section back by following the instructions in this tutorial.

Unknown July 1, 2010 at 8:02 AM    

Hi, I am having a similar problem with the new section appearing beneath the header. I've triple checked the code, and redone it a number of times, no luck. Any ideas for me?
See here http://activistposttest.blogspot.com/

Thanks.

Greenlava July 2, 2010 at 7:37 AM    

@Brian
Adding this code in 2.2 will fix that:
.header-inner .section {margin: 0 0 0 16px;}

Unknown July 3, 2010 at 12:04 AM    

Thank you! That seems to have done it.

PrizeToken-Steve July 5, 2010 at 3:35 PM    

Hey. I am having trouble. My banner is showing up under my header. Can you tell me why?

Here is the link:
http://kellyrewardsblog.blogspot.com/

Greenlava July 5, 2010 at 6:32 PM    

@KellyRewards-Steve
I've revised the CSS code in Step 2.2. Try it out.

PrizeToken-Steve July 6, 2010 at 6:09 AM    

Thank you very much. That revision you did worked great!

cvblogs July 10, 2010 at 1:40 PM    

Thank you very much for posting this. Appreciate it a lot!!
SMILES!!!

Greenlava July 11, 2010 at 12:57 AM    

@cvblogs
Thank you for visiting.

David July 31, 2010 at 11:22 AM    

Hi!

I'm just wondering if this can be applied to the new template designer?

Thanks

Greenlava August 1, 2010 at 7:48 AM    

@David
Yes this is applicable to both the (old) layout template and (new) template designer.

Christine Ho August 2, 2010 at 9:29 AM    

Thanks for your amazing tutorial.
I've tried many times to install the code, yet found the new section still beneath the blog title, not side by side.
Could you take a look at my blog to see what's the problem:
http://testchristinesrecipes.blogspot.com/

Thanks in advance.

Greenlava August 2, 2010 at 10:48 AM    

@Christine@Christine's Recipes
You mistakenly place the CSS before the closing tag of the last existing CSS code:
line-height:1.4em;
#header {width:35%;display:inline-block;float:left;}
#header-right {width:50%;display:inline-block;float:right;padding:0 10px;}
#header-right .widget {margin:0;}
}

should be like this:
line-height:1.4em;
}
#header {width:35%;display:inline-block;float:left;}
#header-right {width:50%;display:inline-block;float:right;padding:0 10px;}
#header-right .widget {margin:0;}

And to make the ad fit snugly inside the header you want to change header width to 22% and header right to 74%.
Oh one more thing, do view in different browsers and adjust accordingly.

Christine Ho August 2, 2010 at 11:34 AM    

Hi Greenlava,

Your suggestions worked and the headers fitted perfectly. THANK YOU so much.

However, I found the link list underneath squeezed to the far left and placed vertically, not horizontally. Is there anything wrong with the code?

Greenlava August 2, 2010 at 12:47 PM    

@Christine@Christine's Recipes
Looks okay from here, in Firefox, Chrome and IE.

Christine Ho August 3, 2010 at 8:53 AM    

Hi Hi Greenlava,
Sorry for bothering you again.
It's not ok on my side, in Firefox. But it's fine in IE. Very weird. Here's the screenshot:
http://lh5.ggpht.com/_V0CoK16CILc/TFdnyNPJV6I/AAAAAAAAI3g/EZlKRvteNfs/s1024/Tabs%20shifted.JPG

Greenlava August 3, 2010 at 1:34 PM    

@Christine@Christine's Recipes
I see it now (had to zoom in to see it though).
Somehow the -1px top margin of your tabs is causing the shift.
To fix it, go to Design > Edit HTML and look for this code:
.tabs-inner .section:first-child {
border-top: 1px solid #ebebeb;
}
.tabs-inner .section:first-child ul {
margin-top: -1px;
border-top: 1px solid #ebebeb;
}

you want to remove the top border (the first one) and negative top margin.

ebookstore4u August 3, 2010 at 9:59 PM    

Thank u very much, me added search box to my blog, thank you......

http://www.e-bookstore4u.blogspot.com/

Christine Ho August 6, 2010 at 6:08 AM    

Hi Greenlava,
Thank you. It works like a charm. :)

Daniel.James August 6, 2010 at 11:38 PM    

hello, been reading this tutorial and have followed exactly. I have the same problem with the widgets below the header, I have looked at the following code.

".header-inner .section {margin: 0 0 0 16px;}"

This still is not working. I am using the new template desinger in Google. I want the widgets to be level so there is no problems in web broswers. Firefox looks fine, sometimes Internet Explore the gadgets move down.

The site might look fine but i dont want to take risks, so I want to eliminate the problem bye leveling the widgets side by side

The url is webexploits.co.uk

thanks you

Daniel James of Web Exploits

Greenlava August 7, 2010 at 12:19 AM    

@Daniel.James
Please read reply 18.

Steve August 10, 2010 at 12:21 AM    

Help! I want to put a slideshow gadget beside my header, not under it. I have tried to split the header template by following all the steps and the suggestions made in the comments section, but each time I click on the Page Elements tab, there is only one box on the header line (though recently it is centered instead of going all the way across). My blog is www.esseffbee.blospot.com.
Can you help?

Greenlava August 10, 2010 at 1:53 AM    

@Steve
This is the CSS code you added:
#header {width:30%;display:inline-block;float:left
#header-right {width:66%;display:inline-block;float:right;padding:0 15px;}
#header-right .widget {margin:0;}
.header-inner .section {margin: 0 0 0 16px;}

the first line doesn't have a closing curly bracket -that's the problem.
Use this code instead:
#header {width:30%;display:inline-block;float:left;}
#header-right {width:66%;display:inline-block;float:right;padding:0 15px;}
#header-right .widget {margin:0;}

notice I also remove the last line.

Steve August 10, 2010 at 2:48 AM    

Brilliant! I am amazed that the problem was so simple. I thought I was being so careful . . .

Mysticle August 11, 2010 at 2:05 PM    

Another great tutorial! I have added the widget successfully, to the right of my header. However, I want the widget above my header image. I am not attempting to install adsense - what I want is to add tabs above my header (as I have done using an html widget below my header). I've seen this on other blogs.

Thanks, Misty

http://mysticle.blogspot.com/

Mysticle August 11, 2010 at 2:19 PM    

.... after a little more tweaking, I managed to achieve the result I wanted. I placed the new widget above the header, and expanded width on both to 100% - worked perfectly.

Thanks again for all of your great tutorials!

~ Misty

Greenlava August 11, 2010 at 9:47 PM    

@Mysticle
You're welcome. I'm glad you've managed to work it out.

Damon August 14, 2010 at 4:56 AM    

Is it possible to style the new widget section so that it is positioned above the main header?

Michael August 14, 2010 at 11:17 AM    

hey greenlava, thanks for this tutorial... i've followed the instructions and i think they work just fine. keep up the good work... people need this kind of stuff... your way of giving out info/instruction is one of the few that's easy to understand.

http://yourlooktoday.blogspot.com

my site is still under construcstion... im just experimenting with stuff... i plan to put an ad on my header, so right now it's still an empty space

Greenlava August 15, 2010 at 8:19 PM    

@Damon
To add a widget above the header, don't use this hack.
Instead, use the method below:
1. Go to Design > Edit HTML. Do not tick the Expand Widget Templates checkbox.
2. Look for this code:
[b:section class='header' id='header' maxwidgets='1' showaddelement='no']
and rep1ace it with this:
[b:section class='header' id='header' maxwidgets='' showaddelement='yes']
3. Go to Design > Page Elements. Look on top of the header -you should now have a Add-A-Gadget link there.

Greenlava August 15, 2010 at 8:21 PM    

@Michael
Thanks for the encouragement :)

Mary August 18, 2010 at 8:06 AM    

Have you got any suggestions for me?
(http://blogger-hints-and-tips.blogspot.com/)

I think I followed the instructions, but when I look at Design > Page Elements, the header gadget still takes the full width.

But I found (by experimenting) that if I added a HTML gadget to the top of the page-tab area, it gets put into the header - but with ugly looking borders as you can see with the Amazon ad in my header now.

I added the ugly table-borders around the translate gadget/web-element (which are in a HTML gadget that's in the header), so I could see where the header ended.

I've tried all sorts of options, but nothing seems to work re giving the new right-header good margins.

Any thoughts?

Greenlava August 18, 2010 at 10:17 AM    

@Mary
You can change the margin by changing the value of padding in 2.2 line 2.

Damon August 19, 2010 at 1:18 AM    

Fantastic, thank you so much.

Jessica @ Jessiker Bakes August 20, 2010 at 4:53 AM    

Thank you!!!

Anonymous,  August 21, 2010 at 3:40 PM    

Hello GreenLava,

I installed this hack to my blog. Codes are working perfect but wrappers inside control panel looks like the image i attached. I want to adjust this.

Here is the image:
http://img412.imageshack.us/img412/7510/21815393.jpg

Greenlava August 22, 2010 at 12:27 AM    

@Anonymous
I'm still working on that issue. I'll update as soon as I come up with a fix.

Unknown August 23, 2010 at 6:36 AM    

Can you please tell me how do you put adsense inside your posts. I only get more empty space in my posts when i add this code. Is it possible to just put them inside the posts without putting them in between the posts?
code:

[b:if cond='data:blog.pageType == "item"']
[div][script type='text/javascript'][!--
google_ad_client = "pub-xxx";
google_ad_host = "pub-xxx";
/* 468x15, created 8/22/10 */
google_ad_slot = "8886107604";
google_ad_width = 468;
google_ad_height = 15;
//-->
[/script]
[script src='http://pagead2.googlesyndication.com/pagead/show_ads.js' type='text/javascript']
[/script]
[/div]
[/b:if]
[div class='post-footer']

Tnx again greenlava

Greenlava August 23, 2010 at 9:45 AM    

@Selina
You put the ad code directly inside your template right? Well, you should've HTML-escaped the code first.
1. Go http://www.accessify.com/tools-and-wizards/developer-tools/quick-escape/default.php
2. Paste in your code
3. Click the button and copy your escaped code.
4. Paste the code in your template.

Remember to escape your Adsense code everytime prior to putting it in your template.
Putting a code inside a HTML/Javascript widget or in a post needs no escaping.

Unknown August 23, 2010 at 6:24 PM    

Life saver as always. Thanks for everything really. Gona do some retweeting of your posts, i already put your link in my bloglist, hopefully that link will worth much more with next page rank update :).

Greenlava August 23, 2010 at 10:17 PM    

@Selina
Thanks for retweeting and linking to us :)

Elizabeth August 29, 2010 at 12:33 PM    

Your tutorial is awesome, but it isn't working for me for some reason. The new section always appears under my header for some reason. Any advice based on my particular blog layout? (my site is yummy diet food).

Greenlava August 29, 2010 at 12:42 PM    

@Juliet
That's because your existing header image occupies the full width of your header already.

usey August 29, 2010 at 1:05 PM    

Hi Greenlava, I've tried the tweaks but my gadget is still appearing below the title. Can you please have a look?

Greenlava August 29, 2010 at 4:48 PM    

@usey
You template is a bit different, the #header is named #blog-title. And the outer container is set to 400px whereas your blog width is 1000px.
Anyway, try replacing the code you added with this one:
#blog-title {width:210px;display:inline-block;float:left;}
#header-right {width:725px;display:inline-block;float:right;padding:0 10px;}
#header-right .widget {margin:0;}
.blogname {width:960px;}

usey August 29, 2010 at 6:24 PM    

Thanks Greenlava! Just tested and all looks good now, and thanks for the quick reply, really appreciate it :) Keep up the good work.

LaniXs August 29, 2010 at 10:38 PM    

Hello Greenlava I found your site and I follow all your instructions.. But I couldn't just put it to the right of my header title.. can you check my code please??

Thanks!

Greenlava August 30, 2010 at 1:31 AM    

@LaniXs
Use this code instead:
#headerleftsect {width:40%;display:inline-block;float:left;}
#header-right {width:50%;display:inline-block;float:right;padding:0 10px;}
#header-right .widget {margin:0;}

LaniXs August 30, 2010 at 8:36 AM    

Thank you so much bro now its working.. You really are professional,great skills.. Thank you so much for helping people bro..

Anonymous,  September 1, 2010 at 2:59 PM    

I'm using simple ii template by jason sutter. it was released in 2006 by blogger. i want to embed search box within its header at the right side. is it possible? i tried your above codes. it worked for minima stretch template. But it doesn't work for simple ii template. I would like you to give me solution(if you know) to embed search box within header of simpleii template by Jason Sutter.

my blog: http://ramasamydemo.blogspot.com/

Greenlava September 1, 2010 at 8:04 PM    

@d
1. Go to Design > page Elements and add in Search Box gadget. Then reposition it (drag and drop) under header gadget.
2. Go to Design > Edit HTML and add this code right before ]]>< /b:skin>:
#Header1 {float:left;}
#CustomSearch1 {float:right;clear:none;}

D Class Blogger September 3, 2010 at 7:12 AM    

Hi Greenlava,

I've haven't given up on splitting my header, but it does feel like I'm hitting my head against the wall. I've contacted you before for your help, and I've tried following your tutorial again, several times. However, I realize that I've done something wrong. I've noticed that you've helped a lot of people, and I would ask that you revisit my site, to help me with my second header. I've tried to make it appear in the page elements, but I'm not getting anywhere. I've tried adjusting the widths, and even the padding, so I need help! If you could suggest how I can accomplish this, so that I can also join your roster of successful candidates, I would greatly appreciate it.

Greenlava September 3, 2010 at 3:04 PM    

@D Class Blogger
I'm seeing the headers are sitting side by side already (albeit the 5% widths). Not sure if you can see that in Page Elements.
Try setting the widths to 35% for the header and 60% for header right.
To see for yourself if it works or not (in normal view), use the new Add A Gadget link to add any gadget into header right. Then view your blog.

Anonymous,  September 3, 2010 at 8:03 PM    

thanks i have done it...

Anonymous,  September 3, 2010 at 8:37 PM    

i fixed the search box within header at the right side by your help. Thanks Greenlava. But, I have a doubt.

can I add a HTML link too within header at the right side of header by puttin a similar code like #Header1 {float:left;}
#CustomSearch1 {float:right;clear:none;} before bskin?

Let us consider the widget id of new HTML link I am going to add be HTML3. if i want to put it within header at right side below search box is it possible if I add code like HTML3 {float:right; clear:none;} just after the codes

#Header1 {float:left;}
#CustomSearch1 {float:right;clear:none;}

I mean I want to add a HTML link too below or above search box which is already fixed within header...
is it possible?

Greenlava September 4, 2010 at 2:35 AM    

@d
Yes you can. If you place HTML3 below the search box, use this CSS code:

#Header1 {float:left;}
#CustomSearch1 {float:right;clear:none !important;}
#HTML3 {float:right; clear:all !important;}

as you can see, clear:all is for the bottom widget clear:none is for top widget.

Anonymous,  September 4, 2010 at 11:36 AM    

If I want to place the link of HTML3 above search box at the right side within the header of simple ii template should I use code like the following one? is the following code right?

#Header1 {float:left;}
#HTML3 {float:right; clear:none !important;}
#CustomSearch1 {float:right;clear:all !important;}

Anonymous,  September 4, 2010 at 12:59 PM    

#Header1 {float:left;}
#CustomSearch1 {float:right;clear:none !important;}
#HTML3 {float:right; clear:all !important;}


in the above code if i drop the last line of code for HTML3 the search box will be at right side top corner. i like its placement. suppose i dont need html3 link now within header. at this point shall i use just the first two line of codes...that is for placing search box at top corner at right side and without html3 shall i use just this code

#Header1 {float:left;}
#CustomSearch1 {float:right;clear:none !important;}

Greenlava September 4, 2010 at 4:47 PM    

@d
Yes what you said in both #80 and #81 are correct.

Yhane September 15, 2010 at 8:35 AM    

yehey!Ive succesfully put a storage in the same line in my header.. but the problem is.. now my header logo has a border bro.. do you know how to remove it?? Thank you so much bro..

Yhane September 15, 2010 at 9:39 AM    

Hello I have a Search Bar bro but It only detects the latest 25 post in my blog.. can you give me a code that the search bar will able to detect all my post?? Thank you..

Greenlava September 15, 2010 at 6:19 PM    

@Yhane
Add
#Header1 img {border:none;}
in step 2.2

Will September 16, 2010 at 5:45 AM    

don't know if u saw my comment but not really working for my blog :( http://www.night-import.blogspot.com

Yhane September 16, 2010 at 7:45 AM    

man thank you so much.. really.. thank you! love you not in gay style bro.. lol

Greenlava September 16, 2010 at 11:00 PM    

@Will
For this tutorial to work, first you should move your original header (Header1) out of navibar-wrapper and into header. Do this on Page Elements page (drag & drop).

Will September 29, 2010 at 9:35 PM    

hmm so after going to the page elements page of header, i should just remove the image?

AnotherWindowsBlog September 30, 2010 at 10:09 AM    

Hey Greenlava,

Having problem with this hack, hoping you can help me out. The widget keeps appearing on the bottom of my header no matter what values I set for the width. I now that my header is actually called "blogname1" instead of header and I have incorporated that change into the CSS section but still no dice. Please help! I appreciate it.

My site is at http://www.anotherwindowsblog.com

Greenlava September 30, 2010 at 12:35 PM    

@AnotherWindowsBlog
Your outer container's (.blogname) width is currently set to 400px.
Change it to the full width of your header (980px).

Elizabeth September 30, 2010 at 12:49 PM    

Thanks for responding to me in August. Is there a way to make the search thingy show over my header?

Greenlava September 30, 2010 at 1:06 PM    

@Will
Don't want to remove the image. You only want to reposition the Header gadget.
Oh wait...can you drag the Header gadget? If you can't, go to Design > Edit HTML and find this:
[b:widget id='Header1' locked='true' title='NIGHT-IMPORT (Header)' type='Header'/]
change "true" to "false". Save and then return to Page Elements to drag the gadget.

AnotherWindowsBlog October 1, 2010 at 8:18 AM    

Sweet!!!! Thanks so much! Changing the width immediately lined up the widget with my header. Thanks you for the quick reply and fix.

Greenlava October 3, 2010 at 12:55 AM    

@Juliet
You need to add a section (Add a gadget link) above the header. Then add in a HTML/Javascript gadget containing the search box code.

Glenny October 4, 2010 at 12:00 AM    

finally something that works! You have NO idea how long i've searched for this! For some explained reason, in the "design" view in blogger the "right header" is shown to be below the actual header. When you view the page though, everything is ok, so who cares! Thank you very very much! (P.S i've seen that you've had many stumbles for this post - glad to know i'm not the only one to stumble great content like this!

Greenlava October 4, 2010 at 10:07 AM    

@Glenny
I'm glad your search ended here :)

Raine Snow October 5, 2010 at 7:01 PM    

Do you have step by step directions on how to put the search bar in your site directory...as you have on your site?

Greenlava October 5, 2010 at 7:48 PM    

@Raine Snow
Yes we do, here: Add Custom Search box in navigation/menu bar

David Cosier October 8, 2010 at 9:20 AM    

Hi Greenlava,

Thank you for your help with splitting my header with using Blogger. I've now moved on to Wordpress.org, and I was wondering if you know if the same rules apply, or are they different? Any comments with this would be appreciated!

Sincerely,

David Cosier

Greenlava October 9, 2010 at 2:50 AM    

@David Cosier
I'm not familiar with Wordpress, so I can't say for sure.
Anyway I would expect the actual coding to add the element/section (step 1) will be different, because Blogger uses XML whereas Wordpress uses PHP.
But once you've got the element added, you can apply the same CSS definitions.

David Cosier October 9, 2010 at 5:17 AM    

Thanks, Greenlava! If you think of anyone you can direct me toward, to better understand the coding for the element, please let me know. Thanks for the word about the CSS; that's helpful!

BooyaGadget October 9, 2010 at 9:55 AM    

thank you, this came in helpful..
Nagging problem solved easily. We added page tabs, so I lost that roster spot for my link unit. it's back.
Booya!

David October 13, 2010 at 5:15 AM    

Thanks for sharing this tip - it works perfectly!

Greenlava October 13, 2010 at 3:31 PM    

@David
Thanks for the feedback.

Anonymous,  October 14, 2010 at 11:29 PM    

Thank you SO MUCH for this tutorial. Clearly explained and I was able to tweak the positioning of the gadget box easily, without knowing ANYTHING about html. So helpful!

POJOKnya TITUT November 5, 2010 at 3:59 PM    

As always, straight to the point and clear tutorial ever from Greenlava. The code is working nicely on my travelling blog Nomads Paradise Thank you Guru'

Greenlava November 5, 2010 at 7:11 PM    

@POJOKnya TITUT
My pleasure. Thanks for the feedback :)

scriptflags November 7, 2010 at 10:38 PM    

Hay Greenlava
Great post/ been looking for this for a while, I have taken the steps advised in the comment section but still cannot seem to get the header right section to place inside my header section. My page is www.scriptflags.com minima template/ + I renamed header-right to header-middle as their was an id conflict, could you take a look for me>?
Thanks
Emmet/

Greenlava November 7, 2010 at 11:56 PM    

@scriptflags
I see header-middle in CSS but can't find it in HTML. Where is it?

scriptflags November 8, 2010 at 12:55 AM    

Hay Greenlave,
My HTML is there below / <b:section class='header' id='header' maxwidgets='1'
But yes i just changed the id from header-right to header-middle
now u can see it?
Emmet/

scriptflags November 8, 2010 at 3:07 AM    

Hay finally figured it out
Thanx Greenlava
E.

Crystal November 19, 2010 at 8:16 PM    

Thanks so much for the help! I searched for an answer for a while,nothing worked until I found this, so I'm spreading the word.

Greenlava November 20, 2010 at 12:57 AM    

@Crystal
Thank you very much

admin November 23, 2010 at 8:08 PM    

how about wp?

Greenlava November 24, 2010 at 2:31 PM    

@Admin
Welcome to Blogger Sentral.
Maybe you can try this

Pedro Cunha December 7, 2010 at 9:51 PM    

HEy Greenlava,

First, Thank you very much for this guide =D it's amizingly simple to follow. Also, I find truly amazing that you keep helping each isolated case.

Saying that, here's mine
http://radiocousins.blogspot.com/
I've tried several different solutions from the comments but can't seem to make it work =/ Would be very pleased if you could help me!

Greenlava December 11, 2010 at 7:06 AM    

@Pedro Cunha
I can't seem to find where the code is.

David December 14, 2010 at 6:48 AM    

Thank you!!

Check out my blog. i am not sure if i should implelment this or not

Dy Davith December 16, 2010 at 5:36 PM    
This comment has been removed by the author.
Greenlava December 16, 2010 at 8:12 PM    

@Dy Davith
I see you've added the section. What's the problem then?

Dy Davith December 17, 2010 at 9:44 AM    

I cannot put search or adsense the header near Blog test because there is only header at Design->Page Elements.

Why it is not appear at Page Ele?

Thanks.

Greenlava December 17, 2010 at 3:53 PM    

@Dy Davith
Have you tried the Add A Gadget right under the header? I think that's the one.

Dy Davith December 17, 2010 at 5:42 PM    
This comment has been removed by the author.
Greenlava December 18, 2010 at 12:05 AM    

@Dy Davith
It's easier for me to find out what's wrong if you add a gadget/widget and leave it on.

Dy Davith December 18, 2010 at 8:11 AM    

It work but my banner is out of layout. How can i solve?

Greenlava December 18, 2010 at 9:30 PM    

@Dy Davith
There's no solution for that right now.

Greenlava December 19, 2010 at 7:47 PM    

@Dy Davith
There's a tutorial for that: Add Custom Search box to navigation/menu bar.

Dy Davith December 20, 2010 at 10:54 AM    

Thanks

Unknown December 24, 2010 at 1:29 AM    

Tried a lot and lot, got it at last.

if the widgets are displayed under the header, i have solution for it. please mail me if any one needs help

Dy Davith December 29, 2010 at 5:55 PM    

thanks

Unknown January 16, 2011 at 9:22 PM    

hey.. i followed the same steps. The add page element is not shifting to right. Two add page element are being shown and in up and down sequence. can you please help me?

Greenlava January 16, 2011 at 11:21 PM    

@Muhammad Behzad Akhtar
Don't worry, they should sit side by side on the actual blog.

MsK,  January 17, 2011 at 4:09 AM    

Hi Greenlava,

Thanks for sharing this code. I've been looking for the past 2 days for a code that works for my template and I finally found your tutorial.

I'm having a problem with the 2 headers being side by side. Can you please take a look at my test blog and give me some help? http://mydogwisdom2.blogspot.com/

Thanks

Greenlava January 18, 2011 at 12:48 AM    

@MsK
You've added this in the CSS:

< div id="header" class="header section">
< div id="leftside" style="width: 50%; float: left;">< /div>
< div id="rightside" style="width: 50%; float: right;">< /div>
< /div>
#header {width:50%;display:inline-block;float:left;}
#header-right {width:45%;display:inline-block;float:right;padding: 15px;}
#header-right .widget {margin:0;}

The divs stuff is HTML, it doesn't belong in CSS. Delete it. Just leave this:

#header {width:50%;display:inline-block;float:left;}
#header-right {width:45%;display:inline-block;float:right;padding: 15px;}
#header-right .widget {margin:0;}

and the second header will go up.

MsK,  January 18, 2011 at 10:55 AM    

YAY! (Doing my happy dance) Thanks so much. That worked!

HarryTrident January 29, 2011 at 5:35 AM    

Hi there, like some others am having trouble with the new gadget appearing underneath the header rather than to the right.... can you help? www.harrytrident.com
Thanks!

HarryTrident January 29, 2011 at 5:42 AM    

The header on the left is an image with size 412x60 which I wanted aligned left as shown and i would like the gadget, which is a 468x60 adsense box next to it but aligned right... any ideas? www.harrytrident.com - thanks!

Remodelaholic January 30, 2011 at 12:51 AM    

I am back! This is great, I did it and it worked, but I have a random question, do you know how to remove the "powered by Google" text on the search box? Is that even possible or legal, it looks awful!

Remodelaholic January 30, 2011 at 2:08 AM    

Hey another quick question, do you know how to add the text "Enter Your Email Address" into the box, instead of it sitting outside of the box.

See my test blog header for the example of what I don't want it to do, and you will see what I mean, I'd like that text to show up in the box where they enter their email address, instead of on top. I hope that makes sense.

http://figuringoutblogger.blogspot.com/

Remodelaholic January 30, 2011 at 2:17 AM    

Sorry about all the comments, but I just figured out how to add the text to the email box... Thanks anyway, you are the best!

Malvina Brizi February 2, 2011 at 5:31 AM    

Hi! I have a problem. In Internet Explorer the gadget shows under the header.

I followed your advice (in other comments) for this situation, but didn't work.

How can I fix it??

(It works fine in Firefox and Chrome.)

My blog: www.psicologiazen.com.ar

Greenlava February 2, 2011 at 11:26 AM    

@Malvina Brizi
You left out float:left; declaration in #header in step 2.2.

Path Finder February 3, 2011 at 4:01 AM    

Hey,

Having problems much like some other people. The add a page element is appearing below the header. Any Ideas?

http://www.tododeal.com/

Greenlava February 4, 2011 at 7:22 AM    

@Path Finder
I've revised the CSS code, see if it works!

gavee February 5, 2011 at 2:27 AM    

having problem like other, any ideas for me? thanks
my blog: http://ac-elektrik.blogspot.com

Greenlava February 5, 2011 at 9:23 AM    

@gavee
You have a missing closing curly bracket (}). Find this code:
z-index:10000;
bottom:0;
h2.title{display:none;border:none;}
#header, body#layout #header {width:50%;display:inline-block;float:left;}

Insert a closing curly bracket:
z-index:10000;
bottom:0;
}
h2.title{display:none;border:none;}
#header, body#layout #header {width:50%;display:inline-block;float:left;}

gavee February 5, 2011 at 11:13 AM    

many thanks, working perfect.

gavee February 5, 2011 at 11:51 AM    

after adding curly bracket, image title widget missing, any advice? many thanks

Greenlava February 5, 2011 at 2:57 PM    

@gavee
Remove this:
h2.title{display:none;border:none;}

gavee February 5, 2011 at 9:46 PM    

thanks, greenlava.. for your help,working.

Fumiko Kawa | FMK. February 12, 2011 at 2:51 AM    

not working on my blog @@, the problem is with the template i choose?

have a look at my test-blog@http://fashiongraphys.blogspot.com/

Greenlava February 13, 2011 at 12:34 PM    

@Fumiko Kawa
Looks fine to me.
Have you tried adding a gadget in to the new section?

Austin IY February 16, 2011 at 5:23 AM    

hi,,Greenlava,I am Austin,I so much appropriate your great work out here,I just started working on my blog and I was searching all over the internet for codes to get the blog up right,but your site is the best I ever come across and I will always stay with you...thanks a million times for having time for everyone,thanks again...

Greenlava February 16, 2011 at 9:25 PM    

@Erny
Thanks for the kind words. I hope this blog will help you get the most out of your blog.

HarryTrident February 17, 2011 at 12:17 AM    

My blog is now coming along nicely and building a steady following. Many thanks for the assistance!

Scott Fitsimones February 19, 2011 at 11:44 PM    

Hi, the new gadget link still shows up under the header. Help please?

Greenlava February 20, 2011 at 3:30 PM    

@Teens
If you set the header widths correctly, header-right will show up on the right on the actual blog, despite appearing under the header in Page Elements.

Syeikh Azzikri March 4, 2011 at 5:02 PM    

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

Greenlava March 6, 2011 at 7:41 PM    

@Syeikh Azzikri
That's a content slider. The easiest way to add that is by changing your template to Blogger templates with glider/slider built in.

Hina Zafar March 24, 2011 at 2:17 AM    

thanx for everything, but i in ma blog the second header starts from the end point of first header..second header is in right instead it starts after the first header..please help
http://meandmysansar.blogspot.com/

Greenlava March 24, 2011 at 2:53 AM    

@Hina Zafar
Reduce the width of header-right.

Hina Zafar March 25, 2011 at 4:26 AM    

thanx a lot...i got it right...love u...

Anonymous,  March 26, 2011 at 5:18 PM    

This is really helpful. Thanks a lot.

http://tastyindiandishes.blogspot.com/

Many Thanks
Lucky.

Daniel Moses March 27, 2011 at 1:04 AM    

I'm looking forward from long time to add a search box/social network icons. I tried your suggestion but no use. Please help me.. I followed you correctly I don't know where i mistaken.

Greenlava March 27, 2011 at 10:38 PM    

@Daniel Moses
I see you have added the section (header-right). It's time to add the HTML/Javascript widget for the icons.

Remodelaholic April 9, 2011 at 1:40 PM    

Hey Green Lava! I hope you are doing well!

I have been fooling around with this a little bit more to add an ad to my box, but I am having problems. Is there a way to right align the ad, so that it doesn't go off the page and still keep the widths of the other gadget at about 30% ? I haven't been able to make that work.

When I added the html box for the advertisment I had to widen the percentage for the ad to stay on the page. It is now located perfectly. But but the next gadget is pushed way far down the page. I would like it to show up higher, I don't want the huge gap. Do you see where the problem is? Thanks so much for your help.

I am working on my test blog like normal!
http://figuringoutblogger.blogspot.com/

Thanks again!

Greenlava April 11, 2011 at 9:16 AM    

@Remodelaholic
Hey! I'm fine thank you :)
I don't see any ad ( but I can see a Javascript, the ad code I presume)
Try right floating header-center by replacing display:inline; with float:right;
#header-center ng{width:60%;float:right;float:center;padding:15px;}

Arcmond April 27, 2011 at 10:34 PM    

Hi Greenlava, i have a proablem with the share icon. The proablem is, i have a big icon, and i tiny icon to the right. If you could help me to make it like your, i will be grateful.

Here is my blog link (to see the proablem):
www.arcmond.com

(sorry for my bad explanation)

Sergiu April 27, 2011 at 10:45 PM    

it's work the comments?

Greenlava April 29, 2011 at 11:12 AM    

@Sergiu
If you want to add an Adsense ad or a banner in the comments section, do not add an Add A Gadget (as explained in this tutorial). Put the code direct in your template, after this line:
[div id="comments" class="comments"]

Greenlava April 30, 2011 at 2:05 PM    

@Arcmond
I'm having trouble loading your blog. It loads at first, then the screen turns white. It looks like it tries to fetch something from google.com.
The same thing happened when I tried yesterday.

Greenlava May 12, 2011 at 7:58 PM    

@Admin
Find this CSS rules in your CSS:

#sidebar-left-1, #sidebar-right-1, #main {
margin-left: 5px;
margin-right: 5px;
#header, body#layout #header {width:45%;display:inline-block;float:left;}
#header-right, body#layout #header-right {width:25%;display:inline-block;float:right;padding:15px;}
#header-right .widget {margin:0;}
}

Notice there is no closing curly bracket for the #sidebar-left-1, #sidebar-right-1, #main selectors declarations. Add a closing bracket and your search box will move to the right.

#sidebar-left-1, #sidebar-right-1, #main {
margin-left: 5px;
margin-right: 5px;
}
#header, body#layout #header {width:45%;display:inline-block;float:left;}
#header-right, body#layout #header-right {width:25%;display:inline-block;float:right;padding:15px;}
#header-right .widget {margin:0;}
}

Neil May 15, 2011 at 7:30 PM    

Long time admirer of you work Greenlava. Hope you can help me with my site. It shows well in most browsers but in IE the adsense is floating to the right below the header.

I've been trying to solve this for two days straight. Very late nights.

Can you point me in the right direction

Greenlava May 17, 2011 at 2:40 PM    

@Neil
Looks like you've fixed it. It looks okay now in IE.

David Cosier May 18, 2011 at 6:01 AM    

Hi Greenlava,

I'm back using blogspot again. I've enjoyed your tutorials, and I was wondering if you could help me center my adsense header. I've followed your tutorial to split my header, but now I would like to reverse it, and just make it one adsense header above above my navigation bar. Any help would be greatly appreciated!

David May 20, 2011 at 5:09 AM    

Hi again, Greenlava!

I've been working on my site some more. My problem which I now have is that I don't know how to separate the adsense ad from my header. Both appear in one frame. I would like each one to have separate frames, with some padding in-between. Do you have any idea as to how I can accomplish this?

myza,  May 20, 2011 at 4:12 PM    

dear Greenlava, i successfully added a new section and it appears under the title. im a new blogger and i don't know much about css code. I don't know where to put the code so the new section can be at the right side. im glad if u can help me... here is the code

#header-outer{
width: 890px;
height: 300px;
color: #1e7ace;
margin: 0 auto 0;
padding: 0;
overflow: hidden;
}

#header-wrapper {
width: 890px;
height: 300px;
color: #1e7ace;
margin: 0 auto 0;
overflow: hidden;
}
#header-inner {
margin-left: auto;
margin-right: auto;
}
#header {
margin: auto;
text-align: left;
}
#header h1 {
margin:5px 5px 0;
padding:100px 0px 0px 130px;
font-family:'Dancing Script', Georgia;
font-size: 40px;
line-height:1.2em;
text-transform:titlecase;
letter-spacing:.1em;
}
#header a {
text-decoration:none;
}
#header a:hover {
}
#header .description {
margin:0 5px 5px;
padding:10px 0px 15px 130px;
max-width:400px;
text-transform:lowercase;
letter-spacing:.1em;
line-height: 1.4em;
color:#3d85c6;
font-weight:bold;
font-size:13px;
}
#header img {
margin-top:60px;
float:left;
}

#header img {
margin-top:60px;
float:left;
}

Greenlava May 20, 2011 at 11:46 PM    

@David
Try adding this snippet before ]]>< /b:skin> in CSS:

#header, #header-wrapper {
margin: 0 auto;
border: 0;
}
.header .widget {
margin: 10px 8px 10px 1px;
border: 1px solid #cccccc;
}

Greenlava May 20, 2011 at 11:50 PM    

@myza
It'll be a lot easier for me (to find the cause of the problem) if I can see your blog live.
Please give me your blog URL.

myza,  May 21, 2011 at 11:39 AM    

storyofmine-jreeza.blogspot.com
However, i already removed the picture i put below the title. hope u can help! tq

David May 21, 2011 at 11:00 PM    

Thank you, Greenlava! That is excellent! I'm very impressed with your work, and your willingness to help others. I am truly grateful! Thank you!

Greenlava May 22, 2011 at 9:49 AM    

@myza
You forgot to add the styling/CSS code (as per 2.2).

David May 23, 2011 at 11:00 AM    

Greenlava,

I could use your help with centering my adsense above my header (thank you for the previous help), and I could use your help with the adjustment for the right side bar, as it is too close to adsense. Thank you for whatever direction you can provide!

Naser May 24, 2011 at 2:58 AM    

Can you please publish a post of adding header banner for wordpress self hosted blogs

Greenlava May 26, 2011 at 9:22 AM    

@David
You can center an ad by wrapping the code in a [center} tag:
[center]
PUT ADSENSE CODE HERE
[/center]

@Naser
Most (WordPress) themes usually have a built in header image uploader, accessible via the Dashboard.

chatpat indian recipes July 7, 2011 at 2:32 AM    

Hi Greenlava . This tutorial is great. Most of the other tutorials on the net dint work for me at all (I could not find the required code itself in my temp). This tut worked partially ..in the sense that I could get the section but it lies below the main header .I tried tweaking with the widths and padding but none worked.Could you have a look into it? I set back all the values as specified in your tut.
http://www.chatpat-indian-recipes.blogspot.com/

Greenlava July 7, 2011 at 5:23 PM    

@chatpat indian recipes
Header-right styling code (and some other styling codes too) doesn't fully work due to your improper commenting in the CSS.
Find this and 3 other similar comments and change them:
[!-- nav bar css starts--]

CSS comments should be in this form:
/* nav bar css starts */

chatpat indian recipes July 9, 2011 at 8:50 AM    

love you buddy .. it worked \m/

see --> http://chatpat-indian-recipes.blogspot.com/

A google +1 for u :)

Arnout July 15, 2011 at 4:11 AM    

Can you put the HTML code on top of the main header instead of on the right ?

see http://relatiefluisteraartest01.blogspot.com/

Unknown July 15, 2011 at 8:09 PM    

Hi Greenlava, I added this trick a while back and love it, but now I'd like to modify it a bit. Is it possible to have a gadget on top that goes all they way across, then the split header underneath, then the pages widget all the way across?
http://ReverseWineSnob.com

I figured out how to add more gadgets but I can only put them in the left or right side, I'd like to add one all the way across the top.

Checked all the comments this time, I don't think you've answered this one yet :)

Thanks!

Christine Ho July 16, 2011 at 10:03 PM    

Hi Greenlava,
Your tutorial is wonderful. I installed the header widget successfully on my english blog. However, I had a hard time to install it on my other blog here. http://www.christinesrecipes.com/
Wonder why I couldn't get two sections in the header, just one as usual.
What did I go wrong? How can I fix it?
Many thanks in advance.

Greenlava July 17, 2011 at 6:10 PM    

@Arnout
Adding a widget on top of the header is easier than you might think it is :)
Go to Design > Edit HTML and look for this code:
[b:section class='header' id='header' maxwidgets='1' showaddelement='no']

this is the code that controls your header section page elements. The current setting limits the section to 1 widget, and doesn't display the Add A Gadget link.

You can change that. Try changing the widget count limit to 2 and display the Add A Gadget link, like this:
[b:section class='header' id='header' maxwidgets='2' showaddelement='yes']

Once you have that changed, go to Design > Page Elements. You will see an Add A Gadget link on top of the header.
You can now add any widget there as you like.

Greenlava July 17, 2011 at 7:29 PM    

@Jon
Try this tutorial:
Adding a section (with Add a gadget link) in Blogger layout

(add the code before header section instead of after)

Siddharth Singh July 19, 2011 at 8:33 PM    

Hi,
I have treid everything, but am unable to do in my blogger.
I want to add gadget just next to header.
Your help will be appreciated.

Greenlava July 22, 2011 at 2:50 PM    

@Siddharth Singh
What is exactly your problem?

Chris August 2, 2011 at 4:07 PM    

This is not work for me. I try many times but not work. Please tell me why is that? This trick really helpful. But i can't added it to my blog. So please help us.

Pure Spa August 20, 2011 at 4:26 AM    

This code didn't work at first. I came back to the site hours later and it just started working. Maybe blogger doesn't recognize the code right away or something. Just thought I would share that. All is working great now. Thank you!

www.super-confidence.com

FYP September 3, 2011 at 3:54 AM    

Very good blog. I have subscribed to its mail. Hope you continue posting such good tutorials.

free4articles September 13, 2011 at 5:56 PM    

templates that I have :





how to overcome them

free4articles September 14, 2011 at 5:49 PM    

I've followed the instructions from you, but why the increase below the widget? that I want the widget to be on the right, please advice .. my site www.free4artices.com

«Oldest ‹Older 1 – 200 of 266 Newer› Newest»