How To Add A New Page Element (For Adsense Ads or Image / Picture) In Blog Header Of Blogger Templates

The updated Google Adsense Program Policy allows the publishers to place maximum of 3 Link Units on a single page, instead of 1. One strategic place to put Link Unit is below or above the blog header, as it works like a navigation link.

To do so in New Blogger template, we need to add a new page element widget at the blog header part. However, the New Blogger templates, both standard and modified templates available in the web, generally do not provide an “Add a Page Element” widget to add a page element at the blog's header part.

To add a new page element at the blog’s header part, we need to make some changes to the template codes. No clue how to do it? Don’t worry. It’s quite simple actually.

Here are the steps to add an “Add a Page Element” widget at Blog Header:

1) Log in to Blogger. In the Dashboard, click “Layout” and it will bring you to “Template” tab. Then click “Edit HTML”. This will open the template editor window.

2) Please remember that every time before you make any changes to the template, save a copy of your original codes first. In case there is something wrong, you can get back your original template again.
(Read this post in case you are not sure how to back up your template: How To Backup Your Blogger Template Codes).

3) Find the following codes in the template editor:
(You can simply click Ctrl+F for find the keyword <div id='header-wrapper' in the codes).

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

4) Look particularly for the following:

a) maxwidgets='1'. Change it to: maxwidgets='3'.
You can change the number depending on how many widgets (maximum) you’d like to add at the header.

b) showaddelement='no'. Change it to: showaddelement='yes'.

After you change this, save the template by clicking “Save” button.

5) After that, click "Page Elements". Now you can notice that an additional "Add a Page Element" has been added at the Header".

Yes, it’s done. Now you can add a page element at the header part.
For example:
To place Adsense just below the blog header (e.g. to place an Adsense’s Link Unit under the header), firstly generate the Adsense codes (for Ads Unit, Link Unit or Google Search Bar) from your Adsense account.
Then click the "Add a Page Element” button at the top of the “Header”.
When a new window pops up, select “HTML/Javascript”, and then click "Add to blog".
Paste the Adsense codes into the box, and click "Save changes".
Then we can place the adsense under the header simply by dragging the new page element below the blog header.


Related Posts:

* How To Add A New Page Element (For Adsense Ads/Link Unit, Google Search Bar, or Text) At The Top Of The Main Column (Blog Posts) Of Blogger Templates

* How To Change The Text Alignment For The Blog Header’s Title And Description

* How To Add A Backgound Image / Picture To Your Blogger’s Header

* How To Change The Width Of The Blogger Templates

* Some Tips To Solve Problems in New Blogger

How To Add A New Page Element (For Adsense Ads/Link Unit, Google Search Bar, or Text) At The Top Of The Main Column (Blog Posts) Of Blogger Templates

The new Blogger standard templates or some other modified templates available in the web generally do not provide an “Add a Page Element” widget for us to add a page element at the top of the main column (blog posts column). The “Add a Page Element” widget is usually only available for sidebar and footer.

For instance, you want to place Adsense at the top the main column in every page. Or perhaps you’d like to place Google Search or welcome message text there. To do this, you need to add an “Add a Page Element” widget to the main column.

The following are the steps to add an “Add a Page Element” widget to the main column (blog posts column):

1) Log in to Blooger. In the Dashboard, click “Layout” and it will bring you to “Template” tab. Then click “Edit HTML”. This will open the template editor window.

2) Please remember that every time before you make any changes to the template, save a copy of your original codes first. In case there is something wrong, you can get back your original template again.
(Read this post in case you are not sure how to back up your template: How To Backup Your Blogger Template Codes).

3) Find the following codes in the template editor:
(You can simply click Ctrl+F for find the keyword <div id='main-wrapper'> in the codes).

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>

4) Look particularly for: showaddelement='no'. Change it to: showaddelement='yes'. Then save the template.

5) After that, click "Page Elements". Now you can notice that an additional "Add a Page Element" has been added to the top of "Blog Posts".

Now you can add a page element at the top of the main column.
For example:
To add Adsense at the top of the main column, firstly generate the Adsense codes (for Ads Unit, Link Unit or Google Search Bar) from your Adsense account.Then click the "Add a Page Element” button at the top of the “Blog Posts”. When a new window pops up, select “HTML/Javascript”, and then click "Add to blog". Paste the Adsense codes into the box, and click "Save changes".

You might be interested in the following topics:

* How To Add A New Page Element (For Adsense Ads or Image / Picture) In Blog Header Of Blogger Templates

* How To Change The Text Alignment For The Blog Header’s Title And Description

* How To Change The Width Of The Blogger Templates

* Some Tips To Solve Problems in New Blogger

Some Tips To Solve Problems in New Blogger

I encounter problems with New Blogger quite often. Among the problems I ever had are weird looks in my Dashboard or “create post” template, cannot publish any posting, cannot upload pictures / images in a post, cannot add new page element as the “Add a Page Element” buttons in the “Layout” disappear, cannot edit the existing page element, cannot publish or save a long post, etc.

When you also face such problem with Blogger, you can try the following tips first. These are some tips I came across from the Blogger Forum when I was searching the solution for my problems. Probably one of these tips can save your day. :)

1. SIMPLY REFRESH YOUR PAGE
This is particularly when you encounter a weird look on your Dashboard once you log in.

2. CLEAR YOUR CACHE AND COOKIES
Before doing this, log out from your Blogger first. In case you have no clue how to clear cache and cookies, here are the steps.

Just sharing my experience. There was one time I encountered problem with Blogger whereby I could not publish or save my post. Even worse, after that I couldn’t log out too. So I just closed the window. When I tried to log in again, I couldn’t even get logged in.
However, after I clear the cache and cookies, I could log in again.

3. DISABLE THE POP-UP BLOCKER FUNCTION
Other than clearing cache and cookies, this is also one solution I always try when I could not add new page element, as the “Add a Page Element” widgets in the Layout are missing.

Here is what I usually do:
Log out from Blogger first, then disable the pop-up blocker function as well as clear cache & cookies. Log in again. (If it still doesn’t work, try to restart your computer).

However, most of the time, for me, this problem can be solved by simply changing the browser from Windows Internet Explorer to Mozilla Firefox (See the next point - no 4).

4. TRY USING ANOTHER BROWSER
If you’re using Windows Internet Explorer (IE), try to use Mozilla Firefox (FF), or vice versa.
Sometimes, this simple solution works for me too. Some problems I encounter in Blogger, such as missing “Add a Page Element” widgets in the Layout problem, or cannot upload pictures / images, can simply be solved by changing the browser from Windows Internet Explorer to Mozilla Firefox.

I personally find that for blogging using Blogger, I face more problems / errors when I am using Internet Explorer as the browser than when I am using Firefox.

In case you don’t have Mozilla Fire Fox browser yet, find the Fire Fox button at the sidebar of this blog. You can download and install the Fire Fox absolutely FOR FREE from there.

You might be interested in the following topics:

* How To Change The Width Of The Blogger Templates

* How To Add A New Page Element (For Adsense Ads/Link Unit, Google Search Bar, or Text) At The Top Of The Main Column (Blog Posts) Of Blogger Templates

* How To Add A New Page Element (For Adsense Ads or Image / Picture) In Blog Header Of Blogger Templates

* How To Change The Text Alignment For The Blog Header’s Title And Description