Knowledge is good only if it is shared. As a new blogger, I had learned to change the Web template, and found out the tips, tricks, hacks, and tweaks of altering the Blogger template, customizing CSS, widgets, layout, blog design, inserting JavaScripts, HTML codes, Google AdSense, and other settings the hard way, through many trials and errors. For the purposes of this guide, I had started with the old Blogger “Minima” template. As I made the changes or learned something new, I had documented them. Before changing any template, please remember to save a copy of the current template. After editing the template, preview it, and save it when you are satisfied with the change. Hope this guide will help those who are finding the way around, just like me.

Search Tips for New Bloggers

We have extended our month-long vacation by a couple of days. We shall be posting articles the moment we return. We noticed that Google had updated the Page Ranks. New bloggers who have been waiting anxiously for this can check their blogs' Page Ranks. We have the PR checker link in our SEO Tools - Search Engine Optimization article.

The blog we created recently in Aug 2007, Blogger FAQ and Help, has also got its first Page Rank, a PR4. All our blogs are now ranked:-

Tips for New Bloggers - PR6
Business Fables and Management Lessons - PR4
Famous Motivational and Inspirational Quotes - PR4
Blogger FAQ and Help - PR4

Thanks to everyone for the support!

Feb 9, 2007

Digg This Story

Add Page Element to Blogger Header and Blog Posts

You would notice under Template -> Page Elements that there are options to add a Page Element to the sidebar and the footer. However, there is none for the Header and Blog Posts. Having a Page Element option to these latter two is useful. You may want to add a picture at the top, or a Google Adsense ad at the top or bottom of your blog posts.

To have an “Add a Page Element” option, under “Template”, click “Edit HTML”. Scroll down and towards the bottom, you will see these lines:-

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


Change them to this:-

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


This will give you 2 more page elements that you can add to your Header. You can increase this number if you want.

Right after that are these lines:-

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>


Change them to this:-

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='yes'>


You are now able to add Page Elements either before or after your Blog Posts.

Add Page Element to Blogger Header and Blog Posts

Note:

1. In different templates, the 'header-wrapper' may be called 'header-wrap' or 'header' and so on. Scroll to where you see an option called showaddelement and you can probably figure out the rest.

2. We realized that in some templates like the Dots Template, there is no separate Header at the top. Instead, the Header is contained in the left sidebar and the main posts appear on the right. This is the template layout and it is probably the reason for your choosing this design. In such templates, you can Add Page Elements to the 'main-wrapper' but not at the Header. Nevertheless, you can still look at the guidelines below to Add Page Elements in the 'crosscol-wrapper' part of the template. This will give you the option to Add Page Elements right on top of both the sidebar and main posts. You can upload images, insert AdSense code, text or other scripts into this section.

Update:

There is an additional position where you can add Page Elements to. This is between the Header and the Blog Posts. When you add a Page Element in the Header section, it follows the Header styles (like font, color and margin settings) and similarly, if you add a Page Element in the Blog Posts section, it follows the styles defined for the Blog Posts. You might want to include a Horizontal Menu or Navigation Bar or AdSense Ad unit just below the Header but before the Blog Posts and sidebars.

To do that, scroll to here and change to the value (shown in red):-

<div id='content-wrapper'>

<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='yes'/>
</div>


This should appear in all new Blogger templates. If you don't see this in your template, you can also add the entire code (shown in green). When you view your Template -> Page Elements, you should now see a new section in between the Blog Header and Blog Posts where you can insert Page Elements.

Add Page Element to Blogger Header and Blog Posts

Once these are done, Save the Template. Click the “Page Elements” tab, and you will now see “Add a Page Element” option at the top of the Header and Blog Posts. Assuming you decide to add the element below the Header or Blog Posts, not to worry. Simply create whatever element you want and save. Next, drag and drop the element to the bottom of the Header or Blog Posts. Click the Save button at the top right hand corner of the page, and your settings have been saved.

© Tips for New Bloggers

Found this article useful? Mention us in your post, subscribe to our feed, link to us, or bookmark this site. Thanks for your support!AddThis Social Bookmark Button

85 comments:

Edgar Ng said...

hey im looking for how to add anything after a post .. like a DIGG button under every post i made..like a signature in forum.. everytime i post it will appear. can u write an article on it?

also random pictures, just like random quotes. but Pictures.
Thanks

wendy said...
This comment has been removed by the author.
wendy said...

thanks for this tip. i replaced my header with a page element as i wanted to control the layout and style of the type. i would like to break out of the 660px width of minima so i uploaded an 860px width photo. how do i get the photo/page element to center on the blog page vs. justifying to the left? thanks in advance for any suggestions you might have.

bizwhiz said...

Hi Wendy

Did you change the width settings to the header-wrapper or outer-wrapper to accomodate your wider layout? There is another article here about three column template. In it, I talked about how the widths can be adjusted. When you have a blog published, I could also take a look. Cheers.

wendy said...

beautiful. that's it. thanks for this. another question i have is how to turn the page element (which is now my header) into a live link that one can click on and return to the home page. again, thanks for your help.

Lucky Star said...

Hi there.. Thanks for sharing great tips for us new Bloggers. It helps me a lot. But I still have a question that needs your help, ie how to make links open in new browser or tab? I've tried some tips but it doesn't work for my blog. Thanks in advance.

T Struck said...

Hi BizWiz,
Great info!

I have the same questions as Wendy. First I want to create a new header. I created the page element per your instructions. Now I want my custom head to link back to my homepage. Your help is appreciated!

Thanks,
T. Struck
http://struckreviews.blogspot.com/

bizwhiz said...

Hi wendy and T Struck

Thanks for your comments. I have just written an article on how to "Add Picture Banner Link to Blogger Header". With this guide, you should be able to link your Header picture to your Home page, add banner link, or remove the Header title text.

I shall address Lucky Star's query in a separate article soon. :)

Basketer said...

Sorry, couldnt find your email id on the page so posting this here:

Hi.
I am a regular reader of your posts, through the feed. I have started a project " Break The Line" which helps to create a resource post "101 ways to create original posts". I have always found you mentioning that you are a great supporter of original content. Please visit and contribute if you can spare the time. thanks.

shyeye said...

hi again...your tips very useful. already add page element into my blog but i would like to add border just like header for this new page element (my son slide). can u teach me how to do it. thks.

invadesoda said...

Thank you. I wonder why this isn't the default blogger behavior

Julia said...

sorry, I'm a complete newbie to this...a quick question...I was able to add the photo at the header, but I'm still getting the screwdriver and wrench whenever I view the blog. How do I get rid of this?

bizwhiz said...

Hi Julia
Those are the quick edit buttons which allow you to easily edit the particular segments of the template by clicking the buttons. They are only shown when you are logged in. Your visitors won't see them.

Karl said...

I have had enormous problems implementing your advice (including the unintended erasure of all my links yesterday) for putting a background pic in my header.

Today I am trying to follow your instructions about uploading a picture to replace the standard header in Minima. But I do not see the code you have referred to for adding a page element - the first step in uploading a picture to replace the standard boring header the Blogger provides. Specifically, the following code is not to be found in the Minima html:

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

I am quite sure of this, because I copied all the code to Word and did a search and did not find it.

Is the code different for Macintoshes?

bizwhiz said...

Hello Karl

First, the background image for your Header. The code that you have to add to the Header style does not involve any deletion of any code. So I wonder, what did you do to cause your "unintended erasure" of your links?

For the purposes of this post, I have temporarily converted one of my blogs to the Minima Black template, which is what you are using. I can see the exact labels #header-wrapper as well as the maxwidgets and showaddelement variables mentioned in this article. This was what led me to assume that you are using an old Blogger template.

Different templates may label their styles differently. If you are using the old Blogger template, the style may read simply as #header and if you insert a background setting to it, you should be able to see your background image at the header.

Somewhere towards the bottom of your template, do you see a div id ='header'? What is the setting shown there? Whatever the labels are called, what we want to do is to enable the add page element setting and increase the maximum number of widgets.

If you require further assistance, you can always let me know what you see under this style and I could try to explain to you what each variable means.

You may also out of prudence obtain second or third opinions from other sites to be sure of the required change before effecting it.

As for your point about Macs, although I doubt there is a difference, I don't have a Mac and am unable to confirm that.

Karl said...

The problem was, as I discovered an hour ago, that the code you listed was not consisstent with the old blogger template, which is what i was using. I switched to the new template, and discovered the code quickly and made the necessary changes. So now I have a picture/header with embedded code that brings one back to the homepage, as per your instructions. So thanks. That worked.

Karl said...

Just a follow-up. I saw your comment on my blog, and found what you were talking about. And I did want to get rid of those borders! And now they are gone, which improves the look of the header. Thanks...Karl R. (oh, and did you like the Georgian joke?)

Madhavi said...
This comment has been removed by the author.
Madhavi said...

Hi BizWiz!
Madhavi here again!Thanks for going thro' my blog.I read your comment today.Thanks for the nice comment.I read the article on adding page element to blogger header and blog posts.It almost worked for me.Only thing that does not make it perfect is I want the picture to be on the left side of my header(to be more clear left to my blog titlle"my veggie world").Can I align this somewhere.Once again,Thank you so much for bearing with me with lots of patience.

bizwhiz said...

Hi Madhavi

You can specify the left alignment (semi-colon after the word left) -

float:left;

Next, adjust the position of your title and description by inserting a left margin under

#header h1 {
and
#header .description {

margin-left: 200px;

Please adjust the value accordingly. Feel free to let us know how it goes.

Madhavi said...
This comment has been removed by the author.
Madhavi said...

Hi BizWiz!I have just tried what you described.I haven't seen any change.I specified the left alignment as float:left under the
#header image(


and then,I adjusted the position of my title and description by inserting a left margin under

#header h1 {
and
#header .description {
as
margin-left: 200px;

After trying a number of times,I now feel I cannot bring the kind of look I want to my blog and feel like stop trying anymore.What I always wanted is picture of assorted vegetables to the leftside of my blog title.Anyways,Thank You for bringing me till here BizWiz!!

bizwhiz said...

Hello Madhavi

I have done a demo blog just to show you how your header will look.

http://veggie-world-demo.blogspot.com/

I have also included the instructions on the blog. Please let me know when you have succeeded changing your Header so that I can delete the demo blog. Cheers.

madhavi said...

Hi BizWiz!Iam almost done.Plz check my blog now.you demo blog is exaclty how I wanted.My blog still does not like that.May be some more small touch up is required and Iam not able to find exactly where and how?With that I can close this issue.
madhavi

bizwhiz said...

Hi Madhavi

Looks good. Perhaps increase the height of the image a little to fill the gap. If there is any area you want to make further adjustments in, pl leave a message in the chatbox and I shall respond.

Lary Crews said...

When I follow your instructions to add a page element, any text I put IN the page element vanishes, comes back sometimes, and vanishes again.
I'm using new Blogger with the Thisaway (Blue)template by Designer: Dan Rubin.
Thanks
Lary Crews
http://larycrews.blogspot.com

bizwhiz said...

Hi Lary Crews

We converted on of our blogs to Thisaway (Blue) just to see the template code. It is no different from what we said in this guide. We changed the showaddelement to Yes in the 'header-wrapper' and 'main-wrapper'. We are able to Add Page Elements to the Header and Post body.

Next, we clicked "Add a Page Element" in the Header. We chose to add Text, saved, and could see our sample text.

We tried the "Add a Page Element" and chose to add HTML/JavaScript. We could add a scrolling text marquee code too.

When you said you put in text, how did you do it? Did you select Text or HTML/JavaScript or any other type?

Roberto said...

Hi BizWiz,

Is there a fairly simple method of changing the font on the blog title (header)? I really want to change my boring (standard) title font to one I have picked out (Cardinal). Any tips would be appreciated. BTW, you've got a great blog. Helpful as heck!!
http://thesilverpeoplechronicle.blogspot.com

BIG BROTHER 8 said...

Hi Ive read your tutorial regarding creating new pages to my blog so I can cover more topics and have been trying for weeks to do..Now my blog is unfortuently confined to just one page and I want at least 20 to cover all the topics i wish to write about..please can you give me a link to show me"newbie" how to do this my blog is http://bigbro8.blogspot.com
Thanks.

bizwhiz said...

Hi Big Brother 8

I am afraid I truly do not understand what your question is about. Are you saying you want more articles? If so, you can always write more articles.

Or are you saying that you want 20 different pages for 20 articles? If so, under Settings->Formatting->Show, you can select 1 post on the main page. In that way, you won't have all the articles shown to users when they visit your page. They can then access each of your article through a sidebar Archive or Link List.

bizwhiz said...

Hi Roberto

We can embed the special fonts into the template. However, this may affect the download speed. Also, in certain browsers, readers will receive a popup message that they are downloading embedded fonts. Some may choose not to download these fonts, and what they will see will be the default fonts, rather than the special fonts.

We'll find time to try it out and post our findings.

Matt G. said...

Is there a way to add a page element above the header. My header is blue. When I add a page element above the header, the background is also blue. I want to add a page element completely above the header in the white space between the top of the page and the header. Any ideas on how to do that. Thanks.

I am referencing this page I am working on:
http://sharpeinvesting.blogspot.com/

bizwhiz said...

Hi Matt G.

You are right. Whatever page elements we add in the Header will follow the style (font, colors, typeface, margins, etc.) that is set in the template for the Header section.

If we want another set of style definitions, we may have to define in the template another set of rules to apply to this second header.

If it is a background color that you are concerned with, a simpler way may be to specify a background color to the page element (e.g. table) that you add.

Get Degree Online said...

The tips you provide is really good. However I have done that but the ad new page element option is going to top of my header graphics. How will I edit it so it will be displayed under the header graphics ?

bizwhiz said...

Hi Get Degree Online

When you are at Templates -> Page Elements, you can click and drag the page element to below the graphics or wherever you want. Save the template and refresh the blog to see the new position of the page element.

Get Degree Online said...

Hi Bizwhiz
Thanks for your suggestions. Yes I have done it. It's working ok. Now tell me about another subject.

My blog's footer section is as "copyright 2007 get degree online". It's always showing before the bottom page element. And I couldn't drag the footer section to bottom nor could drag the element before it.

I want to keep the footer at the bottom & want to keep the element before it. How can I do that?

bizwhiz said...

Hi Get Degree Online

How was that footer created? You should be able to move the positions of the footer page elements in the standard Blogger templates, just as you would for the sidebar elements.

If you have created a unique template or obtained one from other sources, it could be that they designed it as fixed. If you are able to create page elements at the footer area, you can insert the copyright as a text page element instead of putting it directly into the template. In that way, you can move it about.

Get Degree Online said...

SATJUL
Thanks for your suggestion. I am using Downright V1.4 template.

Get Degree Online said...

Anyone can tell me how I can add Link Us option for my blog where have to have a form and inside the form I can put the link-back HTML Code. Can anyone provide me detail code which will be like this blog's "Link to Us" situated in the left of this blog?

Get Degree Online said...

Bizwhiz
Thanks for your suggestion. I have managed my footer according to your suggestion. Thanks again. can you tell me another matter. I have got a very nice script about "Tell a Friend". But it's not working for blog because its php script. Can you translate it so it can be use for blog? It'll be helpful for all of us. I need your email address to send it to you. I have tried but here's not possible to publish

bizwhiz said...

Hi Get Degree Online

I don't think Blogger accepts PHP scripts. You may want to try other codes or get someone to re-write it for you.

bizwhiz said...

As for the Link to Us and other hyperlink codes, you can refer to our article Hyperlinks and Image Links.

Something Blue said...

Hey, I used your script but the image i'm using as my header is being cut off. The dimensions are 600x400 however only about a quarter of the image shows up

bizwhiz said...

Hi Something Blue

If you want a fixed height for the header, you can add it in

#header{
height: 400px;
}

spngod said...

Hello,

I am trying to add a page element between my header and by blog posts and side bars. I have a three column sandbar template. I used the crosscol code as you suggest.

The problem is that this page element does not fit into by blog with my other page elements. If I try to add anything to this part of the blog, it moves around other page elements. I want to add a list of links in this part of my blog, but i can not because it disorients all of my other elements. Any help would be greatly appreciated.

Thanks

Inspirational Muse said...

Hey Bizwiz

Excellent Blog tips! I am trying to figure out how to add a new page? Ex (http://inspirational-muse.blogspot.com/linktome.html). A page that can hold my link to me buttons. Rather then in the sidebar or a post. Then add that link to the sidebar where they can nav to different pages. Wordpress has the option to create a new page and I wanted to incorporate that into my blog. http://inspirational-muse.blogspot.com/ As you can see the link to me are in the sidebar which is beginning to be longer then I wanted! I have a lot more to add to my sidebar! Any help on this would be great! Or if you can link me in the right direction!

bizwhiz said...

Hi Inspirational Muse

In Blogger, we can have new posts only, and the URLs of new posts will include the year and month.

shyam_rocks said...

I have applied a new template...but the problem is that the widgets in the sidebar are displaying at the bottom when viewed from IE but when it is viewed from Opera or Firefox it's fine....

http://windows-registry-editor.blogspot.com

Can u help me ??

bizwhiz said...

Hi shyam_rocks

You are not using a Blogger template. You may want to post your question at the site where you downloaded your template from. Since they wrote that template, they should be in a good position to advise you.

LV said...

I am brand new to the blog world and am really excited to use your tips to build a great one. I wanted to start by adding elements, but have already failed. I'm using the Minima template and have changed everything exacly as identified on your page. It seems pretty straight forward, but I still don't get the add element option.

Thanks in advance,
Larry

LV said...

The add an element tip page seems to be pretty straight forward, however, when I tried it, I didn't get the option when editing. Is there some trick to it? I have copied it exactly so I'm not sure what the problem could be.

Thanks in advance
Larry

ocean and forest walks said...

Is there anyway to add a line saying copyright ..into already published 100's of posts without having to republish them all so that this will show on feeds??? Trying to get a copyright notice on each previously published post page. It is a blogspot blog. Help. I have found this to be the most helpful site on Blogger blogs.

Windyridge said...

Thanks a million times over for providing all this info. I have been trying to add something after the header but before the 1st post forever and now I've found this! This blog has also helped me add a much better feed chicklet to my Wordpress blog believe it or not. Lots of great info here!

Windyridge said...

Oh and now you need to find a way for all commenters to leave comments outside of the blogger system that no longer allows links if you aren't a registered Blogger user or registered with Open ID. I switched to Haloscan, but I would rather something that doesn't delete all my previous comments. Too late for me now but others would be very interested.

Brisbane Computers said...

Hi there I have tried most of your fantastic blogger bits but I have done something wrong on this one. I have the letter F above my header all by itself.. I have no idea how it got there.

www.experimentttggg.blogspot.com/

Manan Saini said...

hello bizwhiz ,

how u write on both sides of blog,

me trying to add page element in sidebar , so that i can write on both sides but , nothing happens,

plz tell me how u write on both sides of blog.

thanks in advance.

manan said...

hi bizwhiz,

when i do settings according to this code shown below, and after that i add a page element in html thread "search box code" seacrch box appear in between the header and main wrapper,but after i save page element , then i go for saving template then it shows error that html widget deleted that i add latest (seacrh box) why this error came,in such way i m not bale to add search box in between the header and main. plz help.

the code is shown below:-



div id='crosscol-wrapper' style='text-align:center'
b:section class='crosscol' id='crosscol' showaddelement='yes'


tags r removed by me becoz comment cannot be poted with these.

bloggers4acause said...

i need help.... i removed the blog title in header. now i cannot edit it in the page elements section... how can i return that function?? i want to display the title in my header.. please help

NilGiri said...

Thank u so much bizwhiz :)

Christen & Frank said...

Hi Biz Wiz,

I have installed a new template to my blog and added a jpg image as the header. I updated the image and want to switch to the new image. However, when I go under Template -> Page Elements, there is no option to "edit" my header. Instead, the box where Header should be is small and there are no words in it. Any suggestions on how to change the image?

Thanks!

Harikrishna said...

Best Tutior for new blogger.

I love it.

I hope you also Love It.

Visit www.askmoney.co.nr for Not only money.

sherin said...

< div style='float:left;' >
Google adsense
< /div>

< div class='post-body' expr:id='"post-" + data:post.id' >
< b:if cond='data:blog.pageType == "item"' >
< p > < data:post.body/>< /p >
< b:else/ >
<........>
< /div >

< div style='float:left;' >
Adsense code
< /div >

< div class='post-footer' >


Above is my setting in the Blogger. But, adsense is not at all appearing. Could you please advise me? My blog is http://investinternals.blogspot.com

I have given space in tags to post here

Thanks, Sherin

Glamourosa said...

Hello:

Thank you very much for this useful tip, I managed to embed an Adsense search box to the header of my blog
http://beautytipswomen.blogspot.com

Thx again for bloginspiring new bloggers like me :)

zlamushka said...

amazing instructions, thanks a lot. I didnt realize it was THIS easy, muah :-)

SusiCards said...

Hi. Thanks for sharing this very usefull tips for us.
Congratulations to your blog.

Anonymous said...

Hi, my blog doesn't have this code...so where i have to put this code....

div id='content-wrapper'
div id='crosscol-wrapper' style='text-align:center'
b:section class='crosscol' id='crosscol' showaddelement='yes'/>

Miles said...

great tip! thanks for enlightening me!

Jona said...

this is so helpful. I in fact put your image code on my blog to promote it. Check it out

But I have a little(shall i say) problem.When I put my menubar under the header and above the post, the main page/bar(containing the post/the center) would be placed on the bottom of the page instead on it's usual place which is between the two side bars.

I hope you can help me with this.

Thanks in advance.

Jona

Starrett Funeral Home said...

I can't thank you enough for this article and the "add header link/pic." I have spent all day trying to figure out how to get my header pic to link to my company's main webpage. God bless you for your good work. My next project, which shouldn't be too difficult, is opening in a new window.

Anonymous said...

I give up! I'm following your directions but am unable to save. It's giving me this message:

We were unable to save your template

Please correct the error below, and submit your template again.
More than one widget was found with id: Feed1. Widget IDs should be unique.

Please let me know if you can help!
Thanks,
C

Evan said...

Hey I'm using the sand Dollar template and wondering how I can Add an element to the web page's footer? I know you used this:

id='header' maxwidgets='3' showaddelement='yes'

to put more elements into the header section, how can I do this for the web page's footer?

The Red Banana said...

this was so helpful! thank you so much!!! EXACTLY what i was looking for! :)

Toyang Q said...

great!!

eftim said...

Thank you very much! It´s a great help to me. A great tip!

firdaus zahari said...

hi there, i was looking for your article to add page element at the header and post. what i don't understand is at the end of that article, you say that wwe can add page element between header and post and you also provide link to article on adding horizontal navigation toolbar. actually, what is that about? can u explain me a little bit more?

Dustin Chambers said...

i have no "add a page element" option and when I modify the code all I get is more "add a widget", AGH!

Anonymous said...

Informative article. I will use that in my blog

Rosie said...

Hi,

I am wondering if there is any way of adding a page element to the left or right of the header element? The changes you discuss here are for above and below. Or even a way of making the side bars move up? I use a modified (from your site) Minima Template
dosyrosie.blogspot.com
Any thoughts?
Thanks

Micah said...

you just saved my life. Thank you. lol

Vel Murugan said...

Hi i followed your steps.but i can't see Add Page Element in my blogs Template.please help me.

Thanks

Revive said...

Lovely! thank you so much for sharing

@LiYaNNuaR said...

thanks... i've done...

riley lassner said...

I would like to get rid of the titling and description of my blog and leave it just as the html/javascript page element.

please help!

liza said...

thank you so much. your instruction is very easy to follow. i was able to do it on my own. :D

John said...

Superb guides and tutorials here fellow. You are great! Thanks a lot for the page element tricks. Really helpful.