Menu que cambia el color de fondo al pasar el cursor

Tras haber aprendido la forma de insertar el botón en el blog que, al pulsarse, amplía la zona de las entradas y oculta la barra lateral, continuaremos con otra opción muy curiosa que puede ofrecerse a los lectores de nuestro sitio web.

Se trata de un menú a base de colores que construí con unos simples atributos en javascript, y que, al pasar el cursor sobre cualquier recuadro, el fondo del blog cambia automáticamente al color que la casilla encierra.

Aquí puedes ver una imagen del menú:

Y aquí encontrarás un ejemplo en funcionamiento.

Para instalarlo en tu blog bastará con seguir estos sencillos pasos:

Diseño>añadir gadget (elemento de página)>html-javascript

Pega este código:

<center><table border="0" style="cursor:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMXUxpZyJzGhE8WE4XnfDaQJ5PwSC1xXInapzUvaxbDbN8b1FzJp2lVovyRClzMtySwmAAtOxwYF27wnBMSK3IyUUp3yWIE_VCitVxt-ROdEb_VoIgygRQEallsQyWWN9fluE0oUfOA2Q/s400/blcursorgif.gif'), auto;"" align="center" width="22%"><tr><td><span onmouseover="javascript:document.body.style.backgroundColor='#d9d13f'; document.body.style.backgroundImage='none';"><img border="1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyJAHK2BNvcpfVvtlr0_mdnn_Uc_z6f6oro1aTDrf_SvHxwYZZ1TMHhIhS6ZSSn8wLiwvR8dMVwA7X0MfH7-bs_l4Pgknv1KT3A75BOPYkFv8vNTrQVu0T99Z_7dm4ufB8KTE_9y64uS_X/s320/blfondoamarillo.png" /></span></td><td><span onmouseover="javascript:document.body.style.backgroundColor='#3f6dd9'; document.body.style.backgroundImage='none';"><img border="1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMeYUEsKv71gX2kWyfRcXe72FbhOIp9fzJcQMRQq6h9ot9wlejPFYmgSZz1Wre45BYfihK2Q0m5g-VedY12iEvDCLzDhj9MEaXC_e2Q8c4PHk2WqSKUOTIoFd_kuNjvwDkTfWszjViBZte/s320/blfondoazul.png" /></span></td><td><span onmouseover="javascript:document.body.style.backgroundColor='#d9993f'; document.body.style.backgroundImage='none';"><img border="1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZKTeFsegKP2G7ES48kM5vBddmrY73v07WX1bOojqV6a2BcTKr-KlNj6AWbb6kRsdLtEclzRzA4BKRQ2ytXiubOy1_DdXP7-W2Qn3nSFu5dmurm3ZHl-7ZOzNPUAFUpDTyxkMmIEdEtgoU/s320/blfondonaranja.png" /></span></td><td><span onmouseover="javascript:document.body.style.backgroundColor='#cccccc'; document.body.style.backgroundImage='none';"><img border="1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRFkZVUsQgdI3wk-LbmILzw_MxgPG11kBqlhfVQCzlmg9REe1N0jPQkhbc2S-A3sj3ifAXHlrXy12ZzeliUAmVvtnhxZwZdY9Vsm2o-bQpU341H76YdbXe5bvvVYatdTCkOgUVDrHNFQyh/s320/blfondogris.png" /></span></td><td><span onmouseover="javascript:document.body.style.backgroundColor='#ffffff'; document.body.style.backgroundImage='none';"><img border="1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPMRCfZHBPp5s0yCz077pfvIg3_8ckvRP5oCP2IPlDOiQHmaMrIRhorBz-Z4FCI5Hp1BB-xas_0lXLmeHgT1lnQzeAhvhacCJjWjLM9s2iOh5jfu8tx_zsyIvLKhyphenhyphenuoX2cmmPdd37F42vt/s400/blfondoblanco.png" /></span></td><td><span onmouseover="javascript:document.body.style.backgroundColor='#9b5b1c'; document.body.style.backgroundImage='none';"><img border="1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV1sJn5CUjTqU76lgtImVpCKodr171NqjrSPf2scNYRnWI4_7adgAtVxHDJmgD-FIqJeiyV6wHUgHW_Y75crYKa68NUcZLzaTymnilQfzklexgKmSPEJt5i1kN1yyqXO_XHQxTPcBvjEII/s320/blfondomarron.png" /></span></td></tr><tr><td><span onmouseover="javascript:document.body.style.backgroundColor='#57d93f'; document.body.style.backgroundImage='none';"><img border="1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZJAKxaS0qilJzKfQVdFyYWFN6NqRrmN0TXA8PERh7_ZrtYsvumE4jTzoG1uoz5uHaXQFWO8tWxgVozN_TtcmtN35bj18MK0p5ko-e7w4CLpU-xtM0zDn19wqmX3U_Do9tXNcLQ5IwtKIZ/s320/blfondoverde.png" /></span></td><td><span onmouseover="javascript:document.body.style.backgroundColor='#d9483f'; document.body.style.backgroundImage='none';"><img border="1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhS8LtoYTRd_U8_cp8nQ3fMgTzZuTmtqIruN25x4xkaUri41cKeeOXJ2pN4S6HMQHoHV_uISDcnX04sh6kbAOEAQn5rSerh9dZDoTuya4HFtE4DCexurVdWJaBB8SeCFY87uaY2bUw8q24D/s320/blfondorojo.png" /></span></td><td><span onmouseover="javascript:document.body.style.backgroundColor='#FFCCCC'; document.body.style.backgroundImage='none';"><img border="1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVs-qPAHgcd-2Nfwpotxf362vDMZRx7w1uFuDyNpjtxwsKG0JJiSAHZtjkgTFce8dXFuWiRhevEDFlWO890he1tktapYUseTq9XdIhqWHwRlPty39xxKVgt1JwFiJ8aXv1yenaDRdPcaLV/s320/blfondorosa.png" /></span></td><td><span onmouseover="javascript:document.body.style.backgroundColor='#993fd9'; document.body.style.backgroundImage='none';"><img border="1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4y6lfqRYfscWSLK35qgd0FyeCs8wYO0o7TEtnIAMCMLMtxC-dsFhOwtO0cIaqNxugwatBzUI4OOXpN4p28yQ0lZBMAbnvqA6sE9QTB0d1PCFiwg2BP6MpSlpPKLFWX7o_kfgOjEZiq6dE/s320/blfondomorado.png" /></span></td><td><span onmouseover="javascript:document.body.style.backgroundColor='#000000'; document.body.style.backgroundImage='none';"><img border="1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHIMIwho4jLp6pA17hkTt9xmT312ntb6hKYgPUz1zg4jFPTjeqgwX148CKDlCtRe9wtM9qT_Il4psUMDk9zzqCSzo20w311mba15QwfJLNW0_1IqTdr1Nl9E5HVCSmh9wiLSc8xpJeOuc9/s320/blfondonegro.png" /></span></td><td><span onmouseover="javascript:document.body.style.backgroundColor='#74b8fb'; document.body.style.backgroundImage='none';"><img border="1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1jnqIUJOQwq9Q6Z-HJ1mznE-TNAy8YHp3AxT4uHDfSnCXNVptdnALFy_q5OmuT6MHETp-YD-kEQ8pkNvXqfZzjE34I9U6g3jBIcLB2sb27p8tcp8AgDQPJxjdee97YkUtjA725IdUQC66/s400/blfondoazul2.png" /></span></td></tr></table></center>

Pulsa el botón "Guardar" y habrás terminado.

Aunque en el menú hay bastantes colores, si deseas añadir alguno más o, por el contrario, deshacerte de uno en particular necesitas hacer lo siguiente [+/-]


Si necesitas ayuda durante la instalación no dudes en avisarme.

martes, 8 de marzo de 2011