Efecto de opacidad con desvanecimiento al pasar el cursor

Anteriormente vimos cómo podemos darle un efecto de opacidad a las imágenes al pasar el cursor, para ello agregamos en el código de la imagen los estilos de opacidad.

Ahora vamos a ver el mismo efecto pero con un plus, es decir, vamos a darle un efecto de opacidad a las imágenes al pasar el cursor pero con un desvanecimiento para que la imagen se aclare de forma suave.

Este mismo efecto puede darse a casi cualquier elemento, puedes ver un ejemplo en este blog de pruebas, pasa el cursor sobre la imagen para ver el efecto; lo mismo puedes hacer con el texto que se encuentra abajo de ella.

Para darle este efecto de opacidad con desvanecimiento a tus imágenes entra en Diseño > Edición de HTML y antes de </head> pega lo siguiente:

<script src='http://sites.google.com/site/ciudadbloggerscripts/archivos/gradualfader.js' type='text/javascript'></script>

Luego pega antes de </body> esto:

<script type='text/javascript'>
gradualFader.init() //activate gradual fader
</script>

El último paso es sólo agregar la clase gradualfader a la imagen, por ejemplo:

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

Y eso es todo, así se simple. Si tu imagen ya tuviera otra clase, por ejemplo otro efecto como pushbutton y también quieres agregar este efecto entonces sólo deja un espacio y agrega la clase correspondiente, por ejemplo:

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

Lo mismo si quieres el efecto en un div u otro elemento, sólo agrega class="gradualfader" dentro se su código y listo.

Como siempre te recomiendo descargar el script y subirlo a tu servidor para no sobre cargar el ancho de banda.

Descargar | script

Mostrar videos al azar

Ya hemos visto cómo poner banners al azar, cabeceras al azar, imágenes flotantes al azar, frases al azar, fondos del blog al azar. Ahora le toca el turno a los videos, para poder mostrar uno diferente y al azar cada vez que se carga la página.

Puedes ver un ejemplo en este blog de pruebas, recarga la página con la tecla F5 para ver otro video al azar.

Para ponerlo en tu blog sólo basta con ir a Diseño > Elementos de la página > Añadir gadget > HTML/Javascript y ahí pegar lo siguiente:

<script type='text/javascript'>
//<![CDATA[
var vid = [ //La ID de los videos
"_20uZeoSq7c",
"_bxncSQvo_I",
"9d_vB32tE-o",
"0HP-zIK_m00",
"5zM-fFfFb_Q"
];
var ancho_vid = '480'; //Ancho del reproductor
var alto_vid = '295'; //Alto del reproductor
var ran_unrounded = Math.random()*vid.length;
var ran_number = Math.floor(ran_unrounded);

document.write('<object width="'+ancho_vid+'" height="'+alto_vid+'"><param name="movie" value="http://www.youtube.com/v/'+vid[ran_number]+'&hl=es&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/'+vid[ran_number]+'&hl=es&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="'+ancho_vid+'" height="'+alto_vid+'"></embed></object>');
//]]>
</script>

Sólo debes cambiar lo que está en rojo por las ID de tus videos que quieres mostrar.
¿Cómo consigues las ID?
Haz click en un video de YouTube que quieras ver, verás que en la barra de direcciones del navegador aparecerá una URL como esta:

http://www.youtube.com/watch?v=GRhWlNNs_Po

Eso último que está en color rojo es la ID del video, es la que deberás poner en el código anterior.
Puedes poner los videos que quieras, sólo agrega debajo de var vid = [ //La ID de los videos una línea como esta:

"GrhWlNNs_Po",

Para cambiar el ancho y alto del reproductor hazlo donde se indica en color verde.

Si quisieras que los videos se reproduzcan automáticamente cuando carga la página entonces se agrega el parámetro &autoplay=1. ¿Dónde se pone? Justo después de lo que está en negrita, o sea después de &fs=1 (dos veces se tiene que poner).
Si quisieras que no muestre videos relacionados entonces se agrega igual en esa parte el comando &rel=0
Y si quisieras que el video se repita una y otra vez entonces se agrega (también en el mismo lugar) el comando &loop=1
Por ejemplo, esa área del código quedaría así:

value="http://www.youtube.com/v/'+vid[ran_number]+'&hl=es&fs=1&autoplay=1&rel=0&loop=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/'+vid[ran_number]+'&hl=es&fs=1&autoplay=1&rel=0&loop=1" type="application/x-shockwave-flash" allowscriptaccess="always"

Con el ejemplo anterior los videos se repetirían, se reproducirían automáticamente y no se mostrarían los videos relacionados.

Lightbox: Imágenes en ventanas modales

Las ventanas modales son ese efecto cuando una imagen se abre encima de todo el contenido y oscurece toda la pantalla.
Si bien en la actualidad hay muchos sistemas que permiten hacer todo esto vamos a ver al pionero en su tipo, Lightbox.

Esta técnica creada por Lokesh Dhakar dejó atrás a las ventanas popups ya que el efecto es mucho más llamativo debido a la forma que se presenta la imagen. De él han surgido muchos clones como Lightwindow, Thickbox, etc.

Por lo pronto vamos a empezar a usar Lightbox que se encuentra en su versión 2.04 que aunque no soporta ventanas modales para todo tipo de archivos sí funciona muy bien para las galerías de imágenes.

Puedes ver un ejemplo en esta galería de imágenes de ejemplo.

La instalación es muy sencilla sólo necesitamos Prototype, Scriptaculous, Lightwindows.js y el archivo .ccs de los estilos.

Para poner Lightbox en Blogger entra en Diseño > Edición de HTML y antes de </head> pega lo siguiente:

NOTA: Si ya tienes Prototype y Scriptaculous sólo añade lo demás.

<!-- Prototype y Scriptaculous-->

<script src='http://www.google.com/jsapi'/>
<script>
google.load(&quot;prototype&quot;,&quot;1.6.0.3&quot;);
google.load(&quot;scriptaculous&quot;, &quot;1.8.2&quot;);
</script>
<!-- Prototype y Scriptaculous-->

<script src='http://sites.google.com/site/ciudadbloggerfiles/Home/lightbox.js' type='text/javascript'/>
<link href='http://sites.google.com/site/ciudadbloggerfiles/Home/lightbox.css' media='screen' rel='stylesheet' type='text/css'/>

Ahora cuando quieras que una imagen aparezca en una ventana modal usa este código:

<a href="URL de la imagen grande" rel="lightbox"><img src="URL de la imagen pequeña" /></a>

Sólo cambia la URL de la imagen grande y la URL de la imagen pequeña. Si te fijas se ha añadido al código rel="lightbox" esa parte es sumamente importante pues es la que le indicará al script que la imagen debe mostrarse en ventana modal.

Si tuvieras una galería de imágenes sólo se añade entre corchetes el nombre de la galería, por ejemplo:

<a href="URL de la imagen grande" rel="lightbox[galeria1]"><img src="URL de la imagen pequeña" /></a>

Así de sencillo puedes mostrar tus imágenes con este efecto de ventanas modales que a todos les gusta.

Consideraciones:

• Lightbox funciona en todos los navegadores aunque las versiones antiguas de Intenet Explorer pueden presentar problemas.
• Para que la ventana modal funcione correctamente debes esperar a que la página cargue por completo para asegurar que los archivos ya han sido leídos y pueden ejecutarse.
• Tanto el script como la hoja de estilos los he alojado en mi servidor, pero se recomienda que los descargues y los alojes en tu propio hosting para evitar que se sobre cargue el ancho de banda y se alente tu blog.
• Una vez que los hayas subido a tu hosting sólo cambia la URL de cada uno de ellos en el primer código que he marcado en color verde.

Descargar script y hoja de estilos.

Cambiar el logo de Google por tu Doodle favorito

¿Te ha pasado que te gusta un Doodle pero no puedes seguirlo teniendo porque Google lo pone en su página sólo un día?
Retomando un poco los "trucos de Google" les diré cómo cambiar el logotipo de la página de Google por tu Doodle favorito las veces que quieras.

Como siempre los usuarios de Internet Explorer no podrán usarlo ya que sólo funciona para Mozilla Firefox y Google Chrome.

En Firefox

1. Si usas Mozilla primero deberás descargarte el addon Greasemonkey como lo harías con cualquier otro plugin.
2. Una vez instalado y reiniciado el navegador haz click en este script y en el recuadro que aparecerá haz click en Instalar.
3. Ahora sólo entra a Google y haz click sobre el logo de Google. Se abrirá una página con todos los Doodles que ha sacado Google, selecciona el que más te guste y presiona el botón que se encuentra debajo de él que dice Make This My Favorite Doodle!

Y listo, en tu página de Google tendrás el Doodle que hayas elegido.

En Chrome

1. Para los usuarios de Google Chrome sólo hay que descargar la extensión Favorite Doodle y hacer click en Instalar.
2. Una vez instalado hay que hacer lo mismo que en el método anterior. Ir a Google y hacer click en el logo de Google. Se abrirá una página con todos los doodles que ha sacado Google, selecciona el que más te guste y presiona el botón que se encuentra debajo de él que dice Make This My Favorite Doodle!

Cómo ves son pasos muy sencillos para que puedas disfrutar de tu Doodle favorito no sólo el día que Google lo publicó en su página sino siempre que quieras.

1er. Aniversario

Tenía tantas cosas que decir que al final he preferido decir sólo lo más importante:

¡GRACIAS!

Mil gracias a cada uno de ustedes por ser parte de Ciudad Blogger.

Adsense en medio de las entradas

Previamente vimos cómo y dónde poner los anuncios de Adsense en el blog; estos procedimientos se aplican para poner los anuncios en lugares predeterminados y fijos. En el caso de área de las entradas los lugares habituales son debajo del título, al inicio de la entrada y al final de la entrada.

¿Pero se puede poner un anuncio en medio de una entrada, es decir, donde yo decida que aparezca?

Sí, a través de un script podemos manipular el lugar donde aparecerá el anuncio de Adsense. Sólo agregaremos un script dentro de la plantilla y usaremos una etiqueta dentro de la entrada cuando queramos que aparezca el anuncio.

Primero "parsea" el código de Adsense, en otras palabras, conviértelo a texto plano.
Luego entra en Diseño > Edición de HTML y busca esta etiqueta:

<data:post.body/>

Remplaza esa etiqueta por este código:

<div expr:id='"aim1" + data:post.id'></div>

<div style="clear:both; margin:10px 0">
Coloca aquí tu código de Adsense
</div>

<div expr:id='"aim2" + data:post.id'>
<data:post.body/>
</div>

<script type="text/javascript">
var obj0=document.getElementById("aim1<data:post.id/>");
var obj1=document.getElementById("aim2<data:post.id/>");
var s=obj1.innerHTML;
var r=s.search(/\x3C!-- adsense --\x3E/igm);
if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+16);}
</script>

Coloca tu código de Adsense donde se indica, y ahora cuando quieras poner el anuncio de Adsense coloca esta etiqueta dentro de la entrada:

<!-- adsense -->

Y listo, donde hayas puesto esa etiqueta es donde aparecerá el anuncio, por ejemplo:

<div>Lorem ipsum, quia dolor sit, amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur?</div>
<!-- adsense -->
<div>At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga. et harum quidem rerum facilis est et expedita distinctio.</div>

El resultado será algo como esto:



Consideraciones finales:

• Si tuvieras dos etiquetas como esta sólo busca la que está debajo de:

  <div class='post-header-line-1'/>

• En caso de que no pusieras la etiqueta para que salga el anuncio entonces el anuncio aparecerá abajo del título por defecto.
• Este método no viola las normas de Adsense ya que no se está modificando la estructura del anuncio.

Un poco más sobre la Lista de Seguidores

En la entrada anterior vimos cómo solucionar el problema de la Lista de Seguidores que no se ve en los navegadores.

Con un poco más de calma me detuve a ver los códigos y tratar de entender por qué de esa forma sí funciona y el gadget de Seguidores que ofrece Blogger y el gadget de Miembros de Google Friend Connect (GFC) no.

Haciendo los comparativos me di cuenta que tanto el gadget de Blogger como el de miembros de GFC llaman a una función denominada renderMembersGadget que en palabras simples es lo que hace que los seguidores aparezcan en esa "cajita" y de ahí puedan usarse las aplicaciones de cada uno.

Sin embargo el otro código llama a una función distinta, renderOpenSocialGadget.

¿Qué significa esto?

Este último es -por decirlo de algún modo- la forma pura y básica de los Seguidores, que tiene como fin ser el "lienzo" para que los desarrolladores puedan crear más gadgets que involucre a los Seguidores con el código básico. En cambio renderMembersGadget es el producto final que tiene precisamente los códigos incompatibles con Scriptaculous.

¿Por qué en el código de la entrada anterior se tiene que eliminar una línea?

Porque como dije antes, es el código básico, y esa línea es el documento XML que contiene el trabajo del desarrollador, es decir, la interfaz del gadget así como sus funciones, es por eso que al eliminarlo regresa el gadget de Seguidores en su forma natural.

Dicho lo anterior entonces también podemos ahorrarnos unos pasos poner el gadget de Seguidores y hacer que funcione.

Para esto es necesario entrar a Google Friend Connect y obtener tu ID de GFC, cada blog tiene uno distinto.

Puedes conseguirlo entrando a Google Friend Connect y haciendo click en el menú lateral izquierdo sobre el nombre de tu blog verás que en la barra de direcciones aparece una URL y al final tu ID:

Ese es el ID del GFC de tu blog, ahora en un elemento HTML/Javascript pega este código:

<!-- Include the Google Friend Connect javascript library. -->
<script src="http://www.google.com/friendconnect/script/friendconnect.js" type="text/javascript"></script>
<!-- Define the div tag where the gadget will be inserted. -->
<div id="div-32226566577175641" style="width:300px;border:1px solid #cccccc;"></div>
<!-- Render the gadget into a div. -->
<script type="text/javascript">
var skin = {};
skin['BORDER_COLOR'] = '#cccccc';
skin['ENDCAP_BG_COLOR'] = '#e0ecff';
skin['ENDCAP_TEXT_COLOR'] = '#333333';
skin['ENDCAP_LINK_COLOR'] = '#0000cc';
skin['CONTENT_BG_COLOR'] = '#ffffff';
skin['CONTENT_LINK_COLOR'] = '#0000cc';
skin['CONTENT_TEXT_COLOR'] = '#333333';
skin['CONTENT_HEADLINE_COLOR'] = '#333333';
skin['NUMBER_ROWS'] = '4';
google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
google.friendconnect.container.renderOpenSocialGadget(
{ id: 'div-32226566577175641',
url:'',
site: '05983757033084872491',
},
skin);
</script>

Sustituye lo que está en rojo por la ID que copiaste anteriormente y listo.

Por supuesto que también se pueden hacer modificaciones de color y tamaño. En el caso del ancho se puede modificar donde dice width:300px;.
Otras modificaciones son estas:

skin['BORDER_COLOR'] = '#cccccc'; <-- Color del borde
skin['ENDCAP_BG_COLOR'] = '#e0ecff'; <-- Color de la cabecera del gadget
skin['ENDCAP_TEXT_COLOR'] = '#333333'; <-- Color del texto de la cabecera del gadget
skin['ENDCAP_LINK_COLOR'] = '#0000cc'; <-- Color del ícono para mostrar a todos los seguidores
skin['CONTENT_BG_COLOR'] = '#ffffff'; <-- Color de fondo del gadget
skin['CONTENT_LINK_COLOR'] = '#0000cc'; <-- Color de los links
skin['CONTENT_TEXT_COLOR'] = '#333333'; <-- Color del texto
skin['CONTENT_HEADLINE_COLOR'] = '#333333'; <-- Color de la palabra "Seguidores"
skin['NUMBER_ROWS'] = '4'; <-- Número de columnas a mostrar (alto del gadget)

Esas son las modificaciones de color y tamaño que se le pueden dar al gadget. Pero algunos ya habrán notado que no funciona del todo. Es decir, sí se ven los seguidores, se ve el número de ellos, funciona perfecto el botón para unirse. Pero cuando uno hace click en la foto de un seguidor se abre la ventana modal y se queda en blanco, no muestra los datos de usuario. Esto es porque esa función es propia del gadget de Blogger y como ya mencionamos, son justamente partes de las funciones que no son compatibles con Scriptaculous. Pero que no cunda el pánico, aun así podemos ver a todos los seguidores y los datos de cada uno.

¿Cómo? Haciendo click en el ícono de "ventana emergente" que se encuentra en el lado superior derecho del gadget.

Ahí se abrirá la ventana modal con todos los seguidores y podremos acceder a los datos del usuario.

Y habiendo aclarado todo esto podemos seguir disfrutando de nuestra Lista de Seguidores!

¡Solución a la Lista de Seguidores!

Ayer por la noche estaba tristemente resignado a dejar que el gadget de seguidores muriera lentamente, así que pensé que lo único que me quedaba por hacer era "adornar" un enlace a la lista de seguidores con un ícono, mismo que no encontré por ningún lado ya que curiosamente Google Friend Connect no tiene un ícono distintivo.

En fin, como no encontré el ícono por ningún lado entré a la página de Google Friend Connect para ver si hallaba una imagen más o menos simpática que pudiera usar como ícono.

Ahí me topé con un gadget de Alex Sponker, era una lista se seguidores en forma de iPhone, y pensé -¿Será posible que con este gadget funcione?

Copié el código, lo pegué en mi plantilla y... No, no funcionó.

Pero vi que había otro gadget de él, uno que simula ser una lista se seguidores dentro de un monitor. Lo pegué, y curiosamente ese sí funcionaba... Pero tenía un diseño poco atractivo para mi gusto además de un enlace grande de "Get this gadget"

Así que me puse a analizar el código en cuestión, eliminé una simple y sencilla línea y ¡voilà! ¡Se ve mi lista se seguidores!

Así que les diré la solución a la Lista de Seguidores para tener de vuelta ese gadget y hacer que se vea:

1. Primero debes entrar a Google Friend Connect.
2. Ahí haz click en el menú izquierdo sobre el nombre de tu blog al que quieres ponerle la lista de seguidores.
3. Ahora haz click en Examinar la galería de Gadgets.



4. Luego en Todos los gadgets.



5. A continuación verás una lista de gadgets, baja hasta al final y cuando encuentres un gadget en forma de pantalla (Screensaver) haz click en Obtener este gadget.



6. Ahí selecciona el ancho y alto de tu gadget así como los colores.
7. Cuando termines haz click hasta abajo en Generar código.
8. Copia el código y ve a Diseño > Elementos de la página > Añadir gadget > HTML/Javascript.
9. Pega el código sin guardar los cambios; revisa al final del código y verás una línea como esta:

<!-- Include the Google Friend Connect javascript library. -->
<script src="http://www.google.com/friendconnect/script/friendconnect.js" type="text/javascript"></script>
<!-- Define the div tag where the gadget will be inserted. -->
<div id="div-1581107394440882006" style="width:300px;border:1px solid #cccccc;"></div>
<!-- Render the gadget into a div. -->
<script type="text/javascript">
var skin = {};
skin['BORDER_COLOR'] = '#cccccc';
skin['ENDCAP_BG_COLOR'] = '#e0ecff';
skin['ENDCAP_TEXT_COLOR'] = '#333333';
skin['ENDCAP_LINK_COLOR'] = '#0000cc';
skin['ALTERNATE_BG_COLOR'] = '#ffffff';
skin['CONTENT_BG_COLOR'] = '#ffffff';
skin['CONTENT_LINK_COLOR'] = '#0000cc';
skin['CONTENT_TEXT_COLOR'] = '#333333';
skin['CONTENT_SECONDARY_LINK_COLOR'] = '#7777cc';
skin['CONTENT_SECONDARY_TEXT_COLOR'] = '#666666';
skin['CONTENT_HEADLINE_COLOR'] = '#333333';
google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
google.friendconnect.container.renderOpenSocialGadget(
{ id: 'div-1581107394440882006',
url:'http://www.sponks.com/gadgets/screensaver.xml',
site: '05983757033084872491',
'prefs':{"waitTime":"2","screenWidth":"282","useEffects":"1","rows":"3"}
},
skin);
</script>

Elimina SÓLO lo que está en color rojo, nada más. Guarda los cambios y ¡LISTO! ¡Tendras de vuelta tu Lista se Seguidores!

Lo he probado con Google Chrome 4.0266, Mozilla Firefox 3.57, Internet Explorer 8, Safari 4.0.4 y en todos funciona, en el único que sigue sin verse es en Opera.

Supongo que el conflicto está en la interfaz de la Lista de seguidores, es ahí donde se vuelve incompatible con Scriptaculous, no lo sé, ya que los expertos nos digan.

Por lo pronto sigo teniendo Scriptaculous y como pueden ver, mi Lista de Seguidores se ve de nuevo :)

Más información aquí

Imágenes del blog "bailando"

Pocos lo saben, pero algunos de mis primeros posts eran trucos de Google. Uno de ellos es un post titulado Google divertido, en esa entrada tengo un código con el cual si se pone en la barra de direcciones estando en la página de Google se puede ver "bailar" el logotipo de Google, vaya se mueve de un lado al otro.

Ayer Alex me dejó un comentario diciendo que probara el mismo código en el blog y ¡¡¡cuál fue mi sorpresa!!!

Mejor no les digo más, sólo copien este código, péguenlo en la barra de direcciones (sin salirse de Ciudad Blogger) y presionen la tecla ENTER y fíjense en la parte de arriba del blog:

javascript:R=0; x1=.1; y1=.05; x2=.25; y2=.24; x3=1.6; y3=.24; x4=300; y4=200; x5=300; y5=200; DI=document.images; DIL=DI.length; function A(){for(i=0; i-DIL; i++){DIS=DI[ i ].style; DIS.position='absolute'; DIS.left=(Math.sin(R*x1+i*x2+x3)*x4+x5)+"px"; DIS.top=(Math.cos(R*y1+i*y2+y3)*y4+y5)+"px"}R++}setInterval('A()',5); void(0);

¿Qué tal se ve? ¿quieren hacer la prueba en su blog? ¡Háganlo, funciona en prácticamente todas las páginas!

Acelerar el tiempo de actualización del feed

Muy seguido escucho a la gente decir -Mi feed no se actualiza; y se quejan porque el tiempo que llegan sus feeds es demasiado largo, esto es, que publican en la mañana una entrada (por decir algo) y puede tardar todo un día para que aparezca la actualización en los feeds. Un ejemplo puede verse en quienes han decidido enlazar la cuenta de Feedburner con Twitter, notarán que después de haber publicado la entrada en el blog tienen que esperar varias horas para que en Twitter aparezca la actualización.

Esto de debe a dos cosas, a la configuración del feed, y a que los diferentes servicios de feed tienen tiempos establecidos para verificar en los blogs si hay contenido nuevo.

Ambas cosas pueden controlarse para acelerar este proceso y no tener que esperar mucho entre el tiempo que se publica algo y el tiempo en el que ya pueden leerlo en el feed nuestros lectores.

Configuración del feed

Si estás suscrito tú mismo a tu feed a través del correo electrónico notarás que puede tardar mucho el tiempo que pasa para que te llegue un mail con la actualización de tu blog. Este tiempo puedes cambiarlo directamente en Feedburner; entra a tu cuenta de feed y haz click en Publicize. En el menú lateral derecho verás que dice Suscripciones por Email, un poco abajo de eso dice Delivery Options, haz click ahí.

Selecciona tu zona horaria y en donde dice Organice el envío de emails elige el horario en el que se enviarán las actualizaciones, por ejemplo, si eliges 11:00-13:00 significa que si escribes un post, quienes estén suscritos al feed a través del correo, recibirán la actualización entre las 11 de la mañana y la una de la tarde, esto según la zona horaria que hayas elegido antes.

Servicio de Ping

Los distintos servicios de feed tienen tiempos definidos para "revisar" en los blogs si hay contenido nuevo, es por eso que a veces puede tardar mucho en aparecer la actualización de lo que hemos publicado. Para acelerar este proceso podemos hacer uso de un servicio de ping.
"Hacer ping" significa que le avisaremos a todos los servicios de feed que hay algo nuevo publicado en el blog y que tienen que recopilar la información en ese instante, algo así como: -Te dejé un regalo en mi escritorio, pero para que sea tuyo debes pasar a recogerlo YA!

Supongo que hay varios servicios de ping, el que yo uso y me funciona muy bien es Total Ping. Lo único que debes hacer es lo siguiente: cada vez que publiques algo nuevo en tu blog entra a Total Ping y escribe el nombre de tu blog, la URL del blog y la URL de tu feed:

http://tublog.blogspot.com/feeds/posts/default

Selecciona todos los servicios a los que se les avisará, puedes marcar todos si gustas. Haz click en ¡Hacer ping! y listo. Verás que se empieza a informar a los distitos servicios que has escrito algo nuevo y en cuestión de minutos aparecerá la actualización en el feed!

Es muy probable que al final del reporte veas que dice que no se pudo avisar a X o Y servicio, esos no nos importan mucho, sólo cerciórate que el de Feedburner.com, My Yahoo.com, Bing.com, Bitacoras.com y Technorati.com se hayan enviado correctamente.

Con estas sencillas recomendaciones no tendrás que esperar tanto tiempo para que tus lectores puedan recibir las actualizaciones del feed de tu blog.

Actualizar el contenido del blog en Twitter con Feedburner

Twitter además de ser una red social para chismosos mantenerse comunicado, también es una excelente herramienta de promoción para tu blog.

Sólo que puede ser un poco tedioso tener que escribir un tweet cada vez que publicamos algo en el blog.

Si bien existen sitios que permiten enlazar las actualizaciones del blog con la cuenta de Twitter también se puede hacer con Feedburner, y a mi parecer es mucho mejor, ya que sigue siendo un servicio de Google y no tienes que estar creando cuentas adicionales.

¿Que para qué sirve?
Sirve para enlazar tu cuenta de Twitter con el feed de tu blog de modo de que cada vez que publiques algo en tu blog también se mande el tweet en tu Twitter con el título de la nueva entrada y el enlace.

¿Cómo se hace?

1. Entra a tu cuenta de Feedburner.
2. Haz click en la pestaña Publicize.
3. En el menú lateral izquierdo busca donde dice Socialize y haz click ahí.
4. Presiona el botón que dice Add a Twitter account, se abrirá una ventana solicitando tu permiso para enlazar las cuentas, haz click en Permitir.



5. Ahora verás que en tu cuenta de Feedburner ya aparece tu nombre de usuario de Twitter, selecciona las opciones que quieras; está en inglés pero no es difícil de entender.
6. Hasta el final de la página verás que hay un botón que dice Activar, presiónalo y listo.

Si tienes más blogs no es necesario repetir todos los pasos, sólo dirígete a Socialize y presiona Activar, tus datos y preferencias estarán guardados.

Con estos simples pasos podrás enlazar tu cuenta de Blogger con Twitter, así cada vez que publiques en tu blog se actualizará en Twitter automáticamente, sólo recuerda que no será instantáneo, tendrás que esperar a que Feedburner recopile la información de tu feed, pero en cuanto eso suceda aparecerá en tu Twitter la actualización.

Otra de las ventajas es que usa un acortador de URLs con lo cual tus enlaces estarán abreviados; el sistema que usan es goo.gl que es el servicio de acortamiento de URLs de Google.

10 lugares para poner Adsense en Blogger

En Blog and Web tienen una excelente explicación de 10 lugares dónde poner anuncios de Adsense en Blogger, los lugares son: Sidebar, entre posts, debajo del header, arriba de las entradas, bajo el título de la entrada (en página principal o entradas individuales), al pié de la entrada, dentro de la entrada, entre posts y comentarios y en el footer.
La explicación sobre dónde y cómo poner los anuncios de Adsense en el blog está muy clara por lo que no creo que tengan ningún problema en colocarlos.
Recuerden que cuando el código de Adsense se pone directamente en la plantilla primero hay que convertir el código en texto plano, para ello se puede usar un conversor como el de Blogcrowds.

Enlace | 10 lugares dónde poner anuncios de Adsense en Blogger

Imagen flotante con opción de cerrar

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 Diseño > 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='http://4.bp.blogspot.com/_qgZA1ny_dAs/S0jtqeCcWUI/AAAAAAAADkA/qLZkUMRn7FU/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.

Imagen flotante al azar

El otro día AlexTfe26 me compartió un código que algunos habían solicitado.

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 Diseño > Edición de HTML y antes de </body> pega esto:

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

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

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] = &quot;<img border='0' src='URL de la imagen' style='position:fixed; bottom:0; right:0;'/>&quot;

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.

Poner botón de Ir Arriba e Ir Abajo

Los botones de Subir y Bajar facilitan el acceso al contenido de la página, sobre todo cuando en la página principal hay muchas entradas o cuando una entrada tiene demasiados comentarios.
Vamos a ver dos formas de poner los botones de Ir Arriba e Ir Abajo, una es la forma "simple" y la otra tendrá un efecto deslizante.

Forma simple

Entra en Diseño > Edición de HTML y antes de </body> pega lo siguiente:

<a href='#'><img border='0' style='position:fixed; top:0; right:0;' src="URL de la imagen" title="Ir arriba" /></a>


<a href='#footer-wrapper'><img border='0' style='position:fixed; bottom:0; right:0;' src="URL de la imagen" title="Ir abajo" /></a>

Cambia la URL de la imagen donde se indica; el primer código corresponde al botón de Ir Arriba, el segundo al de Ir Abajo.

Efecto deslizante

Para que al subir y bajar tenga un efecto deslizante necesitaremos Scriptaculous, así que estando igual en la Edición de HTML pega antes de </head> el siguiente código:
NOTA: Si ya lo tienes en tu plantilla no es necesario pegarlo de nuevo.

<!-- Prototype y Scriptaculous-->
<script src='http://www.google.com/jsapi'/>
<script>
google.load(&quot;prototype&quot;,&quot;1.6.0.3&quot;);
google.load(&quot;scriptaculous&quot;, &quot;1.8.2&quot;);
</script>
<!-- Prototype y Scriptaculous-->

Ahora antes de </body> pega lo siguiente:

<a href='#outer-wrapper' onclick='new Effect.ScrollTo(&quot;outer-wrapper&quot;,{offset:-140}); return false'><img border='0' src='URL de la imagen' style='position:fixed; top:0; right:0;' title='Ir arriba'/></a>


<a href='#footer-wrapper' onclick='new Effect.ScrollTo(&quot;footer-wrapper&quot;,{offset:-140}); return false'><img border='0' src='URL de la imagen' style='position:fixed; bottom:0; right:0;' title='Ir abajo'/></a>

De igual modo hay que cambiar la URL de la imagen tomando en cuenta que el primer código es para el botón de Ir Arriba y el segundo para el de Ir Abajo.

ACTUALIZACIÓN:
En cualquiera de los dos métodos (simple o deslizante) si usas una plantilla nueva del Diseñador de plantillas de Blogger entonces tendrás que buscar esta línea:

<div class='body-fauxcolumns'>

Y cambiarla por esta otra:

<div id='outer-wrapper' class='body-fauxcolumns'>

Luego buscar esta línea:

<div class='content-cap-bottom cap-bottom'>

Y cambiarla por esta:

<div id='footer-wrapper' class='content-cap-bottom cap-bottom'>

Con eso funcionará también en esas plantillas.

Aquí les dejo unos íconos que pueden utilizar para sus botones.

---

Mostrar el primer post de forma diferente

Hace unos meses JMiur comentaba que Blogger había incluido una nueva etiqueta en sus códigos, <b:if cond='data:post.isFirstPost'>

isFirtsPost es un código que condiciona un evento cuando se trata del primer post del blog, es decir, el último que se ha publicado.

Ayer recordaba que cuando publiqué la entrada de cómo dejar un post siempre arriba del blog alguien me dijo por correo que aunque era muy efectivo el método para dejar la entrada siempre arriba no era muy útil para todos, pues la idea de muchos es dejar una entrada siempre arriba a modo de bienvenida o presentación, pero si esa primera entrada se ve igual al resto de las entradas entonces deja de parecer una presentación.

Así que me puse a investigar un poco y me encontré en Blogger Dikas una solución no sólo para quienes quieren tener una entrada siempre arriba y que tenga un estilo diferente, sino para quien quiera que el primer post se pueda diferenciar del resto de las entradas.

Puedes ver un ejemplo en este blog de pruebas, verás que el primer post tiene un color de fondo, borde y texto diferente.

Antes de hacer este hack haz un respaldo de tu plantilla, luego entra en Diseño > Edición de HTML y con la casilla marcada de Expandir plantillas de artilugios busca esta línea:

<b:include data='post' name='post'/>

Selecciónala y sustitúyela por esto:

<b:if cond='data:post.isFirstPost'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<div id='first'>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
<div class='first-body'>
<p><data:post.body/></p>
</div>
<div class='post-footer'>
<span class='post-comment-link'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</span>
</div>
</div>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

Ahora vamos con los estilos, que es la parte que se encargará de darle un aspecto diferente.
Antes de ]]></b:skin> pega lo siguiente:

/* Primer post
----------------------------------------------- */
#first { /* Estilos del contenedor del primer post */
margin: 0px 0px 10px 0px;
padding: 0px;
float: left;
background: #F5A9D0;
border: 1px solid #1b1b1b;
}

.first-body { /* Estilos para el texto del post */
margin: 0px;
padding: 10px 10px;
line-height:1.5em;
text-align: justify;
color: #2E2E2E;
}

#first h3 { /* Estilos para el título del post */
display:block;
margin: 10px auto;
width: 95%;
font-size: 20px;
padding: 0px 0px 4px 0px;
font-family: 'Palatino Linotype';
font-weight: bold;
text-align:center;
line-height: 1.4em;
color: #f5f5f5;
}

#first h3 a, #first h3 a:visited { /* Color del título */
color: #DF0174;
}

#first h3 a:hover { /* Color del título al pasar el cursor */
color: #fff;
}

.first-body img { /* Estilo para las imágenes */
padding:10px;
background:#fff;
border: 0px;
}

#first .comment-link { /* Estilo para el link de los comentarios */
float:right;
padding: 0px 5px 15px 0px;
}

Ahí puedes cambiar los estilos que quieras, el color del fondo, el color del texto, del título, etc. Puedes agregar o quitar todos los estilos que desees; ayúdate con las anotaciones hechas a los lados para identificar a qué corresponde cada estilo.

De esta forma tendrás el primer post del blog mostrándose de una forma distinta al resto de las demás entradas.

Sexy Drop Down Menu con JQuery y CSS

Sexy Drop Down Menu es un menú hecho con JQuery y CSS y si no me equivoco es una creación de Soh Tanaka.

Se trata de un menú horizontal muy elegante que tiene un efecto deslizante en sus pestañas, y que además, para ver los sub menús es necesario presionar una flechita en color verde.

Puedes ver un ejemplo de este menú en este blog de pruebas.

Para colocar este menú horizontal en tu blog agregamos la parte CSS correspondiente antes de ]]></b:skin>

/* Sexy Drop Down Menu
----------------------------------------------- */
ul.topnav {
list-style: none;
padding: 0 20px;
margin: 0;
float: left;
width: 100%;
background: #222;
font-size: 12px;
background: url(http://2.bp.blogspot.com/_dsEG33PDaHw/S0JD4Lm1ZiI/AAAAAAAAAC8/HOlaXxwCcqs/s320/topnav_bg.gif) repeat-x;
}
ul.topnav li {
float: left;
margin: 0;
padding: 0 15px 0 0;
position: relative;
}
ul.topnav li a {
padding: 10px 5px;
color: #fff;
display: block;
text-decoration: none;
float: left;
}
ul.topnav li a:hover {
background: url(http://4.bp.blogspot.com/_dsEG33PDaHw/S0JD4vCBd1I/AAAAAAAAADE/suoyI_vCxm8/s320/topnav_hover.gif) no-repeat center top;
}
ul.topnav li span {
width: 17px;
height: 35px;
float: left;
background: url(http://4.bp.blogspot.com/_dsEG33PDaHw/S0JD36wwAGI/AAAAAAAAAC0/2DVqHMgRPd0/s320/subnav_btn.gif) no-repeat center top;
}
ul.topnav li span.subhover {
background-position: center bottom;
cursor: pointer;
}
ul.topnav li ul.subnav {
list-style: none;
position: absolute;
left: 0; top: 35px;
background: #333;
margin: 0; padding: 0;
display: none;
float: left;
width: 170px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
border: 1px solid #111;
}
ul.topnav li ul.subnav li {
margin: 0; padding: 0;
border-top: 1px solid #252525;
border-bottom: 1px solid #444;
clear: both;
width: 170px;
}
html ul.topnav li ul.subnav li a {
float: left;
width: 145px;
background: #333 url(http://1.bp.blogspot.com/_dsEG33PDaHw/S0JD3qKKC0I/AAAAAAAAACs/9PvbBaVNPqg/s320/dropdown_linkbg.gif) no-repeat 10px center;
padding-left: 20px;
}
html ul.topnav li ul.subnav li a:hover {
background: #222 url(http://1.bp.blogspot.com/_dsEG33PDaHw/S0JD3qKKC0I/AAAAAAAAACs/9PvbBaVNPqg/s320/dropdown_linkbg.gif) no-repeat 10px center;
}

Luego buscamos la etiqueta </head> y arriba de ella pegamos el script:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){

$(&quot;ul.subnav&quot;).parent().append(&quot;<span/>&quot;); //Only shows drop down trigger when js is enabled - Adds empty span tag after ul.subnav

$(&quot;ul.topnav li span&quot;).click(function() { //When trigger is clicked...

//Following events are applied to the subnav itself (moving subnav up and down)
$(this).parent().find(&quot;ul.subnav&quot;).slideDown(&#39;fast&#39;).show(); //Drop down the subnav on click

$(this).parent().hover(function() {
}, function(){
$(this).parent().find(&quot;ul.subnav&quot;).slideUp(&#39;slow&#39;); //When the mouse hovers out of the subnav, move it back up
});

//Following events are applied to the trigger (Hover events for the trigger)
}).hover(function() {
$(this).addClass(&quot;subhover&quot;); //On hover over, add class &quot;subhover&quot;
}, function(){ //On Hover Out
$(this).removeClass(&quot;subhover&quot;); //On hover out, remove class &quot;subhover&quot;
});

});
</script>

Por último coloca en un elemento HTML/Javascript el siguiente código:

<ul class="topnav">
<li><a href="URL del enlace">Pestaña1</a></li>
<li>
<a href="URL del enlace">Pestaña2</a>
<ul class="subnav">
<li><a href="URL del enlace">Sub Pestaña</a></li>
<li><a href="URL del enlace">Sub Pestaña</a></li>
<li><a href="URL del enlace">Sub Pestaña</a></li>
</ul>
</li>
<li>
<a href="URL del enlace">Pestaña 3</a>
<ul class="subnav">
<li><a href="URL del enlace">Sub Pestaña</a></li>
<li><a href="URL del enlace">Sub Pestaña</a></li>
<li><a href="URL del enlace">Sub Pestaña</a></li>
<li><a href="URL del enlace">Sub Pestaña</a></li>
</ul>
</li>
<li><a href="URL del enlace">Pestaña 4</a></li>
<li><a href="URL del enlace">Pestaña 5</a></li></ul>

Arrastra el menú debajo de la cabecera y cambia las URL de los enlaces donde se indica.
Si quisieras agregar más pestañas sólo agrega antes de </ul> esta línea:

<li><a href="URL del enlace">Otra Pestaña</a></li>

Y si quieras agregar sub pestañas entonces agrega esto:

<li>
<a href="URL del enlace">Otra Pestaña</a>
<ul class="subnav">
<li><a href="URL del enlace">Sub Pestaña</a></li>
<li><a href="URL del enlace">Sub Pestaña</a></li>
<li><a href="URL del enlace">Sub Pestaña</a></li>
</ul>
</li>

Es un menú muy elegante parecido al menú horizontal deslizante que antes habíamos visto, pero con la particularidad de que este tiene el botón para deslizar las sub pestañas.

Agregar banners de 125 x 125 en la sidebar

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"/></a>
<a href="URL del enlace"><img src="URL de la imagen"/></a>
<a href="URL del enlace"><img src="URL de la imagen"/></a>
<a href="URL del enlace"><img src="URL de la imagen"/></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.