After aeons of enduring that old template, I finally decided to take the plunge & go for a new look....
I've only used 2 templates over the last 2 years. First was the default Blogger template, pictured above.
& the previous template, which I've been using for 18 months - this was uploaded on the 12th of August 2007!
No one will ever link that to the original K2 template, a port of the default Wordpress template! I've added so many things (header, background, widgets, etc.) that it was beyond recognition, totally disfigured.
The template was fugly, looked like it was patched together & had an unacceptable load time.
If I had to do a meme of the top 5 things I hate the most, then definitely this template would be included...
The Template - Daily Inspired
I wanted the best Blogger template - minimalist, lean with minimum images, web 2.0-style & a magazine layout. So why not make my own? But I couldn't because I'm a noob at HTML & CSS.
Building a template from scratch would have been like building a car from scratch. Though, as I later found out, I would rather choose a car over a template.
My search for the ultimate template came to an end with Woork's Daily Inspired designed by Antonio Lupetti (live demo here). However this template had two major flaws - it had the default comment pop-up box & standard Blogger gadgets can't be added (& it ain't minimalist).
Nevertheless, that wasn't going to stop me. Friday 13th was a good day for showing up a new look. I spent the whole day customizing the template only to find out in the end that Blogger didn't support it - there were so many errors that it was a total mess.
Lesson of the day - ambitious but rubbish!! Don't try to do several things at the same time, especially if you don't know those things.
& ever since, I've been working on this template one step at a time, testing & proceeding only if each modification worked.
The Tools
I used Dreamweaver for the coding (those hints were a god-send) & Photoshop for the graphics.
Firebug was crucial in helping me analyse other Blogger blogs, especially Woork's since it's almost the same template.
In addition to testing it on Firefox, IE7, Chrome & Opera, I also used this great cross platform browser tool – browsershots.org
Btw all versions of IE - IE5.5, IE6, IE7, IE8 fail at rendering parts of this template.
The Mods
I did not remove many of the 'widgets,' preferring to let them remain as comments. That includes the Ad slots, the Digg button, the submit to bookmarking sites links. Replaced the Technorati widget by Google Friend Connect.
The Header
I used this Create the Adobe CS4 Icons in Photoshop tutorial to create the header & the favicon.
The Home icon
Took me half a day to center that icon (which I stole from Facebook) & remove the black border around it. Works on all browsers except IE – shows a blue border on IE8 on Windows 7. :(
Designing The Holy Search Box: Examples And Best Practices - this post by Smashing Magazine inspired me to add my own magnifying glass icon.
Twitter box
Since I spend more time tweeting than blogging, I needed to showcase my tweets right at the beginning.
Another half a day trying to add a background picture to the Twitter status... until I finally got lost in the padding, margin, div & span tags... phew!
Defeated, what I did was add rounded corners to the background using CSS from Spiffycorners.com & then an arrow using this tutorial.
The Comment Form
I used this tutorial by BloggerBuster to add the embedded comment form. Do not use the name='comment-form' hack, it doesn't work.
Although I've used a link, you can add a TwitThis! button to Blogger by following this tutorial.
Social Icons
For the social icons, I've used the Social Media Mini Iconpack by Komodomedia, found on Smashing Magazine’s 50 Free High-Quality Icon Sets.
The Bottom Line
This template is still half-complete. Despite spending days working on this, it's at Beta stage. I still need to:
- Find a way to add some of the older widgets such as the label cloud, blog archive & blogroll.
- Justify all these posts...
- Add AdSense, do-follow & SEO stuff.
- Use Google Search for the search.
- Use Javascript (MooTools & JQuery) to add more functionality - top posts slider?
- Restyle all my previous posts to blend to this template. (uh-oh)
- Stop procrastinating the above.
If you notice any bugs & have any suggestions, please do comment. ;)
Thanks again to Antonio Lupetti for making this amazing template. Do check out his blog Woork, one of the best Blogger blogs - always updated with awesome tutorials & web design compilations.