Who am I? 

And how do I know so much?

I've written this lens (with the help of my CSS-loving, Section 508 compliant husband who writes XHTML in his sleep) to help you because I know first hand what a mess you can make when you want to customize one of Blogger's templates.

I run a blog banner design service and I typically have to give my customers a hand with the some of the same things each time. I thought this would be a great topic for a lens, because I bet there are lots of people who need this information. So, here it is! Now you can get the help you need, too.

Are you interested in having a banner designed for your blog? Then be sure to check out [web]Seitler Design!

Hey, There are Funny Lines Behind my Banner! 

Not to mention the writting that's all over it...

So, you found yourself a pretty little thing to use as your banner for your blog. You saved it on your desktop and you went to the Page Elements section of your blog to upload it. But when you took a look at your blog, you saw something like this:



There's text on your image and there's some funny lines, too. How do you fix this? The first step is easy:

1) Log on to your account and from your Dashboard, click on Layout.

2) On the Page Elements page, click on the Edit link for your Header.

2) Select the option that says you want your new banner "Instead of title and description." This will remove the extra text.

What about the funny lines? Those are borders that used to hold your blog's title. But now you've got a different sized image, so here's what you do to make them go away.

1) From the Page Elements page, click on Edit HTML link.

2) Scroll down until you find the section that's titled Header.

3) Look for this text and remove it: border:1px solid $bordercolor; (you will see that listed under #header-wrapper { and #header { so be sure to remove both).

This will make those border lines invisible. Now your blog banner looks great!



What if you like the border but you want it to actually fit around your banner? Well, you need to know a little math.

1) First, don't remove the border color text (like I mentioned above).

2) You need to know how wide your banner is. You can find this out easily just by hovering over your saved file on your desktop in Windows. For example, when I hover over my file, it says "Dimensions: 500 x 150."

3) Take the width of the file (500) and add 10 px (because of the padding built into the border).

4) Scroll down in the HTML window until you get to #header-wrapper { and enter the width of your banner plus ten (510 in this example).

5) Save your changes and you'll see this:

Completely Lost? 

Here's a video!

So, How Do I Change the Width of my Blog? 

Because there's no room for all I want to say!

Okay, get out your calculator. It's time for some math!

Right now, if you have the Minima template installed on your blog, the maximum width of your blog is probably set to 660 px (pixels) wide. If you were to break this down: 410 px have been given to the main body text of your blog, 220 px are set aside for your sidebar and the remaining 10 px are dividing the text of your blog entries from the sidebar (called "padding"). Playing around with these numbers will change the look of your blog.

One thing to note, however--there are still some people who have 800 x 600 resolution monitors. If you decide to change the dimensions of your blog to 1000 px (because this looks great on your monitor, which is 1280 x 800) then the content of your blog is going to run off the right side of their screen. That's not very professional looking...

Probably the widest you should go is 780 px. Just divvy this number up between your main body text and your sidebar: 550 px for the text, 220 px for the sidebar and 10 px for the gutter.

Where do you enter these magical numbers? Click on Edit HTML on the Page Elements page and follow these directions:

1) Scroll down to where you see the title Outer-Wrapper. You'll see that here is where the numbers are entered in!

2) Change 660 px to 780 px. Change the "main wrapper" from 410 px to 550 px. The sidebar wrapper and "padding" you can leave as is (220 px and 10 px).

Now, one more thing has to be done so that your pretty banner will be perfectly centered over your text:

3) Scroll up a little to the section entitled Header. Change the width from 660 px to 780 px. Now Blogger knows the right number with which to center your banner and everything will be lined up perfectly!

Um, How do I get a Photo on my Blog? 

What's the secret there?

There are two ways you can add an image to your blog posts. Blogger has a built in system for this, where you can upload your photos to Blogger while you're writing. All you do is click on the little photo icon (that you see here) and follow the directions for how you want your text to be formatted around your image.

Also, you can add images that are already uploaded to sites like Flickr and PhotoBucket. These sites will automatically generate the code you need. They will provide you with the text and all you need to do is copy and paste it directly into your post!

Easy. That's all there is to it!

I Use Flickr on My Blog... 

...in case you were wondering.

Hey, How Can People Subscribe to my Blog? 

I want that little e-mail thingy everyone else has!

You will find what you're looking for at FeedBurner or FeedBlitz. Here's how they work:

FeebBurner and FeedBlitz are websites that will e-mail your posts to your readers who want to sign up for the service. Once you sign up with one of these sites, they will give you a bit of code for you to put on your blog. All you need to do is add a HTML/JavaScript module to your blog's layout (and you can do that on the Page Elements page) and drop the code into this box!

It's as easy as that. And now your readers can subscribe to you via e-mail!

FORGET IT! 

I just want a whole new layout.

The Blogger Templates Blog

Includes several new templates that are compatible with Blogger's new system.

Free Blogger Designs

A Blogger blog full of free templates. Fun stuff!

Final Sense Templates

Browse from several ready to go templates.

The Blogger Template Directory

For a listing of lots of other great sites, be sure to check out this page!

More Lenses to Love! 

You may find these interest you, too.

Rockin' Stamping Bloggers

Not to long ago, there was a challenge issued across the web to nominate your favorite Rockin' Girl Bloggers and give them a badge so that they (and everyone else) would know that they rocked. I thought this would make a great lens, so here are my to...

Stamps, Ink & Paper - All About Rubber Stamping

This lens is a collection of a little bit about everything you need to know to get started with the fine art of rubber stamping! Here you will find different tips, tricks and techniques to get your going. Just add stamps, ink and paper! Enjoy--and ha...

Digital Scrapbooking Freebies - Where to Find the Good Stuff

So, you want to know where can you get your hands on the BEST free digital scrapbooking downloads? Here is my elite list of over TWENTY wonderful links to Digi-Scrappin' sites along with a listing of freebie blogs, too! Enjoy them all and remember to...

The Guestbook 

Say hello!

Did you find this lens to be helpful? Or did you have a question you wanted an answer for (something that I could maybe add to this lens)? Leave a comment here!

ficforlife.com

hi, i'm looking forward to change my blogger template :D

Posted June 29, 2008

PUman hey,guys.great job. Posted June 04, 2008

lynn

thankx - very good stuff

Posted May 30, 2008

 

Next Page

1 of 12 pages