Social voting news sites are great because they allow us to really get involved in determining the content we want to see, sorting the interesting articles from the boring ones. Digg and Reddit are the largest and most popular sites of this type but there are many other niche sites that are quickly gaining popularity. Design Bump is one example of a Digg clone aimed at the web design community. In the past it would take a lot of work and programming to create your own Digg clone, luckily now the hard work has been done for us.

To create your own Digg clone simply download the Pligg CMS and set it up on your server. You’ll need MySQL and PHP5 to run Pligg. Once you’ve set it up you can then customise it with your own template to give it a unique look and feel. You can even add widgets which you can buy from the Pligg shop to add some extra functionality to your website. You can see an example of a social news site created with Pligg above.  That’s pretty much it, you’re Digg clone website is ready to go. Now you’ve just got to figure out how to get some users to your site, best of luck!

Related posts:

1. Create your own personal homepage with Flavors.me
2. Create your own cartoon character on Facebook
3. Social Browsers – The browsers of the future?

What you’ll need to do:

Simply open up your search.php file inside your WordPress theme folder and add the following code just above the loop (if (have_posts()) : while (have_posts()) : the_post();). In this example below we are excluding categories with an ID of 8 and 9. You’ll need to find the ID of each category you want to exclude from your search results and include it in the below code.

<?php
$page = (get_query_var('paged')) ? get_query_var('paged') : 1;
$s = get_query_var('s');
query_posts("s=$s&cat=-8,-9&paged=$page");
?>

Related posts:

1. Exclude a category from your WordPress index page
2. Exclude a WordPress Category from your RSS Feed
3. Restore your wordpress database from backup using phpMyAdmin

Edit functions.php

One of the most simple and best ways to exclude certain categories from your RSS feed is by adding this small function to your functions.php file in your WordPress theme directory. Simply open up functions.php and add the following function to it. In the below example we are excluding category 1 and category 5.

function rssFeedExcluder($query) {
 if ($query->is_feed) {
   $query->set('cat','-1,-5');
 }
return $query;
}

add_filter('pre_get_posts','rssFeedExcluder');

You can exclude multiple categories by separating them with a comma.

Change the RSS Feed URL

Another very easy way to exclude categories from your RSS feed is by simply changing the URL of your WordPress RSS feed. All you need to do is add a query string to the end of your RSS feed URL with the categories you want to exclude. In the below example we are excluding category 1 and category 5 from our RSS feed. The URL of our RSS feed is “www.yourwebsite.com/feed”.

www.yourwebsite.com/feed?cat=-1&cat=-5

If you’re using FeedBurner you can use this URL in your FeedBurner account settings. Simply click on “Edit feed details” from your dashboard and add the new URL.

Use a Plugin

If you’re not good at coding you can simply add the Ultimate Category Excluder plugin to your WordPress site to exclude categories from your RSS feeds. Simply download the plugin, add it to your plugins folder, activate it in your WordPress admin panel and add the categories you want to exclude from your feed. That’s it! I’m not really a fan of adding plugins unless you really need them as having too many plugins can make your website a lot heavier than it needs to be.

Related posts:

1. Exclude a category from your WordPress index page
2. Login LockDown – A WordPress Enhanced Login Security Plugin
3. Must have WordPress plugins for bloggers

You can clearly see the problem in the image below. The rounded rectangle shape on the left has blurry edges while the one on the right has nice clean edges that sit on the pixel grid.

To make your Photoshop vector shapes snap to pixels simply tick the “Snap to pixels” option in the shapes options box. This results in perfect vector shapes every time, no need to zoom in and edit the edges every time you draw a rounded rectangle.

Related posts:

1. How to automate a batch process in Photoshop

WordPress has created a new plugin called Jetpack which allows you to add quite a few new features to improve your WordPress blog, including WordPress Stats. Simply download and activate the new Jetpack plugin and your stats will start working again. Plus you’ll get a few added features if you choose to switch them on including:

• Twitter Widget – Display the latest updates from a Twitter user inside your theme’s widgets.
• Gravatar Hovercards – Show a pop-up business card of your users’ Gravatar profiles in comments.
• WP.me Shortlinks – Enable WP.me-powered shortlinks for all of your Posts and Pages for easier sharing.
• Shortcode Embeds – Easily embed videos and more from sites like YouTube, Vimeo, and SlideShare.
• After The Deadline – After the Deadline helps you write better by adding spell, style, and grammar checking to WordPress.
• LaTeX – Mark up your posts with the LaTeX markup language, perfect for complex mathematical equations and other über-geekery.
• Sharedaddy – The most super duper sharing tool on the interwebs. Share content with Facebook, Twitter, and many more.

Related posts:

1. Must have WordPress plugins for bloggers
2. Open source grammar and spell checker – After The Deadline
3. Back up your wordpress database using phpMyAdmin

There are many advantages to using CSS only buttons including:

• Lightweight loading as no images need to be downloaded
• Buttons expand to fit any amount of text
• Easy to alter the size, colour and effects

The button I’ll show you how to make has a CSS gradient, rounded corners and also a drop-shadow (The rounded corners and drop shadow will degrade gracefully in Internet Explorer).

Here’s the finished CSS only button that we’ll be making:

CSS Only Button

The HTML:

Since a button is really just a fancy looking link I think it makes sense to create our buttons from standard html links. Here is the HTML we need for our CSS only buttons. The span is there just in case you want to add icons to your buttons at a later stage.

<a href="#"><span>I'm a Button!</span></a>

The CSS:

In our CSS we will need gradient styles, drop-shadow styles, rounded corner styles and of course our basic button styles. Here is the CSS for our no image button.

<style>

/* Button */
a.btn{border:#BBB 1px solid; color:#5f5e5e; display:block; float:left; padding:12px 15px; margin-right:10px; cursor:pointer;}
a:hover.btn{text-decoration:none; background:#FFF;}

/* Rounded Corners */
.rounded, a.btn{
-webkit-border-radius:6px;
-moz-border-radius:6px;
border-radius:6px;
-khtml-border-radius: 6px;
}

/* Drop Shadow */
.shadow, a.btn{
-moz-box-shadow: 0px 1px 3px #AAA;
-webkit-box-shadow: 0px 1px 3px #AAA;
box-shadow: 0px 1px 3px #AAA;
}

/* Default Grey Gradient */
.gradient, a.btn{
background: #FFF; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#DDDDDD'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#DDD)); /* for webkit browsers */
background: -moz-linear-gradient(top,  #FFF,  #DDD); /* for firefox 3.6+ */
}
</style>

That’s it, you’re all done. You can change the colour of the gradient and also tweak the drop shadow and rounded corners if you like. You can also try creating a few more coloured gradients and applying them to different buttons. It’s hard to believe that these buttons use no images but I guess that just shows you the power of CSS.

Related posts:

1. Create your own World Cup jersey on Facebook
2. A simple way to add a Facebook like button to your website
3. CSS background image stretch

Lettering.js is a simple jQuery plugin created by the clever guys at Paravel. It basically allows you to separate text on your website into individual words or letters so that you can target and style them accordingly. This gives web designers much more flexibility in controlling and styling web typography.

How it works:

This simple little plugin uses jQuery to dynamically inject spans around your web typography to help you target and style it more effectively. Let’s say that you would like to make each letter in your website heading a different colour. Lettering.js basically splits up your heading into individual letters and wraps spans with unique class names around each letter. You can then quite easily target each letter and style the span with different colours accordingly. e.g.

<h1 class="heading">

  <span class="char1">T</span>
  <span class="char2">i</span>
  <span class="char3">t</span>
  <span class="char4">l</span>
  <span class="char5">e</span>

</h1>

Features and uses:

• Lettering.js offers complete down to the letter control.
• Great for styling headings and feature text.
• Text stays selectable.
• Style and control individual letters.
• Style and control individual words.
• Wrap lines of text and control styles of each line.
• No added mark-up required so mark-up stays clean.
• Use sparingly as wrapping all letters on your website is not a good idea!

Get Lettering.js

Download the Lettering.js plugin and don’t forget that you will also need jQuery too.

Related posts:

1. Equal height columns using jQuery
2. Reset your style sheet with a CSS Reset
3. How to create clickable links in sIFR3

The Problem:

As you can see above, I have three boxes which contain different amounts of text. These boxes are floating left and thus have varied heights which doesn’t look very nice. I need them to all be the same height. (I used some simple sliding doors CSS to get the curved edges on my boxes.)

The Solution:

We basically need all boxes to be the same height as the tallest box. So all we need to do is find the tallest box and then apply that height to all boxes. This is exactly what this tiny jQuery plugin will do.

Step 1: Download jQuery

If you’re not currently using jQuery on your site then you will need to download it and include it in your website header as follows.

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>

Step 2: Write your function

Let’s create a file called scripts.js for all of our JavaScript functions and save it in our “js” folder. We also include this in our header like so.

<script type="text/javascript" src="js/scripts.js"></script>

Now we copy and paste the following code into your scripts.js file.

/* Plugin to make variable height divs equal heights */
$.fn.sameHeights = function() {

$(this).each(function(){
var tallest = 0;

$(this).children().each(function(i){
if (tallest < $(this).height()) { tallest = $(this).height(); }
});
$(this).children().css({'height': tallest});
});
return this;
};

Step 3: Call your function

All we need to do now is call our function, so we place the following code in our website header. Make sure you target the parent div surrounding your boxes. In this example I am selecting the “.boxes” class which is the parent div of my boxes. This will cause all child boxes to be given a height equal to that of the tallest child box. Now you should have dynamic height columns which actually have the same height!

$(document).ready(function(){

 /* Make boxes same height */
 $('.boxes').sameHeights();

});

Related posts:

1. IE6 PNG fix – Transparent PNG image support for IE6
2. Two great ways to embed a font in your website
3. A simple way to display your latest tweet on your website

Here are some great WordPress plugins for bloggers:

All in One SEO Pack

Optimizes your WordPress blog for Search Engines (Search Engine Optimization). If you don’t know much about SEO then this plugin will help you set up some basic SEO for your site to help it get indexed more effectively.

Get this plugin »

Google XML Sitemaps

Having a proper sitemap will also improve your website’s SEO. This plugin will generate a special XML sitemap which will help search engines like Google, Bing, Yahoo and Ask.com to better index your blog. With such a sitemap, it’s much easier for the crawlers to see the complete structure of your site and retrieve it more efficiently.

Get this plugin »

Contact Form 7

Most of us would like to have a contact form on our contact page and this plugin is by far the most popular WordPress Contact Form plugin. It can manage multiple contact forms, plus you can customize the form and the mail contents flexibly with simple markup. The form supports Ajax-powered submitting, CAPTCHA, Akismet spam filtering and so on.

Get this plugin »

TDO Mini Forms

Many people haven’t heard of this plugin before but it’s quite a good one. Have you noticed the community news feeds featured on certain websites? You can allow your visitors to post community news to your site using TDO Mini Forms. This plugin allows you to add highly customisable forms that work with your WordPress Theme to your website that allows non-registered users and/or subscribers (also configurable) to submit and edit posts and pages.

Get this plugin »

AddToAny: Share Button

A great little plugin to help your visitors promote your posts through social media sharing. This WordPress plugin helps people share, bookmark, and email your posts and pages using any service, such as Facebook, Twitter, Google Buzz, Digg, Delicious, and well over 100 more social bookmarking and sharing sites.

Get this plugin »

TweetMeme Button

Twitter is one of the best ways to promote your blog posts so you need to make sure that you have a “retweet” button on your page. The TweetMeme Retweet button is a very popular Retweet button used by some of the biggest websites in the world including Techcrunch.com, PerezHilton.com, Break.com, CNET.com, Wired, Time Magazine and hundreds of other massive brands, in total it is installed on over 100,000 websites around the globe.

Get this plugin »

SyntaxHighlighter Evolved

SyntaxHighlighter Evolved allows you to easily post syntax-highlighted code to your site without loosing it’s formatting or making any manual changes. This is probably the best syntax highlighting plugin I have found as it looks nice, supports many programming languages and also allows users to copy code to their clipboard with a single click.

Get this plugin »

WP-PageNavi

This plugin allows you to add more advanced pagination to your WordPress blog. Basically instead of having the “previous posts” button at the bottom of your homepage, you can list a bunch of your pages with next and previous links.

Get this plugin »

WP Super Cache

If your website is experiencing a heavy load of visitors then this plugin will definitely come in handy. WP Super Cache basically generates static html files from your dynamic WordPress blog. After a html file is generated your web server will serve that file instead of processing the comparatively heavier and more expensive WordPress PHP scripts. It can sometimes cause certain other plugins to perform strangely when “Super Cache” is turned on so you might want to test it out first.

Get this plugin »

Don’t add too many plugins

Before you go adding every plugin under the sun to your WordPress website, just remember that each plugin requires files to be requested every time someone visits your website. So the more plugins you have, the more your website may get bogged down. Heavier websites generally won’t display very quickly when they are experiencing higher levels of visitors (You can analyse the speed at which your site loads using YSlow). So try to make sure you only use the plugins that you really need.

Which plugins have you found useful?

Related posts:

1. Validate your form using MooTools
2. Login LockDown – A WordPress Enhanced Login Security Plugin
3. Back up your wordpress database using phpMyAdmin

This is what your button will look like. Firstly you need to figure out where you would like to place your button on your web page. You then copy and paste the following code snippet into your HTML and be sure to replace the sample URL with your own web page URL.

<iframe src="http://www.facebook.com/plugins/like.php?href=http://sample.com
&amp;layout=standard&amp;show-faces=true&amp;width=450&amp;action=like&amp;font=arial&amp;colorscheme=light"
scrolling="no" frameborder="0" allowTransparency="true" id="facebook-like">
</iframe>

If you have a WordPress blog then you could replace the sample URL with the following code which will get the current URL of your page.

<?php echo rawurlencode(get_permalink()); ?>

Related posts:

1. Create your own World Cup jersey on Facebook
2. A simple way to display your latest tweet on your website
3. Improve the performance of your website with YSlow