A few days ago I posted a link to a good list of RSS directories. While submitting your site’s RSS feed to directories is a good way to help squeeze out a few more incoming links and, with any luck grab more subscribers, it does have one major drawback: it’s boring. Not only boring, but terribly boring. It’s tedious, it’s slow, and it takes up time in which I’m quite sure that you could have done something a little bit more productive.

Well, as the title of this post would seem to suggest, there is a solution. I’m not talking about an automated submission tool or paying someone else to do it, although the latter does seem tempting, I’m talking about Yahoo! Pipes. Now, if you’re at all familiar with Yahoo! Pipes, then I’m sure that this has already occurred to you. If, however, you’ve never heard of Yahoo! Pipes, read on as this should save you quite a bit of time and effort in the future.

Yahoo! Pipes is a tool at which you can throw as many RSS feeds as you want and it will crunch them down and spit out one great big RSS feed. Once you have the URL for this feed, simply submit it (as opposed to the numerous individual feeds from your sites) to the various RSS directories. You can run that feed through Feedburner first, if you’d like, so as to be able to track subscriptions.

Of course, you will have to suffer through the pain of submitting to each and every one of the directories, but as you do just keep in mind that you will never have to go through it again. In the future, as you develop new sites, simply return to Yahoo! Pipes and include your site’s RSS feed as another source of your amalgamated feed and voila! All of the posts from your new site are automatically included on all of those RSS directories without you so much as having to visit a single one of them!

Yahoo! Pipes has some pretty nice features, such as filtering and sorting, that you can work into your feeds; play around until you are happy with the result. The user interface is great and extremely simple to use but, if you need help, here is an instructional video.

If you missed the original post, you can find it here.

Happy syndicating!

Web Site Stuff Web Site Stuff

The great thing about CSS is that, if done correctly, it can make your life much easier. Here’s a little trick that will label links based on their attributes without you having to add additional HTML when posting the link. This trick hinges on the fact that you can identify parameters in your CSS following the a beyong the usual :hover, :visited, etc.

Note: Doesn’t seem to be working in IE8… I’ll check for other version of IE later, but FireFox, Chrome, etc. are fine.)

Suppose that you’d like to have an icon next to any link that would identify it as being a mailto link, or a link that will open in a new window.

Setup your CSS as follows:

a[href^="mailto:"] {
 padding-left:20px;
 background: transparent url(icons/mail.gif) no-repeat center left;
}
a[target $='_blank'] {
 padding-left:20px;
 background: transparent url(icons/newWin.gif) no-repeat center left;
}

Now, what about file types? No problem, setup your CSS as follows:

a[href$='.doc'] {
 padding-left:20px;
 background: transparent url(icons/word.png) no-repeat center left;
}
a[href$='.xls'] {
 padding-left:20px;
 background: transparent url(icons/excel.png) no-repeat center left;
}
a[href$='.jpg'] {
 padding-left:20px;
 background: transparent url(icons/pic.png) no-repeat center left;
}

You can see it in action here.

If you want to apply the same formatting to several file types, e.g, the same image icon for .jpg, .jpeg, .gif, etc., you can avoid retyping the CSS for each by setting up your CSS as follows:

a[href$='.jpg'],
a[href$='.jpeg'],
a[href$='.gif'] {
 padding-left:20px;
 background: transparent url(icons/pic.png) no-repeat center left;
}

If you’d prefer that your icons appear following the text as opposed to preceeding it, change your CSS to read:

 padding-right:20px;
 background: transparent url(icons/pic.png) no-repeat center right;

Depending on the size of your icons, you may need to play with the padding. Here, I’ve used 20px as my icons are 16px wide so, given that we are centering the icon within the padding, I get a nice 2px buffer on either side. Also, if you have tall icons, or you’d like to use a smaller font size, you can add some line-height to your CSS so that the icon doesn’t get cropped.

The icons that I’m using in this example can be found here. They are licensed under a Creative Commons Attribution 2.5 License, so you can use them anywhere, for any purpose, and make whatever alterations to them that you would like.

Web Site Stuff CSS, web design, Web Development

Darren Rowse over at ProBlogger.com had a great post yesterday where he made a very good argument against the use of  mailto links. I won’t get into the details here but, if you’re interested, you can read his 10 reasons here.

I thought, however, that I would offer some help to anyone who, after having read the article, was convinced that they should switch to a contact form.

There are several good contact form plugins available for WordPress. Here are a three that you might want to consider. All of the info shown below has been taken from wordpress.org

Contact Form 7 by Takayuki Miyoshi

Downloads: 119,120
Average rating: 4 out of 5
Requirements: 2.2 or higher (works with 2.7 beta)
Features: Contact Form 7 can manage multiple contact forms. You can customize the form as well as the mail contents with simple markup. The form supports Ajax-powered submitting, CAPTCHA, Akismet spam filtering, and so on.

Enhanced WordPress Contact Form by Joost de Valk

I wasn’t able to find this plugin in the listing at wordpress.org, so I’m not entirely sure how many times it has been downloaded or what rating it has received.

Enhanced WP Contact Form has several very nice features. It will include in the email the page from which the user was referred to your contact form. In the case that one of the original referrers was a search engine, it will tell you what keywords the user had used in order to arrive at your blog. Spam protection is offered as well as the option for the user to cc themselves.

This is the contact form that I’m currently using.

cforms II by Oliver Seidel

Downloads: 331,093
Average rating: 4 1/3 out of 5
Requirements: 2.0.2 or higher (works with 2.7)
Features: cforms is a highly customizable, flexible, and powerful form builder plugin. It covers a variety of use cases and features ranging from attachments to multi-form management. You can even have multiple forms on the same page. It is compatible with the Comment Luv, Subscribe To Comment, and WP Ajax Edit Comments plugins.

Web Site Stuff Blogging, Web Development, wordpress

A great way to increase your blog’s exposure is by submitting it to RSS directories.

Kelly Verge over at backlinkage.com has posted a great article with a comprehensive list of RSS directories. He’s taken the time to trim out all of the niche specific directories as well as those who require payment.

Take a look here.

Web Site Stuff RSS, SEO, Web Development

This is a follow up to my CSS image mouse over post.

So, the problem is that Internet Explorer ignores the pseudoclass :hover unless it’s applied to a link, i.e., img:hover won’t work (no pun intended ).

Here’s how to make them all play nice.

This is what we came up with last time:

HTML:

<a href="target.html" class="highlight"><img src="yourimage.png"></a>

CSS:

.highlight img{
 border:0;
}
.highlight img:hover{
 background-color:#ff6c00;
}

Now, we were on the right track, so this isn’t all throw away, we just need to make a few adjustments.

First of all, as I said above, IE doesn’t like it when :hover is applied to anything other than a link, so let’s break down and give it what it wants. Tell your .highlight class that it’s to deal with a link and not an image. While you’re at it, you can delete the border:0; as it will no longer do us any good here. It should read as follows:

a.highlight {
}
a:hover.highlight {
  background-color:#ff6c00;
}

Now, we just have to deal with the fact that there is a big ugly border on our image. Add a new class called .noborder and put the border:0; in there.

.noborder {
 border:0;
}

Go ahead and apply that class to the image in your HTML.

<a href="target.html" class="highlight"><img src="yourimage.png" class="noborder"></a>

And that’s that! We’ve managed to trick IE into doing what FireFox had been doing for us all along. There’s just one problem… refresh document in a FireFox browser… no dice; it’s broken.

So we had it working in FireFox but not IE, now we force it to work in IE and it breaks FireFox… are we doomed to crawling back to javascript to get us out of this one?

Actually, no. This is an easy fix! Were you wondering why I kept that empty a.highlight class?

Add the following to your a.highlight class (I used 100×100 because that’s the size of my image, replace those values with your own dimensions):

height:100px;
width:100px;
display:block;

Voila! You now have a nice image mouse over effect that it completely cross-browser compatible using only one image and without resorting to javascript.

Your final code should look like this:

HTML:

<a href="target.html" class="highlight"><img src="yourimage.png" class="noborder"></a>

CSS:

a.highlight {
 width:100px;
 height:100px;
 display:block;
}
a:hover.highlight {
 background-color:#ff6c00;
}
.noborder {
 border:0;
}

Here it is in action.

I hope that this proves to be useful, have fun!

Web Site Stuff CSS, web design, Web Development