Let's make some edits!

Getting Started

What is HTML?

HyperText Markup Language (html), is a language in which web pages are written.

What is javascript?

JavaScript is a script language - a system of programming codes, created by Netscape, that can be embedded into the HTML of a web page to add functionality. JavaScript should not be confused with the Java programming language. In general, script languages such as JavaScript are easier and faster to code than more structured languages such as Java and C++. Examples of JavaScript use in web site development:

For all your html testing and info this is a great site!

http://www.w3schools.com

Some great sites for html code for blogger go to the help center of Blogger.

http://help.blogger.com/bin/answer.py?answer=42069

Here is a great site for general codes and help.

http://www.htmlhelp.com/faq/html/

Starting off -- How to change the Template in HTML

Go to the editing mode of Blogger-- click on the Template tab-- then click on HTML. Copy your HTML code from your Template to a word document to see the code better. Save two documents of this code. You will have the original code if you make any mistakes. The other name as Revisions -- you can start to change the code in this word document. This way you will be able to undue any unsuccessful changes in word, unlike if you were editing on Blogger.

Create an editing system.

When you make changes, make them in your word doc-- select all text with ctrl A or Apple A then copy all the code in the area with ctrl C or Apple C.

Next Go to the Template Tab -- Go to the Edit html tab and paste the new code by hitting ctrl A or Apple A and delete the text in the box and paste the new text by hitting ctrl P or Apple P.
When looking at the code there is a lot going on and it can be very intimidating. Don't worry. If you change something using your editing system you can always undo and try it again.

The first thing everyone wants to do is to Change the Background Pic.

So ok. Let's get to it.

First find a pic you like. Think about themes-- whether that means through images or color. Upload that image to pantherfile or to Photobucket.

Look through the beginning or your code in your word document for this:

/* Primary layout */

body {

margin: 0;

padding: 0;

border: 0;

text-align: center;

color: $mainTextColor;

background: #692 url(http://i79.photobucket.com/albums/j160/Brookeumns/IMG_1701.jpg) top center repeat;

font-size: small;

}

Go in and change the http address in between the ()s. Save and view.

After the http address it says top canter repeat. If you want to change the way the image is repeated in you document change in these ways:

Possible image repeat Values

Value	Description
repeat	Default. The background image will be repeated vertically and horizontally
repeat-x	The background image will be repeated horizontally
repeat-y	The background image will be repeated vertically
no-repeat	The background-image will be displayed only once

Make sure you NEVER erase the semi-colons ;

Try it out here : http://www.w3schools.com/css/tryit.asp?filename=trycss_background-repeat

How to edit the Header background.

The header is the top of your blog where the title of the blog is and it's description. A lot of templates come with graphics there. To change this area just find this code and insert a color code or background image. If you choose an image the image will be sliced.

Here's the part of code to look for:

/* Header */

#header-wrapper {

background: #8b2 url(http://i79.photobucket.com/albums/j160/Brookeumns/IMG_1694.jpg) bottom left repeat;

margin: 0 auto;

padding: 0 0 15px 0;

border: 0;

}

#header h1 {

text-align: left;

font-size: 200%;

color: $pageHeaderColor;

margin: 0;

padding: 15px 20px 0 20px;

background-image: url(http://i79.photobucket.com/albums/j160/Brookeumns/IMG_1694.jpg);

background-repeat: repeat-x;

background-position: top left;

}

Just like changing you background image copy and past in you new http address in both highlighted spaces. Some templates will only have one http address. Again pay attention to the repeat option the directly follows.

To add a color instead of an image change the code to look like this:

/* Header */

#header-wrapper {

background-color: #FFFFFF;

margin: 0 auto;

padding: 0 0 15px 0;

border: 0;

}

#header h1 {

text-align: left;

font-size: 200%;

color: $pageHeaderColor;

margin: 0;

padding: 15px 20px 0 20px;

background-color: #FFFFFF;

background-repeat: repeat-x;

background-position: top left;

}

How do you choose a color? Just go back you your text editor and on the right after you choose a color there will appear a letter code. Just use the pound sign and add the 6 letters.

Here are some start off codes for the basic colors:

Color	Color HEX
	#000000
	#FF0000
	#00FF00
	#0000FF
	#FFFF00
	#00FFFF
	#FF00FF
	#C0C0C0
	#FFFFFF

How to edit your fonts and text color.

When thinking about color of font you will have to think about what is legible against the image you have posted. But viewing as you make changes is very easy.

First to to the Template tab then go to Fonts and Color. There you will find different color swatches to change your header font, body font, etc. Just select an area and change to the color that works and save. Very easy.

(this sample gif is made from only one image edited in Picasa2 using different effects. Each time i made an effect i "saved as" and the went back to the effects and used the same effect a little more. Again I "saved as" until i had 9 frames.)


Gif Animations

There are many gif animation programs that are free on the web. Best thing to do is find one that you like and run with it. With Vista I’ve found that for $20 there is Easy Gif Animator. What's nice about this program is that it is compatible with Vista! that's right you heard me-- VISTA!

http://www.blumentals.net/egifan/ only 20$ here

http://www.soft32.com/download_5397.html for free trial you can only use 20 times so open the program wisely.

For mac there's graphic converter at:

Http://www.versiontracker.com/dyn/moreinfo/macosx/11559

Here’s a fun one. This will change one pic to the next and is free!

http://www.freedownloadscenter.com/Multimedia_and_Graphics/Video_and_Animation_Tools/SmartMorph.html

After you have downloaded the software:

Edit photos with Picasa2 or photo editing program and place in numerical order.

Open Easy Gif Animator up and press Add images. Proceed to import your images by highlighting them and pressing "Open" and then click on Next>

Most gifs are set to play infinitely. So select Yes to play infinitely if you want.

For setting how long you would like each frame to be displayed. If you have 10 frames then I would place the frames at 25 or .25 seconds. (The smaller the number the faster the frame rate.)

Then hit next.

In the Next window I Resize to Fit.

Click on Next and then Finish.

The program will then import all you images. It may take a few minutes.

If you want you can go to animation properties tab or animation tab at the top and resize animation and change the percentage of the gif to make the image smaller. The smaller you image the smaller the file. Anything over 3mb will not work well. If you upload to Photobucket you can also resize there, too.

To save your Gif.

Go to file and save as. Name it and place it in the folder you want. Make sure the Save file type is set to GIF.

Press save and you are Done. Easy!

What about making a Gif out of your movies? There are programs out there that will allow you to do this. I have not found one yet. The problem that you can run into is that gifs need to be small files and you need specific software to compress large video files.

Remeber a gif is there to enhance the look of you page and not play your whole 2 minute video clip. The juxtaposition of 2 or more gifs next to each other may enhance your concept.

The more gif's and larger the file the slower it will take to load you page.