Tutorial: Creating CSS Buttons For RSS Feeds And The Likes
- By Bryan Hersh July 29 2006THIS CONTENT IS COPYWRITED, REDISTRIBUTION OF IT (including copy/pasting it to a message board, forum or bbs) IS PROHIBITED AND COULD RESULT IN LEGAL ACTIONS - feel free to quote up to 1 paragraph providing a source link to http://www.49ersparadise.com is included
About one year ago I really began implementing CSS into my website. I have been using CSS to various degrees for quite some time, but it was the recent switch over, that prompted me to write this tutorial. I have long been a proponent of minimizing graphics on my website. I want the site to be fast loading, even in this day in age of broadband connections. More than anything CSS has given me the power to do that.
When I started publishing RSS feeds on my website, I realized that I was going to encounter a problem. Successful RSS feeds require advertisement that they exist, and typically these small ads include code that allows readers to open the feed in their respective RSS reader, or add the feed to My Yahoo, or My Google or the likes. Users already were comfortable with the little image buttons that have made their way around the web, and I did not want to deviate from that general look. And so I turned to my new friend, CSS.
I do not claim to be the first person to do this, but I did think putting the information out there as to how I did this might make everyone's browsing experience better. Why? Because fewer images means faster load times, even if only by a millisecond or two.
To see a working example of this, please scroll to the bottom of: http://www.49ersparadise.com
Step 1: Create and Save a simple HTML file in a text editor.
Enter the following:
Step 2: Create and Save a simple CSS file in a text editor in the same folder titled buttons.css.
Enter the following:
Step 3:
Call the CSS file from the HTML file.
Find:
add before:
Step 4:
Modify the HTML file for the buttons you want.
Steps 4-8.
In this case we will Add:
XML
RSS
My Yahoo
My MSN
Google Homepage
However, you could add any button you so choose.
Find:
After Add:
Step 5:
Add CSS markup to HTML file to define each word as a button.
Find:
Replace With:
Find:
Replace With:
Find:
Replace With:
Find:
Replace With:
Find:
Replace With:
Step 6: Add script to span tags to change style when mouse over occurs:
Find:
Replace With:
Find:
Replace With:
Find:
Replace With:
Find:
Replace With:
Find:
Replace With:
Step 7: Add links to each button to call either the XML page, or to have the RSS feed added to a particular service.
Find:
Add Before:
Add After:
Find:
Add Before:
Add After:
Find:
Add Before:
Add After:
Find:
Add Before:
Add After:
Find:
Add Before:
Add After:
Step 8:
Add further CSS markup to define colors and background colors.
Find:
Before
Add:
After
Add:
Before
Add:
After
Add:
Before
Add:
After
Add:
Find:
Before
Add:
After
Add:
Find:
Before
Add:
After
Add:
Before
Add:
After
Add:
Before
Add:
After
Add:
Before
Add:
After
Add:
Before
Add:
After
Add:
Before
Add:
After
Add:
Before
Add:
Add:
Save the HTML file.
Step 9:
We will now edit the CSS file to make the appropriate colour and format changes to the HTML file. Note that each button has two main styles, one for mouse out, and one for mouse over.
Add the following:
Save and Close.
Your changes should now be viewable in the HTML file, and you can now copy the HTML between the body tags into whatever other page you wish. Hope this has helped some of you out there! Please feel free to use the above code, or refer others to this tutorial.
Menu
XJoin Us
XBlack - $3/month
Includes:
- Account Authorization
- Ad Removal
- Ability to read posts and topics
- Ability to read exclusive content
Red - $6/month
Includes:
- Account Authorization
- Ad Removal
- Ability to read posts and topics
- Ability to read exclusive content
- Ability to reply to posts/topics/exclusive content Gold - $10/month
Includes:
- Account Authorization
- Ad Removal
- Ability to read posts and topics
- Ability to read exclusive content
- Ability to reply to posts/topics/exclusive content
- Ability to start new topics
Thank you for your support of 49ers Paradise. Please remember that 49ers Paradise is offered on an "as is" basis. We make no guarantee of 100% access and recognize that there may be times when the site is down, or inaccessible. We strive to keep the site running on as reliable a basis as possible but will not issue refunds or transfers of membership under any circumstances. Donations may still be required to support the site. Topics or posts may be deleted or moderated at our discretion. Accounts may be banned at our discretion, you are encouraged to read the forum rules before posting.
Petition for free membership
To cancel you regular monthly payments click the appropriate link below:
End Subscription