Tuesday, August 4, 2009

Easily fixing up your blog

A couple people have asked me how to do the blog prettifying thingy, so I'm going to explain here exactly what I do. Then you'll all know how easy it is, and no one will think I'm amazing and talented anymore, but that's okay. I will teach you how to fake it like I do.

To make a header, I go to scrapblog. If you already have an account there, go ahead and sign in, if not, click on "get started for free". From there, you can either choose a theme, or just start from scratch. In the past, I've always started with a theme, because then it's all matchy to begin with, and it's easier. This time I started with a theme, but then didn't use a thing from it, so I may as well have started from scratch. So that's where I get my headers. Once you make it, you have to publish it, and then you can save it to your computer by clicking "export as jpeg" under the file tab.

I also usually grab a couple of backgrounds from scrapblog and save them to my computer, because they'll have something that matches my header. My current background, though, I found by doing a search for fabrics that matched the patterns in my header. You can also search through scrapbook paper online and find backgrounds that way.

On the blog template, I believe I used minima. To add your own background, upload whatever background you want to photobucket or the like, then use this code when editing your html:

background:url("Your image URL goes here");
background-attachment: fixed;

That portion will go underneath the part that says
body {
background:$bgcolor;

You will then need to upload a background for your writing portion. You'll add that under the outer-wrapper portion, underneath the width. Copy and paste this:
background:url("http://i121.photobucket.com/albums/o205/endoux/trees_Page_41.jpg") repeat left bottom;

You can use the above URL, if you're just looking for plain cream colored background, or upload your own the same way you did the other background.

Then, to widen your blog area, you just need to change a few numbers. Find where it says #header wrapper; underneath that, change the width to 940. Then find #outer wrapper; change that width to 940 as well. Underneath that, find #main wrapper, and change that number to 674.

If you don't want the border around your header, then under the header-wrapper section, where it says border, change that to 0px. And under the #header section, change the margin and border to 0px.

I believe that's it. You don't have to have a lot of knowledge of html. Just look through and play with it a little, and then preview after each change, so you'll know what didn't work if something looks wrong. If someone wants to make some changes and needs help, let me know and I can walk you through it.

2 comments:

  1. I think I will have to read this over and over again until I have it. Thanks for posting it! And I still think you are amazing!

    ReplyDelete