We’ve completely revamped our websites, and have now customized the logo, header, sidebar and footer… that should do it! If there happens to be anything fishy about your blog’s post section, make sure to tweak the “page.php” file in your WordPress admin section.

BUT WAIT…
NOT SO FAST!

One of the biggest peeves of any web designer/coder is the way that different web browsers work. Naturally, the fact that there are many different browsers to chose from will lead us to believe that each is different from the other. The first thing that I recommend that you do before releasing your website is to make sure that your blog not only looks good to you, but that all your viewers have the same experience. We want to ensure that if a user is loading up your blog on Mozilla Firefox, it looks just as stellar to a reader using Internet Explorer or Safari.

Browsers to test compatibility:
While there are actually hundreds of browsers available (and yes, different versions of browsers produce different results), we should really only test those that come up the most. After all, we can’t have it perfect for everyone (sad, isn’t it?)… so we need to focus on our biggest streams of foot traffic. I recommend that you test on the following:

• Mozilla Firefox 2.x and 3.x
• Internet Explorer 6.x, 7.x and 8.x
• Safari 3.x and 4.x

Sure I am leaving out a few names… but they are really not as important as these top three names and their most often used versions. The problem here? We cannot test multiple versions of these browsers on our computers because once you install a new version, it usually overwrites the old!

How to Test Your Blog on Different Browsers

1. The number one way to see how your website will appear on multiple screens is by using a website called BrowserShots.org. This is really my “swiss army knife” of compatability testing, and I use it on any website that I create to ensure that things look good across the board.

2. Download the Microsoft Internet Explorer compatibility tester (for looking at old versions of IE) that is called “SuperPreview“

3. Install multiple versions of multiple browsers. This is a bit messy, but can actually be done if you have the time and the elbow-grease to figure it out. For me, I’d rather stick with the first two options.

4. Use a paid service called “Browser Cam” can help you to test what your website displays on a variety of browsers, but it comes at a hefty price. Think you can stomach it? Then by all means check it out.

Make sure that your coding works, and look up solutions if anything looks a bit fuzzy (more than likely a problem in the coding). I’m not by any means an expert… so you may have to do some fiddling if it doesn’t look right. Once that is done, congratulations… your new theme is complete!

-Jimvesting

It’s lucky number 13 for the Net Fool’s Build-A-Blog Workshop, and it’s high time we work out the kinks of our footer section, eh? We’ve started to make headway on our customizations, but we need that awesome ending to leave our readers happy when they reach the end of content. Before we get started, lets take a look at what some of our participants are doing!

• Antonio has made some great progress with an already awesome looking blog called “My Info ITN“
• Johnny put our words of advice to work on his home repair blog that he named “Home Repair Helper“
• Devon, after a bit of domain name headache, got online with “Gamer Blurb“

This is just a random sampling of some of the great work we have seen so far from the Build-A-Blog Workshop. Keep up the good work and you might be featured next time we recap our participants!

Two Types of Footer Sections

I want to help you through your footer section by breaking things down into two categories. In my mind, you can have one of two types of footers: one with room for extras (like Jimvesting), and one with a simple row for links (like Jimvesting). With each, come a few advantages and disadvantages… so read carefully.

Footers with Room to Share
Is your footer more like the one at Jimvesting.com, then you need to maximize the amount of use that you get out of it! Because the viewers that scroll down to the bottom of your website are going to be, on average, more interested in your content than the usual passerby… we have to make sure that we get in one last monetization or use for our guests. Here are a few suggestions of features you should add to your footer:

• Advertisements (affiliate links work great!)
• Alexa.com widget (to boost your rating)
• Flickr Images
• Top Commentors/Users
• Site Statistics

Footers with Just a Row (or Two!) to Spare
Perhaps you own a website with a minimalist footer that you just can’t do much with? No problems here, other than leaving some room to get some link love back to the original theme designer (we don’t want to void any copyrights!)… you should always give your users a way to link back to your homepage. Additionally, you can use the space available to link to any partner websites that you might have (especially if the blog is part of a network of websites). Finally, because you have room to spare, you can always slide in an affiliate link or two and hope for the best.

Spend 30 minutes today revamping your footer section to make sure that it fits with the rest of the blog. Don’t forget to include your tracking script that we discussed on day 9 of the workshop, as well as anything else that you want to load at the end. Remember, the footer is the last thing that will load, so it is the best place to put a time-intensive script because the rest of the website will be totally visable to your viewer before they waste their time waiting!

-Jimvesting

Now that we have our logo and header in place, let’s start working on the layout of our website. We’ll start with the sidebar today, and work our way down.

Whether you have a 2 or a 3 column website, there should always be room for things like widgets and advertisements along the sides of your theme. At theNetFool.com, I have a simple 2-column design with a right-hand sidebar. The same holds true at Jimvesting.com, so I am going off of the same design thesis.

Two Parts of the Sidebar

When I think of the sidebar of my blogs, I normally consider two different areas, the first “block,” and everything else. Essentially, when you have some kind of sidebar (or bars if you are using a 3-column design ), we are going to put more emphasis on the top-fold regions. What is this “top fold?” When you load up a website, what can you see without scrolling? Everything that you can see is known as “top of the fold,” with all the remaining material being below the fold. Naturally, your most valuable real estate is “above the fold.” So this is where we want to put the things we need highlighted.

Sample Sidebar Placements:

Above-the-Fold Sidebar: Expensive advertisement blocks, newsletter subscriptions, RSS feed subscriptions, social media icons, highly-relevant material
Below-the-Fold Sidebar: Top commentators, editor’s pick articles, donation buttons, inexpensive advertisements, calendars, basic widgets

Modifying the Sidebar

Now that we have a basic idea of what we want to go where, it is important to know where to look in order to change things up to our liking. This will vary by blog theme, but should normally be in one of two places within your WordPress Administrator’s panel. If your theme is fully-widgetized, than you need only control and modify your settings in the “Widgets” section underneath the “Appearance” tab on your admin panel. Otherwise, though your blog more than likely still has widgets active, you will need to check out the hard coding by going to “Editor” in the “Appearance” section, finding your theme and entering into the “sidebar.php” file for modifications.

Normally I would suggest changing the top of your sidebar to include some kind of RSS-subscription area, or a block where you can subscribe to your newsletter. Basically, the idea of having a fast-access to getting your readers to lock into your blog is the way to go. Don’t like this? Then by all means put an advertising block or two in this region and capitalize on the high-clickthrough placement.

-Jimvesting

Welcome back to day 11 of Jimvesting’s Build-A-Blog Workshop. My apologies for the few days of delay, final exams can be found as the culprit behind that lag. Back into customization with day 11 where we will look into our blog’s header.

Why Your Header Matters

When you look at Jimvesting, the first thing that strikes you is my header. I had this designed by a professional web designer for good reason, it has been the single biggest lead converter for my website. The one thing that is “bad” about it? It has no monetization, and practically no room for it. However, where I lack in monetization value… I believe I pick up in entertainment value. This trade-off really boils down to the purpose of my website: to educate and entertain, not to profit as much as possible. Because of my specific goals, my header looks the way it does. Consider the purpose of your new blog, and adjust everything accordingly!

People that come across your website don’t want to see any thing that is a “default.” Not only does having a personalized header add to your own reputation, boosting your ranking naturally across the blogosphere, it adds a serious reason for readers to come back again. I have found that not only do you get that “respect” as being an industry pro with a nice header to show off your stuff… but you actually increase the number of people that will subscribe to your blog and read your content dramatically. As sad as it is, people are suckers for good looks… and will usually trust content based on how legitimate it looks, rather than the quality of your work. Not to say quality won’t get you places, but starting with a great website is definitely a good start.

5 Ways to Spruce Up Your Header

Here are five of the best ways (in my opinion) to add some flare to your website’s header. Use these to your advantage as you improve upon the generic template:

1. Have a Designer Completely Redo It
Perhaps the number one suggesting I can make is to actually hire someone to design your header for you in a unique light. I gave a freelance artist on GetAFreelancer.com the dimensions of my header and a general idea of what I wanted for Jimvesting.com, and out came what you see today. Because the header that you want might be too different from the one you received with the template you are now using, don’t hesitate to spend $20-30 to have someone reformat it. Remember, this will be the first thing you see every time you reload the page!

2. Add a Place for Monetization
Please keep in mind that Jimvesting.com is, by all means, not your typical blog design. Normally, I enjoy having some ad real estate right at the top of the page. My new blog design “Transgravita” came with a nice banner (468×60) advertisement right at the top in my header, so this worked out perfectly at Jimvesting.com. The other ad size you could use is a large leaderboard (728×90), which is actually my recommended type if you can stomach the size.

3. Put in Some Social Media Icons
The one biggest trend on the internet, especially in the blogging world, is social media networking. Everyone wants to stay connected at all times in this globalized world, so we want to see what our neighbor’s Twitter, Digg, Facebook (etc. etc.) accounts are! Because of this, you should add some social media icons to your header as I have done at Jimvesting.com. Many freelance artists have actually made free icons for you to use on your blogs, you can find a few here.

4. Advertise Your Newsletter or RSS Feed
The primary purpose of your blog needs to be to maintain your reader base. We do this through RSS feeds (your blog’s content syndicated) and Newsletters (free/paid services to deliver content). Your header is a great place to advertise your content, so if you have written an eBook and want your users to subscribe to a newsletter to receive it… or if you simply want to get your readers to sign up to your feed, now is the time. Check out what JohnCow.com has done to his header to allow for this.

5. Link to Some “Money Makers”
You can see that on the far right of Jimvesting.com that I have listed a few services that I am currently promoting. These all contain your affiliate referral ID, so that when someone sees the link and signs up… you get paid! Another variation of this is by putting links right underneath the header (still considered the header until content starts), as is done on the current template of JohnChow.com. This is a great way to monetize your blog’s header, without looking like a sell-out.

Bottom Line: Customizing your header is really a person-by-person deal, and if you need help with the coding aspect I recommend going to DigitalPoint forums and asking for a hand. Essentially, we want to spruce things up… and I have laid out five of the best ways to do it. Whether you are monetizing or simple adding some color, customization is key!

-Jimvesting

We’re one-third of the way through the Workshop, and now that we have stat counters configured to capture our gains (or losses), we can advance into my favorite time of the Workshop… customizing the theme! Let’s start with our new logo.

Why the Logo Should ROCK!

As far as customization goes, I would spend a bit of time coming up with a fancy logo for your blog. I can usually crank one out in 15 minutes for a new site, but I have been looking at logo customization and design for a while now… so I have a small advantage here. Your blog’s logo will be one of the focal points for the website. And unless you have a crazy header (like the one on theNetFool), you will need something that stands out. Remember, whenever you run a contest, advertise or get press in any form… your site’s logo has to be the go-to way to get traffic to your website. That being said, a dull generic logo won’t cut it any more!

Making a Logo That Will Knock ‘Em Dead

Now that we’ve (over)exaggerated the benefit of having a great logo for your blog, let’s lay out the recipe to make it happen! First things first, here is a list of what I believe to be the top three essentials in any logo that you design or have designed:

1. Color Scheme – Your logo should consist of 2 or 3 colors, and fit your template
2. Relevance - You need to have some kind of graphic that “sums up” your niche
3. Web 2.0 – Keep your design fresh, simple and aesthetically-pleasing

There are essentially two ways that we can get our logo: make it ourselves or outsource the work to a professional/freelance artist. I usually do a combination of the two. For example, the header at Jimvesting.com was made by a freelance artist… but the text-logo “THE NET FOOL” was actually made by me! Before we get into the two methods, let’s see what I did over at Jimvesting.com:

You can see that I followed our three steps. First, it is based on two colors that fit with the rest of my theme. Second, it has a stock chart on it to represent making money as well as finance. Third, it is quite simple and “Web 2.0″, as was the original.How are your logos coming along? Post in the comments and you’ll be featured!

Great Ways to Make Your Logo

The first thing you need to do is find the old logo from the template that we installed. You should be able to find this in the “images” folder within the theme that you downloaded… and it will usually be something telltale like “logo.gif”. What we are looking for here is the proportions of the image; in my case, the logo was 274×52 pixels. Simply put, we are going to be making a new one, saving it as the same file name, and re-uploading our new version with our FTP clients (like we uploaded our template in the first place) to overwrite the old logo with the new!

Now, let’s assume that you cannot use the power of Adobe Photoshop to make your own logo. If you can, you probably don’t need my help on this one (however, if you need a second opinion… feel free to shoot me an email).

We need to look for a designer based on budget, so let’s cover some good low-mid-high budget providers:

Low Budget ($10-50): The best “bang for the buck” designer can be found through a design forum/message board. I recommend DigitalPoint Forums or Warrior Forum since they both have tons of great artist… you just need to look for them!

Mid Budget ($50-100): At the middle of the spectrum lies freelance designers. I’d recommend posting a job at GetAFreelancer.com or oDesk.com to get your design job filled quickly and efficiently.

High Budget ($100-$500): At the top, you can find the premium design shops that specialize in logo making. There are a ton of these, but some of my favorites are Eyepinch Design, SOS Factory and Logo Design Guru.

Get those logos ready or order up a customized version for an added bump-up on your blog’s reputation. Tomorrow, we’ll continue with the customizations at hand to really get the most out of our previously-default template.

-Jimvesting