Today I´ve finally changed my blog´s template (as you may have seen from the old cluttered design to this one. I must admit, it took me more time than I first thought, but I hope you´ll like it anyway.

Let me explain you some of the steps involved in doing this makeover. Maybe it will help you doing a redesign too, if you´re feeling your own blog doesn´t look too good (as my old design was).

The first thing I´ve done was changing the template from a fluid width to a static width, optimized for screen resolutions from 1024×768 and above (notice, you can even watch this blog on lower resolutions, you only have to scroll a bit Therefore I´ve chosen the “Thisaway” template provided from Blogger. But this template was only a 2 column one, but I wanted to have 3 columns to have more room for my links etc., so I asked Google how to change it. I found a nice blog that deals entirely with customizing Blogger blogs. With their help I managed it within minutes to have a nice 3 column layout.

The next big thing was changing some background graphics (you notice that green test tube in my header?). For this task I used an open-source program called Inkscape, a free vector drawing program with loads of features. I thought it would be better to draw with vectors, because so it was easier to make changes to my graphics (as I´m not a painter After creating those images (the test tube, the date and sidebar icons…) I exported them as image files.

Now I had to find a free service to host these images and my friend Midwest indirectly gave me some advice in one of his blog posts dealing about changing your RSS feed button. I used Photobucket, because it even allows hotlinking to your uploaded images. I could even have hosted those images on my blogger account, but I felt using a free service is better, because you have more control over your files (thanks Midwest ;-).

So, the images were ready. The next step was including those images in my blog design, which was a sometimes tricky part, because I had to dive into my template code. I made my changes to the Cascading Style Sheets (CSS) and everything seemed to work fine until I tested my blog with Internet Explorer 6 (the old one). My blog looked different while viewing it with this browser and it took me some time to discover the “bug” that was behind it. It was because I used a transparent PNG image, but IE6 can´t deal with those images correctly. So I changed my graphics to GIF and all worked good. You may ask why I´ve spent the time to optimize my blog for old browser? It´s because around 13% of my visitors still use such browsers and I don´t want them to watch an “ugly” blog while others see it correctly (but I would definitely recommend you using Firefox instead, it´s MUCH better in my opinion).

Shortly after including these background and icon graphics (and the IE6 bug), I thought it would be better to check my blog on different browsers and systems to see if all looks correct. But how should I do this while only having 2 browser installed on my own PC? The short answer was Browsershots. With this site you can check your blog on different browsers like Firefox, Internet Explorer or Opera with all their different versions. After submitting your site, you´ll get screenshots that show you how your site will look on different browsers (it usually takes up to 30 minutes).

The next steps involved in changing my blog design were filling the sidebars with content and links. You see, I´ve integrated a “Recent Posts” block in my left sidebar that´ll show you my 5 last posts. I´ve done this with integrating my blog feed (Bloggers provides this feature). I´ve also changed my archives, it´s now an drop-down list that saves a lot of space for other (more useful) things. I´ve also written some words about me in the right sidebar (ahh, now you know where I come from and sorted the links to my money makers. Take a look at it by yourself.

The last things I´ve done before finishing my work on the new design where adding social bookmarks to each of my blog posts (I followed this tutorial). I also added my tag cloud to the left sidebar (with help of this tutorial) and a nice little favicon. After this I took some minor tweaks on my template code like changing some meta tags and “compressing” the code for faster loading.

You see, there were lots of steps involved in changing this design (this also explains the lack on fresh content because I was busy). But I hope this all was worth the effort?!

I´ve a a big request to all my readers, please tell me your opinions about the new design! Please point out things you like and dislike about it. If you have any problems with it, let me know, I´ll do my best to fix those problems (if I can…).

Thank you and best regards,
Querblogger