Monday, 11 July 2011

How to do it: 2.0

I've uploaded the images to the tinypic. I think u can upload to ur blogger, or ur website to sell the pictures and use their links.

It's a five steps instructions.

1st step: Get both images http adresses, for example mines are: (After uploading the images to the tinypic, they give us the direct link to the file, click here and u will see a picture with the option "Direct Link for Layout").

Normal: http://i52.tinypic.com/e6oi86.jpg
Edited: http://i52.tinypic.com/2w4eki8.jpg

If u want to find the adress of an image in the google chrome u can go to inspect element and usually the image is after: <src='http://pictureadress.com/image.jpg'>.

2nd step: Start to write ur blogger post, find the place you want to post the photo, go to the blogger option "Edit HTML"

3rd Step: You will paste the code right under the text u've wrote, or if you want the picture first, you can paste the code before the text, no problem. You will have to change the http adress for each different pair of picture you want to post. After editing HTML u can go back to Compose and vice versa.

<a href="http://Chelseaisthe.most.beautiful.girl.in.the.world.com" (Link for your site or anything else) onmouseout="picture.src='Normal'(URL for the image not edited)" onmouseover="picture.src='Edited'(URL for the edited image)">
<img border="0" width="427" height="640" (width and height are the size of the image, I choose these values because is ur blog size, u can make them bigger or smaller if u want.) name="picture" src="Edited"(URL for the image not edited)/> </a>

Pasting this code exactly how I've showed u without the (parenthesis), and changing the names Normal and Edited for their links look how it looks and works:

<a href="http//chelseabrookeroisumphotography.blogspot.com/" onmouseout="picture.src='http://i52.tinypic.com/e6oi86.jpg'" onmouseover="picture.src='http://i52.tinypic.com/2w4eki8.jpg'">
<img border="0" width="427" height="640" name="picture" src="http://i52.tinypic.com/e6oi86.jpg"/> </a>

P.S The code to change the picture will only work on the real post, not on the preview!



4th step: Post it!

5th step: See me playing and be happy, because with this u can send messages too:



And the code to the second pair of images is:

<a href="http://info.abril.com.br/aberto/infonews/fotos/flor-de-lotus-20090923161104.jpg" onmouseout="Iloveu.src='http://i54.tinypic.com/148f70l.jpg'" onmouseover="Iloveu.src='http://i55.tinypic.com/25s0r51.jpg'"/> <img border="0" width="720" height="540" name="Iloveu" src="http://i54.tinypic.com/148f70l.jpg"/> </a>

No comments:

Post a Comment