Using CSS Sprites To Create Advertising Sponsors Widget In WordPress
There are few things in this world that I cannot stand. I like to consider myself a patient person. This has not happened overnight and I like to think that having taught kids how to sail for close to ten years, working in a high school, and having two nephews played a role in my development in the patience department. One thing that still really bothers me though is when web designers, developers, and virtuosos over-complicate seemingly easy tasks.
It took me forever how to learn CSS sprites on my own. I am a do-it-yourself kind of guy, and I’ll admit, I would probably be better served asking for help a little more often. In my countless hours learning how to implement CSS sprites on my own site, I figured I could do some good for someone else who is bashing their head trying to figure this stuff, tirelessly reading complex tutorials with no avail like myself. So here is a basic guide to help you implement an Advertising Sponsors Widget like the one I display in my right column in WordPress using CSS sprites.
Why CSS Sprites?
According to the Yahoo! Developer Network Best Practices for Speeding Up Your Web Site, combining files is a great way to reduce the number of HTTP requests on your hosting server. By combining all scripts into a single script, and similarly combining all CSS into a single stylesheet. Combining files is more challenging when the scripts and stylesheets vary from page to page, but making this part of your release process improves response times. Even though this post does not concern itself with combining and minifying CSS and JS files, WordPress users should check out Thaya Kareeson’s Wp-Minify plugin.
CSS Sprites are the preferred method for reducing the number of image requests. By combining your background images into a single image and using the CSS background-image and background-position properties to display the desired image segment you can essentially make one HTTP request to your image directory instead of 15.
Affiliate Marketing On Your Blog
So how do bloggers make a living? They either have a full-time job and blog part-time, or generate enough donations and advertising revenue from visitors to make a career out of it (I’ll be honest, that’s where my head is at). Regardless of whether I make a dime from blogging is totally irrelevant. My only responsibility is to be as resourceful as I possibly can.
In terms of affiliate marketing programs, I use two of the more popular ones: Linkshare and Commission Junction. They seem to have been around for quite a while and offer a ton of advertisers and creative formats. I chose eight 120×60 icons from both Linkshare and Commission Junction and saved them to my computer, making sure to note the corresponding link for each image.
Creating Your Widget Using Sprites
Using a CSS Sprites Generator like the one created by Stoyan and Chris Coyier I was easily able to combined all eight icons into a single image. I made sure to copy and paste all of the background-position values for each image in the sprite. I downloaded the image and renamed it “sponsors.png”. Using my favorite FTP client Filezilla, I uploaded it to my server and into my current theme’s image folder.
When you go to your style.css file in your WordPress theme, make sure you create a div container that will only call the background image once. I named mine “sponsors”. This container will become the parent for each child element in your anchor tags. The children are each logo position you will pull from the larger image when you put them into your html as anchor tags. This is exactly what your CSS should look like.
#sponsors a {background:url(images/sponsors.png) no-repeat;float:left;display:block;width:120px;height:60px;}
#sponsors a#firstad{background-position: 0 0;}
#sponsors a#secondad{background-position: 0px -70px;}
#sponsors a#thirdad{background-position: 0px -140px;}
#sponsors a#fourthad{background-position: 0px -210px;}
#sponsors a#fifthad{background-position: 0px -280px;}
#sponsors a#sixthad{background-position: 0px -350px;}
#sponsors a#seventhad{background-position: 0px -420px;}
#sponsors a#eighthad{background-position: 0px -490px;}
Now for the html:
Your html is going to structured as previously mentioned with your div container id being “sponsors”. If you look carefully at my CSS you will notice that I labeled each anchor tag child from top to bottom of the image sprite, pairing it in sequential order with the corresponding background-position provided by the CSS Sprites Generator. That means the anchor tag id for the Dell Small Business logo is “#firstad”, Electronics Expo is “#secondad”, and so on.
From this point the process is pretty straight foward. Go back into your affiliate marketing websites where you got your logos and copy and paste each link into it’s proper anchor tag, using target=”_blank” to have all click through open up in a new window.
That’s about it. You will immediately notice that your sponsor ads load tremendously faster than before when you were making eight HTTP request to pull images from Linkshare and Commission Junction (or whatever affiliate marketing sites you use). Below is a picture of the html I placed into the text widget.
Hope that was helpful. If you have any questions or would like to add something please feel free.
Related Articles
- You: Mastering CSS Coding: Getting Started ” Smashing Magazine (smashingmagazine.com)
- Page Layout 2010 (slideshare.net)
- How To Make Your Website Faster – Part 2: How To Optimize Your Website Code For Speed (masternewmedia.org)
By Dustin at