Tweak Your Blog (6/10)

Google+ Pinterest LinkedIn Tumblr +
SPONSORED LINKS END OF SPONSORED LINKS

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!

Share.

About Author

French woman in English Canada. World citizen, new mom, traveler, translator, writer and photographer. Looking for comrades to start a new revolution.

18 Comments

  1. “You will also get a chance to catch readers’ eyes”

    Can you tell me what I’m doing wrong?
    I put holes in the lid, not big enough
    for the eyes to crawl out, but large
    enough for them to breathe. I don’t
    shake them very hard, not very hard
    at all. But I can’t get the eyes to
    blink. They just roll. How can I stop
    them from rolling those eyes at me?

    Seraphines last great read…Bad Manners #1

  2. Froggywoogie on

    Wow, you’re a blog Master! I find your advice more and more useful now that I have switched to WordPress. Still too busy/lazy to customize it but at least I understand how it works now after spending quite some time digging into it.

  3. Wow excellent article – very helpful! Thanks :happy:

    Prues last great read…Canadian Freebie: Biore Skin Care Free Samples

  4. Your blog is cool. I know, it’s
    written by you… but also you made
    it special. Your widgets are thoughtfully
    chosen so your site isn’t “gimmicky” or
    cheesy. You make readers feel special.

    Seraphines last great read…Shortbread Cookies

  5. Hi Zhu,

    My second son has switched to wordpress just a couple of weeks ago then I sent him your first 5 posts on the subject. He says he has successfully implemented the tutorials you gave and has been bugging me for updates – asking about certain terms and other things. I asked him for his site URL but he won’t give it, because I might read some of his personal posts.LOL! 🙂 I gave him your URL and told him you come out with these tutorials on Saturdays, but none of those who have commented here seems to be him.:-)

    Anyway, the posts are in layman’s terms and I understand them too, although it would be a lot different when it is being applied. You’re a great teacher and a very patient one. I’ll send this post to him too. Thanks a lot, I’m a big fan! 🙂 –Durano, done!

    durano lawayans last great read…Traditional Technology for the Tyrannosaur

  6. You sure have a lot of experience and knowledge and the best evidence is to look at your blog itself; Nice, tidy, clean, readable and most of all: personal.

    Thanks for sharing all this in a structured way – a great vault for others to dwell in.

    You mention gravatar – and I guess mine works at your blog too 🙂

    RennyBAs last great read…Adventures shopping trip in Mariestad, Sweden

  7. Most people wouldn’t share all this knowledge. Thanks for taking the time to do this. I’ve always liked your decor and I believe you have one of the most creative blogs out there…now I know why.

    Scarlets last great read…the first workshop

  8. @Jacky Supit – Bug I guess… I’m in the process of switching themes again so I probably won’t bother fixing that 😀

    @Seraphine – The most you can get from me is one eye, sorry… the left one.

    @Froggywoogie – WordPress can be a major headache sometimes but all in all I find it more rewarding than Blogger. I’m Canadian, I value hard work 😉

    @Aiglee – I’ll be in touch with you by email! We keep on changing our plans…! But I will be in TO on Sunday.

    @Celine – It’s okay, your pictures are a great design by themselves!

    @Prue – You’re welcome… thanks for visiting!

    @Speedcat – I had troubles with the first “recent comments” I used as well. These widgets seem to be very fragile 😆

    @sir jorge – nah, you know more than me about web design!

    @Seraphine – Thank you! Coming from you, I love the comment, since I love your artistic sense.

    @durano lawayan – I understand your son, he probably doesn’t have any big secrets from you but hey, kids like their privacy! 😉 I was like that too…!

    Glad I can be useful. Like I always say, I love teaching: French and… other stuffs when I can!

    @stylemaster – You’re welcome and… thanks for visiting!

    @RennyBA – Thank you! I do have a lot of fun tweaking and experiencing!

    @Scarlet – I guess I’m a teacher at heart! Seriously, I love reading tutorials myself I figured it was my time to help.

  9. Wow, another great blog has been found! I found this blog through SU, by the way.

    Anyway, I like the depth of your content and the creative drawing. Keep up the good work.

  10. Hey Zhu,

    Another great tip post! At least I finally learned what CSS stands for (no, I am not that curious about informatic lingo lol)!
    I must say that I prefer the blog showing instead of the avatar: pretty cool!

    Cheers

    Max Coutinhos last great read…The mystery of Wisdom

  11. Well, Zhu, even though all this is way above my head, I do think you should teach “blog-classes”. Seriously, your site looks great.
    I have a hard time reading blogs that use a teeny tiny typeset against an animated background, play loud music AND video and are just too “cluttered”.

Leave A Reply