Archive for July, 2008
Tutorial: CSS Rollovers As Anchors
This tutorial is for those who want to give their visitors a simple way to navigate to different places on the same page. For example, a link at the bottom that sends you to the top of the page – especially helpful on long pages, where no one wants to do the scrolling. You will need a very basic knowledge of HTML, the will to brave messing with your source code, and a couple of images (if you want an image link).
Step 1 – Doing it without the images
We’re starting off with the simple concept of anchors – links that link to links that link to nothing. Okay, maybe I need to explain that…an anchor, by itself, is something that exists for the sole purpose of marking a position on a webpage. Then, you can link to that anchor, which will essentially send anyone who clicks the link to the position defined by the anchor. Still don’t get it? Let’s go hands on.
First off, put this line of code right after your <body> tag:
This defines the very beginning of your document as the location of the “top” anchor. Next, let’s try linking to it – put the following code where you want your “Back to top” link to appear (you can change the text, of course):
<a href="#top">Back to top</a>
The ‘#’ in there tells your browser that this link is pointing to an anchor and not to an independent URL. After you’re done, try clicking the link. Does it work? If it doesn’t, go back and try again. 
Step 2 – CSSing it up + images
Before we go any further, you will need to grab a couple of images: one will be the active link, and the other image will appear when the user hovers the mouse over that link. Let’s say one of the images is named link_normal.gif and the other one is link_hover.gif – note that they must be of the same dimensions, in this case let’s assume they are both 220px by 50px.
All you have to do to your actual code at this point, is to include the following code where the link is to appear:
<a href="#top" class=myanchorlink></a>
Comparing this code to the above without-images HTML, you may notice that there isn’t that much of a difference – all you did was replace the text with a div element. But where is the image, you ask? Well, we’re going to implement that now.
All the real magic will take place in your CSS file. I hope you know where your CSS file is – in case you don’t, you can always view your source and find it. For WordPress the CSS file is style.css in your current theme’s folder. After you find it, add the following code to the end.
Voila! You’re done. Unless you copy-pasted my code without modifications, it should be working fine. If you did just copy-paste my code, it might not work because this is a tutorial that simply gives you an example to modify and implement with your own images.
If you have any problems, drop me a line and I’ll try to help you out.
WP Plugin: StumbleUpon Favorites~!
I was planning on releasing this plugin tomorrow, but I decided against it – couldn’t make you wait, couldn’t wait myself. I’m talking about “StumbleUpon Favorites”, a plugin that basically allows you to list your most recently liked StumbleUpon pages on your WordPress blog as a widget.
Wait, you could do that with a normal RSS widget right? True, but this thing comes with a bunch of bells and whistles, plus the promise of more to come (either from me, or from some clever third party out there – probably me, but feel free to modify this!). You can see the widget in action to the right, although yours may look different depending on the settings you choose.
Current Features:
- Easy integration – just type in your StumbleUpon username!
- Option to display/hide the StumbleUpon logo
- Option to display/hide the number of votes for a bookmark
- Automatic conversion of long links into links shortened by ellipsis (…)
- The items display quotes and ampersands properly despite StumbleUpon’s double-encoded HTML entity system (The RSS widget will not do this)
- All links are nofollow by default
- All links open in a new tab/window, depending on whether the browser supports tabs
Installation:
- Download the plugin archive using the link below
- Extract archive contents to folder (stumble_faves recommended)
- Upload folder to the ‘/wp-content/plugins/’ directory
- Activate the plugin through the ‘Plugins’ menu in WordPress
- Place the newly available widget in your sidebar and configure it
That’s it, five simple steps and you’re done. Now, without further ado, I present the StumbleUpon Favorites plugin as a free download!
Download StumbleUpon Favorites (WP 2.3 to 2.5.1+)
To Do List:
- Integrate favorite website screenshots
- Improve plugin based on feedback
I will be happy to offer support and troubleshooting through the comments of this post, as long as you leave enough details about your troubles and maybe a link to the problem site.
