Sunday, January 25, 2009

Creating Your Own Blog Background

EDITED TO ADD (as of 8-31-10):  Blogger has changed the way it does templates and blog backgrounds.  Because of this my instructions aren't effective and will only confuse you more.  Sorry about that.  If I get it figured out and have time to write up some new instructions I will do so - but don't hold your breath for now....sorry about that.



(Anything that is in this font is information I have found on other websites.)

Ok - I have had several people email me, or ask me to share how to change their blog backgrounds.  I feel foolish sharing these tips because I'm not very good at explaining things, and quite frankly - don't know what I'm doing myself! (a LOT of trial and error!)  But here we go.  I have referred to a couple of other blogs that have directions too.

These directions are the best I've found:  http://nicoleyoungdesigns.blogspot.com/2008/12/customize-your-blogger-page.html

Some other good ones are found here:  http://www.thecutestblogontheblock.com/secret.php?id=2

After reading my personal instructions be sure to go to those websites - they are more technical and will better explain things.

Background:

  1. Create the background in Photoshop.  The size I use is 1700 x 1320 pixels at 72 resolution (I've tried other sizes and have messed it all up.  I know there is a techical way to figure out the right size - but I made mine too big, rather than too small.  A lot of the sides, top and bottom of my background don't show up on my computer because my monitor is smaller, but more shows up on our bigger monitor I have at work).  I design it like a scrapbook page using the kits and elements I have purchased in the past. Make sure that you leave the center section light enough that your text will show up, and wide enough that you'll be able to see the text.
  2. I save my project as a jpeg file and upload it to http://www.photobucket.com/   Make sure that you choose the 1 megabyte size for uploading for it to be big enough.  Otherwise photobucket will condense your background and it will be too small. 
  3. Then follow the instructions online in this link for changing the background.  (I did it the first time and basically I just go back and change the code each month with the link I have uploaded to photobucket when I change the background....I hope that makes sense).  This involves copying and pasting the direct link from photobucket.  Make sure you save what you've done on your blogger site. 
  4. I'm including what you'll see in the previous link:

Once your background uploads, you'll find it down with your other images, and you need to copy the option 'direct link', see below:
With your image copied, you'll need to follow these specific instructions as to how to apply it to your blog:


Log in to your blog.


Next go to 'customize' then 'layout' then 'pick a new template' then choose a minima template.
Then click on 'edit HTML' You'll see a crazy code with a bunch of funny signs, scroll to where you see this:

body {
background:$bgcolor;
margin:0; color:$textcolor; font:x-small Georgia Serif; font-size/* */:/**/small; font-size: /**/small; text-align: center;

Change that part of the code to say this:
body {background:$bgcolor;background-image:url(direct link);background-position: center; background-repeat:no-repeat; background-attachment: fixed;

margin:0; color:$textcolor; font:x-small Georgia Serif; font-size/* */:/**/small; font-size: /**/small; text-align: center;

Now, use the direct link from your photobucket image and insert it between the parentheses.


Then Click SAVE!


CONGRATS! You've done it!!!! WOOO HOOO!

Topper:
  1. I also create my blog topper using Photoshop.  The size of the one currently on my blog is:  600 pixels X 400 Pixels at 72 dpi.  This is also saved as a jpeg file.
  2. Then I follow these instructions that can be found here.  This is what it says on that blog:
    • Next scroll down until you find the portion of the HTML that says header-wrapper. There is a line of code that says border. Delete the entire line of code. The line of code starts with the word border and ends with a semi-colon.

      Scroll down a little further and you will come to header. Again delete the entire line that says border.

      These two steps delete the 2 small gray lines that are at the top of your blog that surround your header area.

      The last part of the HTML that we are going to edit is the width of the outer-wrapper and header-wrapper. We need to change both of these widths to 700px. (Right now they are set at 660px). Once you have changed those two lines. Your blog template is done. Save the changes and view your blog.

      Step Three: Custom Header
      Go to Layout> Page Elements
      and edit the Header.
      Upload your header from your computer. And choose: Instead of Title And Description.

Ok - I hope any of this makes sense.  Really I play around with it for a long time every time - trying to find what will work just right....I'm the furthest thing from an expert - I just work at it a lot.  So good luck!



Windows Live™ Hotmail®…more than just e-mail. See how it works.

19 comments:

Our son Kade said...

Thanks Joanna! We just got Adobe Photoshop elements with our new computer, and I'm installing it today, so maybe I'll be able to figure this all out.

Stacy said...

Thanks so much! I am going to try to play with this tomorrow.

notetoself said...

Cool! Thanks for the instructions. I'm switching to a blogger blog soon...I may need your help to get it cute! ;)

Jamie said...

I just stumbled across your blog background tutorial and wanted to thank you for it. You also look really familiar to me. I see on your profile some Rhien family members. Are you related to Rob Rhien's family from Farmington, NM? We lived there for years growing up...so I was just curious.:)

Marissa said...

Thank you so much for the info!! I changed my background and plan on changing the header but when I changed the background my posts went all weird... Would you mind looking at it and letting me know how to get all my widgets back on the right side of my page? Everything goes down the center and I'm not sure what I did wrong!

Thanks

Anonymous said...

Thanks so much for these directions. I've been stressing for days trying to make my background fit better. FInally....
Thank you, Thank you.

Anne N said...

I found your blog while trying to figure out how to personalize my photography blog. Thanks so much for this information; it was easy to understand and made it a lot easier to do exactly what I wanted for my blog!

Marissa said...

I'm so glad you have this info on here! Every time I make a new blog background I come here to remember how to put it on my blog!! Every time I change it my words end up just running down the center, instead of their three columns! I don't remember how I fixed it last time or if it just fixed itself. Any clue what I'm doing wrong? Thanks!

Unknown said...

Thank you so much for this tutorial. It worked wonderfully for me. Thanks so much.

DebiP said...

Thanks for the info! It really helped me do exactly what I wanted with my blog.

MerchantofVenus said...

Thanks so much. This is the most straight forward instruction I've found. You're blog is SO CUTE--I very encouraged by it!

樱飘のゆめ said...

anyway, thx 4 ur sharing
i ll trying 2 create my own background

Miss F said...

tq for helpin.. it works to my blog...

Jen said...

Um THANK YOU So much for this! You helped me when no other tutorials did!

Shammika N. Abeysinghe said...

Your site is very helpful, thanks friend.

Unknown said...

I can't figure out why, but this won't work on my blog to save my life!!!! HELP!!!

dyshinchan said...

the code now is slightly different. i seriously do not understand.

something looks like this:

body {
font: $(body.font);
color: $(body.text.color);
background: $(body.background);
}

now how?

thank you for your help in advance =D

The Mulder Family said...

Ok so I am totally stumped...I think I am missing one key ingredients to this operation...could you help!!

Bonax Pogii :) said...

please don't erase this post until i already put my Blog BG.

Is this Effective in putting a BG at my Blog?