The following article was originally written at Cory’s Weblog. For more articles like this either read Cory’s articles here at DevLounge or visit his personal site.
I recently read a post on a fellow blogger’s site, JohnTP about why making sure that you have a text link to your feed is important. Basically what he says in his article is that some people surf the web with images disabled by default. So, if you only have a shiny image saying, “Subscribe to my Blog”, that reader isn’t going to see it. Now, making a text link to your blog feed doesn’t have to be boring. In this tutorial, I am going to teach you how to make a nice link to your blog’s RSS feed without using images, so that you can be assured that your readers will see it.
First off, remember that you never want your users to search for something that they are looking for. If it takes them too long to find it, they may just say, “Forget about it” and decide its not worth the hassle. I would suggest looking at your blog, and deciding where the best place to put it is. Remember to place it somewhere that is easy to find, but at the same time, isn’t in their way bugging them every second.
Now that you have found a good place, lets get started on designing that button.
By using an element’s border-style CSS attribute to outset, you can easily create a 3D looking button. Taking it one step further the button can also appear depressed if desired, by switching from a border-style value of outset to inset. The below examples are 100% CSS based, not to mention lightweight:
Lets look at the CSS code that’s going to power this nice button:
[css]
.rssbutton{
background-color: #ff6600;
border: 1px #ff6600 outset;
padding: 0 2px;
text-decoration: none;
font: bold 10px Verdana;
}
[/css]
All you have to do is copy the above code into your CSS file, then when you call it up with the HTML code I’m about to give you, it will look all nice. But first, let me explain what all this code does. I am going to assume that you already have some type of knowledge of CSS. So I don’t have to take it line by line. You already know that it is assigning the color #ff6600 as the background, etc.
[css]border: 1px #ff6600 outset;[/css]
The above line is making a 1 pixel border using an outset property to make it look more 3d, as you can see below:
And when you hover over the button, it will make the text change. You can customize this code to your liking, but I do want to go over one example that is pretty cool: making the button look depressed when you hover over it.
For this mod, you need to add the following code:
[css]
.rssbutton:hover{
border-style: inset;
background-color: #000;
padding: 2px 3px 0 5px; /*shift text 1px to the right and down*/
color: white;
}
[/css]
What the above code does is shift the text 1px to the right and down to give the impression that the button is really being pressed. It also changes the background to black.
The color scheme can easily be changed to match your theme. Now, lets incorporate this into your blog.
Add the following code where you would like your buttons to go.
[html]
[/html]
And there you go. Make sure to change the links to your own pages. I hope that you have found this tutorial helpful. I would also like to say that this can be easily modded to match your site. Of course your suggestions, feedback, and questions are always welcome in the comments.
~Cory
