The Media Guru

Feb 17, 2009

Tags:


FireShot capture #55 - 'The Media Guru I The Mauritian Tech Blog' - www_themediaguru_co_cc After aeons of enduring that old template, I finally decided to take the plunge & go for a new look....

Image1 I've only used 2 templates over the last 2 years. First was the default Blogger template, pictured above.

http-themediaguru-blogspot-com & the previous template, which I've been using for 18 months - this was uploaded on the 12th of August 2007!

TMG_capture_29_02_08 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.

FireShot capture #52 - 'The Media Guru' - www_themediaguru_co_cc 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
the 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.

FireShot capture #54 - 'Your Title Here' - daily-inspiration-show_blogspot_com & 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
Sponsored Links 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
Header I used this Create the Adobe CS4 Icons in Photoshop tutorial to create the header & the favicon.

The Home icon
Home. 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
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
Comment I used this tutorial by BloggerBuster to add the embedded comment form. Do not use the name='comment-form' hack, it doesn't work.

TwitThis Although I've used a link, you can add a TwitThis! button to Blogger by following this tutorial.

Social Icons
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

lolcat 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.

Blog Widget by LinkWithin
Comments 14 comments
Do you have any suggestions? Ideas? Add your comment.
Please don't spam & don't swear!
Subscribe to my feed
Anonymous said...

This is a GREAT template!

s4ndeep said...

I like this template a lot! :) IF possible dont put adsense just before the first post. Makes a big diference. :)

Goodluck!

Yashvin said...

Nice NICE!

lol, among the best template customizations in mauritian blogosphere!
It has become so evident that twitter has an important place in your life :P

hip hip hip, hourrayyyy!

Anonymous said...

nice template...tiz cleaner and easier to read and it loads very easily...

p.s "Don't try to do several things at the same time, especially if you don't know those things"....point noted

Anonymous said...

yeah also can you add one of the 3d clouds...these look really cool

carrotmadman6 said...

@all
Thanks! :D
Just discovered a couple of bugs. I'm working on sorting them out.

@s4ndeep
That is a hot area, where I get most of my clicks. It'll be hard not to add it there... But since this is a new template, I'll need to test out all possible placements. :)

@Sleepoholic
I won't be adding that 3d tag cloud coz it's Flash, which has a high CPU usage on my PC. :(

Saajid said...

Template is great!!! One of the best ;-)
And I can understand why you put the Twitter box first, it's partly because of you that I became addicted to twitter!!

You should add an iPhone bookmark icon (apple-touch-icon)in case someone wants to add the media guru as a bookmark on his homepage, it's really easy!

carrotmadman6 said...

@sjdvda
I'll look into that... although over the last 3 months, only 20 iPhone users have visited my blog. ;)

Anonymous said...

u`ve got a talent for theme tweaking, BZW sorry, the news on my blog was fake link here

Anonymous said...

Heyyyyy congrats for the new template. Its really nice. Wow template changing season in Mauritius :D very nice theme...keep tweaking it to add your other stuffs and adsense... believe me this template will boost your adsense earning :D

carrotmadman6 said...

@Avish
Thankssss! :D

Anonymous said...

Everything looks fine apart from the logo, or rather lack of logo.

How about running a competition for a new one, must be a ton of designers reading this, myself included.

carrotmadman6 said...

@simon
If I wanted a logo, I could have photoshoped one myself... ;)

vijay said...

hey I am alos using Daily inspired template.

It would be great if you can share, how did you got expandable post thing work?? I tried my best. But failed badly. I love this template, but I need to show atleast some extract of post which default template does not.

Post a Comment

Some html tags like <b>, <i>, <a> are allowed & emos can be used. ;)
Copy your comment before posting in case something fails.
Comments are moderated, may take a while to appear.

The Photoblog carrotmadman6.blogspot.com

Posts on Photoblog

Posts rss feed
Featured Posts

Recent Posts

Categories

Blog Archive