Weekend Project: Rotate those Banners!
June 17, 2011
Have you ever considered having your banner change each time your blog is loaded? Ever created two or more banners you absolutely love, which perfectly fit your blog, but then had a terrible time choosing which banner you should use?
With this Weekend Project, you won't have that problem!
Here's what you'll need for this project:
- Access to the Theme Builder feature (Pro-Plus and above)
- Access to the Custom CSS feature (Pro-Unlimited and above)
- Access to the Blog Description at Settings > Basics
- Banner images you simply must have on your blog (tip: make sure they're all the same size)
- A rotating image script
* note: this project utilizes the Theme Builder, it does not add any code via HTML or other advanced methods.
To get started, use the Theme Builder to begin building your custom theme. In the section for the banner, make certain to select the "text" option, not the "image" option. Weird, right? Don't worry, it'll make sense in the end.
Next, create your banner images, making sure to give them the same height and width so that they all fit within the same amount of visual space. If you're not sure what size to make them, then we have some tips on choosing a banner size that will help.
In the example below, I have created two images that are 960px wide and 200px tall...
Once you have your custom banner images created, and saved to your computer, upload them to your File Manager. You'll want to keep the File Manager open as it will come in handy in the following step.
Now here is the part where we setup the rotating script. Thankfully, there are numerous sites available which serve that very purpose. We're offering a link to a single resource, but you can find your own with a query for "free banner rotation generator" in your favorite search engine.
The one we're sharing has ads and pop-ups, but several users have used it with great success. The form is simple to understand, and generates the necessary script. If you have a favorite resource for this type of script, make sure to share it in the comments below!
To generate the script for the banner rotation, go to HTML Basix. Scroll down a bit, then select the following recommended settings:
- New image with every page load
- Open on the same page
- The width of the banner images (for our example above, that would be 960)
- The height of the banner images (for our example above, that would be 200)
The next set of fields will be for the image URLs, the links they should go to, and the text you want to appear should someone hover over them. You will fill each set of three fields for every image you want to appear in rotation.
To fit our example, we would enter details twice, which would look something like this...
To find the URL of your banner images, you would open the File Manager, then click on the filename for each of your banner images. The images will open in a new tab or window of your browser, and you can copy the URL of the image from the address bar of your browser.
Once complete, click the "Generate" button at the bottom of the screen. You'll then see a new window open with the code you need to use. Copy the code provided to you, then, in your blog, go to Settings > Basics. Paste the script into the Description field and save your changes.
If you load your blog at this point, you'll notice that the blog title still appears in the banner area. Mosey yourself on over to Design > Custom CSS, then enter:
#banner-header { display: none; }
Click the Preview button to see the changes, then click the Save button so that your blog reflects those changes.
* note: this tip may not work completely as expected due to theme variances. If this is the case for you, feel free to open a ticket within your account, then let us know you're trying to complete the Weekend Project for rotating banner images, and which part isn't working for you.