Its been a while but Im back with another Free WordPress Theme. The theme features a javascript menu. To make it work in WordPress, I dove into theme options for the first time! I’m excited at how it turned out and had to give myself a little pat on the back for attempting theme options.

Free WordPress Theme: Blue Dock

This theme features a jquery plugin for a super cool expandable hover menu, like the dock menu on a macintosh.

Not only does it look sweet, the theme options give you total control for what goes in the menu.

Copy and paste any url into the form field. Add pages, posts, links to outside pages, whatever you heart desires. You can also decide which icons you’d like to use. I’ve prepared 40 icons for use with the menu from iconedens ‘Bright’ icon set. I’ve also included a photoshop file, so you can prepare your own icons if you wish.

View the Demo
Download: BlueDock Theme (2.37 MB)
Register for Updates to this theme, and to be notified by email
when new themes are released.

Other features:

• Featured Home Page description area (allows html)
• Latest Post Home Page Styling
• 2 Column Home Page Excerpts feed
• 3 Column Widgetized Footer
• Stylized Comments
• Meta tag icons (from iconfinder.net)

All it really takes is 3 minutes to Optimize WordPress for search engines, but lets take our SEO a step further and dig into theme code. Now that I’ve been tearing apart themes for a while, it’s a golden opportunity to soup up WordPress for max optimization. Id like to offer it as a free download to my readers:

Free SEO Theme for WordPress
This layout has been restructured and totally customized for Search Engine Optimization. I kept it very clean, light on code and graphics, with important information at the top where spiders cant miss it. Plus the theme structure lets you use WordPress to keep your keywords organized… Less planning, more writing.

View the Demo
Download: SEO Theme (121.13 kB)

What Was Done:
I moved the H1 tag to the top where it belongs, using the Category to automatically fill it. Similarly, post Tags automatically fill your H2 tags. I took the weight off the post title, so now you can write awesome headlines for your readers, and not for search engines. Your content immediately follows very close to the top of the page.

The page menu was moved out of the spiders way with CSS Positioning, and I added some cool drop down CSS. Finally, I added breadcrumb navigation to the bottom of the page, so your keywords are not only read first, they’re also read last.

The layout is built to fill the screen and look good at all resolutions. Sticky posts have additional styling to give your featured posts some pop. Images for sticky posts are automatically inserted using the first image in your post.

How To Use This Theme:
WordPress is a very handy tool for recording keyword research. As you find good keyword phrases, enter them as Categories. (I also use the category description area to record keyword data since the theme is not coded to show a description, the data remains private.) Categories  do not show up in WordPress until you use them, so its a good way to save data while keeping organized.  Now as you write your posts, you will have categories available to you. This way you can reference your keywords while writing… sort of a set-it-and-forget-it method. Choose your category, and your H1 tag is complete.

I read about a CSS Trick where you move the menu code down past the content, while keeping the menu at the top of the page. This can help with your site’s Search Engine Optimization, giving the spiders relevant content and keywords first on your page, while still providing good navigation for your readers. Read the rest of this entry »

This one was long overdue. Even after a year of coding with only CSS, I was ready to sit down and relearn floats. There had to be something I was missing. It just didnt work. Since the default behavior of a div is to stack on top of each other, they must be floated, so they behave like table columns. The problem arises after the float. The float must be cleared somehow or the info below runs right into the columns.

After reading Smashing Magazines article on CSS Floats I was surprised at how SIMPLE the fix is. Two little words were the key to ending my frustration. overflow:auto. remember them well.

Here’s example code for ending your float woes:

Build your columns inside of a container and assign the overflow to auto…

<div style="overflow:auto;">
<div style="float:left;">left</div>
<div style="float:right;">right</div>
</div>
<div style="border:1px solid #cccccc;">footer</div>

Heres the result:

And with little extra styling:

<div style="background: #555555 none repeat scroll 0% 0%; overflow: auto; width: 100%;">
<div style="padding: 1%; background: #cccccc none repeat scroll 0% 0%; float: left; width: 86%;">
       Left
 
       Content</div>
<div style="padding: 1%; float: right; width: 10%;">
       Right</div>
</div>
<div style="background: #333333; color: white; text-align: center;">
   footer</div>

Heres the result:

Happy CSSing!

Free Webmaster Resources: SEO AddOns for Firefox
Add SEO Power to Firefox with two free addons.

My searches have been missing something since the live PageRank addon became incompatible. It feels like forever. After a bit of searching I found a great addon with live google PageRank and so much more.

SearchStatus for Firefox has an impressive bag of features. Choose where in your browser to display live Google PageRank and Alexa rank. Highlight NoFollow links on the page. Theres a keyword density analyzer and backward/related links. Also includes a link to show indexed pages for Google, Yahoo and MS Live shows you all of the pages on your site, or any site that have been indexed.

In this video Oleg goes through all the features.

SEO Quake has been a popular free webmaster resource for a while, becuase it has stood the test of time. Gives a quick SEO snapshot for your keyword searches. When you’re searching for keywords, get a quick overview of your competitors Page Rank, number of pages indexed, number of links pointing to the page (for google, yahoo and MSN) Plus Digg, Del.icio.us and Technorati history and more. Toggle it on and off from the bottom of your firefox browser for easy access.

Heres a screenshot:

For researching keywords to optimize your site, these two tools should really cover it.

Happy SEOing!

As a Web Designer and WebMaster, I have tons of free resources just waiting to give away. In the process of gathering everything up and this section will be on its way.

Using CSS3 to Embed New fonts in Your Website.

If you’ve been tooling around web design and developer sites lately, you may have noticed a strange phenomenon. Nice fonts. Much nicer than the default web fonts, and no, they’re not images. I know from the 100 times I’ve selected the text muttering ‘wow thats cool’. We’re no longer stuck in what I’ve heard humorously termed as ‘arial hell’.

Until now, this was about it for web safe font usage:

Enter @font-face

@font-face is an actual css rule created years ago to embed fonts on a web page. It wasn’t supported by browsers until recently. Now Mozilla and IE support font embedding. I’ve tested in FireFox 3.5 and IE7. It works in both, though I feel IE’s a tad sluggish.

This is a huge step for online typography. Now when clients ask ‘Can we do something about those ugly fonts?” you can say, YES! yes we CAN! It’s a bright day in the web design world. To embed beautiful fonts, all you need is the right font formats and the CSS to get it done.

I’m all about handy tools to make life easier, so let’s head over to FontSquirrel where they have prebuilt ALOT of @font-face kits. This way we know the fonts are legal for your site (check the license for other uses) and the code is already written.

A peek at just a few of fontSquirrels font-face kits.

Since they provide little how-to, I’ll give you a quick walkthrough.
(W3 Documentation for @font-face)

The files.

-Your kit comes with all the fonts needed, in the following extensions:

• .woff  Web Open Font Format (mozilla)
• .eot Embedded Open Type (microsoft)
• .svg Scalable Vector Graphics (XML web graphics iphone)
• .ttf   standard TrueType font

-It comes with an external style sheet which defines your fonts for the browser. (stylesheet.css)

-And it comes with on-page example classes to control the size and line height. (in demo.html)

Lets plug it in.

1. Extract the files into a folder and upload them to your server. I called my new folder ‘fonts’ and put it inside my wordpress themes folder. I kept it simple and left stylesheet.css in the same directory as the fonts.
2. Open the file that contains your websites <head></head> tags (index.html in most cases… header.php in your wordpress themes folder)
3. Include the following code inside the head tag (given in demo.html – make sure to use the correct path to the file)
   <link rel="stylesheet" href="http://yourdomain.com/correct-path-to/stylesheet.css" type="text/css" charset="utf-8">
4. Style your new font with CSS. (example classes given in demo.html)
   its a simple switch.
   say my h1 style was written this way…
   h1 {font-family: Arial, sans-serif;}
   Add the font-family defined in stylesheet.css like this:
   h1 {font-family: 'DroidSansRegular', Arial, sans-serif;}

Thats all there is to it. Do it once and you’ll be a pro! And you can download them all, they’re free!

Other options and some history:
Replacing fonts for the web used to require much code. sIFR has been around for a while and I give them serious props for making it work. Looking into the code, I had to pass because frankly, its complicated. It uses javascript to call flash to redraw the fonts. And with all that code, page load time suffers. If the visitor doesnt have javascript or flash? They see the default.

Cufon is much easier to understand and implement and does a nice job. Their generator converts fonts to the correct format and there’s a nifty wordpress plugin. Less code means faster page loads but be aware of where your fonts are coming from and if you’re allowed usage on your website. Wouldn’t want license violations. You might even want to do some of your own comparison testing to see which loads faster, cufon or @font-face

Happy TypeFacing!

With the right plugins, you can optimize WordPress in 3 minutes. please excuse my utter lack of video skill, i didnt realize how hard it is to talk and work at the same time!

watch the high quality, full screen version on vimeo.

Here are the plugins:
All In One SEO Pack
Google XML Sitemaps
Related Posts by Category
UPDATE: heres another related posts that might work better
Contextual Related Posts
WP Easy Archives is no longer available. If it is, i cant find it.

Comment with questions and I’ll explain in more detail

Happy SEOing!

Try these Free Copywriting Videos!

Ok, so people have been asking about web design services. I figured I’d take a shot at writing a sales page. Im no writer and thats fine, but a little help getting my point across would be helpful…  I started looking into it.

If you want to learn something, you try to learn from the best,  right?

Copyblogger.com tipped me off to John Carlton who is proclaimed to be the best in copywriting. I’m following his  material now. So far it looks like winning stuff.  He’s teaching his 17 step system that one of his students says is  “freaky” how well it works.  Id like to see more and try it out before I recommend anything to spend real money on.

In the meantime, I found you guys some free videos.   Not as much finesse as John Carlton’s, but the basics are there.  It’s Copywriting for Promotional Emails, but it translates easily to salespage copy.  The site requires a sign up (sorry), but i think its worth it. they’re pretty good videos.

you know they say just a little copywriting know-how can make a big difference!

best of luck
and happy writing!

I love open source. A bunch of developers working out their latest programming skills for everyone to share. Anyone who wants to learn new code has a free opportunity to learn from some of the most cutting edge guys.

I’ve been researching open source social network platforms trying to find, well basically the next wordpress of social apps… Read the rest of this entry »