Running Into Trouble? Here's Help!
So, you've been blogging away with your new Blogger account. But you're getting kinda tired of looking at the same old boring page everyone else has. You tried to upload an image to be your banner, but it's all messed up. You need help. Well, you've come to the right place! Here are some tips and tricks to get you started in the right direction.
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:
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:
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 30 px serves as the "gutter" separating the text of your blog entries from the sidebar. 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: 530 px for the text, 220 px for the sidebar and 30 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 530 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!
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.
Tired of messing around with Blogger's template? Find a new template that you can just copy and paste into your blog (that's that box of text and code under Edit HTML).
- The Blogger Templates Blog
- Includes several new templates that are compatible with Blogger's new system.
- 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!
No comments:
Post a Comment