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

HOW DO I CHANGE MY BLOG'S LOOK?

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!

DO I WANT TWO COLUMNS OR THREE?

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