Rounders, Adsense and New Blogger

Google says placing Adsense above the fold so that ads are prominently displayed produces the best results. I've found that the link unit 728x15 ad like you see in Blogatech's header above is the most profitable on this site. In this post I will show you how to place a 728x90 Leaderboard or 728x15 link unit ad in New Blogger's Rounders template between the header and main post area like shown below:

!!Before making any revisions to your template be sure you have a back-up copy!!

You will need to create a CSS element that formats the placement and color attributes for your ad. I call this #Goog. and it will need to be added into the style sheet section of your template. If your not familiar with this part of the New Blogger layouts type template, it is towards the top and comprises a large portion of the code. It begins with this opening tag:
<b:skin><![CDATA[/*
and ends with
]]>
You can add the following CSS anywhere in this section as long as it's after a closing bracket }.

Use this CSS for a 728x90 Leaderboard Ad:

#goog {
height: 90px;
margin-bottom: 4px;
margin-top: 15px;
padding-top: 3px;
background: #FFFFFF;
}

Use this CSS for a 728x15 Link Unit Ad:

#goog {
height: 20px;
margin-bottom: 4px;
margin-top: 15px;
padding-top: 3px;
background: #FFFFFF;
}

The background color code above is white but can be replaced with a color code that matches your Google ad. See this page for color codes.

Once you have inserted the above CSS, you will need to create the Goog division inside the HTML portion of the template. Locate the portion of code in your template shown in black below and add the lines shown in red:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1'>
<b:widget id='Header1' locked='true' title='testing (Header)' type='Header'/>
</b:section>
</div>
<div id="goog">
Your Parsed Google Adsense Code Goes Here
</div>
<div id='main-wrap1'><div id='main-wrap2'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div<</div>

Assuming that you have already created your leaderboard ad, you would normally place the script that Adsense has given you between the two code lines in red above but with New Blogger you will have to take one more step. Since the new layouts template is constructed with XML which doesn't like Google's script, you will have to run it through Adsense parsing software such as found at the bottom of this page.
This program is just a quick way of removing all the special HTML characters.

You then take the newly generated Adsense script and paste it in the Goog division you created, which is between the two lines in red above. Review your changes and if everything is as you want, save your template and your done.


Technorati Tags: google adsense, new blogger, leaderboard ads

Publicize Your Blog Feed

FeedBurner's BuzzBoost gives you the means to publicize your feed and cross promote your blogs. BuzzBoost gives you a snipet of Javascript that you paste in your template to display from 1 to all of the current headings of your blog feed. It also gives you the option of displaying the entire html of your posts. I used to have a feed in the sidbar that showed the last five post titles of another blog of mine. It has since been removed following a site remodel but this feature has been tested in Blogger and works fine.

A great way to utilize this feature would be to burn a feed of your own Blogger Beta blog and display the last 10 posts in your sidebar as "Resent Posts" a feature that Blogger no longer has.

Since BuzzBoost can output the full HTML contents of your feed, you could easily use it to create "mobile edition" of your blog. You could even combine multiple BuzzBoost scripts on a single web page to bring related content together.

If you haven't used FeedBurner before it's very simple and free. Just sign-up and create a feed for your blog. You then click on it's title and a series of tab menus come up. Select the publicize tab and you will find details for BuzzBoost.

---

Technorati Tags: feedburner, buzzboost, the-t-shirt-blog

Add a Custom Header in New Blogger

This post will cover adding a custom header image to the New Version of Blogger. The one that features a layout with widgets. If your bog is using a "Classic" template you will want to read these posts instead.

If you are using New Blogger's Minima template this is the header you would have to start with:

Lets say you want to customize the standard header to a photo or graphic you created such as this:

You first want to upload your image to a hosting service so you will have an internet address for it. If your not familar with this process, read this post before you continue.

!Remember to make a backup copy of your template before making any changes!
Once you have the address of your image your next step is to set it as your headers background. This is done in the style sheet section of your template where the the code that formats the header resides. Note: the image your going to use should be 10px smaller than the width of the #header-wrapper. In the case of a standard Minima template this width is 660px, so you will want your image to be 650px wide. This adjustment is to allow for the set margins. You could also increase the width of the #header-wrapper to compensate. Be aware that the #header and #header-wrapper are two different elements.

The CSS:

#header {
margin: 5px;
border: 1px solid #cccccc;
text-align: center;
color:#666666;
}

We will add the following lines of code to the #header element:

background: url(http://your image address.jpg) no-repeat;
height: 130px;

Besides setting the background image, we added a height attribute equal to the height in pixels of our image. In our example it is 130px. I also suggest that you remove the border around the #header by changing the border attribute to 0px. You will also need to change the border setting of the #header-wrapper to 0px (not shown) This now gives us the following as the CSS for the entire #header element:

#header {
background: url(http://your image address.jpg) no-repeat;
height: 130px;
margin: 5px;
border: 0px solid #cccccc;
text-align: center;
color:#666666;
}

We are not done quite yet, we still need to make a change to the HTML portion of the template. When you created your blog you gave it a title and a description. These items can be changed under the settings menu and are automaticly added to your header. So that these items don't display on top of your newly created image, you want to eliminate them from the header. The best way to eliminate the description is to leave it blank under the settings menu. Blogger requires that you enter a title because not only does it display in the header but also at the top of your browser. In order to remove the title from the header you will need to go to the template section and with the "Expand Widget Templates" box checked, find the following code.

Notice that there is a H1 tag that displays your title, you will want to delete the entire tag contents as shown in red below:

Having made these changes be sure to save them and you will be good to go. To view the end results of this exercise in a New Blogger template Click Here.

---

Technorati Tags: blogger beta, new blogger, custom header