January 7, 2009

Create An HTML Rollover Button For Your Blogger / BlogSpot Blog


Many bloggers like to place buttons instead of simple links. And in some widgets and posts, buttons do look a lot better than simple hyperlinks. But most of the bloggers think that placing a button is a tedious job, and due to their laziness they finally end up placing a normal link :)

But through this post, you will learn that the task of adding an HTML button is as simple as inserting a hyperlink !

First have a look at the button below:


If you want to place a button similar to that, then simply copy and paste this code

<form action="http://www.google.com" target="_blank" method="GET">
<input type="submit" value="Google">
</form>
Change the code in RED, as per your requirement !
You can delete target="_blank" from the first line, if you want the new page to open in the same window, and if you want that the new page should open in a new window/tab then leave the target="_blank" as it is !

The button explained above is a "submit" type button, there are many other types too, like text, radio, check boxes etc.
You can read it in a bit more detail from here: W3Schools.com


As requested by Ankit, here's an update to this trick, through which you can use a custom button.
But this will need more work from your side, as it does not only depends on the code, but also on the graphics. That means you have to create two buttons, with exactly the same dimensions, one as Button_Up and one as Button_Down (when cursor is on the button).
Here's the button:
Click Me

I have used these two images:
IMAGE 1:
IMAGE 2:

And the code to be used is this:
<a href="http://bloggerstop.net"><img src="IMAGE1" onmouseover="this.src='IMAGE2'" onmouseout="this.src='IMAGE1'" alt="Click Me"/></a>
Although this method is quite slow in loading the second image, but this method is easier for most of the users. Moreover the other methods use CSS coding / JavaScript, due to which for every type of image, you have to add a different code in the blog template, which can slow down your whole blog...

43 comments:

AB said...

Nice Tip !! Must say...Nice Site !!!

bollywood girls said...

i like your blog ....

विनय said...

;;) liked it

AB said...

If I want to place my own designed button ....then?

Divya Sai said...

Hi Ankit
See the update in the post !

AB said...

Thanks !!

Mottobiz said...

Howdy,

I was wondering if the rollover effect works if I don't have my own domain name (example:- http://something.blogspot.com. If i add the mouseover code then where do I host the images? The code you have given has image1 and image2. How do I install this code if my images are hosted on photobucket?

I truly appreciate your help on this matter!

Thanks in advance,

Chetan

Divya Sai said...

Hi Chetan,

Go to gigaimage.com,
upload any two images from your PC, copy the two DIRECT LINKS to these images,

Now in place of IMAGE1 and IMAGE2 in the code above, paste the DIRECT LINKS, that's it, save the widget !

Mottobiz said...

Thanks for your quick help.

You R AWESOME!!!

PULKIT said...

thanks
!! following ur page now!:)

Sai said...

Thanks Pulkit for following, you are always welcome on this blog !

Regards
Sai

Shell xx said...

Thank you so much! You helped me create a link to my music on iTunes!

: )

Divya Sai said...

I glad that it was useful to you...thanks for commenting....

Regards
Sai

a...... said...

that's Awesome nice post

Mohan said...

Sir How to get >>Enter Your Email Address<<
                             >>Subscribe<<
Button on

Mohan said...

My Mail ID: lakshmohan92@gmail.com
Please help me

Guest said...

Join Feedburner.com and get the embed code for your blog, that's it !

mamibizi said...

finally the one I'm looking for!!! thankss.. i'm bookmarking this site! keep it up!!

Amanda said...

Hi! I was curious how to insert a image size into this code? I put it on my site (which, by the way, it the only code I've found on the web that actually works for me!) and it's HUGE! I want to put the image size in there somewhere. Thanks! My email is amandabolton80@yahoo.com.

Divya Sai said...

Hi Amanda,
put the height and width dimensions inside the img tag, like this:

<img height="x" width="y" src="IMAGE1"

where x and y are height and width in pixels.

Amanda said...

I mean the two image code...thanks!

Amanda said...

oooh! thanks! I will try it now!

Amanda said...

thank you so very much! It worked perfectly!

doc rogers said...

ok so total beginner ... got this to work, but how do i keep the buttons on one line and not above each other?

KENZY said...

this kind of helps, but not exactly what i was looking for. thanks though!

Divya Sai said...

So what exactly is Kenzy looking for? :-/

Madijkie said...

First of all: thanx for al the advise. I'm trying to create a website and want to use the button. I'd like to create a button list.
However the buttons don't have a fixed with. As you can see here: www.rokenengezondheid.nl/p/gevolg.html

Is there a way to make al the buttons the same size, no matter de text they contain?

Sai @ Blogger Help said...

@Madijkie

In the input tag, add a style-width attribute, like this:

<input style="width:200px;" type="submit" value="Google" />

& use the same value for all the buttons.
And, it would be better, if you use center tags around each button to keep their alignment centered, like this:

<div style="text-align: center;">
<form....
...
...
</form>
</div>

Madijkie said...

Thanx. That did the job!

Pepua said...

Hi Diya! this code rocks! it works flawlessly. I have a question:I want to use several of this codes in "one" widget to make a menu.I mean, repeat the whole code just changing the images and source. My problems is this, when I get all the sections of code, one below the other, the images don't rollover. They appear and redirect if I click on them but there is no image rollover. Is there any code I have to put between one piece of code and the other? or maybe this can't be done and only one of this hmtl code can live inside one widget.

Sai @ Blogger Widgets said...

@Pepua

If you want to add a menu to your blog, with rollover effect, then I would better suggest these menus to you. In these widgets, change background colors to background images.
Menu #1
Menu #2
If you want these menus to behave like simple-buttons, then do not use that drop down menu items, and let it all display in a single level.

Anonymous said...

Nice tutorial

can you tell me how to make two buttons inline inside table.

airesofwar said...

OMG I'm going to kill someone XD this is the 100th site I been to or more looking how to make buttons for you blogger. I want more of a Navbar like you have on top but I would rather have it in my header under a Html gadget instead of putting it in my html script. I did have one in there but someone messed it up now I have to get another one and its stressing.

Divya Sai said...

Then you should search properly for it, they are not simple html buttons. They are called html-drop-down-menus. Search for "drop down menus" in this blog, and you'll see a hell lot of them.

Anonymous said...

Divya Sai is The BEST.

Divya Sai said...

Thank you buddy :)
but why anonymous?

Landess said...

this rollover combined with the preload trick I learned at this guy's blog (not affiliated with me otherthan I used it) makes your rollover a knockout.

http://www.createblog.com/html_css-scripts/2417-preload-with-only-htmlcss/

Maria Jose Fabrega said...

how do I add a blogger button to my website?? so you can click on it and it will take you to my blog. Could you help me?

Sai - Blogger Widgets said...

You want to place a button on your blog, that will take visitors to your own blog?

Luke said...

Hey, great piece of simple code, Im sure everyone looked for a while like i did before they found it and then loved it. I am starting out and am having a little trouble. mine rollover once but then stay ont he second image are you able to help? you can email me at luke@quedesign.com.au.

Great site thanks heaps

Mary said...

Could I add 'mouseclick' image too ?

Dude said...

Hello divya nice tutorial im looking for this since last week.
It works for me but i need to put it on my blog template intact, i I mean adding that code without putting it on my
HTML/JavaScript widget.

Help plz! this my blog http://pctionary.blogspot.com/

Anonymous said...

thank you for the code! Its the only thing that works, seriously!

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

comment on this post Share Your Views

Allowed HTML tags: <b>, <i> and <a>

Join and share your views with other bloggers at BloggerStop Community

Comment Like This! and Optimize your blog...

SPAMMER OF THE MONTH: www[.]TopRankLinks[.]com

Next Post Homepage Previous Post

Regular Readers


What They Say...

Divya Sai is the ingenious webmaster of Bloggerstop.Net. Divya is extremely patient, knowledgeable and responsive... Bloggerstop.net has an abundance of articles on creating widgets, templates, hacks and ways to make your blog search engine friendly.
- Stacey @Pets With Allergies
I stumbled onto a great site. Sai, over at Bloggerstop.net has helped me tremendously and with great patience...for any and all questions regarding computer issues. And again, THANK YOU Sai.
- Cheryl @Cmash Loves To Read

More Here...

Popular Posts

Get this widget

| © 2010 BloggerStop.net | Blogger Widgets | Template by Dicas Blogger | Enhanced By Divya Sai | Privacy Policy