Resources

OK. My inbox is starting to over flow with emails of "how do I install your layouts?" So, instead of re-typing the same email message, over and over again, I decided to write a tutorial. It's about time too, don't you think? We were quite amazed with the number of questions we got, and the variation of that, all according to our blog layouts... so this tutorial will walk you through absolutely EVERYTHING you need to install a layout. Of course, you can just skip a step if you already know how.

In this tutorial, we will cover:

1) Uploading Images
2) Changing the code
3) Uploading to blogger.com

note:

All of our designs are zipped, so you need a program such as Winzip, to open them. It would be preferable if you uploaded all the images to one folder, it makes it easier to find later.

Uploading images

You need to upload the images onto your own server. People read that sentence and go "I don't have a server!!!"
That's fine. There are many websites that offer free Image Hosting. We use Photobucket, but there is also ImageShack that offers free Image Hosting. In this tutorial, we will be using Photobucket.

1) First you need to create an account on Photobucket. They apparently only allow free sign ups at certain times of the day (I'm not sure when), but I hope you do sign up at the right time. Just follow the prompts on their site.

2) You need to sign in. You might think this sounds redundant, but you have no idea how many people I've tried to talk through this without them signing in.

3) Click the browse button.

You then find the images that you have already unzipped, and press ok, and then submit. MAKE SURE THE KEEP ORIGINAL PICTURE NAMES IS TICKED.

It's up to you whether or not you will name the image or not. I'll be uploading the images from the Dark Magic layout. Repeat this step until all the images in the zip folder/s is uploaded.

That's it! It's all you have to do to upload an image!

Changing the code

OK, now, get the HTML file, and open it in a HTML editor like Dreamweaver or Notepad. The images we uploaded were:

darkmagic_01.gif
darkmagic_02.gif
darkmagic_03.gif
darkmagic_04.gif
darkmagic_05.gif

So now we have to find where the correspoding image is in the HTML.

OK, Photobucket gives you a set of three codes URL, Tag and IMG. You want to copy all the code in the "Tag" box.

Paste that code where the picture is in the HTML. i.e for the image above, I would take the code tor darkmagic_01.gif and paste it on the the spot where it says "darkmagic_01.gif" in the HTML. So, it should go from looking like this:

<IMG SRC="darkmagic_01.gif">

To this:

<IMG SRC="http://img.photobucket.com/albums/v480/friendsandfinance/darkmagic_01.gif" alt="Image hosted by Photobucket.com">

Dont forget to paste over the whole <IMG SRC> thing. Repeat this with all the images, and then you are done changing the code.

Uploading to blogger

Open a www.blogger.com account. Follow the prompts co create a blog, and paste the HTML code we have given to you into there. That should be it, and you should have a fully functional layout!