0
Efecto hover sobre las imágenes
Esta técnica permite agregarle un CAPTION a las imágenes que sólo será visible cuando colocamos el puntero del mouse encima de ella. El efecto es bastante sencillo y sólo requiere HTML y CSS.
La única limitación que tendremos es utilizar imágenes de un tamaño más o menos similar para no distorsionarlas. No es necesario que sean todas iguales porque le agregaremos alguna variación al efecto original para que se adapte a distintas posibilidades.
Pondremos las imágenes con este código (si es en una entrada, todo en una sola línea):
Pondremos las imágenes con este código (si es en una entrada, todo en una sola línea):
<div class="imgteaser">
<a href="javascript:void(0);">
<img src="URL_imagen" />
<span class="more">» Leer Más</span>
<span class="desc">
<strong>EL TITULO</strong>
....... el texto a mostrar .......
</span>
</a>
</div>
La clave, por supuesto, está en las definiciones CSS, muchas de las cuales son personalizables:
<style type="text/css">
.imgteaser { /* es el bloque general */
margin: 0 auto; /* lo centramos */
overflow: hidden;
position: relative;
width:600px; /* establecemos el ancho total (imagen + marco) */
}
.imgteaser a {text-decoration: none;}
.imgteaser a:hover {cursor: pointer;}
.imgteaser a img { /* la imagen en si misma */
background-color: #456; /* el color del marco */
border: none;
margin: 0;
padding: 10px; /* le ponemos un marco alrededor */
width: 580px; /* forzamos el tamaño de la imagen */
}
.imgteaser a .more { /* es el área traslúcida de LEER MAS */
background-color: #123; /* color de fondo */
/* las propiedades del texto */
color: #FFF;
font-size: 14px;
padding: 5px 10px;
/* transparencia */
filter:alpha(opacity=65); /* IE genérico */
opacity:.65; /* Firefox */
-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=65)'; /* IE8 */
/* posicionamos ese texto abajo y a la izquierda sin importar la altura de la imagen */
position: absolute;
bottom: 14px;
right: 10px;
}
.imgteaser a .desc {display: none;}
.imgteaser a:hover .more {visibility: hidden;}
.imgteaser a:hover .desc { /* es el texto del caption en si mismo */
background-color:#345; /* color de fondo */
display: block;
margin: 0;
width: 580px; /* ocupará el mismo ancho de la imagen */
/* las propiedades del texto */
color: #FFF;
font-size: 12px;
padding: 10px;
/* transparencia */
filter:alpha(opacity=75);
opacity:.75;
-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=75)';
/* lo posicionamos abajo y a la derecha sin importar la altura de la imagen */
position: absolute;
bottom: 14px;
left: 10px;
}
.imgteaser a:hover .desc strong { /* el texto LEER MAS */
display: block;
font-size: 14px;
line-height: 2em;
}
</style>
REFERENCIAS:The Art of Hand Coding
0
» Para añadir un borde lo podemos hacer en plantilla Edición de HTML, justo antes de ]]></b:skin>
Banners de 125 x 125 en la sidebar
Houdini me preguntaba como añadir unos banners de 125x125, hay varias formas de hacerlo y casi todas nos llevan al mismo resultado.
Voy a explicar como lo hice pero recomiendo visitar a Francisco y Rosa que explicaban y muy bien los pasos a seguir.
Los banners miden 125x125 a eso hay que sumarles el espacio que dejamos entre ellos y si añadimos algún borde para los estilos, no estaría mal probar antes en otro blog y una vez que tenemos las medidas ajustadas añadirlos al blog donde pensamos incorporar la publicidad.
Los podemos añadir directamente a la plantilla aunque yo prefiero utilizar un gadget por aquello de no recargar tanto y evitar posibles errores en las modificaciones.
Editamos un gadget de HTML y en su interior añadimos lo siguiente:<div class="banner img">
<a href="#" title="Gem@ BLOG"><img style="margin:0px 5px 5px 0px;" alt="Gem@ BLOG" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-6iVNCGoAG-a0BVLe7VE2_Wxd6g9BNA2_UrpBZUfEFmvwzQjgN6ctdk526oxR-Ml5PazYEa5neYFuSO-G-3ToswWkcrtHcOFywvNGqnUTL9wT_Y5OihN-TiSpGZgIpgw8IZ3JvatzDQc/s320/J2E0353Z16.png"/></a>
<a href="#" title="Gem@ BLOG"><img style="margin:0px 0px 5px 0px;" alt="Gem@ BLOG" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-6iVNCGoAG-a0BVLe7VE2_Wxd6g9BNA2_UrpBZUfEFmvwzQjgN6ctdk526oxR-Ml5PazYEa5neYFuSO-G-3ToswWkcrtHcOFywvNGqnUTL9wT_Y5OihN-TiSpGZgIpgw8IZ3JvatzDQc/s320/J2E0353Z16.png"/></a>
<a href="#" title="Gem@ BLOG"><img style="margin:0px 5px 0px 0px;" alt="Gem@ BLOG" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-6iVNCGoAG-a0BVLe7VE2_Wxd6g9BNA2_UrpBZUfEFmvwzQjgN6ctdk526oxR-Ml5PazYEa5neYFuSO-G-3ToswWkcrtHcOFywvNGqnUTL9wT_Y5OihN-TiSpGZgIpgw8IZ3JvatzDQc/s320/J2E0353Z16.png"/></a>
<a href="#" title="Gem@ BLOG"><img style="margin:0px 0px 0px 0px;" alt="Gem@ BLOG" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-6iVNCGoAG-a0BVLe7VE2_Wxd6g9BNA2_UrpBZUfEFmvwzQjgN6ctdk526oxR-Ml5PazYEa5neYFuSO-G-3ToswWkcrtHcOFywvNGqnUTL9wT_Y5OihN-TiSpGZgIpgw8IZ3JvatzDQc/s320/J2E0353Z16.png"/></a>
</div>
Ya tenemos los banners en la sidebar, si tenemos necesidad de modificar el espacio entre ellos lo haremos en margin recordando que lo estamos modificando en el siguiente orden: arriba, derecha, debajo, izquierda.
» En title y alt sustituimos Gem@ BLOG por el nombre de la publicidad que añadimos.» El asterisco # lo sustituimos por la url que enlazamos ya sea la url de la publicidad, una entrada donde informamos sobre los requisitos para contratar nuestro espacio o un enlace al correo para ponerse en contacto con nosotros.
» De ser lo últimos el enlace sería:<a href="mailto:Tu dirección de correo aquí">
» Para el ejemplo he creado una imagen que podemos sustituir por cualquier otra.» Para añadir un borde lo podemos hacer en plantilla Edición de HTML, justo antes de ]]></b:skin>
.banner img{
width:125px;
padding:3px 2px ;
list-style:none;
display : block;
overflow:hidden;
float:left;
background:#fff ;
border:1px solid #ccc;
}
0
En realidad son dos imágenes, una en color y otra en blanco y negro, que usando un sencillo código hace posible el que al pasar el ratón sobre una de ellas se muestre la otra.
Podéis copiar y pegar el código donde queráis mostrar el icono, por ejemplo, en un gadget HTML en la sidebar y tan solo tendréis que colocar la url de vuestro feed donde está señalado.
Y si queréis saber más sobre este curioso efecto y como hacerlo usando vuestras propias imágenes, en Vagabundia tenéis una entrada muy completa al respecto.
Imagen RSS con efecto "Rollover"
Alguien que no me ha dicho su nombre 
Pasa el ratón sobre ella.
En realidad son dos imágenes, una en color y otra en blanco y negro, que usando un sencillo código hace posible el que al pasar el ratón sobre una de ellas se muestre la otra.
Podéis copiar y pegar el código donde queráis mostrar el icono, por ejemplo, en un gadget HTML en la sidebar y tan solo tendréis que colocar la url de vuestro feed donde está señalado.
<a href="url_de_tu_feed" onmouseover="RSS.src='http://2.bp.blogspot.com/_8PJ-pgoBhWQ/SfkFNAJa48I/AAAAAAAAGvs/_0Sbqpyg8z0/s320/RSScLaro.png'" onmouseout="RSS.src='http://1.bp.blogspot.com/_8PJ-pgoBhWQ/SfkFRLoVQXI/AAAAAAAAGv0/MaFCzGhD1Z8/s320/RSSOscuro.png'"><br /><img src="http://1.bp.blogspot.com/_8PJ-pgoBhWQ/SfkFRLoVQXI/AAAAAAAAGv0/MaFCzGhD1Z8/s320/RSSOscuro.png" name="RSS" border="0" /></a>
Y si queréis saber más sobre este curioso efecto y como hacerlo usando vuestras propias imágenes, en Vagabundia tenéis una entrada muy completa al respecto.
0
Hace unos meses, ZonaFirefox nos contaba que la futura versión de Firefox traería, entre otras novedades, la posibilidad de crear aplicaciones web de escritorio, es decir, no sólo guardar páginas sino tener acceso a servicios de manera independiente. Para esto, utilizaría Prism, algo similar a Adobe AIR.
Ahora, leyendo ghacks.net veo que Mozilla se ha adelantado en este tema y ha aparecido la primera beta de Prism y que esta, funciona en las versiones actuales del navegador así que ... a probar se ha dicho.
Vamos a la página de Prism y allí tenemos dos opciones, lo agregamos como extensión o la podemos descargar de manera independiente de tal forma que funcionará como cualquier otro programa portable. Hay versiones para Windows, Mac y Linux. También hay un Bookmarklet Experimental que nos permite hacer lo mismo sin necesidad de descargar nada.
Prism: Crear aplicaciones desde Firefox
Hace unos meses, ZonaFirefox nos contaba que la futura versión de Firefox traería, entre otras novedades, la posibilidad de crear aplicaciones web de escritorio, es decir, no sólo guardar páginas sino tener acceso a servicios de manera independiente. Para esto, utilizaría Prism, algo similar a Adobe AIR.Ahora, leyendo ghacks.net veo que Mozilla se ha adelantado en este tema y ha aparecido la primera beta de Prism y que esta, funciona en las versiones actuales del navegador así que ... a probar se ha dicho.
Vamos a la página de Prism y allí tenemos dos opciones, lo agregamos como extensión o la podemos descargar de manera independiente de tal forma que funcionará como cualquier otro programa portable. Hay versiones para Windows, Mac y Linux. También hay un Bookmarklet Experimental que nos permite hacer lo mismo sin necesidad de descargar nada.
Opté por la primera que me parece más intuitiva así que allí está, disponible en el menú Herramientas ¿Cómo lo puedo usar? Es tan sencillo que asombra.
Por ejemplo, voy a entrar en GMail con el navegador, como lo haría normalmente. Una vez allí, en Herramientas hago click en Convert Website to Application. Se abrirá una ventana de opciones:
Por ejemplo, voy a entrar en GMail con el navegador, como lo haría normalmente. Una vez allí, en Herramientas hago click en Convert Website to Application. Se abrirá una ventana de opciones:
URL es la página donde estamos
Name el nombre descriptivo que le daremos
Show navigation, Shoy status message and progress, Enable navigation keys y Display in the notification area son las opciones de la ventana en la que veremos la aplicación
Marcaremos una o varias de las opciones de Create Shortcuts: con Desktop la agregamos al Escritorio, con Start Menu al Menú Inicio y con Quick Launch Bar a la barra de acceso rápido de Windows.
Por último Icon nos permite usar el ícono por defecto de la página o seleccionar uno cualquiera.
Hecho esto, veremos el acceso en la PC y bastará hacer click en él para abrirla, tengamos el navegador abierto o no. Como la aplicación ejecuta una versión minimizada de Firefox, veremos que es muy rápida.
Aparentemente, en las próximas versiones habrá más posibilidades como mostrar alertas y trabajar offline (más información)
Muy interesante es la Wiki del proyecto donde hay una serie de paquetes ya pre-armados para crear aplicaciones de diferentes servicios conocidos (más información):
Name el nombre descriptivo que le daremos
Show navigation, Shoy status message and progress, Enable navigation keys y Display in the notification area son las opciones de la ventana en la que veremos la aplicación
Marcaremos una o varias de las opciones de Create Shortcuts: con Desktop la agregamos al Escritorio, con Start Menu al Menú Inicio y con Quick Launch Bar a la barra de acceso rápido de Windows.
Por último Icon nos permite usar el ícono por defecto de la página o seleccionar uno cualquiera.
Hecho esto, veremos el acceso en la PC y bastará hacer click en él para abrirla, tengamos el navegador abierto o no. Como la aplicación ejecuta una versión minimizada de Firefox, veremos que es muy rápida.Aparentemente, en las próximas versiones habrá más posibilidades como mostrar alertas y trabajar offline (más información)
Muy interesante es la Wiki del proyecto donde hay una serie de paquetes ya pre-armados para crear aplicaciones de diferentes servicios conocidos (más información):
- Gmail: gmail.webapp
- Google Docs: gdocs.webapp
- Google Groups: groups.webapp
- Google Analytics: ganalytics.webapp
- Google Reader: greader.webapp
- Facebook: facebook.webapp
- Twitter: twitter.webapp
- BBC Radio Player bbcradioplayer.webapp
- Flash Earth: FlashEarth.webapp
- Flickr: flickr.webapp
- Google Reader + GTalk : PRISM-bundle-google-reader-with-gtalk.webapp
- Google Webmaster Tools: google_webmastertools.webapp
- Meebo: meebo.webapp
- Pandora: pandora.webapp
0
Colocar una imagen asociada a una etiqueta en el sidebar
Juan me preguntaba si era posible colocar una imagen en la sidebar que identificara la etiqueta a la que correspondía una entrada. Es decir, si un post tuviera la etiqueta ANIMACIÓN se mostrase una imagen específica y si tuviera la etiqueta BLOGGER se mostrase otra, etc, etc, etc.
Debería ser fácil si tuviéramos ese dato pero sólo es accesible desde un único lugar, desde el mismo post, así que primero deberíamos leerlo y guardarlo para usarlo cuando sea necesario.
Es que, si tenemos la sidebar a la derecha de las entradas, cuando leemos el dato, la sidebar aún no está así que no podemos poner nada y si la tenemos a la izquierda, cuando tenemos que mostrar la imagen, aún no sabemos la etiqueta así que, sea donde sea que se nos ocurra mostrar la imagen, debemos hacerlo en varios pasos. Se me ocurre que debe haber varias formas de hacerlo y esta sólo es una.
Primero que nada, creamos una variable de JavaScript que será la que contendrá esa etiqueta. Ponemos entonces esto antes de </head>:
Debería ser fácil si tuviéramos ese dato pero sólo es accesible desde un único lugar, desde el mismo post, así que primero deberíamos leerlo y guardarlo para usarlo cuando sea necesario.
Es que, si tenemos la sidebar a la derecha de las entradas, cuando leemos el dato, la sidebar aún no está así que no podemos poner nada y si la tenemos a la izquierda, cuando tenemos que mostrar la imagen, aún no sabemos la etiqueta así que, sea donde sea que se nos ocurra mostrar la imagen, debemos hacerlo en varios pasos. Se me ocurre que debe haber varias formas de hacerlo y esta sólo es una.
Primero que nada, creamos una variable de JavaScript que será la que contendrá esa etiqueta. Ponemos entonces esto antes de </head>:
<script>var etiquetaPOST;</script>
Ahora, deberíamos buscar la parte del código de los posts donde se leen y muestran las etiquetas de cada entrada así que expandimos los artilugios y buscamos esto:
<b:loop values='data:post.labels' var='label'>
<script>etiquetaPOST='<data:label.name/>';</script>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
y agregamos eso indicado en color que hará que se guarde la etiqueta en esa variable, con una limitación, si la entrada tiene más de una, guardará la última; podríamos modificarlo para que guarde la primera pero, aún así, sólo guardará una.
Ya tenemos el dato, ahora, podemos usarlo en cualquier otra parte de la plantilla y poner la imagen con otro script pero, el procedimiento será distinto si lo vamos a poner en una sidebar a la izquierda o a la derecha de la entrada. Empecemos con esta última que es el caso más común.
Agregamos un elemento HTML, le damos título para tenerlo identificado y allí, ponemos esto:
Ya tenemos el dato, ahora, podemos usarlo en cualquier otra parte de la plantilla y poner la imagen con otro script pero, el procedimiento será distinto si lo vamos a poner en una sidebar a la izquierda o a la derecha de la entrada. Empecemos con esta última que es el caso más común.
Agregamos un elemento HTML, le damos título para tenerlo identificado y allí, ponemos esto:
<script type='text/javascript'>
listaCategorias=new Array('CATEGORIA1','CATEGORIA2','CATEGORIA3');
imgsCategorias=new Array(
'URL_imagenCATEGORIA1',
'URL_imagenCATEGORIA2',
'URL_imagenCATEGORIA3'
);
cual=listaCategorias.indexOf(etiquetaPOST);
if(cual==-1) {
laImagen='URL_imagenPORDEFECTO';
} else {
laImagen=imgsCategorias[cual];
}
salida='<img id="logocat" src="' + laImagen + '"/>';
document.write(salida);
</script>
Donde, reemplazamos CATEGORIA1, CATEGORIA2 y CATEGORIA3 por los nombres de las nuestras y, si tenemos más, ponemos cada una de ellas entre comillas simples y separadas por comas.
La lista de imágenes se corresponde con las categorias, y hacemos lo mismo, colocamos la URL de cada una de ellas, entre comillas simples y separadas por comas.
Además, para evitar problemas o por si no tenemos todas las categorías listadas, colocamos en URL_imagenPORDEFECTO una imagen genérica, la que se mostrará por defecto en caso de no encontrarse ninguna otra.
Guardamos, vamos a la plantilla y expandimos los artilugios para editar el gadget que hemos creado para que quede de esta forma:
La lista de imágenes se corresponde con las categorias, y hacemos lo mismo, colocamos la URL de cada una de ellas, entre comillas simples y separadas por comas.
Además, para evitar problemas o por si no tenemos todas las categorías listadas, colocamos en URL_imagenPORDEFECTO una imagen genérica, la que se mostrará por defecto en caso de no encontrarse ninguna otra.
Guardamos, vamos a la plantilla y expandimos los artilugios para editar el gadget que hemos creado para que quede de esta forma:
<b:widget id='HTMLXX' locked='false' title='XXXXXXXX' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<div class='widget-content'><data:content/></div>
<b:else/>
<style>#HTMLXX {display: none;}</style>
</b:if>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
De esta manera, nos aseguramos que sólo se muestre en las páginas individuales.
Suscribirse a:
Entradas (Atom)