I'd like to give credit to: http://helplogger.blogspot.com/2012/05/create-rollover-image-effect-change.html For helping me to learn how to do this.
_____________________________________________________________________________________
First, make a HTML Widget.
_________________________
Then, paste this code into it:
<a href="URL ADDRESS"><img src="URL OF THE FIRST IMAGE GOES HERE" onmouseover="this.src='URL OF THE SECOND IMAGE GOES HERE'" onmouseout="this.src='URL OF THE FIRST IMAGE GOES HERE'" /></a>
____________________________________________________________________
After you've done that, your going to want to add the Website Address that you want the viewer to go to when they click the Widget.
___________________________________________________________________________________
Then, go in blogger and make a new Page. When you make the page, insert the two pictures that you want into it.
____________________________________
Then, your going to want to Publish that Page.
______________________________________
After you've made the new page,
- Open a new Internet tab
- Open up your blog and go to the page with the pic's on it
- Copy the two pic's URL's and paste them into a notepad or a word document.
Then, copy and paste the first pic's URL into the places where it says
URL OF THE FIRST IMAGE GOES HERE
Then, copy and paste the second pic's URL into the spot where it says
URL OF THE SECOND IMAGE GOES HERE
Then, publish the widget!
You can also do this in a Page or a Post, you just need to edit the HTML and put the code in there.
It should end up like this:
Hope you guy's thought this was helpful! Feel free to comment below!
Grid View
List View