Twitter Buttons with Mouse Hover Effect Code for Blogger

Here are some twitter buttons for you all with code for mouse hover effect. First of all right click and save all images on you computer.

Now, upload any pair of images that you want to put as your twitter button on your blog to any image sharing site (like photobucket.com) as per your wish.

And paste the following code between <head> & </head> of your blog template's (path: Dashboard>Layout>Edit Html) source code;

Code:

<script type="text/javascript">
function mouseOver()
{
document.getElementById("b1").src ="image1 source";
}
function mouseOut()
{
document.getElementById("b1").src ="image2 source";
}
</script>

Note: Change the texts in red on above code with the path of image1 & image2 sources of your uploaded pair.

Save the template.

Next step, in the Layout section of your Dashboard click on Add a Gadget>HTML/Javascript and in content area paste the following code;

Code:

<a href="http://twitter.com/yourtwitterpage" target="_blank">
<img border="0" alt="follow me on twitter" src="image1 source" id="b1" onmouseover="mouseOver()" onmouseout="mouseOut()" /></a>

Note: Change the texts in red on above code with the path of image 1 source of uploaded pair and the text in blue with the path of your twitter page.

Save and view the blog, its done now!

(Note: I found all these twitter bird image sources on an online file sharing site without any license agreement, if anybody claims to be the owner and wants me to remove these images from my blog, please contact me for that. To do so please visit the contact me page on this blog.)