Efecto Simple De Mouseover Para Imagenes De Blog

En este Tutorial te ensenare como anadir efecto cuando pones el cursor sobre una imagen esta cambia a otra imagen luego regresa a la original.Solo anadiendo un codigo a la imagen de tu blog.
Sigue los siguientes pasos y lograras este efecto especial sobre tu imagen que escojas.

Simple Codigo para Efecto de Mouseover para  Imagenes de Tu Blog

Codigo

<img alt="Image01" onmouseout="this.src='imagen 1'" onmouseover="this.src='imagen 2'" src="Imagen 2" />

Nota: Reemplace imagen 1, Imagen 2 con la URL de tu imagen


Mira el siguiente ejemplo:

<img alt="Image01" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfb3xDyG32eIhixomtbhi2yRnJ-ZYFAT6E62DTvsFxdyiDBrfPblpIykh65eBEjwSge18XS6oj4ecf_-gqneyG7U-II81pB-kI1c3QAQd63eqNq2wHUnZZBlCejs1nfXH-sb7UulFH7cw/'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiikryIBPmlQxsEYkZa2o54mJmsdyF2HmrAVINPVzqj6SLVzvJ3iTnumxgBlvG_S8SGu5CgPzIJ4SPHw3fuX1QAGRz-dVhYRiKUFeFAjIEhdhisy0FFS66Rks7PpYnyDIQATO0CSbK7Ts4/'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfb3xDyG32eIhixomtbhi2yRnJ-ZYFAT6E62DTvsFxdyiDBrfPblpIykh65eBEjwSge18XS6oj4ecf_-gqneyG7U-II81pB-kI1c3QAQd63eqNq2wHUnZZBlCejs1nfXH-sb7UulFH7cw/" />

Listo a Disfrutar

Read More

Como Añadir Efecto De Opaco a Imagenes en Blogger

En este Super Truco de blogger te ensenare como añadir el efecto opaco a una foto de tu blog la cual deseas aplicarlo.Solo anadiendo un simple codigo de Css a la plantilla de tu blog.
Como Añadir Efectos de Oscuridad a las Imagenes de Tu Blog

1.Entre a la Interface de tu blogger--> Diseño- -> Edite HTML
2.Busque la siguiente etiqueta </head>
3.Copie el codigo de abajo y peguelo despues de la siguiente etiqueta </head>

<style type='text/css'>
a.opacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;}
a.opacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }
</style>

5.Guarde la Plantilla

6.Ahora vaya a la interface de blogger >> Diseño>>Elementos de Pagina

7.Da Click en 'Añadir un Gadget' en la barra del lado.

8.Selecciona 'HTML/Javascript' y anade el codigo de abajo

<a class="opacity" href="http://www.ciudadblogger.info/"><img src="Anade la de la URL Imagen aqui" /></a>

Note: Replace Anade la de la URL Imagen aqui with your image url.

Ahora guarda  HTMLJava Script y Listo

Read More