Full tutorial and HOW TO can be found HERE in this post.

Friday, March 19, 2010

How to use backgrounds and headers.

Special Thanks to Allie Brown for her instructions which I have used to make up this tutorial for you including screen shots which I know would have helped me a TON when I did my first blog decor. It only took me a week to figure out how to put up my header- hahahahaha. Well ok things have changed a bit now and blogger makes it a lot easier to do. But UHUM- yeah! lol

So here you go-

To start- log into your blogger account and go to your DASHBOARD.

Inserting your NEW BACKGROUND.

1. Before you can change your blog look make sure you are using the MINIMA template. If not then just change it under LAYOUT – PICK BLOG TEMPLATES.

Blogwear1

2. Click on the minima button and SAVE TEMPLATE. ( if you are not sure then please make sure you make a backup of your original blog in the html section)

Blogwear2

3. The next thing to do is UPLOAD your NEW BACKGROUND to a host site. I have used Photobucket for this one, but any you prefer will work. You will need the DIRECT LINK for this to work.

Blogwear3

4. We are now going to change the HTML part of the template so that your background will work.

Click LAYOUT and EDIT HTML.

Scroll down until you see this part in the code ( it’s near the top)-

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

Blogwear4

And REPLACE IT COMPLETELY with this one-

body { background:$bgcolor;background-image:url(LINK WITH YOUR BACKGROUND);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; }

5. Where you see the bold LINK WITH YOUR BACKGROUND in the code above, copy and paste your DIRECT link for your background. Make sure you leave the brackets where they are.

6. Now click on PREVIEW first, and if you are happy you can click SAVE TEMPLATE. Don’t be scared as you can also click CLEAR EDITS to start again before you save ;-)

Your blog background should now look like this one does.( or anyone you have wanted to change it too)

1

Inserting your new HEADER graphic.

(all pics can be enlarged by clicking them)

1. After editing the header graphic and saved as a JPG to your PC,

follow the instructions below.

Header1

2. Click on Layout, Page Elements and then click on the edit button on your header *gadget*

Header2

3. Remove your old header, and upload your NEW one from your PC by following the prompts. Make sure you click /mark the Instead of title and description

4. Click SAVE

5. Now click on PREVIEW to see what it looks like ( don’t worry about the gray outlines if they are there- we will remove those too)

6. If it is how you like it- then click the big orange SAVE button on the top at the right.

7. To REMOVE those GRAY OUTLINES we are going to have to remove them in the HTML.

8. Click on Layout- EDIT HTML icon.

Header3

9. Scroll down all the mumble jumble (well it is to me-hahah) and get to where you see this

# Header

Header4

10. Under that # Header heading  scroll till you get to

#header-wrapper {
  width:660px;
  margin:0 auto 10px;
  border:1px solid $bordercolor;
  }

And

#header {
  margin: 5px;
  border: 1px solid $bordercolor;
  text-align: center;
  color:$pagetitlecolor;
}

REPLACE the 1’s with a 0 as in the screenshot above.

11. Click on PREVIEW and see if they are gone, if they are then you can click on SAVE TEMPLATE.

You are all done now with removing those borders.

1 

Inserting your Blog Labels

To use these with list underneath you will need to add it to your picture host site. Or you can add them as a picture too.

Gadgets1

1. Click on LAYOUT and then Page Elements.

2. Then click the ADD A GADGET on the right hand side.

Gadgets2

3. This pop up box will arrive and you will have the option to add it as a HTML/JavaScript or as a picture.

I have used the HTML one here as I wanted to add my Store blinkies to the same *list box*

Gadgets3

4.  COPY and PASTE the HTML code given by your Host site (see background screen shot) and insert it in the pop up box.

5. I have added my blinkies in the SAME box with the links to my store on them. You can add a LINK by just clicking on the *HYPERLINK* icon at the top of the box too.

6. Click SAVE when you are finished

Gadgets4

7. All new Gadgets sit at the TOP of this list and must be moved and dragged down to where you want them.

Click PREVIEW to see how it looks and once happy you can click the ORANGE SAVE Button on the top of the page.

That’s it really, and it’s not as scary as it first looks. LOL.

4 comments:

  1. Wow, congrats on your new blog! :)
    Hm, I might have to think about changing the look of my blog, it's oooold now.
    GREAT idea, and awesome freebie!

    ReplyDelete
  2. Kim this is great! I love the tutorial, this is a great idea! Now you can make blogwear to share! hahaha! Love it!

    ReplyDelete
  3. MWAH... Thanks for the tut! Love the new kit...off to play!

    ReplyDelete
  4. Lovely, Kim!
    Lots of hard work goes into tutorials like this -
    Thanks for sharing.
    juno
    xx
    Juno's Place
    Cards by Carol

    ReplyDelete