In the world of Gifs and Boomerang, static photos are becoming obsolete! Before long even our newspapers will have animated photos! Of course I am just being over dramatic, but honestly, animated photos really add so much life to the text. As every blogger knows, photos are essential to a post and a fun way to capitalize on embedded images is to make them animated. I’ll be showing you how to easily add a roll over animated image to a post on your blog. Anytime someone’s mouse in on the image text will appear. It is super fun! Quick disclaimer: this only works for Blogger blogs.
To begin you will find a photo you want to animate. Once you know your photo, go to www.picmonkey.com and you will begin to edit your photo. I love picmonkey because it is free and super simple to use. They have a variety of fonts and image filters you can pick from to use.
Get creative and edit your photo however you want! Once edited, save the photo under a different name than the original. You will need both. Ideally, you want your image size to be around 615 x 410 px. If it is larger, you will need to resize it. There are tons of online tools that will resize your photo for you. I am partial to http://www.reduceimages.com/.
When your photo is the correct dimensions, go to your blogger dashboard and create new post. Add BOTH photos (original and edited) to the post. Make sure they are original size. Then switch your screen from “compose” to “HTML”. Two boxes of text should appear. In each box will be a URL for your image. These will be important. Keep this window open, and then go to the post you want to add your photo to.
Once again switch your post to “HTML”. Now copy this code into your post wherever you want your image: <img src=”URL OF THE MAIN IMAGE GOES HERE” onmouseover=”this.src=’URL OF THE HOVER IMAGE GOES HERE‘” onmouseout=”this.src=’URL OF THE MAIN IMAGE GOES HERE‘” /></a>
The next step is pretty simple. The Original image URL will go in the spot where it says “URL of Main Image Goes Here” and the edited image URL will go in the spot where it says “URL of the Hover Image Goes Here”. Be sure when you are copying your URLs that you don’t copy the quotation marks. (On that same token, keep all quotation marks in the code).
When you publish your post and scroll your mouse over the image your edited photo should take the originals place making it look animated. Welcome to the future.
