Instala ventanas modales recomendados por Ciudad Blogger

Artículo publicado en el blog Ciudad Blogger, uno de los sitios con más información sobre tecnología Blogger Ve la entrada en su blog original.

Shadowbox es un clon de Lightbox, pero a diferencia de éste no sólo sirve para visualizar imágenes en ventanas modales,sino también páginas web, archivos en flash, galerías, mapas, y videos en varios formatos de distintos servicios.

Implementarlo es bastante sencillo, primero descarga este archivo, descomprímelo y sube los archivos a un hosting.

Luego entra en Plantilla | Edición de HTMLL y pega antes de </head> lo siguiente:

<link href='URL del archivo.css' rel='stylesheet' type='text/css'/>
< script src='URL del archivo.js' type='text/javascript'/>
< script type='text/javascript'>
Shadowbox.init({
overlayColor: "#000",
overlayOpacity: "0.6",
});
< /script>

Cambia lo que está en color verde por las URL de los archivos que subiste, en el primero va la URL del achivo shadowbox.css y en el segundo la del shadowbox.js

Con esto ya tenemos todo lo necesario para que Shadowbox funcione, ahora sólo hay que poner el atributo rel="shadowbox" dentro del código del elemento, por ejemplo:

Imagen

<a href="URL de la imagen" rel="shadowbox" title="Imagen">Imagen</a>

Galería de imágenes

<a href="URL de la imagen" rel="shadowbox[galeria1]" title="Imagen">Imagen 1</a>
< a href="URL de la imagen" rel="shadowbox[galeria1]" title="Imagen">Imagen 2</a>

YouTube

<a rel="shadowbox;width=405;height=340;" title="YouTube" href="http://www.youtube.com/v/CCwVb9Faxdc&amp;rel=0&amp;autoplay=1">YouTube</a>

Vimeo

<a rel="shadowbox;width=405;height=340;" title="Vimeo" href="http://vimeo.com/moogaloop.swf?clip_id=8711928&amp;autoplay=1">Vimeo</a>

Video Google

<a href="http://video.google.com/googleplayer.swf?docid=-1941725100819420671&autoplay=1&hl=es&fs=true" title="Video Google" rel="shadowbox;width=405;height=340">Video Google</a>

Archivo SWF

<a rel="shadowbox;width=400;height=300" title="SWF" href="URL del archivo.swf">Animación SWF</a>

Página Web

<a rel="shadowbox;width=700;height=500" title="Página web" href="URL de la página">Página web</a>

Mapa

<a rel="shadowbox;width=425;height=350" title="Mapa" href="URL del mapa">Mapa Google</a>

Cambia la URL de la imagen, del mapa, del archivo o de la página web, según corresponda.
En el caso de los videos sólo hay que agregar donde está en color rojo la ID del video, esa aparece al final de la dirección del video.

Como ven, en el atributo rel="shadowbox" también se han añadido unos parámetros, width=405 es el ancho del reproductor o página web y height=340 es el alto.
En el caso de las galerías de imágenes se agrega entre corchetes el nombre de la galería, por ejemplo rel="shadowbox[galeria1]"

Respecto al color de la pantalla cuando está en ventana modal puede cambiarse en el primer código que pegamos antes de </head> donde está en color azul, overlayColor es el color de la pantalla, y overlayOpacity es la intensidad de la opacidad del color, un número más bajo hace más transparente el color.

En todos los casos no se mostrará una imagen en miniatura como en mis ejemplos sino que se mostrará un enlace de texto, si quieres que también sean miniaturas en lugar del texto sólo busca la parte del código que es texto subrayado y cámbialo por este código:

<img style="width:150px; height:100px;" src="URL de la imagen" />

Ahí deberás poner la URL de la imagen que quieres que aparezca en miniatura, no es automático así que habrá que hacerlas manualmente.

Sin duda Shadowbox es un sistema de ventanas modales bastante completo en el que podremos presentar distintos archivos multimedia de forma más dinámica y elegante.

Descargar | archivos Shadowbox
Enlace | Shadowbox

Read More

Añade sombra a tus imágenes del blog

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en truvos blogger. ! Ve la entrada en su blog original.


Sombra en las imágenes de tu blog con CSS

Hace tiempo descubrimos un generador de sombras para las imágenes del blog, el cual era muy fácil de usar.

En esta entrada aprenderemos un truco aún más sencillo que puede instalarse en unos pocos segundos y nos ofrece la posibilidad de mostrar las imágenes del blog con una bonita sombra.



Podemos aplicar el truco a todas las imágenes del blog.

Y es tan sencillo como dar un solo clic en el siguiente botón:

O añadiendo unas líneas de CSS en tu plantilla:

Diseño>Edición de HTML>expandimos artilugios

Busca la etiqueta ]]></b:skin> y añade este bloque justo encima:

.post img, table.tr-caption-container {
-moz-box-shadow:4px 4px 3px #cccccc;
-ms-filter:
"progid:DXImageTransform.Microsoft.Shadow(color=#cccccc,direction=125,strength=5)";filter: progid:DXImageTransform.Microsoft.Shadow(color=#cccccc,direction=125,strength=5);-webkit-box-shadow: 4px 4px 3px #cccccc;
}

Guarda la plantilla para terminar...




Si lo que deseas es añadir sombra en una imagen en particular (o varias) en lugar de hacerlo para todos los iconos del blog, busca la etiqueta ]]></b:skin> y agrega este otro bloque de CSS encima:

.blsombra img {
-moz-box-shadow:4px 4px 3px #cccccc;
-ms-filter:
"progid:DXImageTransform.Microsoft.Shadow(color=#cccccc,direction=125,strength=5)";filter: progid:DXImageTransform.Microsoft.Shadow(color=#cccccc,direction=125,strength=5);-webkit-box-shadow: 4px 4px 3px #cccccc;
}

Guarda la plantilla.

Dirígete a una entrada cualquiera en la que desees aplicar la sombra.

Ahora utiliza el siguiente código para insertar la imagen personalizada:

<div class="blsombra"><img src="URL DE TU IMAGEN"/></div>

Reemplaza URL DE TU IMAGEN por la dirección de tu imagen y listo ^[+].

Notas:

- Para no estar copiando el código que aplica la sombra a una imagen en especial, haz uso de la plantilla de entrada que ofrece blogger.

- Puedes editar el color de la sombra que llevarán tus imágenes.

Sustituye en cada caso el código #cccccc por el valor hexadecimal de tu color favorito (que podrás encontrar usando la tabla de colores).

Read More

Inserta una imagen o iconos en todas tus entradas

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en truvos blogger. ! Ve la entrada en su blog original.

Una imagen o icono en todas tus entradas

Mostrar un logotipo o una imagen en el cuerpo de todas tus entradas de forma automática puede ser de mucha utilidad según el diseño que tengas en tu blog.

A pesar de haber explicado con anterioridad el procedimiento para incluir una imagen en una entrada del blog, considero que resultará mucho más cómodo para ti poder hacer visible esta imagen fija aplicando el código una sola vez.

Diseño>Edición de HTML>expandimos artilugios

Busca la etiqueta <data:post.body/> en tu plantilla y justo al lado añade lo siguiente (a excepción de la etiqueta resaltada en verde):

<img src='URL IMAGEN' style='float:left;height:80px;margin-bottom:10px;margin-right:10px;margin-top:6px;width:80px;'/><data:post.body/>

Reemplaza URL IMAGEN por la dirección de la imagen y listo. Ésta se mostrará en la esquina superior izquierda del artículo. Para cambiar su posición utiliza estas alternativas:

- Imagen en la esquina superior derecha

<img src='URL IMAGEN' style='float:right;height:80px;margin-bottom:10px;margin-left:10px;margin-top:6px;width:80px;'/><data:post.body/>

- Imagen en la esquina inferior izquierda

En este caso, añade el código a continuación de la etiqueta resaltada en verde:

<data:post.body/><img src='URL IMAGEN' style='float:left;height:80px;margin-bottom:10px;margin-right:10px;margin-top:6px;width:80px;'/>

- Imagen en la esquina inferior derecha

Sigue el mismo procedimiento citado en el punto anterior pero utiliza esto otro:

<data:post.body/><img src='URL IMAGEN' style='float:right;height:80px;margin-bottom:10px;margin-left:10px;margin-top:6px;width:80px;'/>

Pulsa el botón Guardar plantilla para terminar.

Read More

Cómo instalar imágenes con JQuery en el blog

Artículo publicado en el blog Ciudad Blogger, uno de los sitios con más información sobre tecnología Blogger Ve la entrada en su blog original.

Anteriormente vimos cómo arrastrar imágenes usando Scriptaculous y Prototype, sin embargo, quienes usan JQuery no pudieron implementarlo debido a que como muchos ya saben, esta librería no es compatible con Scriptaculous y Prototype.

Aun así, quienes usan JQuery también pueden tener el mismo efecto en las imágenes, es decir, pueden arrastrar las imágenes con un script que les permitirá moverlas de un lugar a otro dentro del blog.
Puedes ver un ejemplo en este blog de pruebas.

Para crear este efecto en las imágenes entra en Diseño > Edición de HTML y pega antes de </head> lo siguiente:

<script src='http://code.jquery.com/jquery-1.4.2.min.js' type='text/javascript'/>
< script src='http://ciudad-blogger.googlecode.com/files/jquery.easydrag.js' type='text/javascript'/>

Ahora sólo usa este código cuando quieras que una imagen se arrastre:

<img id="easydrag1" src="URL de la imagen" style="border: 0px none; cursor: move;" />
< script type="text/javascript">
$(function(){ $("#easydrag1").easydrag();});
< /script>

Cambia la URL de la imagen donde se indica, y además, es importante que cada imagen tenga un ID único, en este ejemplo el ID se llama easeydrag1, ese ID debe ponerse dos veces donde se indica en color azul.

Si tuvieras otra imagen con este efecto entonces ponle un ID distinto a la otra imagen, por ejemplo easydrag2, de lo contrario no funcionará.

¿Y cómo hacer si queremos ponerle un link a la imagen?
Usaremos la misma técnica que usamos con las imágenes arrastrables con Scriptaculous y Prototype, es decir, le pondremos una función Javascript para que al dar doble click sobre ella se abra la página que quieras.
En ese caso el código que usarías sería este:

<img id="easydrag1" style="cursor:move; border:0px;" ondblClick="javascript:window.open('URL del enlace')" src="URL de la imagen" /><script type="text/javascript">
$(function(){ $("#easydrag1").easydrag();});
< /script>

Con eso la imagen se podrá arrastrar sin problemas y podrá tener un vínculo activado al dar doble click sobre ella.

Como dije en un inicio, este método es para quienes usan JQuery, si usas Scriptaculous y Prototype entonces usa este otro método.

Te recomiendo que descargues los scripts y los alojes en la plantilla o bien, en tu propio servidor, si haces esto último sólo cambia lo que está en color verde por las URL de tus archivos.

Descargar | JQuery EasyDrag

Read More

Instala efecto de zoom en tus imágenes con JQuery

Artículo publicado en el blog Ciudad Blogger, uno de los sitios con más información sobre tecnología Blogger Ve la entrada en su blog original.

Hace poco vimos cómo aumentar las imágenes usando Zoom It, ahí les mencionaba que estos efectos de zoom se pueden conseguir con distintas librerías de scripts, uno de ellos es jQuery, y hoy veremos uno en particular que es una creación de Ben Nadel y que hace eso, seleccionar un área de la imagen para aumentarla.

Puedes ver el demo en este blog de pruebas. Al hacer click sobre el recuadro se hará un zoom, para quitar el zoom sólo basta dar click fuera de la imagen.

Implementarlo sólo requiere cuatro pasos: primero descarga este archivo, descomprímelo y sube el archivo zoom-clip.js a un servidor.

Luego entra en Diseño | Edición de HTML y pega antes de </head> lo siguiente:

<script language='javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
< script language='javascript' src='URL del archivo .js' type='text/javascript'/>

Cambia lo que está en color rojo por la URL del archivo que previamente subiste al hosting.

Ahora antes de ]]></b:skin> pega esto:

#view {
border: 1px solid #333333; /* Borde de la imagen */
overflow: hidden;
position: relative;
width: 400px; /* Tamaño de la imagen */
}

#image {
display: block;
left: 0;
top: 0;
}

#zoom {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSTeSYTy4keQVgip7Gt2l6Zt8TRqdRGfteJ62wLlAStsHH_zaeI7HKh962uBfHOupLg3U54DbSLX-7VdpA3wEk8pV-kcjWW7_1boPKp-ub94YHk46XJwVjikIRiuzYcAXITonGUCpwmpfA/s1600/fade.PNG);
border: 1px solid #000000;
cursor: pointer;
display: none;
height: 200px;
position: absolute;
width: 200px;
z-index: 100;
}

Por último usa este código cuando quieras ponerle el zoom a tus imágenes:

<div id="view">
< img id="image" src="URL de la imagen" width="400" />
< /div>

Cambia la URL de la imagen donde se indica y listo.
Verás que tanto en los estilos como en el último código hay un ancho de 400px, este es el ancho que tendrá la imagen, si deseas cambiar el tamaño tendrás que cambiar ambos valores que están marcados en negrita.

Read More

Cómo instalar títulos en la sidebar con fondos aleatorios

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en truvos blogger. ! Ve la entrada en su blog original.

Pués como dice el título, con este truco vas a conseguir que el fondo de los títulos de la sidebar (títulos de los gadgets) sea aleatorio, con la posibilidad de elegir varias imágenes de fondo.

Para insertar el truco en tu blog realiza los siguientes pasos:

Diseño>Edición de HTML>expandimos artilugios

1) Busca el siguiente bloque (si no aparece en la plantilla, ve directamente al paso 2):

.sidebar h2{
background: #ffffff url(DIRECCION FONDO) no-repeat top left;
text-align: center;
padding-top:15px;
}

Ten en cuenta que no debe ser igual a este, pero debe contener la línea que comienza por background.

Borra esta línea:

background: #ffffff url(DIRECCION FONDO) no-repeat top left;

2) Ahora busca la etiqueta </head> y encima pega este script:

<script type='text/javascript'>
//<![CDATA[
var banner= new Array()
banner[0]="FONDO 1"
banner[1]="FONDO 2"
banner[2]="FONDO 3"
var random=Math.floor(3*Math.random());
document.write("<style type='text/css'>");
document.write(".sidebar h2 {");
document.write(' background: url("' + banner[random] + '") no-repeat;');
document.write("}");
document.write("<\/style>");
//]]>
</script>

Sustituye FONDO X por la dirección de la imagen de fondo que llevará el título del gadget.

Ten en cuenta que en cada espacio (FONDO 1, FONDO 2, FONDO 3) debes incluir una dirección diferente, de manera que la imagen cambie automáticamente al actualizar el blog.

Si deseas agregar más imágenes de fondo, agrega líneas como esta, cambiando las cifras:

banner[3]="FONDO 4"
banner[4]="FONDO 5"

Por el contrario, si lo que deseas es tener simplemente dos fondos aleatorios, elimina esto:

banner[2]="FONDO 3"

Al agregar o borrar líneas para incluir imágenes de fondo, cambia el valor 3 de esta parte del script por el número de líneas que tengas en total:

var random=Math.floor(3*Math.random());

Por último Guarda la plantilla:




Si tienes problemas para realizar este truco, no olvides escribir un comentario para consultarme.

Algunas plantillas tienen nombres diferentes y sólo será necesario localizar dicho nombre para que el truco funcione a la perfección.

Read More

Galería de Imágenes en tus entradas

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en truvos blogger. ! Ve la entrada en su blog original.

Estás leyendo Sencilla galería de imágenes en tus entradas, en Entradas

Sencilla galería de imágenes en tus entradas

Desde que vimos como instalar una mini-galería de imágenes o slideshow en la barra lateral del blog muchos preguntaron si podría incluirse en una entrada. Por desgracia, la apariencia que debería tener la galería se pierde al mostrarla en un post y las imágenes suelen desordenarse.

Y bueno, después de haber estado unas horas frente al blog de pruebas aquí les traigo esta novedosa aplicación: un álbum o galería de imágenes sólo para entradas.

Una de las ventajas que ofrece el truco es que las imágenes cargarán a mayor velocidad.

Comprueba aquí el resultado:

Parque

El Ártico

Alimentos

Una madre

La instalación es sorprendentemente rápida y sencilla.

Diseño>Edición de HTML>expandimos artilugios

Busca la etiqueta </head> en tu plantilla y justo antes añade esto:

<link href='https://sites.google.com/site/editoriosus/fds/blJJGaleriaartic1.css' media='screen' rel='stylesheet' type='text/css'/><style type='text/css'>.blJJTeGaleris img {background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwG6AJT4W2kp3RYNtvBUCeWS5MWau3reF1niSY2x_CLnQY2FN4e5y1KRbhzfPMWOvX3Y309oAvxoXbFfF8RYZdr90oDxBDAGp3ks4tb6ExsqaHmbgtoJXxe8KOxG8vxDCM9EO8cHR2iBQ/s320/balcnminiaut.png") no-repeat scroll 0 0 transparent;}</style>

Ahora guarda la plantilla. Accede a la entrada en la que te gustaría mostrar el álbum o crea una nueva para comprobar el resultado.

Este es el código necesario:

<div id="balCCGaleriaJaim1">
<a href="javascript:void(0);" class="blJJTeGaleris"><img width="100" src="URL IMAGEN 1"><span><img width="380" src="URL IMAGEN 1"><br>TITULO IMAGEN 1</span></a><a href="javascript:void(0);" class="blJJTeGaleris"><img width="100" src="URL IMAGEN 2"><span><img width="380" src="URL IMAGEN 2"><br>TITULO IMAGEN 2</span></a><a href="javascript:void(0);" class="blJJTeGaleris"><img width="100" src="URL IMAGEN 3"><span><img width="380" src="URL IMAGEN 3"><br>TITULO IMAGEN 3</span></a><a href="javascript:void(0);" class="blJJTeGaleris"><img width="100" src="URL IMAGEN 4"><span><img width="380" src="URL IMAGEN 4"><br>TITULO IMAGEN 4</span></a>
</div>

Reemplaza en cada caso URL IMAGEN X con la dirección de tu imagen (debe introducirse dos veces) y TITULO IMAGEN X con el texto que aparecerá bajo cada fotografía.

En caso de querer mostrar más imágenes, haz uso de otro bloque como este dado que únicamente puedes insertar cuatro imágenes en cada álbum (pero un número ilimitado de éstos últimos).

No olvides que al poner este código en la entrada, debes hacerlo en la pestaña de 'Edición de HTML' y no en la de 'Redactar'.



Pulsa el botón Publicar y listo

Read More

Como escribir texto sobre cualquier imagen en blogger

Artículo publicado en el blog El Balcón de Jaime,  ver la entrada en su blog original.

Texto sobre cualquier imagen usando CSS

Añadir texto sobre una imagen permite incluir el título de ésta, describirla, o anunciar su procedencia. Esto puede lograrse usando sólo CSS, sin nada de Javascript para no hacer la página más pesada y lenta.

Esta es mi primera frase sobre una imagen. Escribir sobre fotografías es una gran ventaja.

Diseño>Edición de HTML>expandimos artilugios

Busca la etiqueta </head> y añade antes estas líneas de CSS:

<style type="text/css">#bljaIMGte{float:left;position:relative;}#bljaIMGte .bljaIMGtex {width:320px;position:absolute;top:10px;left:14px;}</style>

Guarda la plantilla.

A continuación te muestro el código necesario que hará funcionar el truco. Puedes utilizarlo tanto en una entrada como en un gadget o elemento de página html-javascript que encontrarás en el apartado de Diseño.

<div id="bljaIMGte">
<img src="URL DE LA IMAGEN" />
<div class="bljaIMGtex" style="color:#000000;">
<p>PRIMER PARRAFO</p>
<p>SEGUNDO PARRAFO</p>
</div>
</div>

Reemplaza URL DE LA IMAGEN por la dirección de tu imagen. En PRIMER PARRAFO puedes escribir un párrafo inicial y en SEGUNDO PARRAFO el resto de la descripción.

Con la etiqueta <p> y su cierre </p> sólo conseguimos que se produzca un salto de línea, dejando un espacio en blanco entre el contenido.

Para mostrar un simple salto de línea bastará con eliminar dichas etiquetas y añadir al final de la línea en la que presentaremos el salto <br></br>.

También puedes deshacerte de todo esto y escribir seguido.

En color:#000000; puedes personalizar el color (#000000) del texto, haciendo uso de la tabla de colores.

Read More

Cómo instalar un efecto pushbutom en las imágenes

Artículo publicado en el blog Ciudad Blogger, uno de los sitios con más información sobre tecnología Blogger Ve la entrada en su blog original.

El efecto pushbutton es el efecto que se le da a un elemento que simula un botón presionándose, en otras palabras, el elemento da la ilusión de tener un hundimiento cuando se hace click sobre él o cuando pasamos el cursor encima.

El código para este efecto es de lo más sencillo, sólo hay que entrar en Plantilla | Edición de HTML y antes de ]]></b:skin> pegar lo siguiente:

.post img:hover {
position: relative;
top: 1px;
left: 1px;
}

Y listo, así se simple las imágenes de las entradas tendrán este efecto al pasar el cursor sobre ellas.
Si deseas que el efecto pushbutton se aplique a todas las imágenes del blog, entonces pégamos este código en lugar del anterior:

img:hover {
position: relative;
top: 1px;
left: 1px;
}

Si quisieras que el efecto sólo se aplique a las imágenes que tú elijas, entonces omitimos esos códigos y pegamos este:

.pushbutton:hover {
position: relative;
top: 1px;
left: 1px;
}

Y luego cuando quieras que una imagen tenga el efecto pushbutton usas este código:

<img class="pushbutton" src="URL de la imagen" />

Sólo cambia la URL de la imagen y listo. Esa imagen tendrá el efecto pero las demás no.

Read More

Instala un genial zoom en las imágenes del blog

Artículo publicado en el blog Ciudad Blogger, uno de los sitios con más información sobre tecnología Blogger Ve la entrada en su blog original.

Aumentar imágenes con Zoom It

28 de septiembre de 2010 | Publicado por El Potro | 55 comentarios

Aunque hay librerías de scripts que permiten darle un efecto de zoom a las imágenes de tamaño grande, en ocasiones estas librerías no son compatibles con otros scripts que tenemos, o bien, puede hacer un tanto pesada la carga del blog.

Es en esos momentos en los que agradecemos de servicios gratuitos que nos permiten hacer lo mismo pero sin tener que modificar la plantilla ni hacer malabares que nos den dolores de cabeza.

Un ejemplo de ello es Zoom It, un sitio que nos permite de la manera más simple insertar una imagen en el blog con la opción de aumentar la misma imagen con tan solo darle click sobre ella.

El procedimiento es tan simple que está al alcance hasta de los más novatos. Sólo basta subir la imagen a un alojamiento (incluso en Blogger puede ser). Luego entrar a Zoom It, y ahí ingresar la URL de la imagen que hemos subido y que deseamos mostrar.

Al dar click en Create tendremos lista la imagen con la opción de darle zoom a cualquier parte de ella.

Debajo aparecerán dos opciones, una es la URL para que tus lectores puedan entrar al sitio a verla, y la otra es un script que nos permitirá insertar la imagen dentro del blog, sólo basta copiar el código que está dentro de Embed y pegarlo en una entrada del blog.

En el código podremos observar que se pueden modificar los valores del tamaño.

<script src="http://zoom.it/mXJv.js?width=auto&height=400px"></script>

De modo que width=auto hará que el ancho se ajuste automáticamente al ancho de la entrada, y height=400px es el alto en pixeles que tendrá dicho gadget, se puede ajustar por otro valor más pequeño o más grande, según se desee.

Enlace | Zoom It

Read More