How to Put Rollover Buttons on a Blogger Site
- 1). Open a graphics program. If you don't have one, install one (See Reference box). Create the first image for the button. Measure the size of the image in pixels. Example: 300 pixels X 150 pixels. In the example, the image has a height of 300 pixels, and a width of 150 pixels. Save the button as "Button1.gif". If you already have an image and are not creating one, simply get the size properties of the image and write it down. Save it as "Button1.gif"
- 2). Create the second image, or open a ready-made one. When a visitor's mouse rolls over the button, this second image will appear. Set the image size as being identical to "Button1.gif". Example: Image 1: "Button1.gif". Size: 300 pixels X 150 pixels.
The first image has a size a height of 300 pixels and a width of 150 pixels. Adjust the second image so it also has dimensions of 300 pixels X 150 pixels. Save the image as "Button1a.gif" - 3). Login to your account on Blogger.com and go to the Dashboard. Start a new post. Click on "Insert a New Image". Locate "Button1.gif" and insert it into your post. Right click on the image, and click on "Open in a new tab". "Button1.gif" will open in a new tab. Click on the new tab. Write down the URL of "Button1.gif", or copy and paste it into a text file. You are saving the image location that you will be inserting into an HTML code later on. Repeat the same process for "Button1a.gif".
- 4). Open a new text document. Copy the code below, and paste it into the text document:
<a href="/links/?u=http://yourblog.blogspot.com"><img src="IMAGE1" onmouseover="this.src='IMAGE2'" onmouseout="this.src='IMAGE1'" alt="Click Me"/></a>
In the above example: you will replace "http://yourblog.blogspot.com" with the URL you want the roll over button to link to. Where IMAGE1 appears in the above code, you will replace it with the URL location of "Button1.gif". Where IMAGE2 appears, you will replace it with the URL location of "Button1a.gif". - 5). Copy the HTML code you just edited. Go back to your blog. Click on the "Design" tab. A screen called "Add and Arrange Page Elements" will appear. Find a place on your blog that you want the rollover button to appear. When you find a spot, click on its "Edit" function. A screen titled "Configure HTML/JavaScript" will appear.
- 6). Click in the "Content" box. Paste in the HTML code you prepared and copied earlier. Click on "Save".
- 7). Click on the "View Blog" option found near the top of the navigation menu. Find your button and roll your mouse over it. Check that when you roll over the button, it toggles from ""Button1.gif" to "Button1a.gif". Click on the button to make sure your hyperlink works.
