TUTORIALES BLOGGER KIRADOBER : imagen

Mostrando entradas con la etiqueta imagen. Mostrar todas las entradas

Buscador sólo de imágenes

Como podéis apreciar aquí tenemos un buscador solo de imagenes de Google en dos acabados

uno con fondo blanco y otro con fondo negro, lo podéis ver están en la barra lateral y funciona sin problemas.

Verlo en el Bloc de Pruebas:

Aquí os dejo los códigos:

El código para fondo blanco

<center>
<form action="http://images.google.es/images" method="GET">
<input value="UTF-8" name="ie" type="hidden"/><input value="UTF-8" name="oe" type="hidden"/><table bgcolor="#ffffff">
<tr><td><a href="http://www.google.com/"><img alt="Google" src="http://www.google.com/logos/Logo_40wht.gif" border="0" align="absmiddle"/></a><span class="cse-branding-text">Imágenes</span><br /><input maxlength="255" value="" name="q" size="25" type="text"/><label for="sbb" style="display: none">Envíe el formulario de búsqueda</label><input id="sbb" value="Buscar" name="sa" type="submit"/><input value="pub-1186760826623337" name="client" type="hidden"/><input value="1" name="forid" type="hidden"/><input value="5040991414" name="channel" type="hidden"/><input value="ISO-8859-1" name="ie" type="hidden"/><input value="ISO-8859-1" name="oe" type="hidden"/><input value="0000" name="flav" type="hidden"/><input value="HxaaG_lRAqoeNme7" name="sig" type="hidden"/><input value="GALT:#888888;GL:1;DIV:#940F04;VLC:444444;AH:center;BGC:000000;LBGC:940F04;ALC:ffffff;LC:ffffff;T:999999;GFNT:ffffff;GIMP:ffffff;FORID:1" name="cof" type="hidden"/><input value="es" name="hl" type="hidden"/></td></tr>
</table>
</form>
</center>

El código para fondo negro

<center>
<form action="http://images.google.es/images" method="GET">
<input value="UTF-8" name="ie" type="hidden"/><input value="UTF-8" name="oe" type="hidden"/><table bgcolor="#000000">
<tr><td><a href="http://www.google.com/"><img alt="Google" src="http://www.google.com/logos/Logo_40blk.gif" border="0" align="absmiddle"/></a><span class="cse-branding-text">Imágenes</span><br /><input maxlength="255" value="" name="q" size="25" type="text"/><label for="sbb" style="display: none">Envíe el formulario de búsqueda</label><input id="sbb" value="Buscar" name="sa" type="submit"/><input value="pub-1186760826623337" name="client" type="hidden"/><input value="1" name="forid" type="hidden"/><input value="5040991414" name="channel" type="hidden"/><input value="ISO-8859-1" name="ie" type="hidden"/><input value="ISO-8859-1" name="oe" type="hidden"/><input value="0000" name="flav" type="hidden"/><input value="HxaaG_lRAqoeNme7" name="sig" type="hidden"/><input value="GALT:#888888;GL:1;DIV:#940F04;VLC:444444;AH:center;BGC:000000;LBGC:940F04;ALC:ffffff;LC:ffffff;T:999999;GFNT:ffffff;GIMP:ffffff;FORID:1" name="cof" type="hidden"/><input value="es" name="hl" type="hidden"/></td></tr>
</table>
</form>
</center>

Espero que os haya gustado hasta otra.

Fuente: oloblogger.com

Imagen que aparece con efecto deslizante

Aqui os traigo una animacion con dos fotografias,mientras una esta oculta, laotra aparece cuando se pasa el cursor por encima

la imagen que visualizamos. En IE8 y IE9 también funciona, aunque no queda tan conseguido el efecto deslizante.

Como son efectos que la mayoría de veces los añadimos esporadicamente lo que haremos para probarlo es incluir todo el código necesario justo donde deseamos mostrar el efecto, ya sea una entrada o un gadget de HTML.

Primero añadimos el código para las imágenes, y ahí mismo especificamos el tamaño de la primera imagen.

Por favor mira la demostración:

Vamos al asunto

1º Ir a Blogger

2º Añadir un Gadget o introducir este codigo en una entrada (en HTLM)

_________________________________________________________________________________<div class="pulloutimage" style="height: 223px; width: 298px;">

</div>

_________________________________________________________________________________

A continuación de las imágenes copiamos y pegamos los estilos:

HTML podemos añadir en la plantilla antes de ]]></b:skin>

_________________________________________________________________________________

<style>

.pulloutimage{

position: relative;

}

.pulloutimage img{

position: absolute; /* absolute position and stack images inside container */

left: 0;

/* aquí estilos para el borde de la primera imagen */

}

.pulloutimage img.ondemand{ /*CSS for image shown on demand */

opacity: 0;

visibility: hidden; /* hide it initially (mainly for legacy browsers) */

}

.pulloutimage img.original{

z-index: 1; /* set base z-index of initially shown image */

}

@-webkit-keyframes revealfromright{ /* keyframe animation that slides a DIV out from another before overlapping later */

0%{ /* Start of animation */

z-index: -1;

opacity: 0;

}

50%{ /* Half way point, move image to right edge of container */

opacity: 1;

z-index: -1;

left: 100%;

box-shadow: none;

}

51%{ /* 51% point, stack animating image on top of original image */

z-index: 2;

}

100%{ /* Final point, move animating image back so it's on top of original */

left: 0;

box-shadow: 8px 8px 15px gray;

}

@-moz-keyframes revealfromright{

0%{

z-index:-1;

opacity:0;

}

50%{

opacity:1;

z-index:-1;

left:100%;

box-shadow: none;

}

51%{

z-index:2;

}

100%{

left:0;

box-shadow: 8px 8px 15px gray;

}

@-ms-keyframes revealfromright{

0%{

z-index:-1;

opacity:0;

}

50%{

opacity:1;

z-index:-1;

left:100%;

box-shadow: none;

}

51%{

z-index:2;

}

100%{

left:0;

box-shadow: 8px 8px 15px gray;

}

.pulloutimage:hover img.ondemand{ /* when mouse rolls over pulloutimage container, style to apply to "ondemand" image */

-webkit-animation-name:revealfromright; /* specify animation keyframe */

-webkit-animation-duration: 1s;

-webkit-animation-iteration-count: 1;

-moz-animation-name:revealfromright;

-moz-animation-duration: 1s;

-moz-animation-iteration-count: 1;

-ms-animation-name:revealfromright;

-ms-animation-duration: 1s;

-ms-animation-iteration-count: 1;

animation-name:revealfromright;

animation-duration: 1s;

animation-iteration-count: 1;

visibility:visible;

opacity:1;

box-shadow: 8px 8px 15px gray;/* esto es la sombra */

z-index:2;

/* aquí estilos para el borde de la segunda imagen */

}

.pulloutimage:hover img.original{ /* when mouse rolls over pulloutimage container, style to apply to "original" image */

opacity:0.5;

}

</style>

_________________________________________________________________________________

En los estilos está marcado el lugar que podemos modificar si deseamos añadir algún tipo de borde a las imágenes.

- La sombra que muestra la segunda imagen la podemos quitar eliminando la línea con la propiedad box-shadow.

Suscribirse a: Entradas ( Atom )

Menú

Marquesina

Bienvenida

featured Slider

Mis Blocs

Entrada destacada

PÁGINA DE BIENVENIDA

Poner color de fondo o una Imagen en las entradas

Poner color de fondo o una Imagen en las entradas

Como Implementar tus Imágenes correctamente en tu pagina.

Como Implementar tus Imágenes correctamente en tu pagina.

Agregar una imagen de fondo a una entrada específica en Blogger

Agregar una imagen de fondo a una entrada específica en Blogger

buscador de Google sólo de imágenes

Buscador sólo de imágenes

Imagen que aparece con efecto deslizante

Imagen que aparece con efecto deslizante

AddToAny

Printfriendly

Mis Blogs

About Me

Datos personales

Archivos del Bloc

Calendario

Páginas

Tweet Tweet

BIENVENIDO A TUTORIALES BLOGGER KIRADOBER,

Tutoriales

Trucos

Entradas Populares

Etiquetas

Menú

Marquesina

Bienvenida

featured Slider

Mis Blocs

Entrada destacada

PÁGINA DE BIENVENIDA

Poner color de fondo o una Imagen en las entradas

Poner color de fondo o una Imagen en las entradas

Como Implementar tus Imágenes correctamente en tu pagina.

Como Implementar tus Imágenes correctamente en tu pagina.

Agregar una imagen de fondo a una entrada específica en Blogger

Agregar una imagen de fondo a una entrada específica en Blogger

buscador de Google sólo de imágenes

Buscador sólo de imágenes

Imagen que aparece con efecto deslizante

Imagen que aparece con efecto deslizante

AddToAny

Printfriendly

Mis Blogs

About Me

Bienvenida

Entrada al azar

Bienvenida

Entradas Populares

Datos personales

Archivos del Bloc

Calendario

Páginas

Tweet Tweet

BIENVENIDO A TUTORIALES BLOGGER KIRADOBER,

Tutoriales

Trucos

Entradas Populares

Etiquetas