Kontactr: formulario de contacto para el blog en un 2 x 3

Hay muchos sitios que ofrecen formularios de contacto, pero este en particular me gusta por lo rápido que es para obtenerlo. Pero además de lo fácil y rápido que es, tiene una gran ventaja sobre la mayoría de los formularios de contacto gratuitos: que no tiene un límite de envíos mensual, así que que puedes dejar de preocuparte si te excedes o no.

El servicio no cobra ni un solo centavo, pero tiene una desventaja, y es que si bien podemos personalizar los colores no podemos cambiar el nombre de los campos ni agregar o eliminar más. Aun así, es muy intuitivo y básico, por lo que a muchos puede servir en caso de que no requieran algo muy sofisticado.

Para tener este formulario de contacto en tu blog entra a la página de Kontactr y regístrate, no te lleva ni 30 segundos. Una vez hecho eso te enviarán un correo de confirmación.

Cuando confirmes tu cuenta podrás iniciar sesión y copiar el código de tu formulario, pégalo donde quieras y listo.

No hay que hacer nada más, pero puedes personalizar sus colores si lo deseas. Para ello haz click en Customize y cambia los colores que desees para cada área.



El formulario lo puedes pegar en una entrada, en una página estática, o un gadget HTML/Javascript. Los correos que te envíen através de él te llegarán al correo con el que te diste de alta.



Lo dicho, es un formulario rápido de obtener, fácil de usar y sin tantas pretensiones. Su punto débil es no poder editar los campos, pero al ser gratuito y sin límite de envíos es un formulario de contacto que definitivamente hay que considerar.

Read More

EMFF, reproductor flash de música MP3

EMFF es un reproductor en flash para escuchar música MP3 en el blog, su instalación es como la de la mayoría de los reproductores de su tipo, y su uso también. Sin embargo EMFF admite listas de reproducción y además posee varios skins para que pueda adaptarse a los gustos de cada quien.

Puedes verlos funcionando aquí mismo en esta entrada.





Old no border

<object type="application/x-shockwave-flash" data="URL del archivo SWF" width="91" height="25"> <param name="movie" value="URL del archivo SWF">

<param name="wmode" value="transparent" />

<param name="FlashVars" value="src=URL del archivo MP3">

</object>

Lila Info

<object type="application/x-shockwave-flash" data="URL del archivo SWF" width="200" height="55"> <param name="movie" value="URL del archivo SWF">

<param name="wmode" value="transparent" />

<param name="FlashVars" value="src=URL del archivo MP3">

</object>

Easy Glaze

<object type="application/x-shockwave-flash" data="URL del archivo SWF" width="32" height="32"> <param name="movie" value="URL del archivo SWF">

<param name="wmode" value="transparent" />

<param name="FlashVars" value="src=URL del archivo MP3">

</object>

Position Blue

<object type="application/x-shockwave-flash" data="URL del archivo SWF" width="100" height="50"> <param name="movie" value="URL del archivo SWF">

<param name="wmode" value="transparent" />

<param name="FlashVars" value="src=URL del archivo MP3">

</object>

Silk

<object type="application/x-shockwave-flash" data="URL del archivo SWF" width="84" height="32"> <param name="movie" value="URL del archivo SWF">

<param name="wmode" value="transparent" />

<param name="FlashVars" value="src=URL del archivo MP3">

</object>

Silk Button

<object type="application/x-shockwave-flash" data="URL del archivo SWF" width="16" height="16"> <param name="movie" value="URL del archivo SWF">

<param name="wmode" value="transparent" />

<param name="FlashVars" value="src=URL del archivo MP3">

</object>

Stuttgart

<object type="application/x-shockwave-flash" data="URL del archivo SWF" width="140" height="30"> <param name="movie" value="URL del archivo SWF">

<param name="wmode" value="transparent" />

<param name="FlashVars" value="src=URL del archivo MP3">

</object>

Wooden

<object type="application/x-shockwave-flash" data="URL del archivo SWF" width="120" height="60"> <param name="movie" value="URL del archivo SWF">

<param name="wmode" value="transparent" />

<param name="FlashVars" value="src=URL del archivo MP3">

</object>

Para usarlo sólo necesitas descargar este archivo, descomprimirlo, y subir uno de los archivos SWF a un hosting.



Luego pega el código del reproductor que más te guste en un elemento HTML/Javascript de tu blog, o incluso una entrada, ahí agrega la URL del archivo SWF que subiste previamente (sólo el que hayas elegido), verás que debes agregar la URL dos veces.

También agrega donde se indica la URL de tu canción y listo.

Puedes agregar más de una canción, sólo añade las demás URLs de las canciones una seguida de la otra, pero todas separadas por una coma, por ejemplo:

<object type="application/x-shockwave-flash" data="URL del archivo SWF" width="91" height="25"> <param name="movie" value="URL del archivo SWF">

<param name="wmode" value="transparent" />

<param name="FlashVars" value="src=URL del archivo MP3 uno,URL del archivo MP3 dos,URL del archivo MP3 tres">

</object>

También podemos usar tres parámetros, autoplay, repetir, y aleatorio:

&amp;autostart=yes

&amp;repeat=yes

&amp;shuffle=yes

Cualquiera de ellos se agrega al final de la última URL de la canción, por ejemplo, si usáramos los tres se vería así:

<object type="application/x-shockwave-flash" data="URL del archivo SWF" width="91" height="25"> <param name="movie" value="URL del archivo SWF">

<param name="wmode" value="transparent" />

<param name="FlashVars" value="src=URL del archivo MP3&amp;autostart=yes&amp;repeat=yes&amp;shuffle=yes">

</object>

Como puedes ver es un reproductor de fácil uso, sencillo y visualmente agradable.

En la siguiente entrada veremos cómo crear listas de reproducción en formato XML.

Si ya sabes crear listas XML entonces siempre has de cambiar esta línea del reproductor:

<param name="FlashVars" value="src=URL del archivo MP3">

Por esta otra:

<param name="FlashVars" value="playlist=URL del archivo XML">

En el caso de las listas de reproducción XML la URL del archivo nunca deberá llevar el protocolo seguro de transferencia de hipertexto, es decir, que en vez de que sea HTTPS será HTTP.

Read More

Mitos y realidades sobre los dominios personalizados

Tener un dominio propio está al alcance de la mayoría, sin embargo algunos se compran un dominio por las razones equivocadas y otros dejan de hacerlo también por razones equivocadas.

Vamos a ver cuáles son los mitos más frecuentes sobre los dominios propios y cuál es la realidad ante ellos, para que antes de que te decidas a comprar un dominio tengas claro lo que es y lo que no es.

MITO: Si tengo un dominio personalizado Blogger no podrá eliminar mi blog nunca.

FALSO. El blog te lo provee Blogger, por lo tanto tiene la facultad de eliminar tu blog si incumples alguna(s) de las Políticas de Contenido. No importa si tienes un dominio propio o no, si Blogger considera que has incumplido una de sus políticas podrá eliminar tu blog sin excepción alguna.

Eso sí, si tuvieras un dominio propio puedes seguir usando ese dominio en cualquier otro blog o página web, ya que el dominio sí te pertenece por el tiempo que lo hayas comprado.

MITO: Si compro un dominio tengo que contratar un servicio de hosting.

FALSO. Dado que los blogs de Blogger se alojan en blogspot.com no hace falta ni es necesario contratar un plan de alojamiento con ninguna empresa ya que todo el contenido de las entradas se aloja en Blogspot y las imágenes en Picasaweb.

Es posible que cuando solicites información en alguna compañía te quieran vender también un plan de hosting, pero al menos en Blogger no es necesario contratarlo.

MITO: Para comprar un dominio tengo que hacerlo desde Blogger.

FALSO. Ciertamente comprarlo desde Blogger es práctico para quien no desea meterse en cuestión de configuraciones ya que Blogger lo configura por nosotros, sin embargo puedes comprar tu dominio con la empresa que tú elijas y prefieras.

MITO: Si cambio a un dominio personalizado perderé mi Page Rank.

CIERTO. El Page Rank (PR) recae sobre el dominio, por lo tanto, si compras o cambias de dominio perderás el PR que tuvieras, pero no te alarmes, en poco tiempo el sistema asignará nuevamente el PR que tenías, aunque algunas veces este PR suele ser más bajo que el que poseías con anterioridad.

MITO: Tener un dominio propio me ayudará a tener más visitas.

FALSO. Un dominio personalizado puede ayudar a que la gente memorice con mayor facilidad la dirección de tu blog, pero no influye en el número de visitas que tengas o el posicionamiento en los buscadores.

MITO: Si tengo un dominio propio mi blog se verá más profesional.

CIERTO, pero no tanto. Un dominio puede crear una marca, y con ello tus lectores podrán pensar que tu blog va en serio, pero el dominio no lo es todo, es sólo una pieza más del rompecabezas. Si quieres que tu blog se vea profesional deberás trabajar en el contenido de tus publicaciones, tus imágenes, tu reputación, la constancia y el diseño de tu plantilla. Sin todo lo anterior el dominio se verá tan simple como eso, un dominio más.

MITO: Con un dominio personalizado ya no podré editar mi plantilla.

FALSO. El dominio sólo está en la dirección del blog, no interfiere en nada de la interfaz de Blogger. Ya sea que tengas un dominio propio o no, podrás seguir publicando tus entradas y editando tu plantilla como siempre lo has hecho.

MITO: Si tengo un dominio propio y luego cambio a blogspot perderé visitas.

CIERTO. Si tu blog ya está indexado con el dominio propio y luego cambias a blogspot cuando la gente haga click en esa dirección no verá nada, porque ese dominio ya no existe, o mejor dicho, ya no está vinculado con tu blog. Sin embargo, con el paso del tiempo los robots actualizarán de nuevo la información de tu blog, y con ello la nueva dirección que tengas.

MITO: Tengo que ser mayor de edad y contar con tarjeta de crédito para poder comprar un dominio.

FALSO. No es necesario contar con la mayoría de edad para ser dueño de un dominio, ni tampoco necesario tener una tarjeta de crédito; muchas empresas aceptan otras formas de pago como PayPal o depósitos bancarios. Por supuesto que esto último de los pagos depende de cada empresa.

Seguramente habrá más mitos y dudas en torno a los dominios personalizados, lo importante es que antes que tomemos la decisión de hacernos de un dominio tengamos claro todo el panorama para evitar pasar un mal rato por algo que no sabíamos.

Si estás a punto de comprar un dominio quizá quieras conocer todo lo que hay que saber antes de comprar un dominio propio

Read More

Aumentar imágenes al pasar el cursor con efecto deslizante

Hay muchos métodos para expandir imágenes al pasar el cursor, uno de ellos es Expando, un script que permite que la imagen aumente a su tamaño real con un efecto deslizante, y al quitar el cursor la imagen regresa al tamaño pequeño, también con el mismo efecto.



Puedes ver el demo aquí mismo pasando el cursor sobre esta imagen en miniatura:

Para lograr este efecto en tus imágenes ingresa a la Edición HTML y agrega antes de </head> el script:

<script type='text/javascript'>

//<![CDATA[



/* Expando Image Script 2008 John Davenport Scheuer

as first seen in http://www.dynamicdrive.com/forums/

username: jscheuer1 - This Notice Must Remain for Legal Use

*/



if (document.images){

(function(){

var cos, a = /Apple/.test(navigator.vendor), times = a? 20 : 40, speed = a? 40 : 20;

var expConIm = function(im){

im = im || window.event;

if (!expConIm.r.test (im.className))

im = im.target || im.srcElement || null;

if (!im || !expConIm.r.test (im.className))

return;

var e = expConIm,

widthHeight = function(dim){

return dim[0] * cos + dim[1] + 'px';

},

resize = function(){

cos = (1 - Math.cos((e.ims[i].jump / times) * Math.PI)) / 2;

im.style.width = widthHeight (e.ims[i].w);

im.style.height = widthHeight (e.ims[i].h);

if (e.ims[i].d && times > e.ims[i].jump){

++e.ims[i].jump;

e.ims[i].timer = setTimeout(resize, speed);

} else if (!e.ims[i].d && e.ims[i].jump > 0){

--e.ims[i].jump;

e.ims[i].timer = setTimeout(resize, speed);

}

}, d = document.images, i = d.length - 1;

for (i; i > -1; --i)

if(d[i] == im) break;

i = i + im.src;

if (!e.ims[i]){

im.title = '';

e.ims[i] = {im : new Image(), jump : 0};

e.ims[i].im.onload = function(){

e.ims[i].w = [e.ims[i].im.width - im.width, im.width];

e.ims[i].h = [e.ims[i].im.height - im.height, im.height];

e (im);

};

e.ims[i].im.src = im.src;

return;

}

if (e.ims[i].timer) clearTimeout(e.ims[i].timer);

e.ims[i].d = !e.ims[i].d;

resize ();

};



expConIm.ims = {};



expConIm.r = new RegExp('\\bexpando\\b');



if (document.addEventListener){

document.addEventListener('mouseover', expConIm, false);

document.addEventListener('mouseout', expConIm, false);

}

else if (document.attachEvent){

document.attachEvent('onmouseover', expConIm);

document.attachEvent('onmouseout', expConIm);

}

})();

}

//]]>

</script>



<style>

img.expando{

margin:10px;

vertical-align: top;

}

</style>

Y luego en tus entradas o donde lo quieras poner, usa este código para tus imágenes:

<img border="0" src="URL de la imagen" class="expando" width="100" />

Agrega la URL de la imagen donde se indica y listo, así de fácil y sencillo.

La imagen que pongas deberá ser la que tiene el tamaño normal, y en donde se indica en color azul deberás poner el tamaño que tendrá la miniatura.

Nada complicado ¿verdad? ;)

Read More

Read More

Abrir todos los enlaces en otra ventana (2)

Hemos visto cómo abrir todos los enlaces en otra ventana usando un script que deja a opción del lector si los enlaces se abren o no en una ventana nueva, y además usando otro método que es agregar en la plantilla el comando <base target='_blank'/> que hace que todos los enlaces de abran en otra pestaña.

Éste último parece ser la solución, sin embargo al agregarlo surge un problema, que si el lector hace click en las etiquetas, entradas antiguas, archivo del blog, etc. éstos también se abren en una ventana nueva, lo cual resulta bastante molesto.

Para solucionar esto Cartucho propone usar el atributo target='_parent' dentro de ciertas partes de la plantilla que harán que se force a que esos enlaces no se abran en otra ventana sino en la misma página. Este atributo hace lo contrario que el atributo target='_blank' es decir, indica que el enlace debe abrirse dentro de la misma página.

Empezamos primero poniendo debajo de la etiqueta <head> lo siguiente:

<base target='_blank'/>

Con esto ya se abren todos los enlaces en otra pestaña, ahora vamos a crear las "excepciones".



Entra a Diseño > Edición de HTML y marca la casilla Expandir plantillas de artilugios.

Busca los códigos que se mencionan y agrega lo que está en color rojo donde se indica.

---

Para el título de la entrada.

<b:if cond='data:post.url'>

<a expr:href='data:post.url' target='_parent'><data:post.title/></a>

<b:else/>

<data:post.title/>

</b:if>

---

Para el título del blog o la cabecera localiza los siguientes fragmentos, no están uno tras otro pero están cerca.

<data:title/>

<b:else/>

<a expr:href='data:blog.homepageUrl' target='_parent'><data:title/></a>

</b:if>

</b:includable>

<div id='header-inner'>

<a expr:href='data:blog.homepageUrl' style='display: block' target='_parent'>

<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>

</a>

</div>

---

Para el link de los comentarios debajo de las entradas.

<b:if cond='data:post.allowComments'>

<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' target='_parent'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>

</b:if>

---

Para las etiquetas de las entradas debajo del post.

<data:postLabelsLabel/>

<b:loop values='data:post.labels' var='label'>

<a expr:href='data:label.url' rel='tag' target='_parent'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>

</b:loop>

</b:if>

---

Para el enlace de enviar entrada por correo.

<!-- email post links -->

<b:if cond='data:post.emailPostUrl'>

<span class='item-action'>

<a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg' target='_parent'>

---

Para el leer más de Blogger.

<div class='jump-link'>

<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title' target='_parent'><data:post.jumpText/></a>

</div>

---

Para el gadget de Etiquetas.

<b:if cond='data:blog.url == data:label.url'>

<span expr:dir='data:blog.languageDirection'><data:label.name/></span>

<b:else/>

<a expr:dir='data:blog.languageDirection' expr:href='data:label.url' target='_parent'><data:label.name/></a>

---

Para el gadget de Archivos del blog localiza las siguientes tres partes, no están juntas pero sí dentro de la misma área.

<b:include data='i' name='toggle'/>

<a class='post-count-link' expr:href='data:i.url' target='_parent'><data:i.name/></a>

<li class='archivedate'>

<a expr:href='data:i.url' target='_parent'><data:i.name/></a> (<data:i.post-count/>)

</li>

<li><a expr:href='data:i.url' target='_parent'><data:i.title/></a></li>

---

Para los links de navegación (entradas antiguas, entradas más recientes)

<b:if cond='data:newerPageUrl'>

<span id='blog-pager-newer-link'>

<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle' target='_parent'><data:newerPageTitle/></a>

</span>

</b:if>



<b:if cond='data:olderPageUrl'>

<span id='blog-pager-older-link'>

<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle' target='_parent'><data:olderPageTitle/></a>

</span>

</b:if>



<a class='home-link' expr:href='data:blog.homepageUrl' target='_parent'><data:homeMsg/></a>

---

Para el gadget de páginas estáticas.

<li class='selected'><a expr:href='data:link.href' target='_parent'><data:link.title/></a></li>

<b:else/>

<li><a expr:href='data:link.href' target='_parent'><data:link.title/></a></li>

---

Esos son casi todos los enlaces dentro de Blogger que no queremos que se abran en otra ventana. Pero igual podemos aplicarlo para cualquier otro enlace, ya sea dentro de una entrada o un elemento HTML/Javascript, en cualquier caso sólo aplicamos el mismo atributo después de la URL del enlace:

<a href='URL del enlace' target='_parent'>Texto del enlace</a>

En caso de que quieras aplicar el mismo atributo a otro elemento dentro de la plantilla sólo revisa detenidamente el código y donde diga href= es el indicador de que hay un enlace, es al final de eso donde deberá ir el target='_parent'. Puedes guiarte en los ejemplos de esta misma entrada para poder identificar dónde y cómo poner el código.



Recuerda que debe haber un espacio en blanco antes de poner el atributo target='_parent' de lo contrario no funcionará.

Read More

Acortadores de URLs para todos los gustos

La función principal de un acortador de URLs es lo que su nombre dice, hacer más corta una URL larga, esto es para evitar enlaces extensos llenos de decenas de letras, signos y números, principalmente pensado para aprovechar los espacios de caracteres del microblogging.

Y desde que estos aparecieron han salido un sin fin de sitios que dan este servicio de acortamiento de URLs, unos más conocidos que otros, y aunque todos hacen lo mismo hay unos que se destacan por sus peculiares características como son los que veremos a continuación.

Bit.ly es probablemente el más conocido debido a que fue el servicio que utilizó Twitter y aunque sí, es el más usado, muchos desconocen que se pueden obtener estadísticas de los enlaces acortados que hagas, sólo hay que crear una cuenta gratuita y podrás conocer cuánta gente entra a tus enlaces cortos.

Enlace | Bit.ly

Por supuesto que el imperio de Google no podía quedarse atrás en estos temas así que desde 2009 lanzó su acortador de URLs y aunque funciona como un simple acortador de enlaces también cuenta con un sistema de estadísticas en tiempo real, sólo basta con loguearte con tu cuenta de Google y tendrás acceso a las estadísticas de todas las URLs que has acortado.

Y por si fuera poco ha puesto a disposición de todos la aplicación Google Short Links, para quienes cuentan con un dominio personalizado puedan crear su propio acortador de URLs.

Enlace | Goo.gl

Tutorial | Google Short Links







Is.gd es uno de los acortadores que se ha vuelto favorito de muchos quizá por lo estable que es el servicio, o quizá porque tiene la posibilidad de que con sólo ponerle un guión (-) al final de la URL acortada podemos saber cuál es la dirección Web a la que dirige; de este modo las personas a quienes les compartimos los enlaces pueden saber de forma segura a qué lugar están yendo.



Enlace | Is.gd

Ejemplo | http://is.gd/fXHPI-







TinyURL es sin duda de los servicios de acortamiento más conocidos en la red y a diferencia de muchos otros con él puedes personalizar la dirección corta, sólo basta poner el nombre del enlace que quieres en Custom alias y si está disponible podrás tener una URL corta personalizada, lo cual agradecerán los que buscan SEO a toda costa.



Enlace | TinyURL

Ejemplo | http://tinyurl.com/trucosblogger

Uno un poco menos conocido pero con la misma característica que el anterior es Tiny.cc, el cual también nos permite personalizar la URL acortada. La ventaja respecto a la anterior es que al ser menos conocida hay más posibilidades de encontrar el nombre personalizado del enlace.

Enlace | Tiny.cc

Ejemplo | http://tiny.cc/ciudadblogger

Y ya que estamos en el tema de los acortadores personalizados pues qué mejor que además de poder personalizar el nombre del enlace también podamos personalizar el nombre del dominio. ¿Cómo? Pues MeaningfulURL nos da la posibilidad de escoger dentro de una lista el nombre del dominio, algunos de ellos son: thanks.to, happy-birthday.to, invite.to, vote.to, enter.to, sorry.to, etc.

Enlace | MeaningfulURL

Ejemplo | http://enter.to/fondos240

Y si necesitas compartir más de un link a la vez entonces quizá necesites usar LinkBunch, un acortador que permite incluir en una sola URL varios enlaces para compartir, sólo hay que ingresar todas las URLs que quieres acortar y tendrás una URL corta que contendrá las URLs largas que has incluido.

Enlace | LinkBunch

Ejemplo | http://linkbun.ch/0ixe9

Otro servicio similar que agrupa varios enlaces en una sola URL acortada es Fur.ly, pero con la gran diferencia que en lugar de abrir una página con las direcciones de los enlaces, abre la página del primer enlace y arriba una barra para seleccionar los demás links que contiene la URL corta.

Enlace | Fur.ly

Ejemplo | http://fur.ly/2f2g

Probablemente haya enlaces que no quieras que vea todo mundo, ya sea por privacidad o porque no es apto para todo el público. En esos casos agregarle una contraseña al enlace se vuelve una excelente opción, y es eso lo que Thinfi hace, nos permite agregarle una contraseña a la URL que acortaremos para que sólo quienes tengan ese password puedan ver el contenido.

Enlace | Thinfi

Ejemplo | http://thinfi.com/4ib

Password | potro

Algo muy similar pero con otras curiosidades más es Trick.ly, un acortador que nos permite agregar una contraseña y una pista para quienes no recuerdan con exactitud el password que abre el enlace.

Otras dos variantes más que nos ofrece es utilizar una adivinanza como password o una pregunta en concreto.

Enlace | Trick.ly

Ejemplo | http://trick.ly/4rB

Password | potro

Pista | Ciudad Blogger

Y si lo que te preocupa es la seguridad de tu equipo entonces no hay mejor opción que utilizar el acortador de McAfee que además de acortar la URL también examinará el contenido en busca de virus, malware y amenazas que podrían dañar tu equipo.

Enlace | McAfee

Pero si eres de aquellos que les gusta ganar dinero en Internet entonces necesitarás un servicio que además de acortar las URLs también te pague por cada visita que tenga el enlace que has acortado.

Así es, sólo necesitas crear una cuenta gratuita en su sitio y te pagarán por cada visita que tengan tus URLs acortadas. Pero claro, hay dos cosas que resaltar, una es que el pago por cada visita es muy poco, y otra que cada URL acortada tendrá un anuncio antes de poderse ver el contenido.

Enlace | YvY.me

Ejemplo | http://yvy.me/GiNV1D

Pero no a todos les gusta seguir las reglas, así que para quienes van en contra de todo, ¿por qué tener una URL corta si podemos hacerla mucho más larga? Eso es justo lo que HugeURL hace, toma una URL acortada o "normal" y la convierte en una URL extra larga con docenas de caracteres.

Enlace | HugeURL

Read More

Gadget para compartir enlaces de las entradas del blog

Promocionar las entradas del blog es de suma importancia si queremos darlo a conocer a más gente, pero de igual forma es de suma importancia ofrecerle a los lectores las herramientas para que puedan hacerlo de una forma sencilla.

Un recurso muy útil es colocar un área donde los lectores puedan copiar la URL de las entradas que quieren compartir, ya sea que copien la URL de la entrada, el código HTML que enlaza a ella, o el código para colocar el enlace de la entrada en un foro.

El resultado será un área como esta debajo de todas las entradas del blog que al hacer click en el área de texto se seleccionará el enlace (este ejemplo no, es sólo una imagen):

Para agregarlo a tu blog entra en Diseño | Edición de HTML, marca la casilla Expandir plantillas de artilugios y busca esta etiqueta:

<data:post.body/>

O si usas el Leer más automático busca este código:

<b:if cond='data:blog.pageType != &quot;item&quot;'>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>

<div style='text-align:justify;' expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>

<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>

<span class='rmlink' style='float:right;'><a expr:href='data:post.url'>Leer más...</a></span>

</b:if></b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>

Justo debajo de cualquiera de esos dos agrega lo siguiente:

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div class='compartir-post'>

<p>Si has encontrado útil este artículo puedes compartirlo desde tu blog, página Web o foro.</p>

<p>&lt;label for=&quot;aa-url&quot;&gt;URL:&lt;/label&gt;&lt;br /&gt;&lt;input size=&quot;80&quot; readonly=&quot;readonly&quot; onclick=&quot;this.focus();this.select();&quot; type=&quot;text&quot; id=&quot;aa-url&quot; value=&quot;<data:post.url/>&quot; /&gt;</p><p>&lt;label for=&quot;aa-forum&quot;&gt;Link HTML:&lt;/label&gt;&lt;br /&gt;&lt;input size=&quot;80&quot; readonly=&quot;readonly&quot; onclick=&quot;this.focus();this.select();&quot; type=&quot;text&quot; id=&quot;aa-forum&quot; value=&quot;&lt;a href=&amp;quot;<data:post.url/>&amp;quot;&gt;<data:post.title/>&lt;/a&gt;&quot; /&gt;</p><p>

&lt;label for=&quot;aa-forum&quot;&gt;Link para foros:&lt;/label&gt;&lt;br /&gt;

&lt;input size=&quot;80&quot; readonly=&quot;readonly&quot; onclick=&quot;this.focus();this.select();&quot; type=&quot;text&quot; id=&quot;aa-forum&quot; value=&quot;[url=<data:post.url/>]<data:post.title/>[/url]&quot; /&gt;</p>

</div>

</b:if>

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

/* Compartir entradas

----------------------------------------------- */

.compartir-post {

background:#EFF5FB; /* Color de fondo del contenedor */

margin-top:30px;

padding-top:5px;

padding-bottom:5px;

padding-left:10px;

}

.compartir-post p {

font-size:12px; /* Tamaño de texto del mensaje */

}

.compartir-post input {

background:#ffffff;

border: 1px solid #A4A4A4; /* Borde de las celdas */

}

Guarda los cambios y listo. El resultado sólo aparecerá en las entradas individuales así que para verlo debes entrar a un post para cerciorarte que ha funcionado.



Por supuesto que a la caja para compartir le podemos cambiar el estilo, ya sea el color de fondo, agregar una imagen de fondo, tamaño de la letra, etc. Esas partes se modifican en las áreas que he puesto en color verde.



El contenedor como tal no tiene un tamaño específico pues se ajusta al ancho de las entradas, sin embargo, el ancho de las celdas donde aparecen los enlaces puede ajustarse modificando los números del primer código que insertamos y que están en color rojo.

Con esto hasta los lectores más novatos sabrán cuál es la URL de la entrada que les ha gustado y tendrán una forma más sencilla de poder copiar el enlace para compartirlo donde deseen.

Read More

Las mayúsculas y las minúsculas en las URLs

Las URLs son poco flexibles cuando se trata de que funcionen de manera correcta, ya sea para una imagen o un enlace deben de ser escritas de forma textual respetando cada caracter que contiene, incluso si estos caracteres son mayúsculas o minúsculas.

Por ejemplo, esta es la URL de una imagen:

http://lh4.ggpht.com/_qgZA1ny_dAs/SuokgUwYpqI/AAAAAAAAC2c/4UZ0UOIPEtw/Skate.jpg

Esa URL contiene signos, letras y números. Y en el caso de las letras hay tanto mayúsculas como minúsculas. ¿Qué pasaría si cambiara todas las letras a minúsculas? No mucho excepto que la URL simplemente dejaría de funcionar.

http://lh4.ggpht.com/_qgza1ny_das/suokguwypqi/aaaaaaaac2c/4uz0uoipetw/skate.jpg

Lo mismo sucede con las URLs de los enlaces, aunque no aplica para todos los casos sí aplica para las URLs de Blogger. Por ejemplo, yo tengo en el blog la etiqueta Plantillas con P mayúscula, por lo tanto esta URL funcionará:

http://ciudadblogs.blogspot.com/search/label/Plantillas

Pero esta no:

http://ciudadblogs.blogspot.com/search/label/plantillas

¿Qué ha cambiado? Sólo una simple y casi insignificante letra que pasó de mayúscula a minúscula, pero ese pequeñísimo cambio ha hecho que la URL deje de funcionar y ahora Blogger me dice que no hay ninguna entrada con esa etiqueta.

Sin embargo, aunque hayamos tenido el cuidado de escribir la URL respetando las formas de las letras seguro muchos notarán que en sus blogs algunas imágenes o enlaces no funcionan, y esto es porque sin importar cuántas veces lo intentemos al momento de guardar los cambios Blogger cambia todos los caracteres de la URL a letras minúsculas.

Ignoro a qué se deba esto y porque en algunos blogs suceda y en otros no, pero por suerte Aresil me compartió un tip.

Si eres de los que están teniendo problemas con las mayúsculas de las URLs al momento de guardar los cambios sólo hay que hacer una pequeña modificación en el código del enlace o de la imagen.

Las URLs las encerramos siempre entre comillas, simples o dobles, usualmente esto no importa, pero esta vez sí, ya que si usamos las comillas simples (') Blogger nos cambia todos los caracteres a minúsculas.

Pero si usamos comillas dobles (") misteriosamente Blogger respeta las mayúsculas y las minúsculas.

Por ejemplo, en lugar de usar la URL así:

<a href='URL de la imagen o del enlace'>

Hay que usarla entre comillas dobles, así:

<a href="URL de la imagen o del enlace">

Y habiendo hecho eso no habrá ningún problema con las mayúsculas y las minúsculas de las URLs por lo que podrán funcionar correctamente. Una solución bastante sencilla ¿no creen?

Read More

riSlider, otro slider con jQuery

La verdad es que eso de TriSlider me lo he inventado yo porque no tengo la menor idea de cómo se llame este slider, pero muchos lo han visto en la plantilla Dilegno Star y me han pedido que lo publique, así que mientras aparece el nombre real de este slider vamos a llamarlo así.



Aunque está diseñado para mostrar tres imágenes es un slider con un aspecto bastante lindo que estoy seguro que se verá muy bien en muchas plantillas para mostrar el contenido destacado del blog.

Para poner este slider en tu blog primero descarga este archivo, descomprímelo y súbelo a un hosting.

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

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

<script src='URL del archivo' type='text/javascript'/>



<script type='text/javascript'>

//<![CDATA[

jQuery(function(){

var $featured_area = jQuery('#featured-area');

var $featured_item = jQuery('#featured-area div#slider-control div.featitem');

var $slider_control = jQuery('#featured-area div#slider-control');

var $image_container = jQuery('div#s1 > div');

var ordernum;

var pause_scroll = false;



$featured_item.find('img').fadeTo("fast", 0.7);

$slider_control.find("div.featitem.active img").fadeTo("fast", 1);

$image_container.hover(

function () {

jQuery(this).find("img").fadeTo("fast", 0.7);

},

function () {

jQuery(this).find("img").fadeTo("fast", 1);

}

);



function gonext(this_element){

$slider_control.find("div.featitem.active img").fadeTo("fast", 0.7);

$slider_control.find("div.featitem.active").removeClass('active');

this_element.addClass('active');

$slider_control.find("div.featitem.active img").fadeTo("fast", 1);

ordernum = this_element.find("span.order").html();

jQuery('#s1').cycle(ordernum - 1);

}



$featured_item.click(function() {

clearInterval(interval);

gonext(jQuery(this));

return false;

});



var auto_number;

var interval;



$featured_item.bind('autonext', function autonext(){

if (!(pause_scroll)) gonext(jQuery(this));

return false;

});





interval = setInterval(function () {

auto_number = $slider_control.find("div.featitem.active span.order").html();

if (auto_number == $featured_item.length) auto_number = 0;

$featured_item.eq(auto_number).trigger('autonext');

}, 5000);



});

//]]>

</script>



<script type='text/javascript'>

jQuery(function(){

jQuery(&#39;#s1&#39;).cycle({

timeout: 0,

speed: 1000,

fx: &#39;fade&#39;

});



});

</script>

Cambia donde se indica, la URL del archivo que subiste previamente.

Luego antes de ]]></b:skin> pega los estilos del slider:

#gallery {

width:616px; /* Ancho del contenedor general */

height:320px;

margin:0 0 20px 0;

float:left;

display:inline;

}



#featured-area {

height: 300px;

width:616px; /* Este ancho debe ser igual al contenedor general */

position: relative;

padding: 11px 0px 10px 0px;

z-index: 1;

}



#featured-area .pics {

position: absolute;

width: 490px; /* Ancho de las imágenes */

height: 298px;

top: 11px;

left: 14px;

}



#featured-area .pics div.excerpt {

background: #fff; /* Color de fondo de la descripción */

bottom:0;

left:0;

padding:0px 0 0 10px;

position:absolute;

width:480px; /* Ancho de los títulos */

z-index:2;

opacity:0.8;

filter:alpha(opacity=80);

.width: 100%;

}



#featured-area .pics div.excerpt p {

color: #203136; /* Color de la descripción */

width:450px; /* Ancho de la descripción */

height:20px;

}



#featured-area .pics div.excerpt a {

font-size:18px; /* Tamaño de los títulos */

color: #000; /* Color de los títulos */

font-weight:bold;

text-decoration:none;

}

#featured-area .pics div.excerpt a:hover {

color: #ddd; /* Color de los títulos al pasar el cursor */

text-decoration:none;

}

.excerpt-text {

display:inline;

float:left;

font-size:12px; /* Tamaño del texto de la descripción */

width:450px; /* Ancho de la descripción */

padding:0px 0 10px 0;

}



#featured-area .pics span.feat-overlay {

position: absolute;

top: 0px;

left: 0px;

display: block;

width: 490px; /* Mismo ancho de las imágenes */

height:298px;

z-index: 1;

}



#featured-area div#slider-control {

position: absolute;

width: 110px;

height: 296px;

border: 1px solid #b4b4b4;

z-index: 4;

top: 11px;

right: 1px;

}



#featured-area div#slider-control div.featitem {

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgh7HhOMa96fQ7KP_gstqIgFe_n9odOVnvcXhyphenhyphenhhxlHcFrDmrEUXP1RbRUTz4Z5M0D8yEVUZPo1DxPSr_p-BOiIBNzi7pgUDheBjfuf97TqUdJDr2ATkv24NuwitN0fDKt6KqLpfO2wD9c/s1600/featitem-bg.png) no-repeat top left;

width: 76px;

height: 77px;

float: left;

padding: 10px 16px 12px 18px;

cursor: pointer;

}



#featured-area div#slider-control div.featitem img {

float: left;

margin-right: 18px;

border: 1px solid #f6f6f6;

margin-top: 5px;

width:67px;

height:67px;

}



#featured-area div#slider-control div.featitem.active {

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhN2dRb4rA61z_iDq_SppP0wb1t355A1MfsbGIQYn2-jj58njojkREvjk47WZuuWwb4lefGar8h47F8dMw2i1bRj8RGCIxANJsMtWEi3xnFgNBS61kEGlFdJPSBst9QfRq-aib7dFfdz5w/s1600/featitem-bg-active.png) no-repeat top left;

margin-left: -20px;

padding-left: 38px;

}

#featured-area div#slider-control div.featitem.active h2 {display:none;}

#featured-area div#slider-control div.featitem.active span.meta {border: 0px;}

#featured-area div#slider-control div.featitem span.order {display: none;}

#featured-area div#slider-control div.featitem span.meta {display:none;}

Por último entra en Diseño | Elementos de la página | Añadir un gadget | HTML/Javascript y pega la estructura del slider:

<div id='gallery'>

<div id='featured-area'>

<div class='pics' id='s1'>



<!-- Imágenes grandes -->

<div>

<img src='URL de la imagen UNO' style='width: 490px; height: 298px;'/>

<div class='excerpt'>

<p><a href='URL del enlace'>Lorem ipsum</a></p>

<p class='excerpt-text'>Aquí va la descripción.</p>

</div>

<a href='URL del enlace'><span class='feat-overlay'/></a>

</div>







<div>

<img src='URL de la imagen DOS' style='width: 490px; height: 298px;'/>

<div class='excerpt'>

<p><a href='URL del enlace'>Lorem ipsum</a></p>

<p class='excerpt-text'>Aquí va la descripción.</p>

</div>

<a href='URL del enlace'><span class='feat-overlay'/></a>

</div>







<div>

<img src='URL de la imagen TRES' style='width: 490px; height: 298px;'/>

<div class='excerpt'>

<p><a href='URL del enlace'>Lorem ipsum</a></p>

<p class='excerpt-text'>Aquí va la descripción.</p>

</div>

<a href='URL del enlace'><span class='feat-overlay'/></a>

</div>



</div>



<div id='slider-control'>



<!-- Imágenes en miniatura -->

<div class='featitem active'>

<img src='URL de la imagen UNO' style='width: 67px ; height: 67px ;'/>

<span class='order'>1</span></div>





<div class='featitem '>

<img src='URL de la imagen DOS' style='width: 67px ; height: 67px ;'/>

<span class='order'>2</span></div>





<div class='featitem '>

<img src='URL de la imagen TRES' style='width: 67px ; height: 67px ;'/>

<span class='order'>3</span></div>





</div>

<div class='clear'/>

</div>

</div>

En este último código cambia donde se indica la URL de las imágenes y la URL de los enlaces. Notarás que cada imagen se pone dos veces, esto es porque una es para la imagen grande y otra para las imágenes en miniatura.

Algo parecido sucede con los enlaces, verás que el enlace se pone dos veces, uno es para en enlace de la imagen grande, y otro para el enlace del titulo que está arriba de la descripción.

En el primer código verás en color azul un número, este es el tiempo en milisegundos que tarda cada imagen en cambiar.

Como mencioné antes el slider está diseñado para mostrar sólo tres imágenes porque aunque se podrían agregar más quedaría poco estético, créanme, no les gustará el resultado si agregan más. Sin embargo pueden cambiar el ancho del slider, sólo hay que poner atención en las anotaciones que están en color verde dentro del segundo código y en el tamaño de las imágenes del tercer código.

Ahí mismo en el segundo código hay áreas que se pueden personalizar, como color del título, color de la descripción, etc. En el caso del fondo del área de las miniaturas es una imagen, bueno en realidad son dos, y si se de desea cambiarlas de color hay que editar las URLs de las imágenes que se encuentran también en el segundo código.

La verdad es que así como está el slider se ve muy bien, es de los pocos gadgets que no necesitan nada más que ponerlo en el blog y presumirlo a sus lectores.

Read More

Coda Slider: Galería de imágenes con miniaturas

Al igual que el TriSlider desconozco si este sea el verdadero nombre de este slider, yo lo he llamado así porque el autor (CSS Tricks) ha dicho que usa el plugin Coda Slider, así que ha sido más sencillo nombrarlo de esta forma.

Pero el nombre es lo de menos, lo que gusta de este slider, es que muestra las miniaturas de las imágenes para poder navegar desde ellas, y el efecto deslizante con el que avanzan.

Para poner este slider de imágenes necesitaremos uso de jQuery, así como tres scripts más pero no te preocupes que no son tan pesados como parece.

Bien, primero descarga este archivo, descomprímelo, sube los archivos a un hosting y luego pega este código antes de </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'/>

<script src='URL del archivo jquery-easing-1.3.pack.js'/>

<script src='URL del archivo jquery-easing-compatibility.1.2.pack.js'/>

<script src='URL del archivo coda-slider.1.1.1.pack.js'/>



<script type='text/javascript'>

//<![CDATA[

var theInt = null;

var $crosslink, $navthumb;

var curclicked = 0;



theInterval = function(cur){

clearInterval(theInt);



if( typeof cur != 'undefined' )

curclicked = cur;



$crosslink.removeClass("active-thumb");

$navthumb.eq(curclicked).parent().addClass("active-thumb");

$(".stripNav ul li a").eq(curclicked).trigger('click');

theInt = setInterval(function() {

$crosslink.removeClass("active-thumb");

$navthumb.eq(curclicked).parent().addClass("active-thumb");

$(".stripNav ul li a").eq(curclicked).trigger('click');

curclicked++;

if( 6 == curclicked )

curclicked = 0;



}, 3000);

};



// DOM Ready

$(function() {

$("#main-photo-slider").codaSlider();

$navthumb = $(".nav-thumb");

$crosslink = $(".cross-link");

$navthumb

.click(function() {

var $this = $(this);

theInterval($this.parent().attr('href').slice(1) - 1);

return false;

});



theInterval();

});

//]]>

</script>

Ahí agrega donde se indica las URLs de los archivos que subiste previamente.

Ahora antes de ]]></b:skin> pega los estilos:

/* Coda Slider

----------------------------------------------- */

#page-wrap {

width: 500px; /* Ancho del contenedor general */

min-height: 420px; /* Alto del contenedor general */

margin: 0 auto;

position: relative;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTuHSKpwRrvt0SoihzyPXdblmbFNfQPn5Up2CLPRc7HmtAlb7v02exVsBLABOi7wIZwaf1yBFCniw4RzluAq0puUgTftf2cltNIz3vIu5THqI9Vx6dCFb966qcBFLh_txs9PwdzZZOJug/s501/bg.png) top center no-repeat;

}

.slider-wrap {

width: 419px;

position: absolute;

top: 40px; left: 40px;

background:#DADADA;

}

.stripViewer .panelContainer

.panel ul { text-align: left; margin: 0 15px 0 30px; }

.stripViewer {

position: relative;

overflow: hidden;

width: 419px; /* Ancho del contenedor de las imágenes */

height: 285px; /* Alto del contenedor general */

margin-bottom:7px;

}

.stripViewer .panelContainer { position: relative; left: 0; top: 0; }

.stripViewer .panelContainer .panel { float: left; height: 100%; position: relative; width: 419px; }

.stripNavL, .stripNavR, .stripNav { display: none; }

.nav-thumb { border: 1px solid black; margin-right: 5px;}

#movers-row { margin: -39px 0 0 62px; }

#movers-row div { width: 20%; float: left; }

#movers-row div a.cross-link { float: right; }

.photo-meta-data {

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5FJC2wdmmGim0M2oqxayj-Jv-0ZJVNGNuxXEOgchIBPThZcCrzJt7TeqKat6RilefIN-LIU3xlKwFCzl5r-AgKHM-cWutVSfbBn83Tq7er73BN7Q4b3J4zkmpa1Hd2GgLDQ90b39_F08/s10/transpBlack.png);

padding: 10px;

height: 40px;

margin-top: -60px;

position: relative;

z-index: 100;

color: #FFF; /* Color del texto de las descripciones */

}

.photo-meta-data span { font-size: 13px; }

.cross-link { display: block; width: 62px; margin-top: -16px; position: relative; padding-top: 10px; z-index: 100; }

.active-thumb { background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwT2R0dH_PTEkdREKVrHcQH8zPx3jX-aM-U5WiImUo2_XzV-8WiaY6_k9KFGZkDHaEPoWu0WzDFXVgFwo28EHhOaQ5b9wgAmKJ2W9bKg1URykCfbMlL2AYu6RhMxvX1FPf_QaWKz8B5bQ/s14/icon-arrow.png) top center no-repeat; }

Después entra en Diseño | Elementos de la página | Añadir gadget | HTML/Javascript, si usas la nueva interfaz entra en Diseño | Añadir gadget | HTML/Javascript. Ahí pega la estructura del slider:

<div id='page-wrap'>

<div class='slider-wrap'>

<div class='csw' id='main-photo-slider'>

<div class='panelContainer'>



<div class='panel' title='Panel 1'>

<div class='wrapper'>

<a href='URL del enlace'><img height='285px' src='URL de la imagen UNO' width='419px'/></a>

<div class='photo-meta-data'>

Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>

<span>Nulla nisi lacus, pretium vitae mattis ac, mollis non neque.</span>



</div></div></div>





<div class='panel' title='Panel 2'>

<div class='wrapper'>

<a href='URL del enlace'><img height='285px' src='URL de la imagen DOS' width='419px'/></a>

<div class='photo-meta-data'>

Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>

<span>Nulla nisi lacus, pretium vitae mattis ac, mollis non neque.</span>



</div></div></div>





<div class='panel' title='Panel 3'>

<div class='wrapper'>

<a href='URL del enlace'><img height='285px' src='URL de la imagen TRES' width='419px'/></a>

<div class='photo-meta-data'>

Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>

<span>Nulla nisi lacus, pretium vitae mattis ac, mollis non neque.</span>



</div></div></div>





<div class='panel' title='Panel 4'>

<div class='wrapper'>

<a href='URL del enlace'><img height='285px' src='URL de la imagen CUATRO' width='419px'/></a>

<div class='photo-meta-data'>

Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>

<span>Nulla nisi lacus, pretium vitae mattis ac, mollis non neque.</span>



</div></div></div>





<div class='panel' title='Panel 5'>

<div class='wrapper'>

<a href='URL del enlace'><img height='285px' src='URL de la imagen CINCO' width='419px'/></a>

<div class='photo-meta-data'>

Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>

<span>Nulla nisi lacus, pretium vitae mattis ac, mollis non neque.</span>



</div></div></div>





<div class='panel' title='Panel 6'>

<div class='wrapper'>

<a href='URL del enlace'><img height='285px' src='URL de la imagen SEIS' width='419px'/></a>

<div class='photo-meta-data'>

Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>

<span>Nulla nisi lacus, pretium vitae mattis ac, mollis non neque.</span>



</div></div></div>





</div></div>

<!-- Estas son las MINIATURAS -->



<a class='cross-link active-thumb' href='#1'><img class='nav-thumb' height='40px' src='URL de la imagen UNO' width='60px'/></a>



<div id='movers-row'>



<div><a class='cross-link' href='#2'><img class='nav-thumb' height='40px' src='URL de la imagen DOS' width='60px'/></a></div>



<div><a class='cross-link' href='#3'><img class='nav-thumb' height='40px' src='URL de la imagen TRES' width='60px'/></a></div>



<div><a class='cross-link' href='#4'><img class='nav-thumb' height='40px' src='URL de la imagen CUATRO' width='60px'/></a></div>



<div><a class='cross-link' href='#5'><img class='nav-thumb' height='40px' src='URL de la imagen CINCO' width='60px'/></a></div>



<div><a class='cross-link' href='#6'><img class='nav-thumb' height='40px' src='URL de la imagen SEIS' width='60px'/></a></div>



</div>

</div></div>

Por último coloca las URLs de las imágenes donde se indica, así como la URL de los enlaces.

Puedes modificar la velocidad con la que cambian las imágenes en la parte marcada en color naranja, ahí pon el número en milisegundos, aunque la primera imagen siempre tardará un poco más en cambiar.

Al slider le caben seis imágenes, y aunque se podría ampliar, la recomendación es dejarlo como está, a menos claro que quieras trabajar mucho.

Como ves es un gadget llamativo, útil para mostrar contenido destacado o para una galería de imágenes, y arriba de las entradas quedará muy bien.

Read More

Galería de Videos con Coda Slider

La otra vez veíamos cómo poner una galería de imágenes con Coda Slider, y dado a las posibilidades que tiene el script pensé que podríamos hacer una galería de videos con este mismo slider sólo haciendo unas pequeñas modificaciones.

El resultado es una galería de videos con jQuery que permite pasar de un video a otro de forma deslizante haciendo click en las miniaturas que se encuentran debajo. A esta galería podemos añadirle hasta 7 videos con las medidas actuales que posee.

El procedimiento es similar al otro slider, primero descarga este archivo, descomprímelo, sube los archivos a un hosting y luego pega este código antes de </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'/>

<script src='URL del archivo jquery-easing-1.3.pack.js'/>

<script src='URL del archivo jquery-easing-compatibility.1.2.pack.js'/>

<script src='URL del archivo coda-slider.1.1.1.pack.js'/>



<script type='text/javascript'>

//<![CDATA[



$(function() {

$("#main-video-slider").codaSlider();

$navthumb = $(".nav-thumb");

$crosslink = $(".cross-link");

$navthumb

.click(function() {

var $this = $(this);

theInterval($this.parent().attr('href').slice(1) - 1);

return false;

});



theInterval();

});

//]]>

</script>

Ahí coloca donde se indica las URLs de los archivos que subiste previamente.

Luego antes de ]]></b:skin> coloca los estilos de la galería:

/* Coda Slider (Video)

----------------------------------------------- */

#page-wrap {

width: 490px; /* Ancho del contenedor general */

min-height: 354px; /* Alto del contenedor general */

margin: 0 auto;

position: relative;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgU1H9HhhXy7ubxYhlqZz4WXeLmChasHWyowmVtTnKTEtro4w8DFfWT5941Im2teteMKFN5PqYnTxFmmQfyVDO-WWhFOn0zYuzURSfXE0FNwgGCSMYvtqAwX7Vnatlh67ywc2ud-6_cC5A/s490/vid-bg.png) top center no-repeat;

}

.slider-wrap {

width: 450px;

position: absolute;

top: 20px;

left: 20px;

}

.stripViewer .panelContainer

.panel ul { text-align: left; margin: 0 15px 0 30px; }

.stripViewer {

position: relative;

overflow: hidden;

width: 450px; /* Ancho del contenedor de los videos */

height: 274px; /* Alto del contenedor de los videos */

margin-bottom:7px;

}

.stripViewer .panelContainer { position: relative; left: 0; top: 0; }

.stripViewer .panelContainer .panel { float: left; height: 100%; position: relative; width: 450px; }

.stripNavL, .stripNavR, .stripNav { display: none; }

.nav-thumb { border: 1px solid black; margin-right: 5px;}

#movers-row { margin: -39px 0 0 62px; }

#movers-row div { width: 16.6%; float: left; }

#movers-row div a.cross-link { float: right; }

.cross-link { display: block; width: 58px; margin-top: -10px; position: relative; padding-top: 3px; z-index: 100; }

El tercer paso es entrar en Diseño | Elementos de la página | Añadir gadget | HTML/Javascript (para la interfaz antigua), o Diseño | Añadir gadget | HTML/Javascript (para la interfaz nueva). Ahí pega este código:

<div id="page-wrap">

<div class="slider-wrap">

<div class="csw" id="main-video-slider">

<div class="panelContainer">



<div class="panel" title="Panel 1">

<div class="wrapper">

<iframe width="450" height="274" src="http://www.youtube.com/embed/ID_VIDEO_YOUTUBE_UNO" frameborder="0" allowfullscreen></iframe>



</div></div>





<div class="panel" title="Panel 2">

<div class="wrapper">

<iframe width="450" height="274" src="http://www.youtube.com/embed/ID_VIDEO_YOUTUBE_DOS" frameborder="0" allowfullscreen></iframe>



</div></div>





<div class="panel" title="Panel 3">

<div class="wrapper">

<iframe width="450" height="274" src="http://www.youtube.com/embed/ID_VIDEO_YOUTUBE_TRES" frameborder="0" allowfullscreen></iframe>



</div></div>





<div class="panel" title="Panel 4">

<div class="wrapper">

<iframe width="450" height="274" src="http://www.youtube.com/embed/ID_VIDEO_YOUTUBE_CUATRO" frameborder="0" allowfullscreen></iframe>



</div></div>





<div class="panel" title="Panel 5">

<div class="wrapper">

<iframe width="450" height="274" src="http://www.youtube.com/embed/ID_VIDEO_YOUTUBE_CINCO" frameborder="0" allowfullscreen></iframe>



</div></div>





<div class="panel" title="Panel 6">

<div class="wrapper">

<iframe width="450" height="274" src="http://www.youtube.com/embed/ID_VIDEO_YOUTUBE_SEIS" frameborder="0" allowfullscreen></iframe>



</div></div>





<div class="panel" title="Panel 7">

<div class="wrapper">

<iframe width="450" height="274" src="http://www.youtube.com/embed/ID_VIDEO_YOUTUBE_SIETE" frameborder="0" allowfullscreen></iframe>



</div></div>



</div></div>

<!-- Estas son las MINIATURAS de los videos -->



<a class='cross-link active-thumb' href='#1'><img class='nav-thumb' height='40px' src="http://img.youtube.com/vi/ID_VIDEO_YOUTUBE_UNO/1.jpg" width='58px'/></a>



<div id='movers-row'>



<div><a class='cross-link' href='#2'><img class='nav-thumb' height='40px' src="http://img.youtube.com/vi/ID_VIDEO_YOUTUBE_DOS/1.jpg" width='58px'/></a></div>



<div><a class='cross-link' href='#3'><img class='nav-thumb' height='40px' src="http://img.youtube.com/vi/ID_VIDEO_YOUTUBE_TRES/1.jpg" width='58px'/></a></div>



<div><a class='cross-link' href='#4'><img class='nav-thumb' height='40px' src="http://img.youtube.com/vi/ID_VIDEO_YOUTUBE_CUATRO/1.jpg" width='58px'/></a></div>



<div><a class='cross-link' href='#5'><img class='nav-thumb' height='40px' src="http://img.youtube.com/vi/ID_VIDEO_YOUTUBE_CINCO/1.jpg" width='58px'/></a></div>



<div><a class='cross-link' href='#6'><img class='nav-thumb' height='40px' src="http://img.youtube.com/vi/ID_VIDEO_YOUTUBE_SEIS/1.jpg" width='58px'/></a></div>



<div><a class='cross-link' href='#7'><img class='nav-thumb' height='40px' src="http://img.youtube.com/vi/ID_VIDEO_YOUTUBE_SIETE/1.jpg" width='58px'/></a></div>



</div>

</div></div>

Coloca donde se indica la ID del video de YouTube. La ID del video es toda esa serie de caracteres que aparecen al final de la URL del video, por ejemplo:

Como puedes ver, la ID del video debes colocarla dos veces, una es para el video, y otra para la imagen en miniatura del video.



También puedes poner videos de otros servicios, sólo debes eliminar un código como este:

<iframe width="450" height="274" src="http://www.youtube.com/embed/ID_VIDEO_YOUTUBE" frameborder="0" allowfullscreen></iframe>

Y en su lugar deberás poner el código de tu video, que deberá medir 450px de ancho y 274px de alto. También deberás cambiar la URL de la imagen de la miniatura:

<img class='nav-thumb' height='40px' src="URL de la imagen" width='58px'/>

Es una galería de videos sencilla pero que puede verse muy bien arriba de las entradas del blog, y si la usamos sólo para videos de YouTube entonces será menos complicado.

Read More

Coda Slider: Galería de imágenes con miniaturas

Al igual que el TriSlider desconozco si este sea el verdadero nombre de este slider, yo lo he llamado así porque el autor (CSS Tricks) ha dicho que usa el plugin Coda Slider, así que ha sido más sencillo nombrarlo de esta forma.

Pero el nombre es lo de menos, lo que gusta de este slider, es que muestra las miniaturas de las imágenes para poder navegar desde ellas, y el efecto deslizante con el que avanzan.

Para poner este slider de imágenes necesitaremos uso de jQuery, así como tres scripts más pero no te preocupes que no son tan pesados como parece.

Bien, primero descarga este archivo, descomprímelo, sube los archivos a un hosting y luego pega este código antes de </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'/>

<script src='URL del archivo jquery-easing-1.3.pack.js'/>

<script src='URL del archivo jquery-easing-compatibility.1.2.pack.js'/>

<script src='URL del archivo coda-slider.1.1.1.pack.js'/>



<script type='text/javascript'>

//<![CDATA[

var theInt = null;

var $crosslink, $navthumb;

var curclicked = 0;



theInterval = function(cur){

clearInterval(theInt);



if( typeof cur != 'undefined' )

curclicked = cur;



$crosslink.removeClass("active-thumb");

$navthumb.eq(curclicked).parent().addClass("active-thumb");

$(".stripNav ul li a").eq(curclicked).trigger('click');

theInt = setInterval(function() {

$crosslink.removeClass("active-thumb");

$navthumb.eq(curclicked).parent().addClass("active-thumb");

$(".stripNav ul li a").eq(curclicked).trigger('click');

curclicked++;

if( 6 == curclicked )

curclicked = 0;



}, 3000);

};



// DOM Ready

$(function() {

$("#main-photo-slider").codaSlider();

$navthumb = $(".nav-thumb");

$crosslink = $(".cross-link");

$navthumb

.click(function() {

var $this = $(this);

theInterval($this.parent().attr('href').slice(1) - 1);

return false;

});



theInterval();

});

//]]>

</script>

Ahí agrega donde se indica las URLs de los archivos que subiste previamente.

Ahora antes de ]]></b:skin> pega los estilos:

/* Coda Slider

----------------------------------------------- */

#page-wrap {

width: 500px; /* Ancho del contenedor general */

min-height: 420px; /* Alto del contenedor general */

margin: 0 auto;

position: relative;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTuHSKpwRrvt0SoihzyPXdblmbFNfQPn5Up2CLPRc7HmtAlb7v02exVsBLABOi7wIZwaf1yBFCniw4RzluAq0puUgTftf2cltNIz3vIu5THqI9Vx6dCFb966qcBFLh_txs9PwdzZZOJug/s501/bg.png) top center no-repeat;

}

.slider-wrap {

width: 419px;

position: absolute;

top: 40px; left: 40px;

background:#DADADA;

}

.stripViewer .panelContainer

.panel ul { text-align: left; margin: 0 15px 0 30px; }

.stripViewer {

position: relative;

overflow: hidden;

width: 419px; /* Ancho del contenedor de las imágenes */

height: 285px; /* Alto del contenedor general */

margin-bottom:7px;

}

.stripViewer .panelContainer { position: relative; left: 0; top: 0; }

.stripViewer .panelContainer .panel { float: left; height: 100%; position: relative; width: 419px; }

.stripNavL, .stripNavR, .stripNav { display: none; }

.nav-thumb { border: 1px solid black; margin-right: 5px;}

#movers-row { margin: -39px 0 0 62px; }

#movers-row div { width: 20%; float: left; }

#movers-row div a.cross-link { float: right; }

.photo-meta-data {

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5FJC2wdmmGim0M2oqxayj-Jv-0ZJVNGNuxXEOgchIBPThZcCrzJt7TeqKat6RilefIN-LIU3xlKwFCzl5r-AgKHM-cWutVSfbBn83Tq7er73BN7Q4b3J4zkmpa1Hd2GgLDQ90b39_F08/s10/transpBlack.png);

padding: 10px;

height: 40px;

margin-top: -60px;

position: relative;

z-index: 100;

color: #FFF; /* Color del texto de las descripciones */

}

.photo-meta-data span { font-size: 13px; }

.cross-link { display: block; width: 62px; margin-top: -16px; position: relative; padding-top: 10px; z-index: 100; }

.active-thumb { background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwT2R0dH_PTEkdREKVrHcQH8zPx3jX-aM-U5WiImUo2_XzV-8WiaY6_k9KFGZkDHaEPoWu0WzDFXVgFwo28EHhOaQ5b9wgAmKJ2W9bKg1URykCfbMlL2AYu6RhMxvX1FPf_QaWKz8B5bQ/s14/icon-arrow.png) top center no-repeat; }

Después entra en Diseño | Elementos de la página | Añadir gadget | HTML/Javascript, si usas la nueva interfaz entra en Diseño | Añadir gadget | HTML/Javascript. Ahí pega la estructura del slider:

<div id='page-wrap'>

<div class='slider-wrap'>

<div class='csw' id='main-photo-slider'>

<div class='panelContainer'>



<div class='panel' title='Panel 1'>

<div class='wrapper'>

<a href='URL del enlace'><img height='285px' src='URL de la imagen UNO' width='419px'/></a>

<div class='photo-meta-data'>

Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>

<span>Nulla nisi lacus, pretium vitae mattis ac, mollis non neque.</span>



</div></div></div>





<div class='panel' title='Panel 2'>

<div class='wrapper'>

<a href='URL del enlace'><img height='285px' src='URL de la imagen DOS' width='419px'/></a>

<div class='photo-meta-data'>

Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>

<span>Nulla nisi lacus, pretium vitae mattis ac, mollis non neque.</span>



</div></div></div>





<div class='panel' title='Panel 3'>

<div class='wrapper'>

<a href='URL del enlace'><img height='285px' src='URL de la imagen TRES' width='419px'/></a>

<div class='photo-meta-data'>

Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>

<span>Nulla nisi lacus, pretium vitae mattis ac, mollis non neque.</span>



</div></div></div>





<div class='panel' title='Panel 4'>

<div class='wrapper'>

<a href='URL del enlace'><img height='285px' src='URL de la imagen CUATRO' width='419px'/></a>

<div class='photo-meta-data'>

Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>

<span>Nulla nisi lacus, pretium vitae mattis ac, mollis non neque.</span>



</div></div></div>





<div class='panel' title='Panel 5'>

<div class='wrapper'>

<a href='URL del enlace'><img height='285px' src='URL de la imagen CINCO' width='419px'/></a>

<div class='photo-meta-data'>

Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>

<span>Nulla nisi lacus, pretium vitae mattis ac, mollis non neque.</span>



</div></div></div>





<div class='panel' title='Panel 6'>

<div class='wrapper'>

<a href='URL del enlace'><img height='285px' src='URL de la imagen SEIS' width='419px'/></a>

<div class='photo-meta-data'>

Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>

<span>Nulla nisi lacus, pretium vitae mattis ac, mollis non neque.</span>



</div></div></div>





</div></div>

<!-- Estas son las MINIATURAS -->



<a class='cross-link active-thumb' href='#1'><img class='nav-thumb' height='40px' src='URL de la imagen UNO' width='60px'/></a>



<div id='movers-row'>



<div><a class='cross-link' href='#2'><img class='nav-thumb' height='40px' src='URL de la imagen DOS' width='60px'/></a></div>



<div><a class='cross-link' href='#3'><img class='nav-thumb' height='40px' src='URL de la imagen TRES' width='60px'/></a></div>



<div><a class='cross-link' href='#4'><img class='nav-thumb' height='40px' src='URL de la imagen CUATRO' width='60px'/></a></div>



<div><a class='cross-link' href='#5'><img class='nav-thumb' height='40px' src='URL de la imagen CINCO' width='60px'/></a></div>



<div><a class='cross-link' href='#6'><img class='nav-thumb' height='40px' src='URL de la imagen SEIS' width='60px'/></a></div>



</div>

</div></div>

Por último coloca las URLs de las imágenes donde se indica, así como la URL de los enlaces.

Puedes modificar la velocidad con la que cambian las imágenes en la parte marcada en color naranja, ahí pon el número en milisegundos, aunque la primera imagen siempre tardará un poco más en cambiar.

Al slider le caben seis imágenes, y aunque se podría ampliar, la recomendación es dejarlo como está, a menos claro que quieras trabajar mucho.

Como ves es un gadget llamativo, útil para mostrar contenido destacado o para una galería de imágenes, y arriba de las entradas quedará muy bien.

Read More