Monday, April 13, 2009

Blogger Tips & Tricks - The Look & Feel

Over the last several weeks, I have had many people stop by and comment on my new layout and several other changes I've made to my blog. I can't tell you how much I appreciate your enthusiasm and support! Many of you have asked questions about various different aspects of the changes--I've dubbed it my Blog Improvement Project--so I thought I'd write a series of posts devoted to how I learned (and am still learning!) to get the most out of Blogger.

It all started a few weeks ago when I was playing with my Blogger template and settings--I noticed an option to have your own domain name, which I discovered upon further exploration can be purchased through Google for $10/year. So I figured, why not?! Of course, along with doing that, I wanted to make my blog have its own look and theme, one that I intend to use for a long time so you think, "Hey, that's Melissa's Bookshelf!" I didn't necessarily feel that it had to look bookish--I felt a little daunted about tackling that after seeing so many amazing blogs that did have a bookish look & feel--but mainly, I wanted it to be inviting and attractive. I'm a huge fan of the colors pink and green (you should have seen my wedding!), so when I came across my current layout I decided it would be the one.

For help with other changes I wanted to make, I've basically just Google-searched what I was looking to do in Blogger (for example: adding header tabs, adding a favicon, creating a label cloud, setting up code for a grab button, etc.) A lot of what I've done has required tweaking existing HTML code, but you don't have to be an HTML expert to start playing around with it and learning what you can do with it. But I thought I'd list some helpful sites I've found for Blogger and how I used them--when you click on the link it will take you right to the post with the relevant information...

So, first things first...


Blogger has a decent assortment of templates, but I always felt like most of them were a little boring (although all of them offer you the option to upload your own picture to the header). There are some great sites with Blogger templates out there--these are two I've used and had great success with. They both have easy-to-follow instructions on how to use their templates with Blogger.

(1) The Cutest Blog on the Block (where I found my original layout that some of you may remember; I first began using it last year for my personal blog and continue to today)

(2) Simply Fabulous Blogger Templates (the source of my current layout)

You can still upload your own picture to the header with these layouts, which is great for further customization. There are other template sites out there, but I've only had personal experience with these two, so I feel like I can safely recommend them to you! I've seen one blog that had managed to take a WordPress theme and apply it to their own Blogger template and it looked great!


I've gone back and forth on this one for awhile, and for now (and the foreseeable future) I'm settled at three. It all depends on your personal preference. I have a lot going on in my sidebars, so I preferred having two columns to organize everything. The Cutest Blog on the Block has template options for both, but you'll need to play with the HTML code to add the third column to your blog... Not to worry! It's actually not too difficult. Just be sure to save your current HTML template before you start tweaking! I used Blogger Buster to learn how to add the third column to my blog back when I had a TCBB layout.

Another option? Use one of their 3-column templates but edit the HTML template code ("Edit HTML" is a link found within the Layout tab of Blogger) to make your header, main posts and single sidebar a little wider and more accommodating. To do that, just look for the following lines of code in the Outer Wrapper section as you scroll down:

#outer-wrapper { (followed by some code)

#header-wrapper { (followed by some code)

#sidebar-wrapper { (followed by some code)

#main-wrapper { (followed by some code)

Below each of those you should see "px" measurements for the width of each "wrapper." (For example: width: 195px;) You can adjust those values as narrow or wide as you prefer, within the limits of the width of your outer-wrapper. If you like everything all lined up (like I do) the sum of the widths of the sidebar and main wrapper (and any additional "padding," as it's called in the code) should equal the "px" width measurements used for the outer-wrapper and header-wrapper.

OK, hopefully that makes sense and I haven't frightened any of you off too much. It's really not that scary, I promise! I didn't know much at all about HTML before playing with my own Blogger code. I learned a lot by trial and error. Just remember to save your original template before you start changing code, you never know when you'll have to re-upload it because you've made a boo-boo. :-D

By the way, with my current layout from Simply Fabulous Blogger Templates, the code was already set up with three columns, so that was a piece of cake!

Stay tuned for the next edition of Blogger Tips & Tricks: Functional Headers


  1. Great post Melissa! I need to make some changes soon - I'm pretty boring, but just never seem to get around to it. You're an inspiration!

  2. Luanne ~ Thanks so much! I have to say, though, that your blog was one of a few that got me thinking about the ability to widen sidebars, headers and posts--I really like that you let your blog make full use of the browser window.

    Lianne ~ Thankss! Hope you find it to be of use.

  3. Oh wow -- what a great post. I need to favorite place this so that when I have the time to upgrade to my own domain (I agree - blogger templates are somewhat boring) - I will know just how to do it!!

  4. I love your layout, its really cute ^_^
    I'm still toying with my header on photoshop so I just have a really basic layout right now ^_^

  5. Your blog looks great Melissa. Thanks for sharing all of these great tips. I'm a bit green with all of this but will take some time to research the info as I do want to make some changes to my own blog.

  6. I LOVE your layout! So simple, clean, and gorgeous. Thanks for the tips! (:

  7. What a wonderful post, and I LOVE the look of your blog!! I've been wanting to create that bar of links you have across the top - I'll have to see if I can figure that one out. :)

    ~ Wendi

  8. Molly ~ Good luck! I hope you find these posts helpful. I have at last three more coming, maybe more if I think of anything else I've done that's out of the ordinary.

    Thank you, Jen. I look forward to seeing what you come up with using Photoshop. Sometimes I wish I had that program, though I'd never get my money's worth out of it!

    Thanks, Bonnie. I hope these tips help you when you start to make changes to your blog. I know how hard it was for me to find and figure out some of these things, so I really liked the idea of posting a series of tips--and I have YOU to thank for the inspiration!

    Thank you to Bookworm, Wendi and Nymeth. I appreciate the kind words! And Wendi, hopefully today's post will help you with your header. I started working on the post yesterday and just need to tweak it today and get it up.

  9. Very cool. Thanks for all the great information. I'll have to come back and study it over the weekend or when I have more time.

  10. Great tips!! And great job, it looks fantastic! I have something for you....come visit me =)

  11. Thanks to the info you posted I was able to add some header links. I had been trying to for the longest time. I can't figure out how to move it all over to the left but I just happy to have them out there.

    Thanks again!

    In case you want to take a peek.

  12. Thank you for the award Kristina. I'll have to pass it along soon :-)

    Ti ~ So glad I could be of help! That's why I started these posts, because I figured I couldn't be the only one out there with these questions. Let me know if I can be of more help with left-aligning your links :-)

  13. Thank you for posting this! I now have a lovely new layout! :) I'm now off to check your other tip blogs!


This blog does not use CAPTCHA, please comment freely! However, I have had to disable the "Anonymous" commenting feature since the spammers are just out of control. Thanks so much for taking the time to leave a comment -- I love to hear what you think! Feedback and discussion are always welcome. Happy reading :-)