Blogger Templates

I switched to Green Marinee weeks ago, but I'm still not quite down with customizations. Today I tweak the template a bit to monetize this blog and integrate Google Adsense. I won't go through all the technical details and how to, its all already documented under hacks and Google Adsense. Basically you need to run the Adsense code through our HTML Parser.

You can see I have a 468px ad running across the top. At first I was going for a square ad floated left of the content for better exposure like at my other blog Blogging2.0. However the square no matter what the size always cause some issues with the design of the blog. I rather have no ads at all rather than ad that 'break' my template. This brings me to another point, for better click through rates its advised to have the ads as much like normal content as possible. Having the link the same color as normal link and background color with no border like normal background are very important.

This ad thing is really demands lots of changes doesn't it? To accommodate the horizontal ad, I had to move my meta information like labels, authors, etc to the body of each post when the coment was. I increased the font size and added a green boarder running across the top to seperate the meta info from the body of each blog entry. Overall I'm pretty pleased with this change as it blend in with Green Marinee's design characteristics.

Finally, I also added a Adsense Referral ink at botom on each page. Don't see it? That's because I only added to the subpages that shows individual post? How did I do that? Well, just wrap whatever you want in subpages inside

<b:if cond='data:blog.pageType == "item"'></b:if>

So, you can see in the May the 4th be with you post that we recommend you to use Google Adsense

That's it for this customization, undoubtedly I will tweak this template a lot more but that's all for now. Good night!

For better formatting see article mirrored.

As previously posted and mirrored here, the only way to insert adsense into the body of the post is to escape the Adsense code; meaning replace all the special characters with HTML entities, for example '<' with < '>' with > So, your Adsense code may look like this in the beginning:

<script type="text/javascript"><!--
google_ad_client = "pub-xxxxxxxxxxxxxxxxx";
google_ad_width = 728;
google_ad_height = 90;
google_ad_format = "728x90_as";
google_ad_type = "text_image";
google_ad_channel ="";
google_color_border = "F15005";
google_color_bg = "F15005";
google_color_link = "FFFFFF";
google_color_text = "FFFFFF";
google_color_url = "FFFFFF";
//--></script>

<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

And end up look like to be accepted by Blogger XML Template:

&lt;script type="text/javascript"&gt;<!--
google_ad_client = "pub-xxxxxxxxxxxxxxxxx";
google_ad_width = 728;
google_ad_height = 90;
google_ad_format = "728x90_as";
google_ad_type = "text_image";
google_ad_channel ="";
google_color_border = "F15005";
google_color_bg = "F15005";
google_color_link = "FFFFFF";
google_color_text = "FFFFFF";
google_color_url = "FFFFFF";
//--&gt;</script&gt;

<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"&gt;
</script&gt;

I have a special web application specifically designed to do this, see my HTML Parser here.

There are some concerns though both from other bloggers as well as myself as to if the above would be violation of tempering Adsense code as state in the TOS. So, I contacted Google Adsense Team through several emails and here they are in chronological order:

Hello Adsense Team:

This question is regarding putting Google Adsense code in new Blogger(owned by Google) into new XML templates. In order for Blogger to parse the Adsense Code in XML template, the Javascript has to be escaped, meaning replacing all the '<' with '<', '>' with '>' etc. After you publish you blog, and view the HTML code produced by the blogger, it would be the exactly the same as given from the Adsense generator. Would this be tampering of code even if the final displayed Adsense code is the same?

Thank you,
Regards

Initial email, stating the issue

Hi,

You are permitted to make minor edits in Blogger Beta. However, please keep in mind that in general publishers are not allowed to alter the AdSense ad code for any reason. Once you've generated the ad code in your AdSense account pages, you may not alter any portion of the code or manually change the layout of the ads.

Thanks for your understanding.
Sincerely,

The Google AdSense Team

mmm, kind of ambiguous, what exactly are the minor edits? So here is the follow up email

Hello:

Thank you for your reply, however I find your answer ambiguous. First you
mentioned minor edits for BLOGGER BETA is allowed and then GENERAL PUBLISHERS are not allowed to alter the generated Adsense code.

Is the 'minor' edits of escaping HTML entities for XML parsing allowed as long as when displayed in HTML the adsense code is exactly the same as given from the Adsense generator?

Sorry for asking again, I just don't want to violate the Google Adsense TOS. Thanks for you consideration and all your help.

Thank you
Regards

And this is the answer

Hi,

To clarify, while you are permitted to make minor edits in Blogger Beta, to allow the ad implementations to function properly, you are not permitted to alter the code for the purposes of changing size, font or hiding the Ads by Google logo.

Thanks for your understanding.
Sincerely,

The Google AdSense Team


There you go, AdSense does not clearly state anything however from these email I conclude that replacing special characters with HTML entity are allowed. Since Adsense won't give a clear rule, here is my own:

Minor edits on Google Adsense Code for Blogger Beta/XML are allowed as long as the resulting Adsense Code generated by Blogger is exactly the same as given from Google Adsense Code Generator.

This means if you goto your blog, eg. http://customtemplates.blogspot.com/
and click View --> Page Source (Firefox) or View --> Source (IE), the Adsense Code there should be exactly the same as given from Google Adsense Code regardless of what you put in your Edit HTML section in Blogger.

To parse your Adsense click here and for information on adsense placement see this article. More information & placement positions are coming.

Have you ever tried to insert the Google Adsense code directly into your Blogger XML Template and get this error?

Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly. XML error message: The processing instruction target matching "[xX][mM][lL]" is not allowed.

So, you resolve to insert the Adsense code using blogger widgets. However that means your widgets can not appear within each post, the best spots to place your ads. Don't worry, there is a way of inserting Adsense code straight into your XML templates.

Since Blogger started using XML everything is more strict and standardized. The above error simply mean the Adsense code is not standized XML and solve it we need to replace all the html character such as '<' with '>' '"' with '"' please read this article.

The new Blogger is built around their new widgets. Widgets makes managing long list of links, profile, layout of your template etc easier with no HTML knowledge required. Widgets also make the template code much cleaner by saving all the necessary code on Blogger servers. However, this does present a problem if you constantly change your template like I do as simply backing up your template won't work if the widgets are deleted on the Blogger server. Many people re-populate their entire link list manually, fortunately, there is a way of saving your Widgets.


What Not To Do
The trick of course to saving your Widgets of course is never delete them, which means do not use the upload button in your Beta Template section and if you ever see the scary warning that Widget are about to be deleted, cancel whatever you did immediately.




The Correct Way
So, if you can't upload your template straight into Beta what should you do?

1) Make sure you template is in Expanded Widget mode.

2) Find your widgets and copy them from the to the very next , put it in your text editor or something for use later. Make sure you get all your widgets, you don't need to copy your header or body widgets as they are suppose to be universal across all templates



3) Open the template you want to switch to and delete your old template (back it up first if needed) and paste your new template into the edit HTML section

4) Find where you want to put the widgets, most commonly sidebars, and paste the widget code you had earlier between the and , this is very important.

5) Preview your template to make sure everything look good, save it and you are done!


I know this is probably a lot more work than you would do otherwise, but it save a lot of time if you have to type all your links over again.

Thanks, hope its helpful, article also mirrored here

This is completely outdated, there is a far more efficient technique available just insert

#navbar-iframe{
visibility: hidden;
display: none;
}

Somewhere in your css styling.

Update for the previous Blogger Beta nav Bar hack step #3. Instead of of step #3, you should change whatever the container of the entire page is to its original. Then add this to the styling css:

#center{
position:absolute;
z-index:20000 !important;
top:0px;
left:0px;
}

then in the html add the following to the beggining of all your content <div id="center"> and </div> to the end of all your content.

For more information and tips & tricks please visit again soon or sign up at Blogcrowds.com.

This is completely outdated, there is a far more efficient technique available just insert

#navbar-iframe{
visibility: hidden;
display: none;
}

Somewhere in your css styling.

By now everyone has probably heard of new Blogger Beta. I personally didn't sign up until someone asked me for Beta assistance. One of his problem is that the usual code (visibility:hidden) used to hide the navigation bar does not work in beta. So,I approached this problem and found out that Blogger Beta linked the nav bar in iframe with external CSS instead of a hude jumbo of javascript and any code you add does no effect the nav bar styling.

So, I took a different approach and decided to block it instead, so here is what I came up with, please do not copy anything in red, they are comments:


1.) Add the following to the css styling

#block{
width:100%;
height:40px;
background-color:rgb(232, 234, 236); change to your own background color
z-index:10000 !important;
position:absolute;
top:0 !important;
left:0 !important;
}

2.) Add the following anywhere in your body tag

<div id="block"></div>

3.) This step is optional and needed to be changed for your own template

#container{ or whatever that wraps around the content
position:absolute;
z-index:20000 !important;
top:5px;
left:110px;
rest of your styling goes here
}

The top and left property may need to be adjusted. Please note, this technique will not center the content in all browser resolutions, I'll come up with a solution shortly(I already have something in mind, just needs to be tested first).

Please credit this hack to me, and for more information and tips & tricks please visit again soon or sign up at Blogcrowds.com.

I want to conclude to say that I came up with this hack merely because someone asked me to solve a problem, I have no problem with the Blogger nav bar, I show the Blogger nav bar in all my blogs and use it quite often :).