• Menu

Tweak Your Blog (6/10)

Welcome to my new “How To Blog” series! In this series, I’ll try to put my knowledge to good use and shed some light on the basic of blogging. You will learn how to set up a self-hosted blog, what are the must-have plugins, how to attract readers, how to monetize your blog etc. I’ll publish a new “How To Blog” post every Saturday.

A fun part of blogging is tweaking and customizing your blog. Not only you will be able to transform a default template/ theme into a unique piece of artwork, but you will also get a chance to catch readers’ eyes. And that’s priceless!

We’ve already covered what you needed to put on your blog, and for WordPress users, what were the best plugins. Now, let’s have a lot at what you can do to tweak and customize your blog.

The first easy way to pimp your blog a bit is to add widgets in your blog sidebar. Widget are a portable chunk of code that can be installed and executed on web pages. They could be a list of recent visitors, the weather forecast, pictures badge, polls, songs you are listening etc. Widgets are extremely easy to install: most of time, they are drag and drop elements. However, make sure you don’t add too many widgets as they can slow down your blog’s loading time…

For widgets lists, check out:

The second thing you can easily tweak in your blog is your CSS. CSS stands for cascading style sheet and it’s used to describe the presentation of a document: it defines colors, fonts, layout (borders, margins, padding etc.). I was a total beginner when I started blogging (I dealt with Chinese language a lot, but never with code!) but I found tweaking CSS quite easy.

Most of the CSS is pretty much self-explanatory. Just take your time and read it a bit — you will notice things like:

  • font:12px Arial, Helvetica, Sans-Serif; (controls the font’s size and family)
  • border:1px dotted #959595; (controls the border’s size, style and color)
  • background-color:#436EC4; (controls the background’s color)
  • margin:0 0 0 10px; (controls the margins, around pictures for example)
  • padding:14px 15px 20px 22px; (controls the padding, the space between a picture and its border for example)

This is just a few lines from my own blog CSS to show you how easy it is to play with it. You can start by changing colors, borders styles etc. Just make sure you backup your original CSS first!

Sometimes, you want to change something on your blog but you don’t know where to find it on your CSS. For that (and much more!) there is a very good Firefox plugin called “the web developer toolbar“. It will help you locate the CSS on your blog very easily.

You can also study CSS with W3schools. Weird name but pretty good tutorials! Think of Digital Point as well, this forum has a good helpful section on CSS questions.

Don’t feel like digging into CSS and need a quick fix? Popular Blogger CSS hacks include:

There are less CSS “quick fix” with WordPress (except layout control, colors, fonts etc.) because we also use Php files, plugins etc. A bit different here.

Finally, don’t forget to customize your blog by making your own header (Blogger, WordPress and other plateforms), signing up with Gravatar (everybody!) and even adding a navbar (WordPress and Blogger, thanks to a hack).

The header is probably the first thing you should customize if you use a default template. It could be an image (like on my blog), or just text. Changing your blog header is quick, easy and does wonders. For blogger users, check out background image for blogger header, and for WordPress users, you can read designing headers. It is always best to make the header clickable, so that your readers can find their way back to the main page: make the header clickable on WordPress, and on Blogger.

Then, you might consider signing up with Gravatar. Globally recognized avatar are free and they follow you everywhere. A lot of blog are now set up to display gravatar by your comments, including WordPress 2.5. I do it on this blog too (if you don’t have an avatar, my blog will display a snapshot of your website instead). They are convenient and quite cool in my opinion!

Finally, I recently came across a couple of really cool tutorials to make a nice navbar (the navigation bar is right below the header on my blog… it links to static pages). For WordPress users who don’t have a default navbar (one that was included in the theme), you can use a very cool plugin: WordPress Menubar. I also found a great tutorial to make an advanced CSS Menu, with button graphic. I used this tutorial for my own blog.

Blogger user can use the Add A Menubar hack. I haven’t tested it (I had already moved to WordPress when I found it) but it looks pretty straightforward.

And here you are! By now, you should have the best-designed blog of the web!

It’s hard to cover everything and I didn’t want to use too much “nerd-speak” but I hope these basic information will help you tweak your blog. Don’t hesitate to send me the result: I love blog design!

Leave a reply

Your email address will not be published. Required fields are marked *

18 comments