Create an animated advertising banner for your blog

Have you ever wondered how to create an animated banner to advertise your blog? Here's an example of one I created earlier:

You could use a banner like this to advertise your blog on other sites, or even to draw attention to pages on your blog.

I used AnimationOnline to create this banner for free. There are a variety of designs to choose from, including boxes such as these:

To create your animated banner, head over to AnimationOnline and choose your design. Key in your titles and text, and click "make banner". You can then right click your animated banner to save to your PC.

In order to display your banner properly in your blog, you'll need to link to host the image elsewhere and link to it using HTML code. Photobucket and Imageshack provide free image hosting if you don't already have a hosting account elsewhere. Don't try to host your animated gif at Blogger, as the image will be static! Make a note of the web address your image is hosted at as you'll need this soon.

Now, to make your image appear in your blog, you can insert this code into an HTML/Javascript widget, or insert into your template where you would like it to be displayed:

<img src="http://www.imagehost.com/yourimage.gif"/>

Don't forget to substitute the address with that of your hosted image!

If you want to link this image to your blog, you should also wrap link tags around the image tags like this:

<a href="http://yourblog.blogspot.com"><img src="http://www.imagehost.com/yourimage.gif"/></a>

Don't forget to substitute your own blog address!

Related posts:

• Get a free animated header for your blog

I'd love to hear about any other free animated banner services, so if you know of any please leave your link (and comments, of course) below.

Technorati Tags: animated | banner | advertising | blog | images |

Get a free animated header for your blog

Would you like an animated header for your blog like the one below?

Using the free service over at FlamingText.com, you can easily create an animated header in a variety of styles, sizes colours and fonts. You can also find glittery headings like this:

Just visit "headings" page and scroll down a little to see the animated design menu on the right of the screen (watch out for those pesky pop-ups though!).

Choose your style, font and colour scheme and click "generate" to be forwarded to your completed header. It usually takes up to 15 seconds for the page to load, so try to be patient. Once your header is on the screen, right click on the image to save it to your computer.

Unfortunately, if you upload your animation to the header widget in layouts, the image will be static. In order for your animated header to display properly in your blog, you'll need to upload it to a different server and link to it using HTML code. Photobucket and ImageShack both offer free hosting for images. Once you've uploaded your animated header, make a note of the exact web location as you'll need this shortly.

Now, you'll need to edit your blog template in order to create a new widget to replace your original blog header. Here's what you should do:

1. Go to Template>Edit HTML. Make a backup of your template before modifying anything just in case something goes wrong. Then tick the "expand widget templates" box.


2. Find the section in your blog template which begins with <div id="header-wrapper">. You'll see the following code just below:
   

   <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
   

   
   Change the maxwidgets to any number greater than 1, and alter the "showaddelement" to say "yes".


3. Save your template, and go to Template>Layout. You will notice that you can now add a page element to the header.


4. Add an HTML/Javascript element to the header section, and substitute the web address for the location of your animated header:
   <center><img src=http://www.imagehost.com/yourimage.gif"/></center>
   The <center> tags are there to ensure your header remains centralised in the layout. You can omit them if you prefer the header to float to the left.


5. Preview your blog to ensure the header looks as you would like it to. You'll see the original header is still in place.


6. If your new header suits your taste, you can then delete the original header, leaving only your new animated header in place. To do this, click on the header element and choose "delete page element".


7. Now all you have to do is enjoy your new blog header!

For more information about customising your blog header, take a look at this post which gives different options for customisation.

If you know of any other good sites for generating free animated headings, please leave your comments and a link below.

Technorati Tags: animated | header | heading | flash+header | blogger | template

How to upload Blogger XML templates

If you're bored of the generic templates supplied by Blogger, you can easily upload a customised XML template, such as the Blogger Buster templates found here. Here's a step by step guide.

1. Download your favorite Blogger XML template to your computer. If the template is contained in a zip file, ensure you have extracted the XML template.


2. Log in to your Blogger dashboard and go to Template> Edit HTML


3. Ensure you back up your old template in case you decide to use it again. To do this, click on the "download full template" link and save the file to your hard drive.


4. Look for the section near the top where you can browse for your XML template:
   


5. Enter the location of your template and press "upload".


6. The HTML of your new template will now appear in the box below. You can preview your template or simply save to start using it!

For more Blogger templates, try these sites:

• BlogFlux Blogger themes
• BlogCrowds
• Hackosphere

Technorati Tags: blogger | templates | 3+column | upload | XML

Customised 897 three column template download

I've customised the 897 Blogger template to feature 3 columns (instead of the usual two) which you can download for free here.

Here's a screenshot for you:

I've altered the sidebars so both are rounded, and have also taken care of the margins so the elements don't run into each other.

To download, right click the link below and choose "save as" to save the template to your computer. To upload the template to your blog, go to Template>Edit HTML and look for the section at the top where you can browse your hard drive for template files.

Download customised 897 three column template here

Please feel free to leave your comments and opinions below

Girly 3 column Blogger template download

Since there aren't many feminine Blogger templates around, I decided to create a rather girly 3 column template based on the 897 template. Sorry guys, this one's for the female bloggers!

Here's a screenshot for you:

I've also modified the template so that you can easily add elements to the header and main area in layouts, for example, to create your custom header design, or add a description to the top of your blog.

To download, right click the link below and choose "save as". To upload to your Blogger blog, go to Template>Edit HTML and look for the section near the top which says "Upload a template from your hard drive". Browse for the template and click upload. Then you can view your blog to see the changes.

Download "Amanda 3 column template" here.

If you use this template, I would be grateful if you would link back to Blogger Buster somewhere in your blog.

Feel free to leave your comments and opinions below.

Adsense beneath Blogger post titles or at end of posts

A key placement of AdSense is within the body of a blog post. You can easily feature ad units beneath every post title or at the end of each post by adding AdSense code to your templates HTML. Here's what to do to achieve this.

1. Log into your AdSense control panel and choose the ad unit you would like to be displayed. Be sure to keep the width of your posts in mind: some are wide enough to feature a 468x60px banner, while others may be restricted to the half-banner width of 234px.


2. Copy the code and paste into a text editor (such as Notepad). You'll need to change some of the characters in this code in order for it to display in your blog. Don't worry, this doesn't contravene Google's T&C's for AdSense, as I'll explain later.


3. Your code will look something like this:
   
   You'll need to change the < and > in red to the following:

   < = &lt ;
   > = &gt ;

4. Now, log in to your Blogger dashboard and go to Template>Edit HTML, and tick the "Expand widget templates" box. Ensure that you backup your template before making any changes.


5. Find this section of code using the search function of your browser (usually CTRL+F):

   <p><data:post.body/></p>



6. To feature ads immediately after your post titles, insert your AdSense code just before this section in your template. To feature ads at the end of every post, paste the code immediately after instead.


7. Save your template to see the ads in action!

Do be aware that if there are more than 3 ad units on a page, not all of the ads will be displayed; if you feature a number of ads on your main Blogger page, ads will not display in all of the posts, though they should be displayed on the post pages.

As I mentioned earlier, modifying the AdSense code in the way I have described will not contravene AdSense terms and conditions: all you are doing is substituting the < and > for the HTML encoding for these characters. When you look at the source code for the page, the AdSense code will display as it was originally written. This modification will not alter the functionality of the code at all, and ensures that it will be displayed. The code as first presented will not display in the body of Blogger posts!

For examples of how this code should be implemented into your blog template, take a look at this page (opens in a new window).

Next: How to display ads in the body of the post itself.

Technorati Tags: adsense post+titles blogger template

Adsense in Blogger posts (the basics!)

Like many bloggers, I see no harm in including AdSense (and affiliate ads) in my blog, as a way of making a little money to help me pay for my blogging costs. This short series of posts will explain methods you can use to feature AdSense in your Blogger blog, including how to feature ads in the body of your posts.

Google's AdSense seems to be the most popular system of advertising in blogs. This free service for web-publishers is easy to use, especially as ads are contextual (they change depending on the content of a particular page to display relevant ads for your readers). Most bloggers are eligible to sign up for AdSense, which you can do using this link.

Ensure you are aware of Google's policies for AdSense publishers, including sites which are prohibited from featuring AdSense, site and ad behaviour, and the number of ads allowed in a page.

How many ads can be displayed in a single page?

In any single web page, you can have:

• Up to three ad units
• Two AdSense for search boxes
• Up to three link units
• A maximum of three referral units

These regulations can be especially important for bloggers who choose to include ads in their posts, since the main page of your blog can feature a number of posts, and you cannot feature ad units in all of them. However, there are methods of displaying ads in posts only on post pages, as I will explain in a later installment.

How does Google decide which ads to display?

Keywords from your title and blog posts are used to determine the most relevant ads to display. It's best to try and keep each blog post on one particular subject and include relevant keywords in the title and at least a few times in the article itself. Problogger features some great advice on ensuring relevant ads are displayed on your site.

How do I place ads in my blog?

Blogger now has widgets you can use to include AdSense in your sidebar. You can configure the colour schemes and size of these ads to suit those of your blog.

Alternatively, log in to your AdSense control panel and click on the "AdSense setup" tab at the top of the page. You can then choose the type of ad you wish to use and get the relevant code, which you should then paste into your template where you would like the ad to be displayed.

Next: How to display ads beneath post titles or at the bottom of posts.

Technorati Tags: google adsense blogger advertising