Rounders 4 template by Amanda Fazani
I love the Rounders 4 template by Douglas Bowman because it is beautiful, green and I think a perfect fit for an environmental blog. However the standard Blogger Rounders 4 template is only 2 column when I prefer 3 column and 4 column. I was thus very happy when Amanda of BloggerBuster converted the standard 2 column to the Rounders 4, 3 column template. I thus used her template for the Environmentally Friendly Presents. Not only has Amanda converted it to 3 column, she also included a very handy Labels cloud. Do have a look at Labels cloud in the right sidebar of Environmentally Friendly Presents, you will fall in love with it I am sure.
Wednesday, October 22, 2008
Changing widths of blog - sidebars, main column
I have previously showed how to determine main column and sidebar widths. A blogger asked how to change the widths. It is not difficult, but before I show how to change the widths, let me explain something about web designs. If you are only interested to find out how to change widths, skip to Change Width
Webmasters always take into considerations the kind of visitors to their websites. One important considerations is the screen resolutions of their visitors and previously, small screen resolutions of 800x600. This is so that such small screen visitors will see the whole blog without having to use the horizontal scroll bar. Visitors with larger wider screen will see so called "wasted space". Even Vprofessional webmasters for big websites like CNN.com have this "wasted space". The so called "wasted space" are there for a reason, that is, to make things convenient for small screen visitors. You would not want to make it inconvenient for small screen visitors and discourage them from coming back to your blog.
Now we come to the part about changing width:
Change Width
The widths of the whole content, the Header, the Footer, the main column and the sidebar or sidebars are controlled via the CSS (Cascading Style Sheet) of the template. The sections involved in the case of the 4 column template used for this blog are:
Overall
#outer-wrapper {
width: 990px;
margin:0 auto;
padding:0;
text-align:left;
font: $bodyfont;
}
Main column
#main-wrapper {
margin:0 0 0 20px;
width: 450px;
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 */
}
Left sidebar
#left-column {
width: 163px;
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 */
}
First right sidebar
#rightsidebar-left {
margin:0 0 0 10px;
width: 163px;
float: left;
word-wrap: break-word;
overflow: hidden;
}
second right sidebar
#rightsidebar-right {
width: 164px;
float: right;
word-wrap: break-word;
overflow: hidden;
}
Note that the total widths of the main column plus the 3 sidebars = 450+163+163+164 = 940 pixels
The overall width is 990px. The difference = 990 - 940 = 50 pixels are taken up by the margins.
If you do not want to change the overall width, but only want to change the widths of the sidebar and/or the main column, what you should do is to make sure the the total widths of the main column plus the sidebars are alway 940 pixels (assuming you want the margins to be maintained)
For example, I want to change the main column to 400 pixels. Thus there will be an extra 50 pixels to be distributed among the 3 sidebars. Thus I might add 30px to the first sidebar, 10 each to the 2 right sidebars. Thus the new widths will be
Left sidebar = 163 + 30 = 193
Main column = 450 - 50 = 400
First right sidebar = 163 + 10 = 173
Second right sidebar = 164 + 10 = 174
and that part of the CSS become
Overall (no change)
#outer-wrapper {
width: 990px;
margin:0 auto;
padding:0;
text-align:left;
font: $bodyfont;
}
Main column
#main-wrapper {
margin:0 0 0 20px;
width: 400px;
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 */
}
Left sidebar
#left-column {
width: 193px;
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 */
}
First right sidebar
#rightsidebar-left {
margin:0 0 0 10px;
width: 173px;
float: left;
word-wrap: break-word;
overflow: hidden;
}
second right sidebar
#rightsidebar-right {
width: 174px;
float: right;
word-wrap: break-word;
overflow: hidden;
}
ANOTHER EXAMPLE:
You want to make the whole blog wider to, let's say 1200 pixels wide. That means there will be an extra 1200-990=210 pixels to be distributed among the 4 column. Thus I may add, for example, 120 to the main column, and 90 (30 each) for the 3 sidebars.
Thus
overall width = 1200
Main column = 450 + 120 = 570
Left sidebar = 163 + 30 = 193
First right sidebar = 163 + 30 = 193
Second right sidebar = 164 + 30 = 194
Webmasters always take into considerations the kind of visitors to their websites. One important considerations is the screen resolutions of their visitors and previously, small screen resolutions of 800x600. This is so that such small screen visitors will see the whole blog without having to use the horizontal scroll bar. Visitors with larger wider screen will see so called "wasted space". Even Vprofessional webmasters for big websites like CNN.com have this "wasted space". The so called "wasted space" are there for a reason, that is, to make things convenient for small screen visitors. You would not want to make it inconvenient for small screen visitors and discourage them from coming back to your blog.
Now we come to the part about changing width:
Change Width
The widths of the whole content, the Header, the Footer, the main column and the sidebar or sidebars are controlled via the CSS (Cascading Style Sheet) of the template. The sections involved in the case of the 4 column template used for this blog are:
Overall
#outer-wrapper {
width: 990px;
margin:0 auto;
padding:0;
text-align:left;
font: $bodyfont;
}
Main column
#main-wrapper {
margin:0 0 0 20px;
width: 450px;
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 */
}
Left sidebar
#left-column {
width: 163px;
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 */
}
First right sidebar
#rightsidebar-left {
margin:0 0 0 10px;
width: 163px;
float: left;
word-wrap: break-word;
overflow: hidden;
}
second right sidebar
#rightsidebar-right {
width: 164px;
float: right;
word-wrap: break-word;
overflow: hidden;
}
Note that the total widths of the main column plus the 3 sidebars = 450+163+163+164 = 940 pixels
The overall width is 990px. The difference = 990 - 940 = 50 pixels are taken up by the margins.
If you do not want to change the overall width, but only want to change the widths of the sidebar and/or the main column, what you should do is to make sure the the total widths of the main column plus the sidebars are alway 940 pixels (assuming you want the margins to be maintained)
For example, I want to change the main column to 400 pixels. Thus there will be an extra 50 pixels to be distributed among the 3 sidebars. Thus I might add 30px to the first sidebar, 10 each to the 2 right sidebars. Thus the new widths will be
Left sidebar = 163 + 30 = 193
Main column = 450 - 50 = 400
First right sidebar = 163 + 10 = 173
Second right sidebar = 164 + 10 = 174
and that part of the CSS become
Overall (no change)
#outer-wrapper {
width: 990px;
margin:0 auto;
padding:0;
text-align:left;
font: $bodyfont;
}
Main column
#main-wrapper {
margin:0 0 0 20px;
width: 400px;
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 */
}
Left sidebar
#left-column {
width: 193px;
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 */
}
First right sidebar
#rightsidebar-left {
margin:0 0 0 10px;
width: 173px;
float: left;
word-wrap: break-word;
overflow: hidden;
}
second right sidebar
#rightsidebar-right {
width: 174px;
float: right;
word-wrap: break-word;
overflow: hidden;
}
ANOTHER EXAMPLE:
You want to make the whole blog wider to, let's say 1200 pixels wide. That means there will be an extra 1200-990=210 pixels to be distributed among the 4 column. Thus I may add, for example, 120 to the main column, and 90 (30 each) for the 3 sidebars.
Thus
overall width = 1200
Main column = 450 + 120 = 570
Left sidebar = 163 + 30 = 193
First right sidebar = 163 + 30 = 193
Second right sidebar = 164 + 30 = 194
Saturday, September 27, 2008
Error code bX-jdokxi - what to do
Have you ever got the error code bX-jdokxi when you try to change template? I did not too long ago while trying to change the template of Blogger FAQ from Blogger Buster's Red Web 2.0 template to my own 4 column Minima template. This is what I did to solve the problem:
1. temporally changed to a standard 2 column Blogger Minima template, then try to change to the 4 column Minima template. Error message - error code bX-jdokxi
2. I found out that there were a few gadgets (formerly Page Elements) that were not deleted (left behind) when changing to the standard 2 column Blogger Minima template. I removed all gadgets (Page Elements), then only change to the 4 column Minima template I actually wanted. EUREKA. Problem solved. No error message. Template successfully changed to the 4 column Minima template.
1. temporally changed to a standard 2 column Blogger Minima template, then try to change to the 4 column Minima template. Error message - error code bX-jdokxi
2. I found out that there were a few gadgets (formerly Page Elements) that were not deleted (left behind) when changing to the standard 2 column Blogger Minima template. I removed all gadgets (Page Elements), then only change to the 4 column Minima template I actually wanted. EUREKA. Problem solved. No error message. Template successfully changed to the 4 column Minima template.
Important reminder. Before doing anything to the template, always backup template and backup gadgets (formerly called Page Elements). After successfully changing to a new template, you can use the backup gadgets (Page Elements) to copy-paste back into the new template via the LAYOUT.
Sunday, September 21, 2008
Blogger Tips Tricks now using 4 column template optimized for 1064x768 screen resolution
Blogger Tips and Tricks is now 4 column and optimized for 1024x768 pixels screen resolution as well as AdSense. Blogger Tips and Tricks now used a 4 column fixed width Minima template with widths of 450 pixels for main column, 163, 163 and 164 pixels for the 3 sidebars respectively. Rationale for the change is as follows:
Below are the most recent system statistics (visitors' screen resolution):
This showed that today, only less than 1% of visitors have the small screen resolution of 800x600 pixels while 32% has screen resolution 1024x768 pixels. Visitors having screen resolution of 1024x768 pixels and bigger total slightly over half have screen resolution over 83. This means that the vast majority of visitors to this blog with this new template will not have to use the horizontal scroll bar
to view all the content of this blog with this new 4 column template optimized for 1024x768 pixels screen resolution.
The main column (content) was only increased from 400 pixels to 450 pixels. This is because as discussed in What is the best template?, a readability study showed that content should be around 60 CPL (characters per line). I tend to agree because I use a wide screen and when I come across text which stretches the whole breath of my wide screen, I find it difficult to read and to scan. When I read until the end of one line, I have to search for the beginning of the next line and that can be a bit difficult as the end of a line and the beginning of the next line can be separated by a large distance.
The sidebars were kept to slightly over 160 pixels because the popular AdSense skyscraper (wide vertical banner) ad unit is 160x600 pixels and will then just fit in nicely in any of the 3 sidebars.
If you want this template, please go to 4 column New Blogger template.
Below are the most recent system statistics (visitors' screen resolution):
Visitors' screen resolution bar chart
Visitors' screen resolution in percentage
This showed that today, only less than 1% of visitors have the small screen resolution of 800x600 pixels while 32% has screen resolution 1024x768 pixels. Visitors having screen resolution of 1024x768 pixels and bigger total slightly over half have screen resolution over 83. This means that the vast majority of visitors to this blog with this new template will not have to use the horizontal scroll bar
to view all the content of this blog with this new 4 column template optimized for 1024x768 pixels screen resolution.
The main column (content) was only increased from 400 pixels to 450 pixels. This is because as discussed in What is the best template?, a readability study showed that content should be around 60 CPL (characters per line). I tend to agree because I use a wide screen and when I come across text which stretches the whole breath of my wide screen, I find it difficult to read and to scan. When I read until the end of one line, I have to search for the beginning of the next line and that can be a bit difficult as the end of a line and the beginning of the next line can be separated by a large distance.
The sidebars were kept to slightly over 160 pixels because the popular AdSense skyscraper (wide vertical banner) ad unit is 160x600 pixels and will then just fit in nicely in any of the 3 sidebars.
If you want this template, please go to 4 column New Blogger template.
Sunday, August 03, 2008
Additional "Add Page Element" LAYOUT
Below is the LAYOUT of a standard Minima template:
Note that there are only 2 "Add a Page Element" (one of them highlighted with red ellipse). Below is an extract of relevant section of the template:
maxwidgets='1' showaddelement='no'>
showaddelement='no'>
showaddelement='no'>
Now if you want to have additional [Add a Page Element]'s, change
showaddelement='no'
to
showaddelement='yes'
and where appropriate, change '1' in
maxwidgets='1'
to any number greater than '1'. If you just delete '1' and leave it as
maxwidgets=''
you can add an infinite number of Page Elements.
The edited script shown is in the scroll box below:
maxwidgets='' showaddelement='yes'>
showaddelement='yes'/>
showaddelement='yes'>
Note that all three showaddelement='no' had been changed to showaddelement='yes', and in the LAYOUT, you will see three additional "Add a Page Element":
The very last line should always be
If the last line is not , then part of your template is missing. If this is the case, you will have to change to a new Blogger template and your problem should be solved.
The other possibility is that your template may have become corrupted and thus your blog may display funny characters. In this case, First backup your template PLUS Page Elements. This post backup your Page Elements should explain the process in greater details.
Then change to a new template which may be the same template you used originally before you started any blog customization or it may be a brand new Blogger template. Once you have a fresh template installed, start putting back in whatever Page Elements you had been able to back up. Those which cannot be backed up like ARCHIVES or PROFILE, most likely you can get it again by clicking ADD A PAGE ELEMENT in the LAYOUT and selecting from a list. The one which you most likely have to start from scratch will be LINK LIST. That is why I prefer to use HTML/Javascript Page Element and HTML for hyperlinks for my Link List. This, using an UNORDERED LIST (
Note that there are only 2 "Add a Page Element" (one of them highlighted with red ellipse). Below is an extract of relevant section of the template:
Now if you want to have additional [Add a Page Element]'s, change
showaddelement='no'
to
showaddelement='yes'
and where appropriate, change '1' in
maxwidgets='1'
to any number greater than '1'. If you just delete '1' and leave it as
maxwidgets=''
you can add an infinite number of Page Elements.
The edited script shown is in the scroll box below:
Note that all three showaddelement='no' had been changed to showaddelement='yes', and in the LAYOUT, you will see three additional "Add a Page Element":
Tuesday, April 01, 2008
Blog display blank page or funny characters: What to do?
We get questions like these every now and then. One said he signed into Dashboard, then click VIEW to view a blog, but only see a blank page. What I can suggest is to click VIEW > PAGE SOURCE (in Internet Explorer, it is VIEW > SOURCE) in the menu bar:
and a new window will open. Very likely, you may see a blank template or a truncated (incomplete) template. The template should always begin with
or something similar. Note particularly the second line
and a new window will open. Very likely, you may see a blank template or a truncated (incomplete) template. The template should always begin with
or something similar. Note particularly the second line
The very last line should always be
If the last line is not , then part of your template is missing. If this is the case, you will have to change to a new Blogger template and your problem should be solved.
The other possibility is that your template may have become corrupted and thus your blog may display funny characters. In this case, First backup your template PLUS Page Elements. This post backup your Page Elements should explain the process in greater details.
Then change to a new template which may be the same template you used originally before you started any blog customization or it may be a brand new Blogger template. Once you have a fresh template installed, start putting back in whatever Page Elements you had been able to back up. Those which cannot be backed up like ARCHIVES or PROFILE, most likely you can get it again by clicking ADD A PAGE ELEMENT in the LAYOUT and selecting from a list. The one which you most likely have to start from scratch will be LINK LIST. That is why I prefer to use HTML/Javascript Page Element and HTML for hyperlinks for my Link List. This, using an UNORDERED LIST (
- ) is described at the bottom of the post linked to above.
Sunday, March 30, 2008
Background graphic for blog
I would be very careful with adding a graphic background to a blog as the photo must be selected carefully, otherwise, something on the blog become very hard to read or may even become invisible. Anyway look at blog with repeating graphic background.
Instructions on how to add a repeating graphic background to a blog
I would first assume you have a graphic or photo that will suit color of the text, hyperlinks, etc. Save it into your computer into a folder where it can be easily found. Now you have a choice of the free Photobucket image host or hosting it by uploading to a post in Blogger. In my case, I have chosen to host the photo at photo of clouds for blog background.The very first thing you need to do is to get the correct photo URL. In that post, I will click View > Page source (the language may differ a little in different web browsers) in the menu bar at the top of the web browser:
Since the title of the post is "Photo of clouds for blog background", I will press ctrl+F and a search box will appear. I copy-paste all or part of the above post title and click "Find Next" to get to the section of the Page Source where the scripts to display the post is. I found:
and after src=" I found the URL of the photo:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZo04FAuSMn63MVGA_fN72aAMOe5H8PwHtTcTulVx5FfPZTpjsABg-60WmUaX_-N706nUlfvTsb9tjIj-OkJPC3cWqOadUQKdwmROHZcalCqMeuH3Gi6GJ55CvEuObc_YLYESRPtPkC38N/s400/cloud+ktratboy+cropped.jpg
I then go back to blog with repeating graphic background (this is best done in a different tab of a web browser while signed into Blogger like FireFox with tabbed browsing. At the top of that blog, you will see the navbar with your email address, "New Post", "Customize", "Sign out".
Clicking on "Customize will take you to the LAYOUT. Click EDIT HTML and that will open the template editor window. Look for
body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
and somewhere after {body
create some space for the script to add the graphic background which should be
background-image:
url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZo04FAuSMn63MVGA_fN72aAMOe5H8PwHtTcTulVx5FfPZTpjsABg-60WmUaX_-N706nUlfvTsb9tjIj-OkJPC3cWqOadUQKdwmROHZcalCqMeuH3Gi6GJ55CvEuObc_YLYESRPtPkC38N/s400/cloud+ktratboy+cropped.jpg');
background-repeat: repeat
url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZo04FAuSMn63MVGA_fN72aAMOe5H8PwHtTcTulVx5FfPZTpjsABg-60WmUaX_-N706nUlfvTsb9tjIj-OkJPC3cWqOadUQKdwmROHZcalCqMeuH3Gi6GJ55CvEuObc_YLYESRPtPkC38N/s400/cloud+ktratboy+cropped.jpg');
background-repeat: repeat
and then that part of the template will become
body {
background:$bgcolor;
background-image:
url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZo04FAuSMn63MVGA_fN72aAMOe5H8PwHtTcTulVx5FfPZTpjsABg-60WmUaX_-N706nUlfvTsb9tjIj-OkJPC3cWqOadUQKdwmROHZcalCqMeuH3Gi6GJ55CvEuObc_YLYESRPtPkC38N/s400/cloud+ktratboy+cropped.jpg');
background-repeat: repeat
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
background:$bgcolor;
background-image:
url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZo04FAuSMn63MVGA_fN72aAMOe5H8PwHtTcTulVx5FfPZTpjsABg-60WmUaX_-N706nUlfvTsb9tjIj-OkJPC3cWqOadUQKdwmROHZcalCqMeuH3Gi6GJ55CvEuObc_YLYESRPtPkC38N/s400/cloud+ktratboy+cropped.jpg');
background-repeat: repeat
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
Thursday, September 20, 2007
Downloading and changing New Blogger template
A number of readers have been having problems downloading and installing templates from third party creaters and modifiers of New Blogger templates, so here is a post to explain the process.
Before I get to that, let me again repeat the importance of backing up your current template AND Page Elements before you change template. Refer to Backup New Blogger template PLUS Page Element and change template. This post will also show how to get to the template editor window.
Generally, 2 methods are offered. One, the one offered by Stavanger of Blogcrowd, gives the template which you have to copy and paste into the template editor window. For tasks like these, it is best you have a browser like FireFox which has tabbed browsing. Then you can be in the page with the new template in one tab and logged into Blogger in another tab in the same window.
In the box containing the new template, click inside the box, press ctrl+A (or right-click and chose "Select all") to highlight all the template, press ctrl+C (or right-click and chose "copy" to copy the new template into clipboard. Go the the Blogger template editor window, click inside the template editor window, press ctrl+A (or right-click on mouse and chose "Select all"). Press the DELETE key. The template window will now be empty. Click inside the empty template window, press ctrl+V (or right-click and select "Paste" to paste the new template from the clipboard into the empty template window. Preview, and if there is no problem, click "Save template.
In most cases, the template is downloaded and saved as an xml file. In this case, in the template editor, click "Browse" at the top of the page, navigate to where you saved the xml file, select it, click "Upload". When done, click VIEW BLOG to make sure everything is OK.
Any further problem, comment in this post and I may use your comment to make the above clearer.
Before I get to that, let me again repeat the importance of backing up your current template AND Page Elements before you change template. Refer to Backup New Blogger template PLUS Page Element and change template. This post will also show how to get to the template editor window.
Generally, 2 methods are offered. One, the one offered by Stavanger of Blogcrowd, gives the template which you have to copy and paste into the template editor window. For tasks like these, it is best you have a browser like FireFox which has tabbed browsing. Then you can be in the page with the new template in one tab and logged into Blogger in another tab in the same window.
In the box containing the new template, click inside the box, press ctrl+A (or right-click and chose "Select all") to highlight all the template, press ctrl+C (or right-click and chose "copy" to copy the new template into clipboard. Go the the Blogger template editor window, click inside the template editor window, press ctrl+A (or right-click on mouse and chose "Select all"). Press the DELETE key. The template window will now be empty. Click inside the empty template window, press ctrl+V (or right-click and select "Paste" to paste the new template from the clipboard into the empty template window. Preview, and if there is no problem, click "Save template.
In most cases, the template is downloaded and saved as an xml file. In this case, in the template editor, click "Browse" at the top of the page, navigate to where you saved the xml file, select it, click "Upload". When done, click VIEW BLOG to make sure everything is OK.
Any further problem, comment in this post and I may use your comment to make the above clearer.
Sunday, September 16, 2007
Change font size of blog footer
I did a test blog Test Footer Font Size. Note the size of the fonts in the footer.
The instrutions below will involve scanning through long line of codes in a template. See section on how you can find code easily at the bottom of the post if you have difficulties. Also, before you do anything to the template, always backup your template PLUS the Page Elements. See
Backup New Blogger template PLUS Page Elements and change template
Backup New Blogger template PLUS Page Elements and change template
Amazon computer products
To change the footer font size, sign into blogger.com (Dashboard). Click LAYOUT for the relevant blog, then under the TEMPLATE tab, click the EDIT HTML sub-tab. Look for block of codes that may look something like this (the exact code will depend on template. The one below is for the Blogger Minima template):
#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}
Just add a line
font-size: 400%;
so that the block of codes become
#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
font-size: 400%;
}
Preview and if everything seems OK, click "Save template".
NOTE: The font size can be in % or px (pixels). You may also use 250% or 18px. Experiment, preview until you get what you want before you save the template.
Do all the necessary editing and preview. If everything seem OK, click "Save template" and VIEW BLOG" to ensure everything is OK
If this method don't work, click on the inside of the template editor window and press ctrl+A (or right-click and chose "Select all") to highlight all the template. Click ctrl+C (or right-click and chose "copy") to copy the template into clipboard, open a Notepad file, click ctrl+A again (or right-click and chose "Select all"), then click EDIT > FIND in the menu bar of Notepad at the top (or press ctrl+F), and in the "pop-up" FIND box, type or copy all or part of the code into the box and click "Find Next" and again the code you are looking for will be located and highlighted (see screenshot below):
Do whatever editing you need to do, then press ctrl+A (or right-click and chose "Select all") to highlight all the edited template in Notepad to copy into clipboard. Go back to the template editor. The whole unedited template should still be highlighted. Click the DELETE key and the template editor window will become empty. Paste the edited template into the empty template editor window, preview, then save.
The instrutions below will involve scanning through long line of codes in a template. See section on how you can find code easily at the bottom of the post if you have difficulties. Also, before you do anything to the template, always backup your template PLUS the Page Elements. See
Backup New Blogger template PLUS Page Elements and change template
Backup New Blogger template PLUS Page Elements and change template
Amazon computer products
To change the footer font size, sign into blogger.com (Dashboard). Click LAYOUT for the relevant blog, then under the TEMPLATE tab, click the EDIT HTML sub-tab. Look for block of codes that may look something like this (the exact code will depend on template. The one below is for the Blogger Minima template):
#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}
Just add a line
font-size: 400%;
so that the block of codes become
#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
font-size: 400%;
}
Preview and if everything seems OK, click "Save template".
NOTE: The font size can be in % or px (pixels). You may also use 250% or 18px. Experiment, preview until you get what you want before you save the template.
How to easily locate the code you are looking for
To make your task of scanning the long lines of codes in the template, press ctrl+F and a Find [ ] will appear at the left of bottom of the browser. Tpye all or part of the code you are looking for and the scrollbar will scroll down to the part where the code is located and highlight it. See screenshot below:
Do all the necessary editing and preview. If everything seem OK, click "Save template" and VIEW BLOG" to ensure everything is OK
If this method don't work, click on the inside of the template editor window and press ctrl+A (or right-click and chose "Select all") to highlight all the template. Click ctrl+C (or right-click and chose "copy") to copy the template into clipboard, open a Notepad file, click ctrl+A again (or right-click and chose "Select all"), then click EDIT > FIND in the menu bar of Notepad at the top (or press ctrl+F), and in the "pop-up" FIND box, type or copy all or part of the code into the box and click "Find Next" and again the code you are looking for will be located and highlighted (see screenshot below):
Do whatever editing you need to do, then press ctrl+A (or right-click and chose "Select all") to highlight all the edited template in Notepad to copy into clipboard. Go back to the template editor. The whole unedited template should still be highlighted. Click the DELETE key and the template editor window will become empty. Paste the edited template into the empty template editor window, preview, then save.
Wednesday, August 29, 2007
Remove 'pencil' and 'screwdriver and wrench (spanner)' quick editing icons permanently
(If you only want to know how to permanently get rid of those quick editing icons, skip this and go to the bottom of the post)
We have received numerous complaints of bloggers seeing those "irritating" quick editing icons - the pencil
quick edit icon for the posts, and the screwdriver and wrench (spanner) 
quick editing icon for the Page Elements (widgets). Personally they don't irritate me at all.
To me, these are really useful features, especially if you put a lot of HTML/Javascript Page Elements and you don't type a title for the Page Element (which is the norm). In the LAYOUT, they will all read "HTML/Javascript" and there is no way for you to tell which HTML/Javascript is for what unless you click on EDIT to look at what is inside. On the other hand, if you are logged in and you go the the blog, you will know exactly which Page Element you want to edit/delete and all you have to do is to click the icon and you will be editing/deleting the Page Element you want to edit/delete.
Further, they are only visible to me when I am logged into Blogger. No one else will see it. I have written about it before at How to get rid of the irritating "pencil" and "screwdriver and wrench (spanner)" quick edit icons (click BACK button to get back to this page). This however don't seem to satisfy some bloggers, especially those who have private blogs and can view their blogs only when they are logged in.
Here is one comment from a particularly irritated blogger:
"Okay 300 ducats to cooked art, his method worked. The other anwers are basically saying, 'Don't worry -- nobody who uses your blog will see these eyesores but you.' Which seems like an odd thing to tell me, since I will be using my blog more than anyone else, and I don't actually enjoy looking at eyesores any more than they would."
OK, if getting rid permanently of those very useful quick edit icons is what you want, here is how you can do it:
If you face difficulties finding that line of code, press ctrl+F and you will see a "Find" followed by a box for you to type or copy-paste what you want to find. Type or copy-paste the above line of code into the box and click "Next". The scroll bar will scroll down to the line and the line will be highlighted. Use your mouse to highlight that line of code again and press the DELETE key. Preview, and if you don't get any error message, click "Save Template". You will never see the "irritating" (to me, useful") screwdriver and wrench icons again.
We have received numerous complaints of bloggers seeing those "irritating" quick editing icons - the pencil
quick edit icon for the posts, and the screwdriver and wrench (spanner) 
quick editing icon for the Page Elements (widgets). Personally they don't irritate me at all.
To me, these are really useful features, especially if you put a lot of HTML/Javascript Page Elements and you don't type a title for the Page Element (which is the norm). In the LAYOUT, they will all read "HTML/Javascript" and there is no way for you to tell which HTML/Javascript is for what unless you click on EDIT to look at what is inside. On the other hand, if you are logged in and you go the the blog, you will know exactly which Page Element you want to edit/delete and all you have to do is to click the
icon and you will be editing/deleting the Page Element you want to edit/delete.
Further, they are only visible to me when I am logged into Blogger. No one else will see it. I have written about it before at How to get rid of the irritating "pencil" and "screwdriver and wrench (spanner)" quick edit icons (click BACK button to get back to this page). This however don't seem to satisfy some bloggers, especially those who have private blogs and can view their blogs only when they are logged in.
Here is one comment from a particularly irritated blogger:
"Okay 300 ducats to cooked art, his method worked. The other anwers are basically saying, 'Don't worry -- nobody who uses your blog will see these eyesores but you.' Which seems like an odd thing to tell me, since I will be using my blog more than anyone else, and I don't actually enjoy looking at eyesores any more than they would."
OK, if getting rid permanently of those very useful quick edit icons is what you want, here is how you can do it:
Permanently get rid of quick editing Pencil icon for posts
Sign into Blogger (Dashboard), click SETTINGS for the relevant blog and you will be in the SETTINGS > BASIC sub-tab by default. Just a bit down from the top of the page, you will see "Show Quick Editing on your Blog?". Click the down arrow and select "No" At the bottom, click "Save Settings". (Warning: There is a button "Delete this blog" very near that "Save Settings" button, and it is not uncommon to hear of bloggers who accidentally deleted their blog this way). Once you have done that, you will never see the quick editing Pencil icon again.Permanently get rid of quick edit screwdriver and wrench (spanner) icons for Page Elements (widgets)
Sign into Blogger (Dashboard). Click LAYOUT for the relevant blog. Click TEMPLATE tab, followed by EDIT HTML sub-tab. Before you do any editing of the template, backup the template PLUS the Page Elements. See Backup and edit New Blogger template PLUS backup Page Elements. Once you are done with that, you will still be in the template editor window. Tick the "Expand widget templates" box and wait for the template to fully expand. Then look for this line of code:If you face difficulties finding that line of code, press ctrl+F and you will see a "Find" followed by a box for you to type or copy-paste what you want to find. Type or copy-paste the above line of code into the box and click "Next". The scroll bar will scroll down to the line and the line will be highlighted. Use your mouse to highlight that line of code again and press the DELETE key. Preview, and if you don't get any error message, click "Save Template". You will never see the "irritating" (to me, useful") screwdriver and wrench icons again.
Thursday, August 23, 2007
Change blog title from all uppercase to only first alphabet uppercase
The previous post Change blog title from all uppercase to all lowercase or vice-versa (click BACK button to get back to this page). This post will describe how to change a blog which has its blog title all in all uppercase to only the first alphabet of a word in uppercase, with the rest in lowercase.
This has been tested on the blog Natural Remedies which you will notice have only the first alphabet of the blog title and description in uppercase. Previously, the blog Header looked like this:
This was how the blog title and description was changed to only the first alphabet in uppercase. Before you do anything with the template, it is always wise to backup your current template PLUS the Page Elements as described in Backup New Blogger template plus Page Elements and edit template. When you are finished with what the above post instructed, you will still be in the template editor. Look for this block of codes:
#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}
Add a line
p:first-letter
to the block of codes so that it become
#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
p:first-letter
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}
For the blog description, look for this block of codes:
#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:700px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}
Just as above, add the line
p:first-letter
so that the block of codes become
#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:700px;
p:first-letter
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}
Preview, and if everything is OK, save the template.
NOTE: Both the examples in the previous post Change blog title from all uppercase to all lowercase (click BACK button to get back to this page) and this post use New Blogger Minima template modified to 3 column by Hackosphere (click BACK button to get back to this page). If you are using a different template, the codes may be different or the particular lines may be missing altogether. If so, just add the necessary lines in.
This has been tested on the blog Natural Remedies which you will notice have only the first alphabet of the blog title and description in uppercase. Previously, the blog Header looked like this:
This was how the blog title and description was changed to only the first alphabet in uppercase. Before you do anything with the template, it is always wise to backup your current template PLUS the Page Elements as described in Backup New Blogger template plus Page Elements and edit template. When you are finished with what the above post instructed, you will still be in the template editor. Look for this block of codes:
#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}
Add a line
p:first-letter
to the block of codes so that it become
#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
p:first-letter
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}
For the blog description, look for this block of codes:
#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:700px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}
Just as above, add the line
p:first-letter
so that the block of codes become
#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:700px;
p:first-letter
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}
Preview, and if everything is OK, save the template.
NOTE: Both the examples in the previous post Change blog title from all uppercase to all lowercase (click BACK button to get back to this page) and this post use New Blogger Minima template modified to 3 column by Hackosphere (click BACK button to get back to this page). If you are using a different template, the codes may be different or the particular lines may be missing altogether. If so, just add the necessary lines in.
Tuesday, August 21, 2007
Change blog title from upper case to lower case or vice versa
I use New Blogger Minima template modified to 3 column by Hackosphere (click BACK button to get back to this page) for my blog Generating revenue from your blog. Originally, the blog text title is all in uppercase font. Below is a screenshot of what it used to be:
This is how I changed the blog text title to lowercase font. I sign into Blogger (Dashboard) and see a list of blogs including "Generating Revenue from your Website". At that section, I click on LAYOUT, then click the TEMPLATE tab. Whenever, your make any changes to the template, it is always wise to backup your current template AND the Page Elements. Refer to Backup your New Blogger template PLUS Page Elements and edit the template. This is all explained in that post. After you have backup your template, you will still be in the template editor window. Look for this block of code:
#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}
This is what is originally in the template. Note in particular this line:
text-transform:uppercase;
If you want to change the blog title font to lowercase, just change the line to
text-transform:lowercase;
so that the block of code become
#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:lowercase;
letter-spacing:.2em;
font: $pagetitlefont;
}
Preview, and if you are happy with the result, click "Save template".
Different templates may have different #header. Yours may not have the line
text-transform:uppercase;
If so, and you want it in lower case, just add the line
text-transform:lowercase;
Just do the opposite of the above if your blog title font is in lowercase and you want to change it to uppercase.
This is how I changed the blog text title to lowercase font. I sign into Blogger (Dashboard) and see a list of blogs including "Generating Revenue from your Website". At that section, I click on LAYOUT, then click the TEMPLATE tab. Whenever, your make any changes to the template, it is always wise to backup your current template AND the Page Elements. Refer to Backup your New Blogger template PLUS Page Elements and edit the template. This is all explained in that post. After you have backup your template, you will still be in the template editor window. Look for this block of code:
#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}
This is what is originally in the template. Note in particular this line:
text-transform:uppercase;
If you want to change the blog title font to lowercase, just change the line to
text-transform:lowercase;
so that the block of code become
#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:lowercase;
letter-spacing:.2em;
font: $pagetitlefont;
}
Preview, and if you are happy with the result, click "Save template".
Different templates may have different #header. Yours may not have the line
text-transform:uppercase;
If so, and you want it in lower case, just add the line
text-transform:lowercase;
Just do the opposite of the above if your blog title font is in lowercase and you want to change it to uppercase.
Saturday, July 21, 2007
Why I prefer 3 column templates for my blogs
The section of your blog above the fold (what you visitor see without have to scroll down vertically) is the most important part of your blog. Businessmen like ground floor shop space, and that section above the fold is like ground floor shop space. Just as shoppers are lazy to walk up the stairs the second floor (the third floor would be worst), surfers are often lazy to scroll down your site to see the rest of the page and will quickly surf away if nothing catch their eye. So depending on what your objectives are, you should try to put what you want your visitors to see first above the fold. And the best way for you to do this is to use a 3 column template and not use a deep graphic Header that takes up most of the space above the fold. You may find it makes your blog attractive, but you will be unable to put many things above the fold.
Sometimes you are forced to compromise, like I compromised by putting a sitesearch box at the top of the main column above the post. But I feel it is useful because visitors can't miss that and hopefully they will use it to find topics in my blog and thus stay in this blog longer than otherwise. I think it is a worthwhile sacrifice. If you want a similar sitesearch box, you will need a Google AdSense account. You can apply for one via the "Generate revenue from your website. Google AdSense" text link at the top of the right sidebar of most of my blogs, including this one. (sorry, I got mixed up with my other blogs. I was forced to put it in the Header section because I set it so that visitors can search the web, this blog as well as 2 related blogs of mine. This made it too wide for it to fit into the main column)
If you want the sitesearch box for your blog, these posts may help you add implement it:
Add search box, AdSense ads, "stick post" at the top of main column (click BACK button to get back to this page)
Generate script for Google search box
Blending colors of your Google search box with the colors of your site
Add searchbox, graphic, AdSense ads unit or link unit, etc, to blog Header.
Plus here are some sources and demonstration blogs of 3 column New Blogger templates:
(click BACK button to get back to this page:
New Blogger template modified by Stavanger
Dots New Blogger template with Header
New Blogger templates modified by Ramani
New Blogger templates by Isnaini
New Blogger templates by Thur
Ramani's New Blogger Neo template
New Blogger template by Final Sense
If you want to do something
I think 3 column is useful as it helps you put more stuff above the fold (what you visitor see without have to scroll down vertically) that is helpful. I suggest you start using labels and then add a Label List to the first left column. Helps your visitors find relevant new/old posts quickly (I put Labels (Categories)) when I add a Label List as other bloggers using different blogging platform are more familiar with the term categories.
It is probably possible to get rid of one sidebar with some tinkering of the CSS and if you don't want to have an empty space in its place, you will have to change the main column and sidebar widths plus do some calculations. As I am a 3 column addict, I have no interest in trying and lots of other things to do. I hope you accept my suggestion above as I really think 3 column is very useful. Many surfers are lazy and if they don't see the thing they are looking for when they first land on your blog, they will quickly surf away without bothering to scroll down to see what else is there in the rest of the page below the fold.
Sometimes you are forced to compromise, like I compromised by putting a sitesearch box at the top of the main column above the post. But I feel it is useful because visitors can't miss that and hopefully they will use it to find topics in my blog and thus stay in this blog longer than otherwise. I think it is a worthwhile sacrifice. If you want a similar sitesearch box, you will need a Google AdSense account. You can apply for one via the "Generate revenue from your website. Google AdSense" text link at the top of the right sidebar of most of my blogs, including this one. (sorry, I got mixed up with my other blogs. I was forced to put it in the Header section because I set it so that visitors can search the web, this blog as well as 2 related blogs of mine. This made it too wide for it to fit into the main column)
If you want the sitesearch box for your blog, these posts may help you add implement it:
Add search box, AdSense ads, "stick post" at the top of main column (click BACK button to get back to this page)
Generate script for Google search box
Blending colors of your Google search box with the colors of your site
Add searchbox, graphic, AdSense ads unit or link unit, etc, to blog Header.
Plus here are some sources and demonstration blogs of 3 column New Blogger templates:
(click BACK button to get back to this page:
New Blogger template modified by Stavanger
Dots New Blogger template with Header
New Blogger templates modified by Ramani
New Blogger templates by Isnaini
New Blogger templates by Thur
Ramani's New Blogger Neo template
New Blogger template by Final Sense
If you want to do something
I think 3 column is useful as it helps you put more stuff above the fold (what you visitor see without have to scroll down vertically) that is helpful. I suggest you start using labels and then add a Label List to the first left column. Helps your visitors find relevant new/old posts quickly (I put Labels (Categories)) when I add a Label List as other bloggers using different blogging platform are more familiar with the term categories.
It is probably possible to get rid of one sidebar with some tinkering of the CSS and if you don't want to have an empty space in its place, you will have to change the main column and sidebar widths plus do some calculations. As I am a 3 column addict, I have no interest in trying and lots of other things to do. I hope you accept my suggestion above as I really think 3 column is very useful. Many surfers are lazy and if they don't see the thing they are looking for when they first land on your blog, they will quickly surf away without bothering to scroll down to see what else is there in the rest of the page below the fold.
Wednesday, July 11, 2007
Change background color or image of main column of blog
Blog reader asked this question and I figure I might as well answer in a post.
(This is for the standard Blogger Minima template. Wordings may be slightly different for different template but will be mainly similar)
Add any of this to the block of codes:
background:pink;
background:blue;
background:#D4FFFF;
etc.
The last will give you a greater choice of color. For the last example which use HTML color code, you can get much help using the free ColorPic tool. I used it frequently. You can Google for it by typing the search term "colorpic" or "color picker" into the search bar above (tick "Web").
After addition, the block of code may now look something like this:
Then add this line of code into the blocks mentioned above:
background: url(photo URL);
So the block of codes become:
If add a background image, you ask yourself if it will increase loading time too much, weather text and other images will be visible or look good with it, etc. Not everyone is on broadband. Some still use dialup
Add/Change background color of main column (posts)
To change the background color of ONLY the main column (posts), sign into Dashboard, click LAYOUT in the section for the relevant blog, click EDIT HTML sub-tab to open the template editor window. Look for this block of codes in the template:#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 */
}
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 */
}
(This is for the standard Blogger Minima template. Wordings may be slightly different for different template but will be mainly similar)
Add any of this to the block of codes:
background:pink;
background:blue;
background:#D4FFFF;
etc.
The last will give you a greater choice of color. For the last example which use HTML color code, you can get much help using the free ColorPic tool. I used it frequently. You can Google for it by typing the search term "colorpic" or "color picker" into the search bar above (tick "Web").
After addition, the block of code may now look something like this:
#main-wrapper {
background:#D4FFFF;
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 */
}
background:#D4FFFF;
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 */
}
Add background image to main column (posts)
Do exactly as above, but this time, upload the image to the web either using the free Photobucket or use Blogger to host the image as described in this post Use New Blogger to host your pictures for the profile photo, sidebar, blog Header, etc.. Get the photo URL.Then add this line of code into the blocks mentioned above:
background: url(photo URL);
So the block of codes become:
#main-wrapper {
background: url(photo URL);
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 */ }
background: url(photo URL);
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 */ }
If add a background image, you ask yourself if it will increase loading time too much, weather text and other images will be visible or look good with it, etc. Not everyone is on broadband. Some still use dialup
Friday, July 06, 2007
Incorporate AdSense ads in post and wrap text around ad
Please note that in 
the l is a L and not 1 (one) and the 
is a ! (exclamation mark).
Important note: Before you make any changes to your template, always backup your current template PLUS Page Elements first. Refer to Backing up and changing New Blogger template.
There are more than one methods. I tested a method at Fish and Fishing and another method at Internet Tips and Tricks. I shall describe the methods below:
Wrapping text around AdSense ads by replacing
the l is a L and not 1 (one) and the 
is a ! (exclamation mark).
Important note: Before you make any changes to your template, always backup your current template PLUS Page Elements first. Refer to Backing up and changing New Blogger template.
There are more than one methods. I tested a method at Fish and Fishing and another method at Internet Tips and Tricks. I shall describe the methods below:
Wrapping text around AdSense ads by replacing
Replace with
Then add table tags in before and after the AdSense script so that it become
|
|
Preview and if satisfied, click "Save template"
Removing the comment tags
Another way is to remove the comment tags completely, which was the method I used for Internet Tips and Tricks. In this case, from the code#main { float: left; width: 440px; margin: 5px; padding: 0px 5px 0px 0px;
this shows the width of the main column is only 440 pixels wide. So this time I chose the 250x250 Square format. The method is exactly the same as above, but instead of replacing Replace with
, I just removed the comment tags completely, so that what I have is as shown below (with the to emphasise where the script should be placed):
As usual, preview, and if satisfied, click "Save template".
Note: AdSense only allow 3 AdSense for Content units per page. So if you incorporate the unit into the post, theoretically, you will have one AdSense units in each post. So if you have the default 7 posts for the main page, you will have 7 AdSense units in each posts plus any other Ad units in the sidebar/s and/or footer and/or Header. AdSense suppresses any excess units so that only the first 3 units (which 3 depends on your template) are displayed. For most of my blogs, only the first 3 units in the first 3 posts will get displayed and if I have skyscraper unit in my sidebar and leaderboard unit in the footer, these plus the ad units in the rest of the posts will be suppressed. It is only when you are in an individual post page (permalink) where there is only one post that the skyscraper unit in the sidebar and the leaderboard unit in the footer plus that one unit in the post get displayed. I have tried this once for one blog and asked AdSense Support if it is OK and their response was that it is OK for THAT blog. They left the question about applying the same thing to other blogs hanging, so one doesn't know if we have to ask each time we apply the same thing to other blogs.
If you want to be safe, you may want to set the main page to display less posts in the main page, etc., or write to AdSense Support for clarifications.
Acknowledgement: The idea of using was obtained from Wrap text around Google AdSense but was modified and an alternative way was presented. Further, she used an image to display the HTML which means you can't copy the HTML direct from the site. I use special codes to display the HTML characters so that you can copy the HTML direct from this site to use for your hack.
|
|
As usual, preview, and if satisfied, click "Save template".
Note: AdSense only allow 3 AdSense for Content units per page. So if you incorporate the unit into the post, theoretically, you will have one AdSense units in each post. So if you have the default 7 posts for the main page, you will have 7 AdSense units in each posts plus any other Ad units in the sidebar/s and/or footer and/or Header. AdSense suppresses any excess units so that only the first 3 units (which 3 depends on your template) are displayed. For most of my blogs, only the first 3 units in the first 3 posts will get displayed and if I have skyscraper unit in my sidebar and leaderboard unit in the footer, these plus the ad units in the rest of the posts will be suppressed. It is only when you are in an individual post page (permalink) where there is only one post that the skyscraper unit in the sidebar and the leaderboard unit in the footer plus that one unit in the post get displayed. I have tried this once for one blog and asked AdSense Support if it is OK and their response was that it is OK for THAT blog. They left the question about applying the same thing to other blogs hanging, so one doesn't know if we have to ask each time we apply the same thing to other blogs.
If you want to be safe, you may want to set the main page to display less posts in the main page, etc., or write to AdSense Support for clarifications.
Acknowledgement: The idea of using
Posts
No comments:
Post a Comment