Como muchos habran podido en el transcurso de estas semanas, al volver lo hemos con un cambio de plantilla y tambien con un par de fantasticos agregados [que pronto me dare el tiempo para enseñarle como hacerlo] y hoy toca hablarles de un banner de suscripciones que seguro muchos ya han visto y tambien clikeado [espero].
Como pueden apreciar en la imagen, la flecha roja indica el banner y la flechita indica el efecto que se ha logrado hacer, si no sabes de que es solo pasa el mouse alrededor.
Como podras observar ha cambiado de color, ese tipo de efecto se llama Rollover y se logra de la siguiente manera utilizando este codigo:
<a href="URLenlace" onmouseout="getElementById('IdentificadorUnico').src='URLimagenORIGINAL';" onmouseover="getElementById('IdentificadorUnico').src='URLimagenBIS';">
<img id="IdentificadorUnico" src="URLimagenORIGINAL"/>
</a>
URLenlace= Lugar donde quieres enlazar [en este caso el feed de Larga Zona]
URLimagenORIGINAL= La primera imagen que se mostrara [en este caso el feed en color naranja]
URLimagenBIS= La segunda imagen que se mostrara cuando el mouse se pose sobre el [el feed de color plateado]
Y si quieren este banner de 576*61 de alto solo deben copiar el siguiente codigo
<a href="URLenlace" onmouseout="getElementById('IdentificadorUnico').src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHCIr44B9tDjaaT1AL0qRWQ6kYo5a37QfdpIo8HfUt0BoVA76Qq4Z0xO3M5E5Ef0CmzMVFuM7QqKOC28ms06XQgMFJ9XBIY1OzZHD910335jy7x-sqJvRtwm9OHJjRG7b6bdBhI7NS3Rnv/';" onmouseover="getElementById('IdentificadorUnico').src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGaOF5ys6dPqKlvrcVEqNvPKYK18GlcTPCk_zCegb8IMvjnPyUj_iwfxv0LLW6LNfXwx-qB6-M4ETuC75Zz0007T2XGFRbAYQNI12AidkKZb2ForwZsiV1XwrjmPsCt3yalHci88mow5Pg/';">
<img id="IdentificadorUnico" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHCIr44B9tDjaaT1AL0qRWQ6kYo5a37QfdpIo8HfUt0BoVA76Qq4Z0xO3M5E5Ef0CmzMVFuM7QqKOC28ms06XQgMFJ9XBIY1OzZHD910335jy7x-sqJvRtwm9OHJjRG7b6bdBhI7NS3Rnv/"/>
</a>
Copiar, ir a Blogger>Diseño>Configurar HTML/JavaScript
Darle a guardar y listo, en la imagen podran apreciar que en el lugar donde va la direccion hay otra cosa, lo que sucede es que trate de hacerlo universal [un codigo copy/paste] pero tuve problemas con eso asi que hacerlo de la otra manera.
0 comentarios:
Publicar un comentario