Matt's Blog

Archive for the ‘Tutorials’ Category

Displaying Your Top 10 Posts

Sunday, May 27th, 2007

If you use WordPress, you have probably wondered if you can display your Top 10 Most Popular Posts before. Well, you can do just that by installing a Plugin that will record the number of hits an Article has. Then, uploading a simple PHP file that you can download for free.

The Plugin is WP-PostViews. The Plugin is free and is released under the GNU General Public License. So, simply install that Plugin by downloading it, extracting it and uploading it to /wp-content/plugins/.

Now this is where my script comes in. Okay, it isn’t totally my script. It’s a modified version of the Script BlueFur released for this same purpose. Except, I cleaned it up a bit and made it so it used WordPress functions, so it’s more “WP-Friendly” you could say. So, you can download my script here. The script is licensed under the GNU General Public License. Now, all you have to do is download that file (or copy and paste it into a new file) and name it something like topposts.php, or anything really, as long as it ends in .php, and not .txt. You may need to change the following lines, depending on where your WordPress installation is installed and where you put the script:


Then, upload the script. If you don’t want it to be a Top 10, you can change the value of $limit to something like 5 to have a Top 5.

You can see my Top 10 Posts here.

Get it? Got it? Good.

Enjoy. 😀

Fading Out Text

Wednesday, March 21st, 2007

Have you ever wondered how people have Text on an image fade from left-to-right or from top-to-bottom, or visa versa? Well, I’m going to show you how. First of all, open up Photoshop (I’m using the CS3 Beta, but it’ll work in previous versions), and open a new document (Ctrl+N) and enter your dimensions.

Now, grab the text tool and (T) use it to put in some text.

Take Your Text Tool and Enter Some Text

Now, go down to your Layers Pallet (if it isn’t open, hit F7 or go Window > Layers), and click the Add Layer Mask icon.

Click The Add Layer Mask Button In the Layers Palette

Now, once you’ve done that, make sure you’re on the Mask (click the white rectangle on the layer’s name, if you aren’t), and go over to the Gradient Tool (G). Now click and drag your cursor from left-to-right for a faded to normal effect and right-to-left for a normal to faded effect.

Faded Text

You could also spruce up the text a bit by going back into the Text part of the layer (click the little “T” on the layer’s name) and add effects to it. Plus, since the text will be slightly transparent, you’ll be able to add layers underneath it to make it look even better.

Final Effect

This technique isn’t limited to just text, either.

Get it? Got it? Good.

Add Your Search To Internet Explorer and FireFox

Monday, March 19th, 2007

You’ve probably seen them, and maybe even used them, that handy little Search Box in the top-right of your browser. But, have you ever wondered how you can add your own Search there, and offer adding it to your visitors? Well, I’m going to show you how.

First of all, this is important, both Internet Explorer 7 (this won’t work in previous versions of Internet Explorer, since they didn’t have inline search) and FireFox use the Search Engine Provider standard, OpenSearch1.1. Because they use the same standard, you can use the same code in both Browsers to add a search provider. So, onto the details.

Okay, lets start with some background. XML is used to specify everything to do with your Search, so it’s fairly easy to implement. No Programming Language and Complicated Scripts here, folks, just straight XML.

First of all, if you want all the juicy details on all the possible “elements” available to use, go here.

Okay, here’s what we need to start with:

<?xml version="1.0" encoding="UTF-8"?>
<OpenSearchDescription xmlns="">

The first line just tells the browser that you’ll be using XML encoded using UTF-8. The second line tells the browser what specification you’re using, and where to look for it.

Now, you need to start adding some details. First, you’ll need to specify the name:

<ShortName>Search Engine Name</ShortName>

That’ll be the name that shows up in the textbox in the corner of the browser when your Search is selected from the dropdown box. You can also add a <LongName> tag, but it’s not necessary, and I haven’t seen it used in Browsers yet. Now, for a description:

<Description>Search Engine Description</Description>

Not much to say about that, it’s simply the description of your Search.

Now, for Icons. Icons aren’t used in IE7, but they are, sometimes, used in FF. So, the code:

<Image type="image/x-icon" width="16" height="16"></Image> 
<Image type="image/png" width="64" height="64"></Image>

It’s best to include Icons of 2 sizes and formats, 16×16, 64×64 and .ico and .png. Note the full URL. You will need to include your full domain, you can’t just do /imagename.ext (since the browser won’t know where to look for the image).

Now, for the most important part, the URL.

<Url template="{searchTerms}" type="text/html" />

First, you’ll need to make a search (of any string) and then copy the URL and replace the string you searched for with {searchTerms}. Most likely, you’ll use text/html in type.

Now, to end the file, add this to the bottom of it:


All that code together would look like this:

<?xml version="1.0" encoding="UTF-8"?>
<OpenSearchDescription xmlns=""> 
<ShortName>Search Engine Name</ShortName> 
<Description>Search Engine Description</Description> 
<Image type="image/x-icon" width="16" height="16"></Image>
<Image type="image/png" width="64" height="64"></Image>
<Url template="{searchTerms}" type="text/html" />

Now, the only left to do is to save the file and link to it.

You’ll want to save it as something.xml. I’m going to recommend addsearch.xml. Then, of course, you’ll want to upload that to your website.

Now, you’ll probably want to allow people to install this into their browsers ( 😉 ). So, all you need to basically do is add an onclick="" to a link:

<a href="#" onclick="window.external.AddSearchProvider('');" title="Add Search Engine Name to Your Browser">Add Search Engine Name To Your Browser</a>

Now, you may want Visitors browsers to discover your Search Engine automatically. You can add this to the <head> of your page:

<link rel="search" type="application/opensearchdescription+xml" href="" title="Search Engine Name" />

And that will have your visitors browser show either this:

Internet Explorer Discovered Search

Or this:

FireFox Discovered Search

I’ve added a Search Engine for this blog. Check it out.

Get it? Got it? Good.