Wednesday, November 4, 2009

Turning a Blog into a Webpage: HTML Codes, Part Three

Turning a Blog Into a Webpage, Getting Started, Little Things, Codes Part One, Part Two

Hopefully I didn't lose any of you after the last post.  If you're still following along, here are just a couple more things that you may be interested in when creating a webpage. 
If you've made it successfully to here, this is what your website should look like.

This next part can be used when building your website, but it may also be useful to any of you with a blog.

Changing the width of your "columns"
As you can tell there are "columns" on your website.  There are actually three that you can change if you'd like to alter them a little.  The outer wrapper goes all along the edge of the page.  It's all the blank space on the left and right.  The main wrapper is where your post goes, with the pictures and text.  And the sidebar wrapper is the width of the column the links are in on the left side.
To change these go back into your HTML section and find this section.  It's towards the top, under the header section.

Right now the outer wrapper is set to 600, the main wrapper is 410, and if you scroll down the sidebar wrapper is something that I don't remember.

You can play around with these numbers, but I changed the outer wrapper to 1100, the main wrapper to 800, and the sidebar wrapper to 220.  The larger you make the number for the outerwrapper, the less empty space you'll have on the sides.

So now, the writing area is bigger, and the links are closer to the left hand side.  I've done this with my own blog because then it allows me to post bigger pictures, and my long posts don't take up so much vertical space.
Adding a favicon
Right now if you were to look at the address bar of your own website, you would see the little orange "B" blogger symbol before the address.  But as you're reading this blog, look up and you'll notice a cute little "T."  This is a way to change that B to a different icon of your choosing.  This is also fun, because if you save your website as a favorite, that icon will show up in the list.
I already posted about this previously, so follow the directions here.

You can see where the two red circles are that I made my favicon a cute little green heart.  This is one of those absolutely unnecessary things, but if you've got time and can figure it out, it's such a cute touch!
So there you have it.  If you got to this point successfully you should have a nice website you can use for your wedding, small business, etc.  It's free and you have the opportunity to add and personalize much more so than with a typical "wedding website builder."  Go check out my "fake website" at

Again, I'm open to questions if you get lost along the way!!

1 comment:

  1. Thanks so much for this tutorial -I've been looking for a better way to make my wedding website, and this has been super-helpful. All the step-by-step screenshots are great for a technologically-impaired blogger like me :)

    Thanks again!


Related Posts with Thumbnails