Sunday, August 2, 2009

Blog design tips - Question and Answer

I recently posted a thread on MckMama's BlogFrog forum answering blog design questions. Here are some of the questions and my answers from that thread.


How do I get three columns on my blog?

This is the tutorial I used when I first learned how to create a 3 column blog layout. It was really easy to follow, and I had it done in no time. From there, I modified colors and such as I wanted to.

How do I make a blog button for others post on their blogs?

First, you create an image that's roughly 150x150 pixels. Then, put it on a web site that hosts photos, like From there, you can just use this code to put it on your blog with a little blog box underneath that will allow your followers to grab your button. Just change my URL ( to your own, and my image URL ( to your image URL.

<div align="center"> <a href="" target="_blank"><img alt="Jack and Mandy - The Blog" src=""/></a> </div><span style="font-style: italic;" class="Apple-style-span"><span style="font-weight: bold;" class="Apple-style-span"><div>
</div> <div align="center">Grab our button for your blog!<div><span style="font-style: italic; font-weight: bold;" class="Apple-style-span">
</span><div align="center"> <form><textarea rows="6" cols="20"><center><a href="" target="_blank"><img alt="Jack and Mandy - The Blog" src=""/></a></center></textarea></form> </div>

How do I make is so my posted pictures cannot be clicked on [to enlarge them]?

After you add the photo in your post, visit the HTML section of your post. See where it says "href" with a URL after it? That's the link to the actual photo image. Remove that URL, and people won't be able to click on it to make it bigger any more.

How do I change my background image?

You can change your page background by finding the section in your HTML that says "body." See the part that says "background" in that section? If it's just a color (aka something like #ffffff or $backgroundcolor), replace it with this:

background-image:url(;background-position: center; background-repeat:no-repeat; background-attachment: fixed;

But replace my background (the photobucket URL) with the URL of your image. Let me know if that works for you!

Do you know how to make the headers rotate every time you refresh the page?

I've never made a rotating blog header, but if I was going to, I would probably follow these instructions. Sorry I can't help more on that one!

Can you tell me how to make a flashing blog button?

Same goes for the flashing blog button - I've never done one but these look like very simple instructions to do that too!

I use Photobucket as my online pix host; when I load pictures there using their "large setting" the pictures are really huge. And when I use "medium setting" they're smaller than I would like. What is your recommendation for dimension, pixels, etc. for posting pictures on Blogger?

Go into your HTML and find the part that says “outer-wrapper” and “main-wrapper,” or some variation of this. Your outer wrapper is the section that encompasses both the middle section and the sidebars. The main wrapper is just the middle section.

Take a look at the width of the main wrapper’s width (mine is right under the “main-wrap” section – it says “width:485px;”) This tells you how wide your middle section is and you can adjust your photo size accordingly. I’d go with something like 300 pixels across, or less if you’d like the text around it. You can change your photo size in photobucket by going to the “edit” tab and then resizing it.

I have a three column template but the part where my posts are is a little too narrow. Some times when I put a picture it will get cut off. how can I fix that?

Go into your HTML and find the part that says “outer-wrapper” and “main-wrapper,” or some variation of this. Your outer wrapper is the section that encompasses both the middle section and the sidebars. The main wrapper is just the middle section.

Now that you’ve found the main-wrapper, the part of your code you want to change, you can change “width” number to be larger to make it wider. However, for it to work right, you’ll also have to change the outer wrapper’s width to be wide enough for the new width of the main wrapper plus the width of the sidebar wrapper(s) (which will be below the main wrapper in the same section.)

How do I disable right clicks on my blog?

If I was going to do this, I'd use this tutorial.


Mallory said...

Mandy, you are SMART.

And yes, I'm being entirely serious.

Mandy and Jack said...

Ha... Thanks Mallory!

Google is smarter. ;-)

Shane said...

I have one:

Isn't all of this something people already know by the time they get to 6th grade these days?

Yes, yes it is.

Mandy said...

I think that's just our family.

Erica said...

How sweet of you to take the time to do this! I've done all these things, but I never put up how too, because I'm not sure I'm doing them the 'right' way. I've messed with numbers in my html all day before trying to make all three columns look right!

Mandy said...

That's exactly what I do! There's probably much more efficient ways of
doing these things. :)

sarah said...

Thanks for all these tips! You are so talented and you even make it easy for someone like me. LOL!!  I just made a blog button.

Mandy said...

Yippee!! Congratulations on the button!