Wel­come to my new “How To Blog” series! In this series, I’ll try to put my knowl­edge to good use and shed some light on the basic of blog­ging. You will learn how to set up a self-hosted blog, what are the must-have plu­g­ins, how to attract read­ers, how to mon­e­tize your blog etc. I’ll pub­lish a new “How To Blog” post every Saturday.

A fun part of blog­ging is tweak­ing and cus­tomiz­ing your blog. Not only you will be able to trans­form a default template/ theme into a unique piece of art­work, but you will also get a chance to catch read­ers’ eyes. And that’s price­less!

We’ve already cov­ered what you needed to put on your blog, and for Word­Press users, what were the best plu­g­ins. Now, let’s have a lot at what you can do to tweak and cus­tomize your blog.

The first easy way to pimp your blog a bit is to add wid­gets in your blog side­bar. Wid­get are a portable chunk of code that can be installed and exe­cuted on web pages. They could be a list of recent vis­i­tors, the weather fore­cast, pic­tures badge, polls, songs you are lis­ten­ing etc. Wid­gets are extremely easy to install: most of time, they are drag and drop ele­ments. How­ever, make sure you don’t add too many wid­gets as they can slow down your blog’s load­ing time…

For wid­gets lists, check out:

• 50 Great gad­gets for your blog
• Wid­get­box

The sec­ond thing you can eas­ily tweak in your blog is your CSS. CSS stands for cas­cad­ing style sheet and it’s used to describe the pre­sen­ta­tion of a doc­u­ment: it defines col­ors, fonts, lay­out (bor­ders, mar­gins, padding etc.). I was a total begin­ner when I started blog­ging (I dealt with Chi­nese lan­guage a lot, but never with code!) but I found tweak­ing 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, Hel­vetica, Sans-Serif; (con­trols the font’s size and family)
• border:1px dot­ted #959595; (con­trols the border’s size, style and color)
• background-color:#436EC4; (con­trols the background’s color)
• margin:0 0 0 10px; (con­trols the mar­gins, around pic­tures for example)
• padding:14px 15px 20px 22px; (con­trols the padding, the space between a pic­ture and its bor­der 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 chang­ing col­ors, bor­ders styles etc. Just make sure you backup your orig­i­nal CSS first!

Some­times, you want to change some­thing 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 Fire­fox plu­gin called “the web devel­oper tool­bar”. It will help you locate the CSS on your blog very easily.

You can also study CSS with W3schools. Weird name but pretty good tuto­ri­als! Think of Dig­i­tal Point as well, this forum has a good help­ful sec­tion on CSS questions.

Don’t feel like dig­ging into CSS and need a quick fix? Pop­u­lar Blog­ger CSS hacks include:

• Set­ting up a “related post” sec­tion (by Jackbook)
• Remove the nofol­low tag (by Jackbook)
• Adding/ remov­ing a side­bar (by Jackbook)
• Remov­ing the navbar (by Blog­ger Templates)
• A wiki of pop­u­lar hacks with Blogger

There are less CSS “quick fix” with Word­Press (except lay­out con­trol, col­ors, fonts etc.) because we also use Php files, plu­g­ins etc. A bit dif­fer­ent here.

Finally, don’t for­get to cus­tomize your blog by mak­ing your own header (Blog­ger, Word­Press and other plate­forms), sign­ing up with Gra­vatar (every­body!) and even adding a navbar (Word­Press and Blog­ger, thanks to a hack).

The header is prob­a­bly the first thing you should cus­tomize if you use a default tem­plate. It could be an image (like on my blog), or just text. Chang­ing your blog header is quick, easy and does won­ders. For blog­ger users, check out back­ground image for blog­ger header, and for Word­Press users, you can read design­ing head­ers. It is always best to make the header click­able, so that your read­ers can find their way back to the main page: make the header click­able on Word­Press, and on Blog­ger.

Then, you might con­sider sign­ing up with Gra­vatar. Glob­ally recog­nized avatar are free and they fol­low you every­where. A lot of blog are now set up to dis­play gra­vatar by your com­ments, includ­ing Word­Press 2.5. I do it on this blog too (if you don’t have an avatar, my blog will dis­play a snap­shot of your web­site instead). They are con­ve­nient and quite cool in my opinion!

Finally, I recently came across a cou­ple of really cool tuto­ri­als to make a nice navbar (the nav­i­ga­tion bar is right below the header on my blog… it links to sta­tic pages). For Word­Press users who don’t have a default navbar (one that was included in the theme), you can use a very cool plu­gin: Word­Press Menubar. I also found a great tuto­r­ial to make an advanced CSS Menu, with but­ton graphic. I used this tuto­r­ial for my own blog.

Blog­ger user can use the Add A Menubar hack. I haven’t tested it (I had already moved to Word­Press 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 every­thing and I didn’t want to use too much “nerd-speak” but I hope these basic infor­ma­tion will help you tweak your blog. Don’t hes­i­tate to send me the result: I love blog design!

Related arti­cles:

1. Must Have On Your Blog (5÷10)
2. Blog­ger Vs. Word­Press (1÷10)
3. The Art Of Pro­mot­ing A Blog (4÷10)
4. All About Blog­ging: The Evo­lu­tion of a Blog
5. Cor­rer Es Mi Des­tino Reloaded !