How To Use The Templates

In this tutorial, we will cover:
1) Uploading Images
2) Changing the code
3) Uploading to blogger.com

1) UPLOADING IMAGEGS
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 (http://www.photobucket.com/), but there is also ImageShack (http://www.imageshack.us) 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.
Screenshot: http://www.fulan.com/photokicho/images/tutorials/blog_install/1.jpg
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. (or else you'll end up with images with names that look like international phonenumbers)

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.
Screenshot: http://www.fulan.com/photokicho/images/tutorials/blog_install/2.jpg
OK, Photobucket gives you a set of three codes URL, Tag and IMG. You want to copy all the code in the "url" box.
Screenshot: http://www.fulan.com/photokicho/images/tutorials/blog_install/3.jpg For some strange reason in the screenshot I've circled "Tag" instead, but you want the box above that... ^^
Copy the link in the "url" 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" WIDTH=900 HEIGHT=150 BORDER="0" usemap="#map"]

To this:

[IMG SRC="http://img.photobucket.com/albums/v480/friendsandfinance/darkmagic_01.gif" alt="Image hosted by Photobucket.com" WIDTH=900 HEIGHT=150 BORDER="0" usemap="#map"]

*i've used square brackets here, but its meant to be "" instead of "[]"
*The bold bits are the parts that i've (and you should) copy and paste over.
Repeat this with all the images, and then you are done changing the code.

Uploading to blogger

Open a www.blogger.com (http://www.blogger.com/) account. You should come to the "Dashboard" as soon as you log in. It should have your blog listed under the "Blogs" list. Click on the "Change settings" button (it looks like a blue gear) next to the blog you want to change. You should then see four tabs on top (Posting, Settings, Template, View Blog). Click on the "Template" tab and copy and paste all the template code, into the big white box.

- yurihime