Tutoriales Blogger: Imágenes

Mostrando entradas con la etiqueta Imágenes. Mostrar todas las entradas

viernes, 3 de enero de 2014

Poner una imagen flotante en Blogger

Posted on 4:00 by Jbryan | No comments

Una imagen flotante o estática es una imagen que permanece visible aunque bajemos o subamos toda la barra de desplazamiento de una página y esta siga en el mismo lugar. Puedes ver un ejemplo en esta misma entrada, debajo del lado izquierdo verás la imagen que permanece ahí aunque bajes la página.
Puedes poner tu logo, un mensaje, una foto, o la imagen que más te guste. Colocarla es muy fácil, sólo entra en Plantilla | Edición de HTML y pega antes de </body> lo siguiente:

<img border='0' src='URL de la imagen' style='position:fixed; bottom:0; left:0;'/>

Sólo debes cambiar la URL de la foto; esta imagen quedará en la parte inferior izquierda, para cambiarla de posición remplaza bottom por top si la quieres arriba, y right por left si la quieres a la derecha.
Este truco igual lo puedes usar para poner una flecha (ir arriba) y que los mande al inicio del blog, si ese es el caso entonces usa este código:

<a href='#'><img border='0' src='URL de la imagen' style='position:fixed; bottom:0;left:0;'/></a>

Banner cambiante (rotador de banners)

Posted on 3:28 by Jbryan | No comments

Tener un banner con imágenes cambiantes nos es de mucha ayuda si tenemos muchos banners que mostrar pero queremos ahorrarnos espacio, ya que en el mismo lugar los banners irán cambiando cada tres segundos.

Para colocarlo entra a Plantilla | Edición de HTML y pega antes de </head> lo siguiente:

<script type='text/javascript'>
//<![CDATA[
window.addEventListener?window.addEventListener('load',so_init,false):window.attachEvent('onload',so_init);
var d=document, imgs = new Array(), zInterval = null, current=0, pause=false;
function so_init() {
if(!d.getElementById || !d.createElement)return;
css = d.createElement('link');
css.setAttribute('href','slideshow2.css');
css.setAttribute('rel','stylesheet');
css.setAttribute('type','text/css');
d.getElementsByTagName('head')[0].appendChild(css);
imgs = d.getElementById('rotator').getElementsByTagName('img');
for(i=1;i<imgs.length;i++) imgs[i].xOpacity = 0;
imgs[0].style.display = 'block';
imgs[0].xOpacity = .99;
setTimeout(so_xfade,3000); }
function so_xfade() {
cOpacity = imgs[current].xOpacity;
nIndex = imgs[current+1]?current+1:0;
nOpacity = imgs[nIndex].xOpacity;
cOpacity-=.05;
nOpacity+=.05;
imgs[nIndex].style.display = 'block';
imgs[current].xOpacity = cOpacity;
imgs[nIndex].xOpacity = nOpacity;
setOpacity(imgs[current]);
setOpacity(imgs[nIndex]);
if(cOpacity<=0) {
imgs[current].style.display = 'none';
current = nIndex;
setTimeout(so_xfade,3000);}
else {
setTimeout(so_xfade,50);
}
function setOpacity(obj) {
if(obj.xOpacity>.99) {
obj.xOpacity = .99;
return; }
obj.style.opacity = obj.xOpacity;
obj.style.MozOpacity = obj.xOpacity;
obj.style.filter = 'alpha(opacity=' + (obj.xOpacity*100) + ')';
}
}
//]]>
</script>

Ahora pega antes de ]]></b:skin> lo siguiente:

/* BANNER CAMBIANTE
----------------------------------------------- */
{margin: 0; padding: 0;}
#rotator {
border: 1px solid #000000;
overflow: hidden;
margin: 0px ;
padding:2px;
position: relative;
width: 430px;
height: 60px;
}
#rotator img {
border: 0;
width: 430px;
height: 60px;
}

Las medidas las puedes cambiar de acuerdo al espacio de tu blog, para ajustar el ancho cambia donde dice width y para cambiar el alto en height.

Por último entra a Diseño | Elementos de la página | Añadir un gadget | HTML/Javascript y pega lo siguiente:

<div id="rotator">
<a href="URL del enlace"><img alt="Título" src="URL de la imagen" /></a>
<a href="URL del enlace"><img alt="Título" src="URL de la imagen" /></a>
<a href="URL del enlace"><img alt="Título" src="URL de la imagen" /></a>
<a href="URL del enlace"><img alt="Título" src="URL de la imagen" /></a>
</div>

Cambia los datos de la URL del enlace e imagen y listo.
En color azul se indica el tiempo en milisegundos que tarda en cambiar cada banner, se puede modificar por otro valor.

Slideshow con fotos propias

Posted on 2:41 by Jbryan | No comments

Como muchos saben, Blogger dentro de los gadgets que ofrece tiene uno de presentación de fotos; estas fotos son recopiladas de Picasa,Flickr y Photobucket. El problema es que casi nadie lo usa debido a que sólo muestra fotos de una palabra clave. Por ejemplo, si seleccionasPicasa como fuente deberás escribir una palabra clave para que la presentación de fotos incluya todas las imágenes que encuentre con esa palabra clave.

¿Pero qué pasa si quiero usar fotos mías y no fotos que Picasa recopila de la web?
Entonces vamos a ver cómo crear una presentación de fotos usando sólo las fotos que quieras.
Hay dos formas de hacerlo, una es creando un álbum público y otra es creando un álbum (aunque no sea público) y mostrando las fotos a través de un feed.

A través de un feed

Primero entra a Picasaweb y crea un nuevo álbum de fotos, ahí debes subir todas las fotos que quieras que se muestren en el slideshow.
En el lado derecho verás los datos del álbum incluyendo un enlace que dice RSS, con el botón derecho del mouse selecciona Copiar la ruta del enlace.
Ahora entra a Diseño | Añadir un gadget y elige Presentación.
En la Fuente selecciona Otros y en la URL del feed pega el link que copiaste de Picasa.
Ya sólo escoge las opciones de velocidad y presentación aleatoria.

Con un álbum de fotos público

Entra a Picasaweb y crea un álbum nuevo.
En Editar selecciona Propiedades del álbum y marca la casilla Público.
Ahí agrega todas las fotos que quieras para tu slideshow.
Ahora entra a Diseño | Añadir un gadget y elige Presentación.
En la Fuente selecciona Álbumes de Picasa y marca la casilla Álbum.
En Nombre de usuario pon tu dirección de correo electronico con la que te registras en Picasa o Blogger, y selecciona el álbum público que creaste.
Escoge las opciones que quieras y guarda los cambios.

De este modo tendrás una presentación de fotos (slideshow) con las imágenes que tú has elegido mostrar.
Cuando quieras agregar o eliminar más fotos sólo entra a Picasaweb y realiza los cambios. Blogger actualizará las fotos automáticamente.

Rotador de banners al azar

Posted on 2:38 by Jbryan | No comments

Anteriormente vimos cómo poner un rotador de banners en el blog. Ahora vamos a hacer uno pero que el banner muestre las imágenes al azar cada vez que un usuario entra a la página. Sólo necesitamos un script y las imágenes de los banners, todas deben tener el mismo tamaño.

Abre un elemento HTML/Javascript y pega ahí esto:

<script language="JavaScript">
var imagenumber = 4;
var randomnumber = Math.random();
var rand1 = Math.round( (imagenumber-1) * randomnumber);

images = new Array;
images[0] = "URL del banner 1";
images[1] = "URL del banner 2";
images[2] = "URL del banner 3";
images[3] = "URL del banner 4";

links = new Array;
links[0] = "#";
links[1] = "#";
links[2] = "#";
links[3] = "#";

var image = images[rand1];
var link = links[rand1];
</script>

<script>document.write('<a href="'+link+'"><img style="border: 0px;" src="'+ image +'"></a>')</script>

Agrega las URL de las imágenes donde se indica y si quieres que las imágenes tengan un enlace entonces agrégalo sustituyendo el signo de gato (#) por el link que le corresponde.
Incluso puedes agregar o eliminar más imágenes, sólo añade la línea que le corresponde.
Puedes ver un ejemplo en este blog de pruebas. Al cargar la página se verá un banner, si presionas F5 cargará otra imagen.

NOTA: Las imágenes cargan al azar y es posible que más de una vez cargue la misma imagen.

Poner imagen en los títulos de los gadgets (Blogger)

Posted on 22:37 by Jbryan | No comments

El truco a continuación se aplica a cualquier gadget del blog y bien puede usarse para poner una imagen decorativa de fondo en el título, o bien para sustituir el título del gadget por una imagen.

Lo primero que hay que hacer es identificar el id del gadget al que se le quiere poner la imagen, para ello entra a Plantilla | Edición de HTML y SIN marcar la casilla de expandir artilugios busca el gadget al que vas a modificar, lo puedes identificar por el título, por ejemplo Etiquetas, o Lista de blogs.

<b:widget id='Label1' locked='false' title='Etiquetas' type='Label'/>

En este ejemplo el id del gadget es Label1 y corresponde a las etiquetas del blog.
Ya teniendo el id del widget, pega antes de ]]></b:skin> lo siguiente:

#Label1 h2 {
background: url(URL de la imagen) left top;
color: #000;
}

Y así sucesivamente para todos los gadgets a los que quieras ponerle la imagen de fondo, sólo debes cambiar la URL de la imagen y en color cambiar el color del texto del título.
labels

Si lo prefieres también puedes cambiar todo el título por una imagen, sólo que en su lugar pegamos antes de ]]></b:skin> esto:

#Label1 h2 {
background: url(URL de la imagen) no-repeat top;
height: 30px;
}

De igual forma hay que cambiar la URL de la imagen, y en heigth poner el alto de la imagen.
Ahora ve a Diseño y da click en Editar en el gadget al que le cambiaste el fondo y borra el título del gadget, en su lugar escribe esto:

 

De esta forma el título del gadget no se encimará con la imagen de fondo.
labels

Con estos sencillos trucos podrás tener una plantilla cada vez más personalizada, ya sólo es cuestión de que agregues las imágenes que se adapten al diseño de tu plantilla.

Slideshow de fotos con Picasa en Blogger

Posted on 22:22 by Jbryan | No comments

Se trata de un slideshow de fotos proporcionado por Picasaweb y que puedes insertar en tu blog de una manera sencilla, sólo necesitas tener un álbum de fotos en Picasa y ya.

Primero entra a Picasaweb y selecciona el álbum que quieres convertir en slideshow.
Luego en el menú de la derecha haz click en Enlazar este álbum, aparecerá un sub menú, ahí haz click en Incrustar proyección de diapositivas.
En seguida se abrirá una ventana, ahí selecciona el tamaño del slideshow, si deseas mostrar los títulos y si se reproducirá automáticamente. Copia el código.

Ahora entra a Diseño > Elementos de la página > Añadir un gadget > HTML/Javascript y ahí pega el código que copiaste anteriormente.

Listo, así de simple tendrás una presentación de diapositivas con Picasa que podrás usar tanto en la barra lateral como dentro de una entrada.

Agregar banners de Publicidad 125 x 125 (Blogger)

Posted on 22:15 by Jbryan | No comments

Colocar el espacio para la publicidad de banners de 125 x 125px es uno de los recursos más solicitados debido a la gran aceptación de este tamaño de banners.

Para agregar este espacio de banners en tu blog necesitas tener una sidebar con una ancho mínimo de 280px.
El procedimiento es de lo más sencillo; sólo entra en Diseño > Edición de HTML y antes de ]]></b:skin> pega lo siguiente:

/* Banners 125 x 125
----------------------------------------------- */
.ads {
margin-top:5px;
margin-left:5px;
}
.ads img {
padding: 4px;
margin-bottom: 5px;
}

Ahora en Diseño > Elementos de la página > Añadir un gadget > HTML/Javascript y pega este código:

<div class="ads">
<a href="URL del enlace"><img src="URL de la imagen" width="125px" height="125px" /></a>
<a href="URL del enlace"><img src="URL de la imagen" width="125px" height="125px" /></a>
<a href="URL del enlace"><img src="URL de la imagen" width="125px" height="125px" /></a>
<a href="URL del enlace"><img src="URL de la imagen" width="125px" height="125px" /></a>
</div>

Sólo cambia la URL del enlace y la URL de la imagen donde se indica.

Si sientes que los banners están muy a la izquierda modifica donde dice margin-left:5px;

También puedes modificar la separación entre cada banner donde dice padding: 4px; sólo toma en cuenta que si le pones más separación también deberás tener un ancho de sidebar mayor a 180px.
Por supuesto que quenes quieran agregar más propiedades pueden hacerlo incluyendo un borde, un color de fondo, etc.

Poner imagen flotante al azar (Blogger)

Posted on 22:12 by Jbryan | No comments

Ya sabemos cómo poner una imagen flotante en una esquina del blog; esto es, tener una imagen que no se mueva, que se conserve estática aun cuando se baje el scroll de la página.

Pero qué mejor que esa imagen pueda ser distinta, es decir, que cambie al azar cada vez que se recarga la página.

Para agregarla a tu blog sólo entra en Plantilla | Edición de HTML y antes de </body> pega esto:

<script language='JavaScript'>
imagenes = new Array(3)

imagenes[0] = "<img border='0' src='URL de la imagen' style='position:fixed; bottom:0; right:0;'/>"
imagenes[1] = "<img border='0' src='URL de la imagen' style='position:fixed; bottom:0; right:0;'/>"
imagenes[2] = "<img border='0' src='URL de la imagen' style='position:fixed; bottom:0; right:0;'/>"

aleatorio = Math.random() * (imagenes.length)
aleatorio = Math.floor(aleatorio)
document.write(imagenes[aleatorio])

</script>

Agrega donde se indica las URL de las imágenes que quieres para tus imágenes estáticas.
Si quieres agregar otra imagen añade otra línea como esta:

imagenes[3] = "<img border='0' src='URL de la imagen' style='position:fixed; bottom:0; right:0;'/>"

Recuerda que por cada línea que agregues deberás asignarle un número (color azul) y al inicio del código deberás poner el número total de imágenes que tienes (color verde).

Para comprobar los resultados entra varias veces en este blog de pruebas o presiona la tecla F5 y verás que cambia la imagen flotante que se encuentra en la parte inferior derecha.

Imagen flotante con opción de cerrar (Blogger)

Posted on 22:10 by Jbryan | No comments

Por alguna extraña razón nos atraen las imágenes flotantes en el blog, si agregas una que se adapte al diseño de tu plantilla se verá muy bien. Pero no sé si a ustedes les pase, yo he entrado a muchos blogs que tienen estas imágenes flotantes y en ocasiones tapan demasiado el contenido de la sidebar, por lo que tengo que hacer malabares para poder leer lo que hay detrás de la imagen flotante. Eso puede ser bastante molesto y frustrante por no poder leer con claridad el contenido que hay detrás de la imagen.

Haciendo unos experimentos encontré la forma de poder dar la opción de cerrar la imagen, a modo que si el lector siente que la imagen le estorba podrá cerrarla tranquilamente.

Puedes ver un ejemplo en este blog de pruebas, en la parte inferior derecha verás la imagen flotante que tiene un pequeño ícono para cerrarse.

Para agregar esta imagen flotante con opción de cerrar entra en Plantilla | Edición de HTML y antes de </head> pega esto:

<script type='text/javascript'>
//<![CDATA[
var ftr_arr = new Array();
var ftr_clear = new Array();
function ftrFloat(ftr) {
ftr_arr[ftr_arr.length] = this;
var ftrpointer = eval(ftr_arr.length-1);
this.pagetop = 0;
this.cmode = (document.compatMode && document.compatMode!="BackCompat") ? document.documentElement : document.body;
this.ftrsrc = document.all? document.all[ftr] : document.getElementById(ftr);
this.ftrsrc.height = this.ftrsrc.offsetHeight;
this.ftrheight = this.cmode.clientHeight;
this.ftroffset = ftrGetOffsetY(ftr_arr[ftrpointer]);
var ftrbar = 'ftr_clear['+ftrpointer+'] = setInterval("ftrFloatInit(ftr_arr['+ftrpointer+'])",1);';
ftrbar = ftrbar;
eval(ftrbar);
}

function ftrGetOffsetY(ftr) {
var ftrTotOffset = parseInt(ftr.mtasrc.offsetTop);
var parentOffset = ftr.ftrsrc.offsetParent;
while ( parentOffset != null ) {
ftrTotOffset += parentOffset.offsetTop;
parentOffset = parentOffset.offsetParent;
}
return ftrTotOffset;
}
function ftrFloatInit(ftr) {
ftr.pagetop = ftr.cmode.scrollTop;
ftr.ftrsrc.style.top = ftr.pagetop - ftr.mtaoffset + "px";
}
function closeTopAds() {
document.getElementById("ftr_imagen").style.visibility = "hidden";
}
//]]>

</script>

Luego antes de </body> pega lo siguiente:

<div id='ftr_imagen'>
<img border='0' class='close' onClick='closeTopAds();return false;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGknWLE7J43BHbx5icVgrroSMn6o_DNpsupWUw0_gs944gWZBU7MX1qZzh8VnbmWKl1evcTNY-zVylZl8w9eviKyxrZ7H77_y-zk1oqSIQi6HL2pqfklotM6oDQKxwSIlbe4mfGG1A4Do/s200/iconClose.gif'/>
</div>

Por último pega antes de ]]></b:skin> esto:

#ftr_imagen {
background: url(URL de la imagen flotante) no-repeat;
bottom: 0px;
right: 0px;
width: 128px;
height: 128px;
position: fixed;
}
.close {
float: right;
padding-right: 10px;
cursor: hand;
cursor: pointer;
}

Ya sólo agrega la URL de la imagen flotante donde se indica y en donde dice width cambia el ancho de la imagen y en height el alto.
De esta forma podrás tener una imagen flotante en tu blog que no le estorbará a nadie.

Carrusel de imágenes para Blogger (JQuery y ThickBox)

Posted on 22:05 by Jbryan | No comments

Quizá este el es carrusel de imágenes más popular hecho con JQuery, aunque en la mayoría de sus versiones las imágenes del carrusel no se abren, sólo se usan como un muestrario de thumbnails.

Pero eso no significa que no se pueda arreglar, pues se puede añadir una ventana modal con ThickBox para poder visualizar las imágenes.

Puedes ver un ejemplo en este blog de pruebas.

Ponerlo en tu blog no requiere muchos pasos pero sí son varios scripts y hojas de estilos que podrían alentar la carga de la página, es por eso que se recomienda que se alojen todos los archivos en tu propio servidor para evitar problemas.

Primero entramos en Diseño > Edición de HTML y antes de </head> pegamos lo siguiente:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>
<script src='http://sites.google.com/site/ciudadbloggerscripts/archivos/jquery.jcarousel.pack.js' type='text/javascript'/>
<script src='http://sites.google.com/site/ciudadbloggerscripts/archivos/thickbox.js' type='text/javascript'/>
<script type='text/javascript'>

jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel();
});

</script>

<link href='http://sites.google.com/site/ciudadbloggerscripts/archivos/jquery.jcarousel.css' rel='stylesheet' type='text/css'/>
<link href='http://sites.google.com/site/ciudadbloggerscripts/archivos/Tango.css' rel='stylesheet' type='text/css'/>
<link href='http://sites.google.com/site/ciudadbloggerscripts/archivos/thickbox.css' rel='stylesheet' type='text/css'/>

Ahora en Diseño > Elementos de la página > Añadir un gadget > HTML/Javascript pegamos este código:

<center><ul id="mycarousel" class="jcarousel-skin-tango">

<li><a href="URL de la imagen" title="Título de la imagen" class="thickbox"><img src="URL de la imagen" width="75" height="75" /></a></li>

<li><a href="URL de la imagen" title="Título de la imagen" class="thickbox"><img src="URL de la imagen" width="75" height="75" /></a></li>

<li><a href="URL de la imagen" title="Título de la imagen" class="thickbox"><img src="URL de la imagen" width="75" height="75" /></a></li>

<li><a href="URL de la imagen" title="Título de la imagen" class="thickbox"><img src="URL de la imagen" width="75" height="75" /></a></li>

<li><a href="URL de la imagen" title="Título de la imagen" class="thickbox"><img src="URL de la imagen" width="75" height="75" /></a></li>

<li><a href="URL de la imagen" title="Título de la imagen" class="thickbox"><img src="URL de la imagen" width="75" height="75" /></a></li>

<li><a href="URL de la imagen" title="Título de la imagen" class="thickbox"><img src="URL de la imagen" width="75" height="75" /></a></li>

<li><a href="URL de la imagen" title="Título de la imagen" class="thickbox"><img src="URL de la imagen" width="75" height="75" /></a></li>

<li><a href="URL de la imagen" title="Título de la imagen" class="thickbox"><img src="URL de la imagen" width="75" height="75" /></a></li>

</ul></center>

Cambia la URL de la imagen donde se indica, va dos veces en cada pedazo de código, pues una es la miniatura y otra es la imagen en tamaño grande cuando se abre.

Si quisieras agregar más imágenes sólo pega antes de </ul></center> un pedazo de código como este:

<li><a href="URL de la imagen" title="Título de la imagen" class="thickbox"><img src="URL de la imagen" width="75" height="75" /></a></li>

Lo que está marcado en verde son los scripts y hojas de estilos que recomiendo que subas a tu hosting.
Descargar archivos

Slider Mostrando contenido destacado en el Blog (JQuery)

Posted on 21:58 by Jbryan | No comments

S3Slider es una galería de imágenes para mostrar contenido destacado del blog. Quedan perfectos para los blogs tipo revista y sólo requiere de JQuery y S3Slider.
Puedes ver un ejemplo en este blog de pruebas.

Para ponerlo en tu blog sigue estos pasos:

Descarga este archivo, descomprímelo y el archivo S3Slider.js súbelo a un hosting.
Entra en Diseño > Edición de HTML y pega antes de </head> lo siguiente:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/> <script src='URL del archivo s3Slider.js' type='text/javascript'/> <script type='text/javascript'> $(document).ready(function() { $('#slider').s3Slider({ timeOut: 3000 }); }); </script>

Cambia lo que está en color verde por la URL del archivo que descargaste y subiste previamente.
Ahora antes de ]]></b:skin> pega lo siguiente:

/* S3Slider ----------------------------------------------- */ #slider { width: 550px; /* Ancho del gadget */ height: 300px; /* Alto del gadget */ background:#FFF; position: relative; overflow: hidden; margin-bottom:10px; border:1px solid #d7d0c0; } #sliderContent { width: 550px; /* Ancho del gadget */ position: absolute; top: 0; margin: 0; padding:0; } #sliderContent li{ list-style-type:none; } .sliderImage { float: left; position: relative; display: none; } .sliderImage span { position: absolute; font: 11px Arial, Helvetica; /* Tamaño y tipo de letra */ padding: 10px 13px; width: 550px; /* Ancho del gadget */ background-color: #000; /* Color de fondo del texto */ filter: alpha(opacity=70); -moz-opacity: 0.7; -khtml-opacity: 0.7; opacity: 0.7; color: #fff; /* Color del texto */ display: none; } .clear {clear: both;} .bottom { bottom: 0; left: 0; } .top { top: 0; left: 0; }

Por último en un elemento HTML/Javascript pega esto:

<div id="slider"> <ul id="sliderContent"> <li class="sliderImage"> <a href="URL de la entrada"> <img src="URL de la imagen" /></a> <span class="bottom">Aquí va la descripción de la entrada.</span> </li> <li class="sliderImage"> <a href="URL de la entrada"> <img src="URL de la imagen" /></a> <span class="bottom">Aquí va la descripción de la entrada.</span> </li> <li class="sliderImage"> <a href="URL de la entrada"> <img src="URL de la imagen" /></a> <span class="bottom">Aquí va la descripción de la entrada.</span> </li> <div class="clear sliderImage"></div> </ul> </div>

Ya sólo cambia la URL de la entrada y de la imagen que será la que se muestre en el slide.

Si quisieras agregar más imágenes añade este código por cada imagen que quieras poner:

<li class="sliderImage">
<a href="URL de la entrada">
<img src="URL de la imagen" /></a>
<span class="bottom">Aquí va la descripción de la entrada.</span>
</li>

Las imágenes cambian cada tres segundos, si quieres modificar el tiempo entre cada una busca en el primer código donde dice timeOut: 3000 y cambia ese número por otro, por ejemplo en cinco segundos sería timeOut: 5000

En el código que pegamos antes de ]]></b:skin> están las indicaciones de dónde se debe modificar el color del texto, el color de fondo, etc.
Si te das cuenta en el caso del tamaño aparece tres veces, por lo que si cambias el tamaño deberás poner el mismo tamaño en los tres lugares donde se pide.

La descripción de la entrada se muestra en la parte de abajo; si deseas que se muestre en la parte de arriba cambia en el último código donde dice class="bottom" por class="top"

Por último toma en cuenta que este gadget trabaja con JQuery así que si ya tienes Scriptaculous no funcionará.

Imagenes con Efecto de Zoom it (+/-) Blogger

Posted on 21:32 by Jbryan | No comments

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, yheight=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

(Orbit) Slider de imágenes que cambian para blogger

Posted on 21:29 by Jbryan | No comments

Un slideshow que permite hacer eso es Orbit, que funciona a base de jQuery y muestra las imágenes con flechas de navegación. Pero además, en la parte superior izquierda indica cuál es la imagen que se está viendo, y del lado superior derecho un control de pausa e indicador del tiempo entre cada foto.

Una de las ventajas que me gusta de este slider es que el script cuenta con una versión corta, por lo que podremos colocar el script directo en la plantilla y así nos evitaremos colgarnos de un hosting.

Para empezar vamos a colocar los scripts que son lo que harán que funcione, así que vamos aDiseño | Edición de HTML y antes de </head> pegamos lo siguiente:

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



<script type='text/javascript'>
$(window).load(function() {
$('#featured').orbit({
advanceSpeed: 5000,
'bullets': true,
'timer' : true,
'animation' : 'horizontal-slide'
});
});
</script>

<script type='text/javascript'>
//<![CDATA[
/*
* jQuery Orbit Plugin 1.1
* www.ZURB.com/playground
* Copyright 2010, ZURB
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*/

(function(e){e.fn.orbit=function(a){a=e.extend({animation:"fade",animationSpeed:800,advanceSpeed:4E3,startClockOnMouseOut:true,startClockOnMouseOutAfter:3E3,directionalNav:true,captions:true,captionAnimationSpeed:800,timer:false,bullets:false},a);return this.each(function(){function m(c){function g(){f.eq(h).css({"z-index":1});s=false}var h=b,k=c;if(h==k)return false;if(!s){s=true;if(c=="next"){b++;if(b==n)b=0}else if(c=="prev"){b--;if(b<0)b=n-1}else{b=c;if(h<b)k="next";else if(h>b)k="prev"}a.bullets&&
x();if(a.animation=="fade"){f.eq(h).css({"z-index":2});f.eq(b).css({opacity:0,"z-index":3}).animate({opacity:1},a.animationSpeed,g);a.captions&&o()}if(a.animation=="horizontal-slide"){f.eq(h).css({"z-index":2});k=="next"&&f.eq(b).css({left:t,"z-index":3}).animate({left:0},a.animationSpeed,g);k=="prev"&&f.eq(b).css({left:-t,"z-index":3}).animate({left:0},a.animationSpeed,g);a.captions&&o()}if(a.animation=="vertical-slide"){f.eq(h).css({"z-index":2});k=="prev"&&f.eq(b).css({top:u,"z-index":3}).animate({top:0},
a.animationSpeed,g);k=="next"&&f.eq(b).css({top:-u,"z-index":3}).animate({top:0},a.animationSpeed,g);a.captions&&o()}}}var b=0,n=0,t,u,s,d=e(this).addClass("orbit"),f=d.find("img, a img");f.each(function(){var c=e(this),g=c.width();c=c.height();d.width(g);t=d.width();d.height(c);u=d.height();n++});f.eq(b).css({"z-index":3});if(a.timer){d.append('<div class="timer"><span class="mask"><span class="rotator"></span></span><span class="pause"></span></div>');var j=e("div.timer"),p;if(j.length!=0){var C=
a.advanceSpeed/180,v=e("div.timer span.rotator"),y=e("div.timer span.mask"),z=e("div.timer span.pause"),l=0,A,w=function(){p=true;z.removeClass("active");A=setInterval(function(){var c="rotate("+l+"deg)";l+=2;v.css({"-webkit-transform":c,"-moz-transform":c,"-o-transform":c});if(l>180){v.addClass("move");y.addClass("move")}if(l>360){v.removeClass("move");y.removeClass("move");l=0;m("next")}},C)},q=function(){p=false;clearInterval(A);z.addClass("active")};w();j.click(function(){p?q():w()});if(a.startClockOnMouseOut){var B;
d.mouseleave(function(){B=setTimeout(function(){p||w()},a.startClockOnMouseOutAfter)});d.mouseenter(function(){clearTimeout(B)})}}}if(a.captions){d.append('<div class="caption"><span class="orbit-caption"></span></div>');var r=d.children("div.caption").children("span").addClass("orbit-caption").show(),o=function(){var c=f.eq(b).attr("rel"),g=e("#"+c).html(),h=r.height()+20;r.attr("id","#"+c).html(g);g?r.parent().stop().animate({bottom:0},a.captionAnimationSpeed):r.parent().stop().animate({bottom:-h},
a.captionAnimationSpeed)};o()}if(a.directionalNav){d.append('<div class="slider-nav"><span class="right">Right</span><span class="left">Left</span></div>');j=d.children("div.slider-nav").children("span.left");var D=d.children("div.slider-nav").children("span.right");j.click(function(){a.timer&&q();m("prev")});D.click(function(){a.timer&&q();m("next")})}if(a.bullets){d.append('<ul class="orbit-bullets"></ul>');var E=e("ul.orbit-bullets");for(i=0;i<n;i++){j=e("<li>"+i+"</li>");e("ul.orbit-bullets").append(j);
j.data("index",i);j.click(function(){a.timer&&q();m(e(this).data("index"))})}var x=function(){E.children("li").removeClass("active").eq(b).addClass("active")};x()}})}})(jQuery);
//]]>
</script>

Ahora es turno de los estilos, así que antes de ]]></b:skin> pegamos esto:

/* ORBIT SLIDER
----------------------------------------------- */
#featured {height: 1px; width: 1px; overflow: hidden;}
div.orbit {
width: 1px;
height: 1px;
position: relative;
overflow: hidden;
}

div.orbit img {
position: absolute;
top: 0;
left: 0;
}
div.orbit a img {border: none;}

div.timer {
width: 40px;
height: 40px;
overflow: hidden;
position: absolute;
top: 10px;
right:10px;
opacity: .6;
cursor: pointer;
z-index: 1001;
}

span.rotator {
display: block;
width: 40px;
height: 40px;
position: absolute;
top: 0;
left: -20px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiX93FHr7mD1xkQ6QjnTa6rzQA69KNwFzsVwPN_LfBueJ8rCkkJMePrO6ihSoZqZe1HMZaLUXvA9vZUDZbHWZ3XuRjWuhvDLHDP4T_ZI4hPrAvINhyphenhypheneq8p2j-ABIw4MEEmrX5Yd9rYQ69v7/s1600/rotator-black.png);
background-repeat: no-repeat;
z-index: 3;
}

span.mask {
display: block;
width: 20px;
height: 40px;
position: absolute;
top: 0;
right: 0;
z-index: 2;
overflow: hidden;
}

span.rotator.move {left: 0;}
span.mask.move {
width: 40px;
left: 0;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgItK3vxWkLpRkG-ZVQLfhadWisSYlosl-srhEY1KS_SzWviHn6EpKkUYRzXmzhC5XO3yrUHthyH4TjiS36yOPBui1cLGFAfxbCjJEqxSlC_rYt4nC5_pH9v2wWlUDOJX-f9gyZs7p5YGsL/s1600/timer-black.png);
background-repeat: repeat;
background-position: 0px 0px;
}

span.pause {
display: block;
width: 40px;
height: 40px;
position: absolute;
top: 0;
left: 0px;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEljJIrzCZaeHXdQrBwzcNNfuN7LtBk84wn6nPewJZ18stSSbjRlE9jzZN1Zc398RvY5DmtjdVSZSHwWuhsBMs4Ixl5csRtEhq7QBjQyHc2CFUkG4JTERb8aUyyPmECgT1Pt9v2l6mgjMi/s1600/pause-black.png);
background-repeat: no-repeat;
z-index: 4;
opacity: 0;
}

div.timer:hover span.pause,
span.pause.active,
div.timer:hover span.pause.active { opacity: 1; }

div.caption {
background: #000;
background: rgba(0,0,0,.6);
width: 100%;
z-index: 1000;
position: absolute;
bottom:-100px;
color: #fff;
padding: 8px 0;
text-align: center;
}

div.caption span {
padding: 0 10px;
font-size: 14px;
text-shadow: 0px 1px 0px rgba(0,0,0,.8);
margin: 0;
}
.orbit-caption { display: none; }

div.orbit:hover div.slider-nav { display: block; }
div.slider-nav { display: none; }
div.slider-nav span {
width: 33px;
height: 33px;
text-indent: -9999px;
position: absolute;
z-index: 1000;
top: 43%;
cursor: pointer;
}

div.slider-nav span.right {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhI47XWgfatrfQcfDsWrY_13srQMA6FyUHc4KbjGvJSV15HNlg0gzDjN8ig2hF1I6W_lEMIbp1SQkGMwAxk3wOa366UA-OVkn_J3xrkR8peiOrDnhpGn_Z9VDF_1snoDWM11RGwMZmMjfuQ/s1600/right-arrow.png);
right: 10px;
}
div.slider-nav span.left {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkV-Vjoj4rEbM0Jy7Y29r0z4639ELmLOzUFnnj9O6PB15VonPu7GZGNfyaA-9rbTM3grceErSrjMauWddGJXqUcAi6cdq1gNmIz3nAbUFJ-6Ejah_gmwO1FuKgZBVdkXCMQK4pXxt0Kb-c/s1600/left-arrow.png);
left: 10px;
}

.orbit-bullets {
position: absolute;
z-index: 1000;
list-style: none;
top: 10px;
left: 7px;
margin: 0;
padding: 0;
}

.orbit-bullets li {
float: left;
margin-left: 5px;
cursor: pointer;
color: #999;
text-indent: -9999px;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJ7ohc8HltEnoTBu_7oCsWDlo2u4CHHn9k5wtV9jaLcjbRGP1dHBQkvF2qaWDu8tPPKQFWQMdA-Y0uhBkbR0DRH7nvzyNddCE3oElY8_Oter7YP19aVgNm2qg_S6DRrY44sHfKQ4cCs_hJ/s1600/bullets.png);
background-repeat: no-repeat;
background-position: 0 0;
width: 7px;
height: 7px;
overflow: hidden;
}

.orbit-bullets li.active { color: #222; background-position: -7px 0; }

Ya por último usaremos el código que mostrará las imágenes, así que en Diseño | Elementos de la página | Añadir un gadget | HTML/Javascript pegamos este código:

<div id='featured'>

<a href='URL del enlace'><img rel='foto1' src="URL de la imagen" style='width:490px; height:238px;'/></a>
<span class='orbit-caption' id='foto1'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque varius augue sit amet magna condimentum dictum.</span>

<a href="URL del enlace"><img rel='foto2' src="URL de la imagen" style='width:490px; height:238px;'/></a>
<span class='orbit-caption' id='foto2'>Este es un ejemplo de la descripción con enlaces: <a href='URL del enlace' style='color: #fff';'>Ciudad Blogger</a></span>

<a href="URL del enlace"><img rel='foto3' src="URL de la imagen" style='width:490px; height:238px;'/></a>
<span class='orbit-caption' id='foto3' style='text-align:center;'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque varius augue sit amet magna condimentum dictum.</span>

<a href='URL del enlace'><img rel='foto4' src="URL de la imagen" style='width:490px; height:238px;'/></a>
<span class='orbit-caption' id='foto4'>Este es un ejemplo de la descripción con enlaces: <a href='URL del enlace' style='color: #fff';'>Ciudad Blogger</a></span>

</div>

Esta última parte es la que contiene las imágenes, los enlaces y los textos descriptivos de cada imagen.
Lo que está en color rojo son las URLs de los enlaces y de las imágenes.

Dentro de cada código de imagen están especificadas las medidas que tendrá cada imagen, pero puedes modificar esos tamaños a tu gusto, eso se hace en width (ancho) y height (alto), recuerda que todas las fotos deben tener el mismo tamaño especificado.

Lo que está en color verde es el texto descriptivo de cada imagen.
Pero atención, no basta con poner el texto descriptivo para que éste aparezca, sino que, cada descripción tiene un identificador (id), éste identificador debe ser único. Para que el texto descriptivo aparezca deberá ponerse dentro del código de la imagen el atributo rel + el nombre del identificador.
Por ejemplo, en el texto descriptivo de la primera imagen aparece su id que es, id="foto1" y dentro del código de la imagen aparece el atributo rel con el nombre del id, o sea, rel="foto1"

Como ves no es nada complicado, sólo hay que ponerle un poco de atención a las descripciones de las imágenes, pero fuera de eso será un slider sencillo de utilizar.

Y bueno, aunque está probado en todos los navegadores y en Internet Explorer funciona, el control de pausa no se muestra en ese navegador por los fallos que tiene, de igual modo es posible que el desplazamiento entre cada imagen no se vea con un efecto tan suave como se vería con otro navegador de mayor calidad como Mozilla Firefox o Chrome.

ACTUALIZACIÓN: En el primer código, en la línea azul advanceSpeed: 5000, se puede modificar la velocidad de las transiciones entre cada imagen, un número más alto hará que las imágenes tarden más tiempo entre cada transición.

Si lo prefieres puedes descargar el script y subirlo a un alojamiento en caso de que no quieras tenerlo directo en tu plantilla.

Enlace | Descargar script

Blogger templates

Popular Posts

Blogger news

Blogroll

About

Categories

Datos personales

Archivo del blog

Tutoriales Blogger