GeminiGeek’s Online Journal

Building GeminiGeek’s Online Journal #2

August 14th, 2007 in Site Related and Wordpress

This is yet another Building GeminiGeek's Online Journal series. In Part 1, I wrote about the complication appears when I try to change my site’s URL structure to something that makes more sense (at least to me). In this part, I am going to write the redesign process, which covers the idea of my new logo, new theme, and the layout.

Part #2: The Redesign

Ever since the Web2.0 hype on the internet, I always wanted to revamp my site and follow the trend. If you are a reader since day one, you should know that my site used to be known as Clueless Dream. And yes, my site is still number 1 ranking in Google (at the time I am writing this entry) for the keyword "clueless dream", which is weird, because I kinda dump the wording from my blog except for some older entries.

Old school design eh? Despite being old school, that design have better Adsense Click-Through-Rate than my current design! Well, I have to let-go of my ad-revenue for the sake of better looking site (at least to me) :P.

The Logo

I was still in the Web2.0 mood when I am doing the redesign. I figure why not create a logo for my blog? After fiddling around shapes tools in my Adobe Fireworks, I come out with this fiery shape thingy.

That is the original logo I created, before I turn it around and resize it. It is created with 9 Spiral shape, with a little shadows and a dip of gradients. Walla, I got my logo. I resize it and turn it around so that it look more like fiery shape thing. What you see currently in my header is the end result.

The Colours

When it comes to websites, for some reason I like the reds and pinks. In real life, I don’t wear or use anything pink. Weird eh? I remembered my previous design, the time when I released the first Cherry Berry, a lot of my friends asked me, “Since when a guy like you turn so faggoty?” Well, until now, I still can’t resist having pink in my blog. There you go, I am using pink in my links!

I used the Web Developer Tools to extract the colour information in my blog. See? I use a lot of blacks and greys, with some a pinch of pinks and reds. The combination isn't that bad I think. Well, I am not so much of a colour perfectionist, it works for me, and so far nobody complained about the colours, yet.

The Layout

I am not so much of a person with thousands of widgets to play around in the sidebar. That's why I only use single sidebar instead of dual sidebar. Because most people read from left to right, I guess it makes more sense to have the content in the left and sidebar on the right. In terms of SEO and readability, I have my Content to load first, followed by Sidebar. As for the Homepage, I have additional "Welcome Message" at the top for readers to easily navigate through the topics that I write.

The "Skeleton" of my current design. No paper version, I don't have scanner

For the sake of easier styling and a cleaner HTML, I sketched a skeleton on paper, and try style the DIVs accordingly. I am not going through the details because it will make this entry goes on and on and on. Hah Well, I might write on the creating a Wordpress Theme Guides in the future

Tips and Tricks

Here are some tips and tricks for those of you who would love to customize a Wordpress theme yourself

Ads in between Entries

A lot of people want to insert their Ads in between two entries on their Wordpress blog, but don't know how. Well, I will show you how for now. It's really simple, just a play with numbers. Open your index.php and lets do the magic!

First, you look for this code.

Make changes to it by inserting some 2 line of codes:

Well, that's not all. Now look further down until you find endwhile. Add some codes before it so the end result would be:

And you will have post in between the first and the second entry.

The Nicer Category

The thing about Wordpress when you post an entry into multiple categories, the_category() template tag will stupidly separate each category with a comma, or other separator that you chose. So, if your entry is posted in 3 categories, it will show as "Entry posted under Category, Category2, Category3". It makes more sense if it is "Entry posted under Category, Category2 and Category3". So, how do you do it? Well, open up functions.php in your theme folder and paste this code:

The next thing you do is replace the_category() in your theme files with the_nice_category(). Nifty eh?

Gravatar in Posts

One of the cool feature I implemented to TheMiak is the use of gravatar in a post! Well, now I will reveal the secret. Open up functions.php in your theme folder and paste this code.

The usage is the same as the gravatar plugin, only that the code you put is <?php gravatar_post() ?>, and it must be in within The_Loop.

That's it I guess. Stay tune for part 3 of this series, where I will write on how to create a more usable homepage, not just the default show latest blog post page.

Popularity: 5% [?]