Good news for all New Blogger users who want to make more money through Adsense!
One of the most strategic place to put adsense is in between posts.
Recently, Blogger has enabled a feature which allows us to place adsense ads in between blog posts.
Here are the links from Blogger and Googles Adsense Blog for the instructions to do so:
* http://adsense.blogspot.com/2007/08/get-inline.html
* http://help.blogger.com/bin/answer.py?answer=50288
Showing posts with label Adsense. Show all posts
Showing posts with label Adsense. Show all posts
Saturday, September 8, 2007
Thursday, June 14, 2007
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
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
Sunday, June 10, 2007
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
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
Saturday, June 9, 2007
How To Change The Width Of The Blogger Templates
Sometimes you may find the new Blogger (Blogger Beta) templates that you like for your blog. However, you’re not very happy with the width of the template. And you want to make some changes to the width of the template.
For example:
You are using standard Minima (2 column) template and you’d like to put adsense’s Banner format (468 x 60) at the top of the main column. However, the main column for the posts in the original template is a bit too narrow (410 px) for the Banner format, which needs at least 468 px width.
In this case, you’ll need to widen the main column slightly.
Here are the steps how to change the width of the main column in Blogger template:
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 “#header-wrapper”, “#outer-wrapper”, “#main-wrapper”, and “#footer” in the codes).
#header-wrapper {
width:870px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
#outer-wrapper {
width: 870px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
#main-wrapper {
width: 410px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#right-sidebar-wrapper {
width: 220px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#left-sidebar-wrapper {
width: 220px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#footer {
width:870px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}
4) The width of the main column for the posts and each sidebar are 410px and 220px, respectively.
Whereas the width of the header, outer wrapper, and footer is 870 px. Since the template has 2 sidebars, the total width of the two sidebars plus the main column is: 410 + 220 + 220 = 850px. The difference of 20px (between 870px and 850px) should be for some spaces in between the columns.
5) Since the minimum width needed to place a Banner format is 468 px, suppose you’d like to increase the width of the main column to 470px.
That means you will need to add another 60px (=470px – 410px) to the original width.
Consequently, you would also need to add another 60px to the header, outer wrapper, and footer, as they too have to expand to accommodate the new width. Therefore, their width will be changed to 930px (=870 + 60).
Here are the parts of the codes that need to be changed:
#header-wrapper {
width:930px;
#outer-wrapper {
width: 930px;
#main-wrapper {
width: 470px;
#footer {
width:930px;
6) To see the effect of the changed codes, click “Preview” button at the bottom of box (always do this first before saving it). If the result looks fine, save the codes by clicking “Save” button.
Note:
You can use the same way for changing the width of the sidebars too. Just remember that when you change the width of the main column or sidebars, you need to adjust the 3 components (header, outer wrapper, and footer) by the same amount to maintain synchronization. Also, if you’d like to change both main column as well as sidebar, it’s better to do it one at a time. Don’t forget to preview first before saving the codes.
Hope this can help. :)
You might be interested in the following topics:
* 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
* 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
For example:
You are using standard Minima (2 column) template and you’d like to put adsense’s Banner format (468 x 60) at the top of the main column. However, the main column for the posts in the original template is a bit too narrow (410 px) for the Banner format, which needs at least 468 px width.
In this case, you’ll need to widen the main column slightly.
Here are the steps how to change the width of the main column in Blogger template:
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 “#header-wrapper”, “#outer-wrapper”, “#main-wrapper”, and “#footer” in the codes).
#header-wrapper {
width:870px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
#outer-wrapper {
width: 870px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
#main-wrapper {
width: 410px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#right-sidebar-wrapper {
width: 220px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#left-sidebar-wrapper {
width: 220px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#footer {
width:870px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}
4) The width of the main column for the posts and each sidebar are 410px and 220px, respectively.
Whereas the width of the header, outer wrapper, and footer is 870 px. Since the template has 2 sidebars, the total width of the two sidebars plus the main column is: 410 + 220 + 220 = 850px. The difference of 20px (between 870px and 850px) should be for some spaces in between the columns.
5) Since the minimum width needed to place a Banner format is 468 px, suppose you’d like to increase the width of the main column to 470px.
That means you will need to add another 60px (=470px – 410px) to the original width.
Consequently, you would also need to add another 60px to the header, outer wrapper, and footer, as they too have to expand to accommodate the new width. Therefore, their width will be changed to 930px (=870 + 60).
Here are the parts of the codes that need to be changed:
#header-wrapper {
width:930px;
#outer-wrapper {
width: 930px;
#main-wrapper {
width: 470px;
#footer {
width:930px;
6) To see the effect of the changed codes, click “Preview” button at the bottom of box (always do this first before saving it). If the result looks fine, save the codes by clicking “Save” button.
Note:
You can use the same way for changing the width of the sidebars too. Just remember that when you change the width of the main column or sidebars, you need to adjust the 3 components (header, outer wrapper, and footer) by the same amount to maintain synchronization. Also, if you’d like to change both main column as well as sidebar, it’s better to do it one at a time. Don’t forget to preview first before saving the codes.
Hope this can help. :)
You might be interested in the following topics:
* 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
* 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
Thursday, June 7, 2007
How To Find The Width Of The Header, Main Column And Sidebar Of The Blogger Templates
Sometimes, we need to know the width of the header, main column or sidebar of our blog.
For example, when we are selecting the format for the adsense code. Suppose I’d like to place Banner format (468 x 60) on top of the main column. That means the width of the main column must at least have 468px width.
Here is how you can find out the width of the header, main column or sidebar of your blog:
1) Find the following codes in the template editor:
(A faster way to do it is by using text search: Click Ctrl+F then type the keyword to be found: #header-wrapper, #main-wrapper, sidebar-wrapper).
#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
#main-wrapper {
width: 410px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#sidebar-wrapper {
width: 220px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
2) Based on the above, the width of the header, the main column, the sidebar are 660px, 410px, and 220px, respectively.
So, in this case, if you want to place an adsense in Banner format (468 x 60) on top of the main column, it’s not enough. You need to expand the width of the main column to (at least) 470px.
In the next post, I’ll show you how. Stay tuned! :)
NOTE:
Some Blogger templates may have different “names” for the sidebar. The above example is the codes from standard (2-column) Minima template. In this template, the sidebar is shown as: “#sidebar-wrapper”.
Other templates which have 3 columns (with 2 sidebars) may use other “names” such as:
a) “#right-sidebar-wrapper” and “#left-sidebar-wrapper”
b) “.sidebar-wrapper”
c) “#sidebar-wrapper” and “#new-sidebar-wrapper”
Therefore, for sidebar, when you’re searching the codes using Ctrl+F, just use “sidebar-wrapper” as the text to be found.
Related Posts:
* 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
For example, when we are selecting the format for the adsense code. Suppose I’d like to place Banner format (468 x 60) on top of the main column. That means the width of the main column must at least have 468px width.
Here is how you can find out the width of the header, main column or sidebar of your blog:
1) Find the following codes in the template editor:
(A faster way to do it is by using text search: Click Ctrl+F then type the keyword to be found: #header-wrapper, #main-wrapper, sidebar-wrapper).
#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
#main-wrapper {
width: 410px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#sidebar-wrapper {
width: 220px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
2) Based on the above, the width of the header, the main column, the sidebar are 660px, 410px, and 220px, respectively.
So, in this case, if you want to place an adsense in Banner format (468 x 60) on top of the main column, it’s not enough. You need to expand the width of the main column to (at least) 470px.
In the next post, I’ll show you how. Stay tuned! :)
NOTE:
Some Blogger templates may have different “names” for the sidebar. The above example is the codes from standard (2-column) Minima template. In this template, the sidebar is shown as: “#sidebar-wrapper”.
Other templates which have 3 columns (with 2 sidebars) may use other “names” such as:
a) “#right-sidebar-wrapper” and “#left-sidebar-wrapper”
b) “.sidebar-wrapper”
c) “#sidebar-wrapper” and “#new-sidebar-wrapper”
Therefore, for sidebar, when you’re searching the codes using Ctrl+F, just use “sidebar-wrapper” as the text to be found.
Related Posts:
* 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
Monday, June 4, 2007
How To Find Your Site Encoding For Your Google Adsense Search Code
Frankly, I have no idea what site encoding is for. But you need to know this info when you’re setting up Google Adsense for Search to get the HTML codes to be put in your site.
If you don’t select the correct option, your Google Search could not work properly.
After searching, I found the answer in Google Adsense Help.
Here is how to find out what your site encoding.
If you don’t select the correct option, your Google Search could not work properly.
After searching, I found the answer in Google Adsense Help.
Here is how to find out what your site encoding.
