Step1

The first thing you want to do, is create a directory/folder on your server in the same directory your website is in. You can name it anything you want to call it. Mine is named “go”. Something like “recommends” works well with affiliate links. An example would be → http://antbag.com/go/hostgator. See how this works?

Step 2

Next, you need to create another directory inside the first one. Going back to my email subscription link as an example, I named the folder “email-updates”. Whatever you name this directory, it should be a name that relates to the destination of the link.

Step 3

In this step, you will open Notepad, or whatever basic text editor you have on your computer. Type in this code:
<?php header("location:REPLACE THIS TEXT WITH YOUR LINK'S URL");?>
Once this is typed in, you will name this file index.php. You’ll notice the portion of the code that is written in CAPS. Follow those instructions and place the original url for your link there. If you’re using Notepad on a Windows PC, be sure that when you save, you name the file index.php, and change file type from .txt to All Files. This will enable you to save the file as a PHP file, rather than a text document.

Step 4

In the final step, all you have to do is open your FTP client(Filezilla, CoffeeCup, etc.) and upload this index.php file to the second directory you made. That’s it.

Recap

So if you named the first directory you created “recommends” and the second directory “ebay”, you would put your affiliate link to ebay in the index.php file in place of the part that’s written in all CAPS, save and upload to the “ebay” directory. Then the url http://yourwebsite.com/recommends/ebay would actually send your visitors to ebay through your affiliate link.

Have you noticed a new trend in blog design? There are several actually, but it seems to me that blogs are getting wider. I think this is due to the fact that more people are now using larger computer monitors that easily handle a wider screen resolution, and also to make room for more information and sidebars. However, there are still those who prefer a more narrow view. Here I’m gonna take you along as I actually make one of my free WordPress themes more narrow.

The theme is Paintbrush, and it’s the second theme that became available in my line of themes. This theme comes with a width of 900 pixels. As requested by the theme user, we’re changing that width to 750 pixels to accommodate the 800 x 600 screen resolution that she and some of her friends have. When I make a change like this, the first thing I do is look at the face of the blog and determine what will have to be changed. In Paintbrush, the content of the blog is enclosed in a div that is has been given the name, “wrapper“. Inside the wrapper is the header, the posts, the sidebar, and the footer. The dark blue part of the screen is outside the wrapper. So obviously, the width of that wrapper will need to be changed from 900 pixels to 750 pixels.

Now that we know we have to change the width of the wrapper, what else will be affected by the change? Yep, basically everything inside the wrapper. Here’s what we’ll need to change:

• Header
• Header Background Image
• Horizontal Navigation Menu
• Post
• Sidebar
• Footer

I know that sounds like a lot, but it really isn’t that difficult. Here’s a tip…….we know we’re subtracting 150px off of the wrapper, right? Well, that’s the same amount that will need to be taken off of the other things on our list with the exception of the post and the sidebar. For those two, we need to take a TOTAL of 150px off, because they sit side by side. Make sense?

The Stylesheet

When you make a change in the code of your website, you should ALWAYS make a backup of the file before you change anything. It’s too easy to mis-type something and get frustrated because you can’t figure out what you did. If you have a back-up, you can fix mistakes and start all over making your changes. Now, if you aren’t familiar at all with CSS, what your looking for is a file called style.css in your theme folder. This can be done in the WordPress dashboard. Go to Themes/Theme Editor. Depending on the theme your using, this could be a breeze, or a little confusing. That just depends on how clear the code is written. This didn’t take me too long, because I coded this theme and know where everything is. But doing the same thing on one that I’m unfamiliar with would take a little longer.

What we have to do, is scroll down the stylesheet and identify the parts that we need to change. When you come to the wrapper, you’ll see a line of code that reads width:900px;. Change that to width:750px;. Now we’re gonna find the other items from our list, on this style sheet one by one. For each item, remember, subtract 150px from the width. When you come to the post and the sidebar, you have to divide that 150px between the two of them. You don’t want to make the sidebar too narrow. I think what I did was take 20px off the sidebar, and 130px off the post. This is an area you may have to test a couple of variations to see what works best. When you finish, save your changes.

All that’s left is the background header image. For the header image, the same rule applies…..subtract 150px from the width. Only thing, the image needs to actually be re-sized, not re-coded. What you need is an image editing program. There’s Photoshop, the Gimp, and a host of others. If you don’t already have one, there are quite a few free ones available that will handle this job just fine. The way I see it, there are two options here. You can crop the image, cutting out a portion, or you can resize the image to the width you want. There are advantages and disadvantages to both. Generally, I would crop the image if possible, because that doesn’t change the height of the image. Which you do is up to you. Make your decision on what you think will work best.

Next up, mmm…..hey we’re done! If all went well, everything is looking great.

Other Posts In This Series

• Understanding Layout
• Replace Your Blog Title with a Logo
• WordPress Theme Tips: Text

I’m sure you’ve noticed that practically all themes that you can download for free, have text in the header which links back to the blogs homepage. I’ll just bet you’ve visited other blogs that have a logo instead of this title text. Trying to figure out things like this can drive you nuts without a little direction. In this post, we’re going to look at replacing anchor text with an image. Creating a logo is not covered here, so we’ll assume you already have an image you want to use.

The easiest way to make this replacement would be to simply delete the text out of your document, and put the image there in it’s place. The only problem with that is the fact that a search engine can’t read what you’ve written in an image. So, the better practice would be to disguise the text with an image. Using CSS, we can leave the HTML text in place, and use a background image to hide it. Sound interesting?

When I change designs on this site, I practically always follow what I’m showing you here. We’ll use this current design as an example. Originally, the header had a plain white background, with the blog title written in blue. To replace this text with my image, I used a method known as the Gilder/Levin Method.

As always, make a backup of both your header.php file as well as style.css. If we mess something up, it won’t be any problem to restore it. Now, open up your header.php file, and we’re going to make a very small change to it. In the h1 element, we want to add span tags where I have them high-lighted in the image below.

Save your changes.

Now let’s open the style.css file and add a little code. All you need is the image you want to use and the image’s dimensions. Scroll down your stylesheet and find where the header elements are. Because we added span tags to the header, we just need to define those tags in the styleseet.

There you have it. To get the image placed exactly where you want it, you’ll have to adjust the margins and/or padding accordingly. This is not the only method for doing this, but this has worked best for me.

Other Posts In This Series

• Understanding Layout
• How To Change the Width of Your Blog Design
• WordPress Theme Tips: Text

Almost every blogger would like their design to be different from everyone else’s. After all, that’s one more thing that can set you apart from the crowd. However, not every blogger has experience with CSS. If you fit that description, I’ve written this just for you!

This isn’t really an introduction to CSS. It’s more of a guide to change specific elements within your theme. Over the course of several posts, I’m going to cover some things you can do to your current theme to add your own flavor and style. In this post, we’ll take a look at the text.

In your theme directory, the style.css file will be our focus. Assuming you have an installed version of WordPress, there are two different approaches to editing the stylesheet. You can go to admin/presentation/theme-editor/stylesheet, and edit the file there, or you can open the stylesheet in a text editor, edit the file, then upload it to your server. I would recommend the latter. Any basic text editor will do the trick. In this example, we’ll edit the style sheet of my Paintbrush theme using Notepad. ***Before changing anything, make a back-up copy of the original style.css file.***

Font Family

How the text on your website looks is dependent on the font that’s chosen. Making changes to the fonts on a theme doesn’t seem like a big change, but they can change how your site looks more than you realize. The font you decide to use must be installed on each visitor’s computer to be displayed. Because of this, there are only a handful of different fonts that are commonly used for the text on a website. The most common ones are Arial, Helvetica, New Times Roman, Verdana, and Georgia.

When you open your theme’s stylesheet, in the body section, you’ll notice that there’s probably more than one font listed. The reason for this is because if your visitor’s computer doesn’t have the first listed font installed, it will go to the second, and on down the list.

Let’s change the first font listed from Verdana to Arial. Let’s save the changes and see how it looks.

Do you see the change? Arial is tighter and a little smaller. If you use Arial, I would recommend listing Helvetica second in your list, because it’s very similar to Arial. Most computers have one or the other.

Experiment with the other fonts to find what you think looks best.

Font Size

This is another element that comes down to personal preference. Although larger fonts are easier to read, smaller fonts arguably look more attractive. In Paintbrush, the default font size is 14px. Let’s change that to 12px, and check out the results.

Still in the body section of your stylesheet, change the font size from 14px to 12px.

Experiment with different font sizes until you find what fits best. There really is no right or wrong. Just fix it the way you like it. If you mess it up, you can always re-upload that copy you made of the original.

Other Posts In This Series

• Understanding Layout
• Replace Your Blog Title with a Logo
• How To Change the Width of Your Blog Design

I’m a little late getting in on the Productivity Tips submission at the Instigator Blog, but better late than never.

When I was thinking of ways to be more productive, I didn’t want to dwell on the typical “meditate and visualize” advice. I wanted to come up with and share something unique. Not only that, but I wanted to be as specific as possible. So, I decided to focus on computer work, since I love doing anything on the computer.

The Desktop

First of all, most people completely waste their desktop. There are neat little widgets and gadgets that you can put on it, and those can be helpful in some ways I suppose. I used to have the “Konfabulator Widgets” on my desktop before they were “Yahoo Widgets”. Anyway, when I’m sitting at the computer, the only time I minimize my windows and actually see the desktop is when I’m looking for something…….whether it be an application icon or a file. No matter how nice the photo I’m using, I really don’t look at it that much. This is the typical Windows XP desktop:

Why waste all that space on some picture you never really look at, and keep all your files in your Documents folder? Why not make everything more accessible? OK, maybe not everything, but the files and apps that you use most often. I’ve come up with a solution for this that makes everything much easier and quicker to get to. To my knowledge, this idea is original…….

How do you separate everything out like that? Well, I just created an image, using my favorite photo editor, for my desktop and separated it in six color-coded sections. Then I labeled each section with text. The image should be the same size as the screen resolution you use on your desktop. My screen resolution is set at 1280 x 1024, so that’s the size of my desktop image. Once the image is made and is set as your desktop background, just drag the icons and files on your desktop to the section you want them in.

So what are your best productivity tips? This is a meme that may actually give some great advice. Ben has already had well over 100 submissions on this project, so there are some great tips. Check it out at the Instigator Blog.

Personally, waking up in a *bad mood* can really keep me from getting much done. Maybe I should, but I’m not really one for making a daily to-do list.

Everyone has a general idea for what they plan to accomplish each day, whether it’s written or not. If you get up everyday to go to your job, that kind of takes care of your to-do’s for the most part. What about the days you’re not at work? What if you’re self-employed? Works gotta get done, regardless of your “mood”.

Here are a few ideas, to get you in do-it-anyway mode:

• Make a to-do list anyway, then follow it.
• Do something physical – whether it be excercise, yard work, housecleaning, etc. For me coming straight to the computer doesn’t help.
• Have a cup of Folgers – Classic Roast.
• Go ahead first thing – shower, get dressed, eat breakfast, just as if you have to be somewhere.

The Facts….

1. You have to accept that you can’t deal with this kind of person the same as everyone else. It’s just impossible! That’s what led you to realize how impossible they were in the first place. They may be crazy, or maybe your personality doesn’t mix with theirs, but either way, you have to be very direct when you have to communicate with them. Sometimes you have to treat them like children, being extremely gentle with your words and ever aware of them being how they are.
2. You have to figure out for sure if it’s them, and not you! Most likely it is, or you would have these problems with almost everyone, not just this hot shot. The fact is though, that this can be confusing, because impossible people like to blame everything on someone else. So, you may be the target of that blame. Just always replay the situation in your mind and make sure you aren’t the problem. Be ready to admit it if you are.
3. It’s much easier said than done, but stay cool and don’t let anger get you bent out of shape. People who act like children should be treated as such. If they become angry and start yelling, it’s best not to engage them. Let them have their say, but assume they are just venting. Don’t take what they say personally, just remember if the conversation needs to continue, let it wait until they can act like an adult. At some point, you may need to even tell them that.

A soft answer turneth away wrath: but grievous words stir up anger.
Proverbs 15:1

A Simple Truth

Whether it’s fair or not, the people who get the best deals are people who have money. The guy who never has a dime to his name will always pay full price or more. As a matter of fact, there’s a whole industry that preys on the penny-less. That’s how credit card companies and cash advance establishments make so much money. They catch people when they’re down, and tack on the interest!

Why do people with money get better deals? Someone who always has money in his/her pocket gets the best deals for a variety of reasons. Here are a few of them:

1. They can buy NOW……..while the deal is hot.
2. If they were to borrow money, they are less risk for a lendor.
3. They will be offered bargains because of their ability to buy.
4. They know needs and emergencies are coming, and they are prepared…..which gives them money.
5. They know standard prices and seek discounts.

So it all comes down to having money. Always having money doesn’t necessarily mean that you make a LOT of it. It just means that you don’t spend every penny you get. It’s important to learn how to carry money in your wallet or purse, and not spend it. If you can do that, there will always be opportunities to save money on purchases. You just have to be prepared to take advantage of those opportunities when they present themselves.

Have you noticed how some bloggers really add a touch of life to their sites by the way they use photos? In my opinion, photos can make a plain, boring-looking site look great by adding that visual anchor. In a previous post, we talked about a few easy enhancements you can use to make your photos stand out. Here we’ll look at a few more ways to mix it up!

#1 – Make Your Photo Transparent

Blending a photo in with the background using the Opacity function can have a really cool effect. Opacity gives your photo a transparency, which in effect makes the background blend through. Just choose your photo and open it in Photo Filtre. Open a new palette with a white background. Copy the photo and paste it on the white pallet. Rather than validating the paste when you right click on your mouse, choose paste options and move the opacity slider down to 50%, click ok, then validate the paste if your pleased with the results. That’s all there is to it!

#2 – Make Your Own Illustration

I really like to make my own illustrations, because it’s just a lot of fun to experiment with graphics. Not only is it fun, but the illustration is tailor-made just for a particular post. The sky is the limit here as far as your options are concerned. Whether you use pictures in your illustrations, bright colors, or make it kinda plain, the cool thing is that nobody else has one like it! Generally, I open a new white palette in Photo Filtre, find a font I like, and start experimenting until I come up with what I’m looking for. Give it a try…….

#3 – Make Your Own Logo

Another thing that can be fun as well as add a little bling, is making your own logo or a graphical header image. This one can get a little tricky, but it all comes down to finding a font you like, and using colors you like.

Conclusion

All the examples here are original graphics that I put together in just a few minutes time. They were all made using the free version of Photo Filtre. I like it because of it’s easy learning curve. You can download it here.

*All the examples below were made using Photo Filtre, which is a free image editing program. The same results can be achieved using other image editing programs as well.

Tip #1 – Add a Border

This is probably the easiest step in adding that little somethig extra. Adding a border doesn’t look as well on every photo. For instance, I think a photo that has a white background and will blend in with the background looks better without a border. In most themes, placing the “border” element in the tag of your photo is all it takes to make it happen. I’ve seen a few themes that didn’t want to cooperate however, so the result can be easily accomplished using Photo Filtre. Just click the Image link at the top and choose “Outside Frame”. Then your given the choice of color and thickness of the frame. I made this one red to make it extra noticable for this example. Sometimes a more subtle color may work better. Now that was an easy tip, huh? Wait till you see the next one……

Tip #2 – Add a Drop Shadow

Now this one really makes a difference! This little shadow gives the illusion that the image has space between it and the actual webpage. This is one of my favorites. Just click the Image link at the top of the Photo Filtre interface and choose “Outside Drop Shadow”. Not only will this add a shadow, but you can choose the color, depth, and the direction. As for the color, black or gray will look best most of the time, but you just have to experiment. Keep in mind that there really aren’t any right and wrong answers. It’s all about what YOU like and what YOU think will enhance your content rather than steal attention away from it. Now the next one is super cool because you can combine it with either of the first two tips, and it still works great……

Tip #3 – Rotate the Photo

Wow! Now that looks good. Sometimes the easiest things can make all the difference. When you think rotate, I think it’s probably natural to think in terms of 90 degrees or 45 degrees, but rotating an image ever-so-slightly really stands out. In Photo Filtre, go to the Image link at the top, and click on Rotate and choose Free. Now your given the choice of exactly how many degrees you want this thing turned. One of the cool things, is that you can add a minus sign in front of whatever the number, and the image is rotated counter-clockwise. That’s exactly what I did with the image here. It’s rotated at -3 degrees. Well, what do ya think? Look good?

…Don’t Forget

Remember, to place your images on your site, they have to be hosted online. I generally upload them to a folder on my own server, but you can also use services such as Flickr or Photobucket.