Tutoriales blogger!

Enmarcar y separar comentarios en Blogger

2018-01-09T07:18:00.002-08:00

Los comentarios son una parte fundamental de un blog, pues en ellos se ve reflejada la opinión de los lectores respecto a una entrada o nuestro sitio, por lo tanto es importante dedicarle un poco de nuestro tiempo para hacer de esta área un espacio presentable, accesible y ordenado.

Y si de orden se trata entonces es necesario que cada comentario pueda identificarse donde empieza y dónde termina, de lo contrario se convierte en un revuelto de letras del cual el lector puede salir huyendo. Veamos pues algunas formas de darle un poco de orden para delimitar el área de cada comentario.

El primer método es el más sencillo, y se trata de poner un borde debajo de los comentarios, esto es para separar cada comentario del blog de una forma simple pero efectiva.

Para agregar este separador sencillo sólo entra en Diseño | Edición de HTML y antes de
]]></b:skin> pega lo siguiente:

#comments-block .comment-footer {
border-bottom:1px solid #240B3B; /* Borde de los comentarios */
}
.comment-timestamp { /* Fecha de los comentarios */
font-style:italic;
font-size:9px;
}

Si usas los comentarios anidados entonces agrega lo siguiente:

.comments .comment-block {
padding-bottom:10px;
border-bottom:1px solid #240B3B; /* Borde de los comentarios */
}
.comments .comments-content .datetime { /* Fecha de los comentarios */
font-style:italic;
font-size:9px;
}

Podemos hacer lo mismo pero que el separador de comentarios sea una imagen.

En ese caso el código que has de pegar es el siguiente:

#comments-block .comment-footer {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjL9a8ag7AscM3JCi41E9uP_qP9r_UFxwnxn62cxsYu0-yxrV_2JXy2sz2cywmuM774rSpOU_NvEvkxn9H2PhMDAN7VbAT15oCAgqPWY_J9DT8t6D8uWPe5Vo_GOHEvUGzlbAdTrMYmf14/);
background-repeat:no-repeat;
background-position:center bottom;
height:70px;
}
.comment-timestamp { /* Fecha de los comentarios */
font-style:italic;
font-size:9px;
}

Y si usas los comentarios anidados deberás usar este código:

.comments .comment-block {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjL9a8ag7AscM3JCi41E9uP_qP9r_UFxwnxn62cxsYu0-yxrV_2JXy2sz2cywmuM774rSpOU_NvEvkxn9H2PhMDAN7VbAT15oCAgqPWY_J9DT8t6D8uWPe5Vo_GOHEvUGzlbAdTrMYmf14/);
background-repeat:no-repeat;
background-position:center bottom;
padding-bottom:20px;
height:70px;
}
.comments .comments-content .datetime { /* Fecha de los comentarios */
font-style:italic;
font-size:9px;
}

La URL que está en color azul es la imagen que puedes cambiar por la que gustes, sólo recuerda que en el height deberás establecer la altura de la imagen más unos 20px más, por ejemplo, si el alto de la imagen es de 50px entonces el valor será de 70px
Esto es únicamente para que la imagen no se encime a la fecha de los comentarios.

Pero igual podemos darle más estilos a cada comentario, por ejemplo enmarcar los comentariosañadiendo un color de fondo y un borde (No aplica para comentarios anidados).

Para conseguir este tipo de estilo marca la casilla Expandir plantillas de artilugios ahí mismo en Diseño | Edición de HTML y busca esta línea:

<b:loop values='data:post.comments' var='comment'>

Debajo de ella agrega esto:

<div class='comentarios-cb'>

Luego busca un poco más abajo el siguiente </b:loop> que encuentres y justo arriba de él agrega esto:

</div>

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

.comentarios-cb {
background:#E6E6E6; /* Color de fondo */
border-top:1px solid #240B3B; /* Borde superior */
border-bottom:1px solid #240B3B; /* Borde inferior */
margin-bottom:20px;
}
.comment-body {
padding:10px;
color:#000; /* Color de los comentarios */
}
.comment-timestamp { /* Fecha de los comentarios */
font-style:italic;
font-size:9px;
padding-right:10px;
padding-left:10px;
}
#comments-block .comment-footer {
margin-bottom:5px;
}
#comments-block .avatar-image-container {
float:left;
position:static;
margin-right:15px;
margin-left:5px;
margin-top:5px;
}

¿Y cómo se vería con bordes redondeados?

El procedimiento es el mismo que el anterior sólo que el código que habremos de pegar antes de ]]></b:skin> será este:

.comentarios-cb {
background:#E6E6E6; /* Color de fondo */
border:1px solid #240B3B; /* Borde */
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
margin-bottom:20px;
}
.comment-body {
padding:10px;
color:#000; /* Color de los comentarios */
}
.comment-timestamp { /* Fecha de los comentarios */
font-style:italic;
font-size:9px;
padding-right:10px;
padding-left:10px;
}
#comments-block .comment-footer {
margin-bottom:5px;
}
#comments-block .avatar-image-container {
float:left;
position:static;
margin-right:15px;
margin-left:5px;
margin-top:5px;
}

(Los bordes redondeados en Internet Explorer no funcionan con CSS)

En cualquiera de los casos se puede cambiar el color de fondo, borde, etc. en las partes que tienen anotaciones en color verde.

La /* Fecha de los comentarios */ puede cambiarse de formato en Configuración | Comentarios | Formato de hora de los comentarios.
Pero de igual modo podemos ocultarla, sólo basta con agregar debajo de .comment-timestamp { esto:

display:none;

Sólo ten en cuenta que si ocultas la fecha también se ocultará el icono para eliminar los comentarios.

En estos dos últimos estilos se especifica el área donde se cambia el color de los comentarios, ahí se pueden añadir otros estilos como el tamaño de la letra, tipo de fuente, etc.
En el caso de los dos primeros métodos sólo basta con agregar a ese código este otro fragmento para darle formato al texto de los comentarios:

.comment-body {
color:#000; /* Color de los comentarios */
}

Haciendo algunas de estas modificaciones los comentarios se verán más ordenados y serán más fáciles de identificar y leer por los lectores.

Poner mensaje en entradas con más de 200 comentarios

2018-01-09T07:18:00.001-08:00

Quienes tienen entradas con más de 200 comentarios sabrán que no se muestran todos los comentarios en la misma página, sino que Blogger divide los comentarios en páginas por bloques de 200 en 200.

¿Y cómo sabe el lector si está viendo el total de comentarios? Pues Blogger añade de forma automática unos pequeños enlaces al inicio y al final de los comentarios, pero estos enlaces son tan pequeños que la mayoría de las veces pasan desapercibidos por los lectores y cuando el lector regresa a la entrada para ver si hay una respuesta a su comentario no ve todos los comentarios, sino el último que es el #200.

Lo que haremos será poner un mensaje al final de los comentarios para que el lector pueda saber que hay más comentarios y pueda encontrar el resto de ellos.

Este mensaje sólo aparecerá en las entradas con más de 200 comentarios, en el resto de las entradas que tengan menos comentarios no será visible.

El procedimiento es sencillo, sólo entra en Diseño | Edición de HTML marca la casilla Expandir plantillas de artilugios y antes de ]]></b:skin> pega lo siguiente:

.paging-control-container p {
color: #2E2E2E;
font-size: 18px;
font-family: Georgia, Times New Roman;
font-weight: normal;
text-align: center;
margin: 0 0 20px;
padding: 10px 0 0;
}

Ahora busca este código:

<b:if cond='data:post.commentPagingRequired'>
<span class='paging-control-container'>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>
<data:post.oldestLinkText/>
</a>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
<data:post.olderLinkText/>
</a>
 
<data:post.commentRangeText/>
 
<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
<data:post.newerLinkText/>
</a>
<a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>
<data:post.newestLinkText/>
</a>
</span>
</b:if>

IMPORTANTE, hay dos códigos iguales a ese, el que debes localizar es el que se encuentra arriba de esta etiqueta:

<p class='comment-footer'>

Ya que lo has encontrado agrega lo que está en color rojo:

<b:if cond='data:post.commentPagingRequired'>
<span class='paging-control-container'>
<p>Esta entrada tiene más de 200 comentarios, usa los links de abajo para ver el resto de los comentarios</p>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>
<data:post.oldestLinkText/>
</a>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
<data:post.olderLinkText/>
</a>
 
<data:post.commentRangeText/>
 
<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
<data:post.newerLinkText/>
</a>
<a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>
<data:post.newestLinkText/>
</a>
</span>
</b:if>

Ese es el texto que aparecerá en las entradas con más de 200 comentarios, puedes cambiarlo por cualquier otro texto o una imagen si así lo deseas.

El primer código que pegamos son los estilos de ese texto, ahí puedes modificar el tamaño de la letra, el color, etc.

Después veremos cómo personalizar esos enlaces, por hoy, es todo.

Problemas con los comentarios y número de entradas

2018-01-09T07:18:00.000-08:00

Desde hace ya varios meses muchos blogs han tenido problemas tanto con el número de entradas que se muestran en el blog así como con los comentarios que desaparecen.

El primero surgió desde diciembre del año pasado y sucede con los comentarios. Según a palabras de Irene H, empleada de Google, Blogger está actualizando su plataforma y los comentarios hechos desde diciembre de 2009 hasta ahora, pueden desaparecer momentáneamente.

Esto no sucede en todos los blogs, pero sí es común que de repente veas en una entrada 10 comentarios cuando en realidad tenías 20 (por decir algo)

O que en el link de comentarios diga que hay tantos comentarios cuando en realidad puede haber una cantidad mayor.

Y otro más, que cuando escribimos un comentario éste no aparece o marca un error al publicarlo.

Primero, ya sabemos que Blogger está actualizando sabe Dios qué tantas cosas, así que hasta cierto punto es "normal" que sucedan estos problemas, así que no hay que desesperarse, más bien, esperarse a que Blogger termine de hacer lo que tenga que hacer.

Segundo, si tu blog ha perdido muchos comentarios y ya pasaron varios días sin que reaparezcan expón tu caso en el siguiente hilo del foro de ayuda de Blogger dejando la dirección de tu blog, así como de las entradas donde has perdido los comentarios:

http://www.google.com/support/forum/p/blogger/thread?tid=41d4b8c986d9a417&hl=es

Y tercero, si al publicar un comentario en un blog (incluyendo este) ves que tu comentario no se ve, no es necesario volverlo a escribir, sólo fíjate que abajo del formulario de comentarios aparezca la leyenda 'Se ha publicado tu comentario.'

Una vez que veamos ese mensaje tendremos la certeza de que el comentario ha sido publicado. Algunas veces tarda unos minutos en aparecer, en otras ocasiones tarda varias horas, pero aparecerá, a menos claro, que el autor del blog tenga moderados los comentarios y no lo publique.

El otro problema es con el número de entradas que se muestran en el blog.
Como Rosa ya nos había avisado antes, desde el mes de febrero Blogger está haciendo experimentos para implementar la autopaginación. Esto ha traído el problema de que, el número de entradas a mostrar que han configurado no es el que corresponde en el blog, así que puede sucederte que si tienes configurado para mostrar (por ejemplo) 9 entradas sólo aparezcan 3 o 4 o X número de entradas distinto al programado.

Al igual que el otro problema, Blogger sugiere que te dirijas al siguiente hilo del foro de ayuda:

http://www.google.com/support/forum/p/blogger/thread?tid=4d53800d9f2d74f0&hl=es

Ahí deja un comentario con la dirección de tu blog, especifica si la plantilla es de Blogger o de terceros y si se ha modificado desde la Edición de HTML, el número de entradas que has configurado desde Configuración > Formato, y el número de entradas que se muestran actualmente, y además especifica si utilizas la opción de Leer más.

Mientras tanto y aunque ya haya pasado mucho tiempo sin que haya una solución en concreto recuerda que todos los inconvenientes que nos pueda dar ahora las actualizaciones de Blogger se supone que serán para tener más ventajas en el blog, así que no hay más remedio que esperar.

Mostrar mayor número de comentarios al "Cargar más..."

2018-01-09T07:17:00.001-08:00

En el anterior sistema de comentarios Blogger paginaba los comentarios, agrupándolos de 200 en 200. Este valor no se podía ni se puede cambiar, y para acceder a ellos había que hacer click en los enlaces de paginación para que cargara de nuevo la entrada con otros 200 comentarios.

En el nuevo sistema de comentarios anidados los comentarios cargan en la misma página, y cuando tenemos más de 200 comentarios en una entrada entonces debemos hacer click en "Cargar más..." para que se muestren más comentarios.

El inconveniente es que carga los comentarios de 50 en 50, así que quienes tienen entradas con muchísimos comentarios pierden algo más de tiempo en poder ver el último comentario publicado.

Por suerte, como este nuevo sistema de comentarios usa Javascript, y está insertado en nuestra plantilla, podemos modificar ese valor, de modo que podamos elegir cuántos comentarios mostrará en cada carga.

Sólo tenemos que entrar en la Edición HTML de la plantilla, marcar la casilla Expandir plantillas de artilugios y buscar esta línea:

var url = config.feed + '?alt=json&v=2&orderby=published&reverse=false&max-results=50';

Ese 50 en color rojo es el número de entradas que se mostrarán en cada carga, así que puedes cambiarlo por otro valor, por ejemplo 200

De esa forma, cuando quieras ver el resto de los comentarios, te aparecerán de 200 en 200 (suponiendo que lo hayas puesto en 200) en lugar de 50 en 50, con lo que ahorrarás algunos clicks y algo de tiempo.

Reducir el espacio debajo de los comentarios

2018-01-09T07:17:00.000-08:00

No es que sea un problema, pero algunos encuentran esteticamente poco atractivo el espacio que hay entre el formulario de comentarios y los enlaces de navegación. No sé si sea mucho o poco espacio pues eso viene siendo relativo, lo cierto es que si no te gusta tener todo ese espacio no tienes que vivir con ello pues puedes modificarlo.

Para reducir el espacio que hay debajo de los comentarios ingresa a la Edición HTML de la plantilla, marca la casilla Expandir plantillas de artilugios y busca este código:

<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>
<b:else/>
<h4 id='comment-post-message'><data:postCommentMsg/></h4>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
</b:if>

Busca el segundo height que se muestra en color rojo y cambia su valor por uno más bajo, por ejemplo height='260'
Y habiendo hecho eso el espacio se habrá reducido.

Si se te dificulta encontrar el código guíate por la línea en color gris, pero toma en cuenta el height del cual hablamos aparece dos veces en ese código, y el que hay que modificar es el segundo.

Insertar imágenes y vídeos en los comentarios de Blogger

2018-01-09T07:16:00.000-08:00

¿Te ha pasado que quieres decir algo pero las palabras no son suficientes? A veces eso pasa cuando queremos comentar algo en algún blog, quizá un meme pueda resumir nuestra opinión, o un video pueda complementar nuestro comentario. Por desgracia el formulario de comentarios de Blogger no incluye la opción de subir fotos o incrustar vídeos, pero que Blogger no lo habilite no significa que no se pueda.

Lo que veremos en esta entrada es justamente eso, cómo insertar imágenes y vídeos en los comentarios del blog de una manera tan sencilla que sólo requiere de un paso.
El método que usaremos es similar a lo que hacemos cuando agregamos emoticons en los comentarios, de manera que lo que escribimos en el comentario se reemplaza por otro código, en este caso por el HTML necesario para mostrar las imágenes y los vídeos.

Puedes verlo funcionando en en este blog de pruebas.
Para insertar una imagen usa este código:

[img]URL de la imagen[/img]

Para insertar un video de YouTube o Vimeo usa este código:

[video]URL del video[/video]

Asombroso, ¿no? Y tal como lo prometí, la instalación es de un solo paso. Únicamente entra en Plantilla | Edición de HTML y antes de </body> pega lo siguiente:

<script>
//<![CDATA[
// Insertar imágenes y videos en los comentarios (ciudadblogger.com)
function InsertarImagenVideo(id) {
var IDelemento = document.getElementById(id),
sustituir = IDelemento.innerHTML;
sustituir = sustituir.replace(/\[img\](.[^\]]*)\[\/img\]/ig, "<img class='img-comentarios' src='$1'\/>");
sustituir = sustituir.replace(/\[video\]https:\/\/www\.youtube\.com\/embed\/(.*?)\[\/video\]/ig, "<iframe class='vid-comentarios' src='https://www.youtube.com/embed/$1'><\/iframe>");
sustituir = sustituir.replace(/\[video\](https:\/\/youtu\.be\/|https:\/\/www\.youtube\.com\/watch\?v\=)(.*?)\[\/video\]/ig, "<iframe class='vid-comentarios' src='https://www.youtube.com/embed/$2'><\/iframe>");
sustituir = sustituir.replace(/\[video\](http:\/\/youtu\.be\/|http:\/\/www\.youtube\.com\/watch\?v\=)(.*?)\[\/video\]/ig, "<iframe class='vid-comentarios' src='https://www.youtube.com/embed/$2'><\/iframe>");
sustituir = sustituir.replace(/\[video\](http:\/\/player\.vimeo\.com\/video\/)(.*?)\[\/video\]/ig, "<iframe class='vid-comentarios' src='http://player.vimeo.com/video/$2'><\/iframe>");
document.getElementById(id).innerHTML = sustituir;} InsertarImagenVideo('comment-holder');
//]]>
</script>
<style>

</style>

Debajo del script verás que también hemos colocado unos estilos, estos estilos son para darle un poco de personalización a las imágenes y a los vídeos que se mostrarán en los comentarios, como el borde, la sombra, y el tamaño. En color verde se especifica a qué corresponde cada una de esas áreas. Por supuesto puedes añadir más estilos si lo deseas.

Para que tus lectores sepan que pueden agregar imágenes y vídeos puedes poner un aviso de ello, esto puedes hacerlo desde Configuración | Entradas y comentarios | Mensaje del formulario de comentarios.

Cómo insertar imágenes y videos
En el caso de las imágenes, tú y los comentaristas deberán usar este código:

[img]URL de la imagen[/img]

Y en el caso de los vídeos, tanto de YouTube o Vimeo se usará este código:

[video]URL del video[/video]

En ambos casos deberás poner la URL de la imagen (o el video) donde corresponde.

Cómo obtener la URL de los videos

En YouTube puedes copiar la URL que aparece en la barra de direcciones del navegador cuando te encuentres viendo un video.
También puedes usar la URL que aparece en "Comparte este video".
O también puedes copiar la URL que aparece en el código de inserción dentro de "Insertar vínculo".
Todas estas URLs son válidas para usarse en los comentarios:

https://www.youtube.com/watch?v=GfxAEl15pDs

http://youtu.be/GfxAEl15pDs

https://www.youtube.com/embed/GfxAEl15pDs

Es decir, las que tienen el término watch, las que tienen el acortador youtu.be, y las que incluyen el término embed. Cualquiera de ellas funcionará.

Consideraciones finales.

Este método es únicamente para plantillas que tengan comentarios anidados, o sea, con opción de "Responder". Si tu blog no tiene la opción de "Responder" no funcionará.
Es necesario que los comentarios se muestren debajo de la entrada, y no en ventana emergente, página completa, etc.
Se admiten todos los formatos de imágenes convencionales (JPG, PNG, GIF).
En el caso de los vídeos se aceptan vídeos de YouTube y Vimeo.
Ten en cuenta que la inclusión de imágenes y vídeos en los comentarios pueden reducir la velocidad de carga del blog.

Este tipo de trucos puede resultar muy atractivo y útil en muchos blogs, pero siempre con moderación para no abusar con el número de imágenes y vídeos que podrían ralentizar la carga. Si se le da un buen uso, este tipo de opciones podría mejorar la experiencia del lector al momento de interactuar con el autor y con los demás comentaristas del blog.

Mostrar archivos Powerpoint y PDF en el blog

2018-01-07T10:47:00.000-08:00

A veces es necesario mostrar ciertos documentos en el blog como presentaciones, ebooks, presentación de fotos, etc.

Blogger por defecto no tiene la opción de subir estos archivos para mostrarlos tal cual, así que tendremos que apoyarnos en un servicio externo que nos permita mostrar este tipo de archivos.

Se trata de SlideShare, un servicio gratuito online que nos permite subir archivos PPS y PDF para luego poder compartirlos en la web.

Primero deberás abrir una cuenta en SlideShare, y luego hacer el click en Upload localizado en el menú de arriba.
A continuación haz click en el botón Browse and select files... y elige el archivo de Powerpoint (PPS) o de Acrobar Reader (PDF) que vas a subir (no más de 100 MB por archivo).
Una vez que haya cargado el archivo podrás editar el título, tags, descripción y elegir si se permite la descarga del archivo.
Cuando termines presiona el botón Publish y dirígete a My Slidespace localizado también en el menú de arriba.
Estando ahí, haz click sobre el archivo que deseas compartir y del lado derecho verás que dice Embed, haz click ahí y copia el código.

Ese código lo pegas en un post y listo, tus presentaciones o PDFs estarás visibles y al alcance de tus lectores.

Enlace: SlideShare

Acortadores de URLs para todos los gustos

2018-01-07T10:46:00.001-08:00

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/030qw

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
Ejemplo |

http://www.hugeurl.com/?YjdjZDNlYjRlYjZjMzMxMjVhNDY4MWZhZjAy
NmY3YmImMTUmVm0wd2QyUXlVWGxWV0d4V1YwZDRWMVl3WkRSWFJteFZVMjA1
VjAxV2JETlhhMk0xVmpGYWMySkVUbGhoTWsweFdWZDRTMk14WkhGUmJGWlhZ
a2hDVVZacVFtRlpWMDE1VTJ0V1ZXSkhhRzlVVmxaM1ZsWmFkR05GWkZwV01E
RTFWVEowVjFaWFNraGhSemxWVmpOT00xcFZXbUZqVmtaMFVteFNUbUY2UlRG
V1ZFb3dWakZhV0ZOcmFHaFNlbXhXVm0weGIxSkdXbGRYYlVaclVqRmFTRll5
TVRSVk1rcElaSHBHVjJFeVVYZFpla3BIWXpGT2RWVnRhRk5sYlhoWFZtMXdU
MVF3TUhoalJscFlZbFZhY2xWcVFURlNNWEJHVjJ4T1ZXSkdjRlpXYlhSM1Zq
SktWVkpZWkZwV1JWcHlWVEJhVDJOc2NFaGpSbEpUVmxoQ1dsWnJXbGRaVjFG
NFZHdGtWbUpHV2xSWmJGWmhZMVphZEdSSFJrNVNiRm93V2xWYVQxWlhTbFpY
VkVwV1lrWktTRlpxUm1GU2JVbDZXa1prYUdFeGNHOVdha0poVkRKT2RGTnJa
RlJpVjNoVVZGY3hiMWRzV1hoYVJGSnBUV3RzTTFSVmFHOVhSMHBJVld4c1dt
SkdXbWhaTW5oWFl6RldjbHBHYUdsU00xRjZWakowVTFVeFduSk5XRXBxVWxk
NGFGVXdhRU5UUmxweFUydGFiRlpzV2xwWGExcDNWakZLVjJOSWJGZFdSVXBv
VmtSS1QyTXlUa1poUjNCVFlrVndWVlp0ZUc5Uk1XUnpWMjVLV0dKSFVtOVVW
bHBYVGxaYVdFNVZPV2hpUlhBd1ZsZDRjMWR0U2tkWGJXaGFUVlp3ZWxreWVH
dGtSa3AwWlVaa2FWWnJiekZXYlhCS1RWZEZlRmRZWkU1V1ZscFVXVlJHZDFZ
eGJISlhhM1JUVW14d2VGVldhRzloTVZwelYycEdWMDF1YUdoWlZXUkdaVWRP
UjJKR2FHaE5WbkJ2Vm10U1MxUXlVa2RVYmtwaFVteEtjRlpxVG05WFZscFlZ
MFU1YVUxWFVraFdNalZUVkd4T1NGVnVUbFpoYTBwNlZHdGFWbVZYVWtoa1Iy
aFhZWHBXU0ZacVNqUlZNV1IwVTJ0b2FGSnNTbGhVVmxwM1YwWnJlRmRyZEdw
aVZrcElWbGQ0YTJGV1NuUlBWRTVYVFc1b1dGbHFTa1psUm1SWldrVTFWMVpz
Y0ZWWFZsSkhaREZrUjJKSVNtRlNlbXh4V1d0YWQyVkdWWGxrUjBacFVteHdl
bFl5ZUhkWFIwVjRZMGhLV2xaWFVrZGFWV1JQVWpKS1IyRkhhRTVXYmtKMlZt
MTBVMU14VVhsVmEyUlVZbXR3YUZWdE1XOWpSbHB4VkcwNVYxWnRVbGhXVjNN
MVZXc3hjMU51Y0ZkTmFsWlVWa2Q0YTFOR1ZuTlhiRlpYVFRGS05sWkhlR0ZX
TWxKSVZXdG9hMUp0VWs5WlZFNURUbFphU0dWSFJtcE5WMUl3VlRKMGIyRkdT
bk5UYkdoVlZsWndNMVpyV21GalZrcDBaRWQwVTJFelFYZFhiRlpoWVRKR1Yx
ZHVTbWxsYTFwWVdXeG9RMU14Y0VWUlZFWllVbXR3ZVZkcldtOWhWMFkyVm01
b1YxWkZTblpWVkVaelZqRldjMWRzYUdsV1ZuQjZWMWQwWVdReVZrZFdXR3hy
VWpCYWNGVnRlSGRsYkZWNVpVaGtXR0pHY0ZoWk1HaExWakpHY2xkcmVGZGhh
M0JRVldwS1MxSXhjRWRhUlRWT1VsaENTMVpxUm1GVk1VMTRWbGhvV0ZkSGFG
bFpiWGhoVmpGc2MxcEhPVmRTYlhoYVdUQmFhMkpIU2toVmJHeGhWbGROTVZs
V1ZYaFhSbFp5WVVaa1RtRnNXbFZXYTJRMFlURk9SMVp1VGxoaVJscFlWRlJH
UzA1c1draGtSMFphVm0xU1NWWlhkRzloTVVwMFlVWlNWVlpXY0dGVVZscGhZ
ekZ3UlZWdGNFNVdNVWwzVmxSS01HSXlSa2RUYms1VVlrZG9WbFp0ZUhkTk1X
eFdWMjVLYkZKdFVubFhhMXByVmpKRmVsRnFXbGRoTWxJMlZGWmFhMUl4VG5O
WGJYQlRWak5vV1ZkWGVHOVJNVkpIVlc1S1dHSkZjSE5XYlhSM1pWWmtjbGR0
T1doV01Ga3lWbTAxYjFZeFdrWlRibHBXVmtWYWVsWnFSbGRqTVdSellVZHNh
VlpyY0RaV01XUXdXVmROZDAxSWFGaFhSM2hQVm14a1UxWXhVbGhrU0dSVFRW
WktlbGxWYUd0WFIwcEhZMFpvV2sxR1NsQldNbmhoVjBaV2NscEhSbGRXTVVw
UlZsZHdSMVl5VFhsU2EyaHBVbXMxY0ZVd1ZrdE5iRnB4VW0xR1ZrMVZiRFZW
YkdodlYwWmtTR1ZHV2xwV1JWb3pXVlZhVjJOV1RuUlBWbVJUWWtWd1dsWkhl
R3BPVmxsNFYyNU9hbEpYYUZoV2FrNVNaREZzVjFaWWFGaFNiRnA2V1ZWYWEx
UnNXWGxoUkVwWFRWWndhRlY2Umt0ak1WSjFWV3hDVjJKR2NGbFhWM1J2VVRK
SmVGZHJaRmRpVlZwaFZtcEdTMUl4VW5OWGJVWldVbXhzTlZsVmFFTldiVXBJ
WVVWU1ZXSllhSEpXYkZwSFpFWktkR05GTlZkTlZXd3pWbXhrTkdJeVRYbFNh
MlJVWWtkU1ZWbHNWbUZoUmxweFZHeE9hRkpzYkROV01qVnJWVEpLU1ZGcmFG
aGhNWEJVVmxSS1JtVnNSbGxhUm1ocFVteHdiMWRXVWt0U01WbDRZMFZhWVZK
ck5XOVphMmhEVjFaa1dHVkdUbE5oZWtaSVZqSjRWMVV5U2tsUmJrNVdZbFJH
VkZZeWVHdGpiRnBWVW14a1RsWnVRalpYVkVKaFZqRmtSMWRZY0ZaaWEzQllW
bXRXWVdWc1duRlNiR1JxVFZkU2VsbFZaSE5XTVZwMVVXeHdWMkpIVGpSVWEy
UlNaVlphY2xwR1pHbGlSWEJRVm0xNGExVXhaRWRWYkZwV1lUSlNjMVp0ZUV0
bGJGcDBUVVJXVjAxRVJsZFpibkJMVm0xS1dWVnVXbGRoYTFwb1ZXMTRhMk50
VmtkYVIyaG9UVEJLVWxac1kzaE9SbXhZVkZob2FsSlhhSEJWYlhNeFZERmFj
MWRzY0d4aVJuQXdXbFZrUjFack1WWmlSRkphWVRGd2NsWXdaRXRqYlU1R1Qx
WmthVmRIWjNwV2FrSmhZekZrV0ZSclpHRlNiVkpVV1d0YWQwNVdXblJOVkVK
YVZteEdORlp0ZUZkVWJFcElZM3ByUFE9PQ==

Editor de HTML online

2018-01-07T10:46:00.000-08:00

Seguramente te ha pasado que ves un gadget y lo quieres para tu blog, pero no sabes cómo se verá el gadget o si realmente funciona. Lo mismo cuando queremos probar nuevos códigos, dar formato a un texto, crear tablas, etc. suele ser cansado tener que entrar al blog, hacer pruebas, guardar, ver el blog cómo quedó, regresar a editar, volver a probar... en fin, es un procedimiento que puede ser muy agotador.

Para estos casos es muy útil usar un editor de HTML online que nos muestre cómo se ven las cosas que queremos hacer en tiempo real.

¿Para que sirve? Para escribir los códigos HTML que queremos usar y obtener la muestra inmediata del código en cuestión, así no tenemos que estar entrando al blog cientos de veces para probar algún código, simplemente lo escribirmos en el editor online y veremos los resultados inmediatos de lo que estamos haciendo.

Para hacer la prueba de ver cómo funciona entra a Real-time HTML Editor y en la parte de arriba borra las letras que hay y en su lugar pega el siguiente código:

<style type="text/css">
body {margin:0; padding:0;
font-family:Verdana, Arial, sans-serif;
font-size:small;}
#header {
padding:20px;
background:#333;
border-bottom:1px solid #fff;}
#header h1 {
padding:0; margin:0;
color:#ccc;
font-family:Verdana, serif;
font-weight:bold;
font-size:190%;}
#nav {
float:left;
width:100%;
margin:0; padding:0;
list-style:none;
background:#ccc;
border-bottom:1px solid #999;}
#nav li {
float:left; margin:0; padding:0;}
#nav a {
float:left;
display:block;
padding:6px 30px 6px 5px;
text-decoration:none;
font-weight:bold;
font-size:90%;
color:#666;
background:#ccc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDw8bY8pL45e1YtTQ4hjUeyb80JvF-sDSCGQiq7pWPOgddeRwDlnts2AwmpL3LrCUSFcN-PmPVlX3luNpPVpX9zlH8DrhSB32hi0Nc8ufl7twa2i8OdsSXllohe5EwxkYsfeVCfThBVq4/s400/nav_slant.gif)no-repeat top right;
}
#nav #nav-1 a {padding-left:20px;}
#nav a:hover {color:#000;}
</style>

<div id="header">
<h1>Ciudad Blogger</h1>
</div>
<ul id="nav">
<li id="nav-1"><a href="#">Inicio</a></li>
<li id="nav-2"><a href="#">Directorio</a></li>
<li id="nav-3"><a href="#">Contacto</a></li>
<li id="nav-4"><a href="#">Acerca de</a></li>
</ul>

¿Lo ves? No tuviste que entrar a Blogger para probar cómo se ve el menú, con lo cual ya te ahorraste bastante tiempo.

Lo mismo puedes hacer con cualquier otro código que quieras probar como una imagen, una tabla, o hasta el diseño de una página web completa.

Enlace | Real-time HTML Editor

Araña interactiva para el blog, que se mueve

2017-12-31T19:21:00.000-08:00

Esto no es como aquella araña de Halloween que vimos hace tiempo que no era mas que una imagen GIF animada. Esto es parte de la modernidad web, hecho en canvas, y se trata de una araña que se mueve por si sola dentro de su telaraña, y que podemos arrastrar con el cursor, tanto a la araña como a la telaraña y sus puntos de apoyo. El demo aquí mismo.

Este gracioso experimento es de Sub Protocol, y nos servirá como parte de las decoraciones de Halloween en el blog. Este arácnido requiere de dos scripts para su funcionamiento, ambos los he alojado para que no tengan que preocuparse por buscar un hosting, pero, he notado que el desempeño de estas canvas son más eficientes si alojamos los scripts directo en la plantilla, o al menos a mí esa percepción me ha dado.

Para colocar esta araña interactiva en tu blog ingresa en Diseño | Añadir un gadget | HTML/Javascript y ahí pega este código:

<script src='https://googledrive.com/host/0B1sh31bxfVkGYUVMRXFyeUROQ2s' type='text/javascript'></script>
<canvas id='scratch' style='width: 500px; height: 350px; margin-left: -80px; margin-top: -30px;'></canvas>
<script src='https://googledrive.com/host/0B1sh31bxfVkGbTVWTlhlangwdWM' type='text/javascript'></script>

Si quieres también puedes hacer que sea "flotante", es decir, que permanezca estática sin importar si subimos o bajamos el scroll de la página. Para conseguirlo sólo añade lo siguiente debajo del código anterior.

<style>
#scratch {
position: fixed;
top: 0px;
left: 0px;
}
</style>

Con top indicamos que se muestre arriba, si la quieres abajo cámbialo por bottom. Con left hacemos que se acomode a la izquierda, si lo quieres a la derecha cámbialo por right. Toma en cuenta que al hacerla flotante podría obstruir algún elemento de tu blog que quede por debajo de ella.

Con esta araña, esta próxima noche de brujas tú y tus lectores podrán entretenerse un rato en el blog jugando con ella, eso sí, no la saques de su red o la pobre morirá :(

Múltiples fondos (background) con CSS

2017-12-31T19:20:00.000-08:00

Quizá en algún momento quieras usar dos imágenes de fondo en un elemento HTML, o en la plantilla de tu blog, como por ejemplo, para poner una imagen hasta arriba y otra imagen distinta abajo, en el footer.
Lo más recurrente es crear dos o más contenedores y a cada uno ponerle un fondo. Pero no es necesario porque podemos utilizar dos o más imágenes distintas en un mismo contenedor empleando la misma propiedad background que usamos de toda la vida.

En realidad no es nada de otro mundo, se trata de utilizar la propiedad background-image y ahí agregar las URLs de las imágenes, separadas por una coma. Por ejemplo, si quisiéramos añadir dos imágenes al fondo del blog sería algo así:

body {
background-image: url(URL de la imagen UNO), url(URL de la imagen DOS);
}

Y para cambiar su posición usamos background-position, de igual manera estableceremos la propiedad para la primera imagen, luego ponemos una coma, y después ponemos la otra posición.

body {
background-image: url(URL de la imagen UNO), url(URL de la imagen DOS);
background-position: left top, right bottom;
}

Ahí hemos dicho que la primera imagen se acomodará en el lado superior izquierdo, y la segunda en el lado inferior derecho.
También podemos especificar si se repetirán las imágenes o no.

body {
background-image: url(URL de la imagen UNO), url(URL de la imagen DOS);
background-position: left top, right bottom;
background-repeat: no-repeat, no-repeat;
}

Si también queremos añadir un color de fondo podemos hacerlo usando background-color.

body {
background-color: #ccc;
background-image: url(URL de la imagen UNO), url(URL de la imagen DOS);
background-position: left top, right bottom;
background-repeat: no-repeat, no-repeat;
}

Puedes ver un ejemplo con el DIV que está a continuación, parece una sola imagen pero la realidad es que usamos un color de fondo, luego una imagen arriba, y otra imagen abajo.

Múltiples Fondos con CSS

Este es el código completo que he usado para el ejemplo anterior.

CSS

#doblefondo {
background-color: #f2f2f2;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjr8MjYdZuhov_vOh0tl89-2TIrysuoleD0lr8D3t2601otxKcfu6ZdCG4SQFmH1WDPcG-LOyYulC1xClfwGv3BcDijAIfRXolr0kFEa2__2kWIbKCNdoPvf-MUgbxTQvIVU1ONp-jWZqII/s450/fondo1.png), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOv8mdows-zjQnmjOTJkWP5-JyjnwvTaMiqpLAxDHRLCdmG9RRe2TNcOQnyLxIhTP276d0KXZUiRyyl27lR8hVmHM4qctGRrvv_z130YvZZSJ_8GplT1psKOb-ZVQqrlrV1JWlBup5J480/s450/fondo2.png);
background-repeat: no-repeat, no-repeat;
background-position: left top, right bottom;
width: 450px;
height: 390px;
position: relative;
margin: 0 auto;
}
#doblefondo h2 {
position: absolute;
top:40%;
left: 20%;
color: #fc5669;
}

HTML

<div id="doblefondo">
<h2>Múltiples Fondos con CSS</h2>
</div>

Pero el número de imágenes no es una limitante ya que podemos usar tres o más y darle a cada una de ellas una propiedad distinta. Como en el siguiente DIV de ejemplo, añadimos tres imágenes de fondo, cada una tiene una posición diferente, y la tercera se repetirá horizontalmente.

Este es el código completo.

CSS

#doblefondo {
background-color: #C5E0DC;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKJY5HwNDWA8J-lj63HHnFgyWUxgX8fGtn1McAKF-GHl5AA5G-emDrIdd0-ZnFkXa0yELNrpp-mEBnNXbbk4J3v64xA_9Nhm4cHSrEAgF8XHq1eEqV1G2B65OU4s1FQFezZahXq6buXTEU/s116/fondo1.jpg), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkW4oatz_7BGGw5Sm5jxzpi3lPJXqMFwrrKGVGfnTg2qbkS6fq__YXCBVSnW5qaDjoDPE1oX-Y0WZxDXp4Y97cjULIMB9qrOkytR17OMDZT-gvSruoAHzDRAh0NxAa3zN9-iw8uqRpp2GT/s116/fondo2.jpg), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisfpebj2QIaLEf1CvNZGW-9BnIuumm4XbGx4hptQLv8EUR8PUySy3slwEx70bnvEY2DTlhfhCG11nv-wviXlAoGTgCWhOVJBDYdkkiV8vcILOzsN2K6TA31QpMY_AIcUjCsRgCW7zkA5cz/s116/fondo3.jpg);
background-repeat: no-repeat, no-repeat, repeat-x;
background-position: right top, center center, left bottom;
width: 349px;
height: 300px;
position: relative;
margin: 0 auto;
}

HTML

<div id="doblefondo">
</div>

Como puedes ver, poner más de una imagen de fondo en la plantilla del blog o un contenedor es de lo más sencillo. Recuerda siempre separar con una coma las propiedades e imágenes, excepto la última, esa no lleva coma, sólo punto y coma.
En el caso de Internet Explorer funciona de la versión 9 en adelante así que prácticamente todos lo verán ya que por suerte pocos son los que usan versiones anteriores.

Lluvia en el blog

2017-12-31T19:19:00.000-08:00

Los que somos un tanto bohemios disfrutamos de la lluvia tanto como de una buena taza de café. Y ya que nos gustan tanto las precipitaciones pluviales vamos a ver cómo poner lluvia en el blog con Javascriptpara darle un poco de nostalgia al blog y que bien puede usarse para las próximas fiestas de Halloween. El ejemplo aquí mismo.

Este script de Giffy se pone y se quita en un solo paso. Adicionalmente le he añadido un sonido suave de lluvia, pero este es opcional.

Para poner esta lluvia en el blog, entra en la Edición HTML de tu plantilla, y antes de </body> pega este código:

<div style="display:none;">
<script type="text/javascript" src="http://blogparts.giffy.me/0117/parts.js"></script><p style="text-align: center;margin:0;padding:0;">
<a href="http://giffy.me/baby/"><img style="border:0;" src="http://blogparts.giffy.me/0117/parts.gif" alt="降水確率100%ブログパーツ;" /></a></p>
<p style="text-align:center;font-size:12px;margin:10px 0 0 0;padding:0;">
[PR] <a href="http://typing.twi1.me/" rel="nofollow">楽しくタイピング練習！</a></p>
</div>
<iframe allowtransparency='true' frameborder='0' marginheight='0' marginwidth='0' scrolling='no' src='http://audio-play.blogspot.com/p/lluvia.html' style='height:0; width:0;'></iframe>

Lo que está en color naranja es el iframe que contiene el sonido de la lluvia, si no quieres el sonido elimina toda esa parte.
En lo que concierne al script, no tiene opciones de configuración pero creo que tampoco hace falta ya que cumple con su cometido.

Tabla de contenido (Sitemap) con pestañas

2017-12-31T19:18:00.000-08:00

Las tablas de contenido, también llamadas sitemap o mapa del sitio, permiten al visitante navegar por todo el contenido del sitio de una forma práctica, en nuestro caso accediendo a las etiquetas del blog y sus respectivas entradas publicadas.
Ya hemos visto un par de ellos, pero este en particular me gusta por la forma como está organizado todo, en pestañas, tipo tabview lo cual hace que tenga un diseño más intuitivo para el usuario, además que incluye varias opciones que lo hacen más completo.

Esta tabla de contenido es una creación de Taufik Nurrohman, un genio indonesio en estos temas de Blogger. No requiere de librerías externas así que prácticamente no tendremos que preocuparnos por el tema de la compatibilidad.

El demo lo puedes ver aquí mismo, del lado izquierdo están las etiquetas del blog, al dar click sobre una de ellas se muestran del lado derecho las entradas correspondientes a dicha etiqueta.

Estas tablas de contenido por lo general se muestran en una página estática, por ese motivo pondremos todo el código dentro de la página, incluyendo los estilos para evitar que estos se carguen en cualquier otra parte del blog donde el sitemap no se mostrará.
Para poner esta tabla de contenido -sitemap- en tu blog crea una página, y estando en la pestaña HTMLde la página pega este código:

<style>
#SiteMapBlogger {
width:99%;
margin:0 auto;
background-color:#444; /* Color de la barra lateral */
overflow:hidden;
position:relative;
color:#333
}
#SiteMapBlogger .loadingPosts {
display:block;
padding:5px 10px;
font:normal bold 10px Arial, Sans-Serif;
color:#FFF
}
#SiteMapBlogger ul, #SiteMapBlogger ol, #SiteMapBlogger li {margin:0;padding:0;list-style:none;background:none;}
#SiteMapBlogger .sitemapTabs {width:20%;float:left}
#SiteMapBlogger .sitemapTabs li a {
display:block;
font:normal bold 10px/28px Arial,Sans-Serif;
height:28px;
overflow:hidden;
text-overflow:ellipsis;
color:#ccc; /* Color de las etiquetas */
text-transform:uppercase;
text-decoration:none;
padding:0 12px;
cursor:pointer
}
#SiteMapBlogger .sitemapTabs li a:hover {
background-color:#556270; /* Color de fondo de las etiquetas al pasar el cursor */
color:#FFF
}
#SiteMapBlogger .sitemapTabs li a.active-tab {
background-color:#69D2E7; /* Color de la pestaña activa */
color:#FFF; /* Color del texto de la pestaña activa */
position:relative;
z-index:5;
margin:0 -1px 0 0
}
#SiteMapBlogger .sitemapContent, #SiteMapBlogger .divider-layer {
width:80%;
float:right;
background-color:#FFF;
border-left:5px solid #69D2E7; /* Color del borde que separa las entradas de las etiquetas */
box-sizing:border-box
}
#SiteMapBlogger .divider-layer {float:none;display:block;position:absolute;top:0;right:0;bottom:0;}
#SiteMapBlogger .panel {position:relative;z-index:5;font:normal normal 10px Arial,Sans-Serif}
#SiteMapBlogger .panel li a {
display:block;
position:relative;
font-weight:700;
font-size:11px; /* Tamaño del título de las entradas */
color:#333; /* Color del título de las entradas */
line-height:30px;
height:30px;
padding:0 12px;
text-decoration:none;
outline:none;
overflow:hidden
}
#SiteMapBlogger .panel li time {
display:block;
font-style:italic;
font-weight:400;
font-size:10px; /* Tamaño de la fecha */
color:#DCDCDC; /* Color de la fecha */
float:right
}
#SiteMapBlogger .panel li .sitemapSummary {
display:block;
padding:10px 12px;
font-style:italic;
overflow:hidden
}
#SiteMapBlogger .panel li .sitemapSummary img.sitemapThumbnail {
float:left;
display:block;
margin:0 8px 0 0;
padding:4px;
width:72px; /* Ancho del contenedor de las miniaturas */
height:72px; /* Alto del contenedor de las miniaturas */
border:1px solid #dcdcdc; /* Borde de las miniaturas */
}
#SiteMapBlogger .panel li:nth-child(even) {
background-color:#CBDFDE; /* Color de fondo secundario de las entradas */
font-size:10px;
color:#414141 /* Color de texto secundario de las entradas */
}
#SiteMapBlogger .panel li a:hover,#SiteMapBlogger .panel li a:focus, #SiteMapBlogger .panel li a:hover time, #SiteMapBlogger .panel li.bold a {
background-color:#556270; /* Color de fondo del título de las entradas (modo sumario) y color de fondo del título de las entradas al pasar el cursor (modo normal) */
color:#FFF;
outline:none
}
#SiteMapBlogger .panel li.bold a:hover, #SiteMapBlogger .panel li.bold a:hover time {
background-color:#444
}

@media (max-width:700px) {
#SiteMapBlogger {
background-color:#fff;
border:0 solid #888
}
#SiteMapBlogger .sitemapTabs, #SiteMapBlogger .sitemapContent {
overflow:hidden;
width:auto;
float:none;
display:block
}
#SiteMapBlogger .sitemapTabs li {
display:inline;
float:left
}
#SiteMapBlogger .sitemapTabs li a, #SiteMapBlogger .sitemapTabs li a.active-tab {
background-color:#556270;
color:#ccc;
}
#SiteMapBlogger .sitemapTabs li a.active-tab {
background-color:#CBDFDE;
color:#fff
}
#SiteMapBlogger .sitemapContent {
border:none
}
#SiteMapBlogger .divider-layer, #SiteMapBlogger .panel li time {
display:none
}
}
</style>
<div id="SiteMapBlogger">
<span class="loadingPosts">Cargando entradas...</span></div>
<br />
<script>
var tabbedTOC = {
blogUrl: "http://nombre-de-mi-blog.blogspot.com/",
containerId: "SiteMapBlogger",
activeTab: 1,
showDates: true,
showSummaries: false,
numChars: 200,
showThumbnails: false,
thumbSize: 40,
noThumb: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsXdYObm41qeF_MnshseKJYKG7cmABs_k8OhXPDUTwK1N_1XOHCX6G502KDEMc84utPKVIOfsMhfwP8qxFsylv_JWLCxgjF3H2wYB5N-s4DJ5rVkfFqIyYvc478l1sx6NhBO1hm1QLqqg/s128/imagen.png",
monthNames: ["Enero","Febrero","Marzo","April","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre"],
newTabLink: true,
maxResults: 99999,
preload: 0,
sortAlphabetically: true,
showNew: 7,
newText: " - <i style='color:red;'>¡Nuevo!</i>"
};
</script>

<script>
/*
* Blogger Tabbed Style Table of Content Widget by Taufik Nurrohman
* Free for change but keep the original attribution.
* URL: https://plus.google.com/108949996304093815163 */

function clickTab(e){var t=document.getElementById(tabbedTOC_defaults.containerId),n=t.getElementsByTagName("ol"),r=t.getElementsByTagName("ul")[0],i=r.getElementsByTagName("a");for(var s=0;s<n.length;s++){n[s].style.display="none";n[parseInt(e,10)].style.display="block"}for(var o=0;o<i.length;o++){i[o].className="";i[parseInt(e,10)].className="active-tab"}}function showTabs(e){var t=parseInt(e.feed.openSearch$totalResults.$t,10),n=tabbedTOC_defaults,r=e.feed.entry,i=e.feed.category,s="",o=[];for(var u=0;u<(n.showNew===true?5:n.showNew);u++){if(u==r.length)break;r[u].title.$t=r[u].title.$t+(n.showNew!==false?n.newText:"")}r=n.sortAlphabetically?r.sort(function(e,t){return e.title.$t.localeCompare(t.title.$t)}):r;i=n.sortAlphabetically?i.sort(function(e,t){return e.term.localeCompare(t.term)}):i;s='<span class="divider-layer"></span><ul class="sitemapTabs">';for(var a=0,f=i.length;a<f;a++){s+='<li class="sitemapItem-'+a+'"><a href="javascript:clickTab('+a+');">'+i[a].term+"</a></li>"}s+="</ul>";s+='<div class="sitemapContent">';for(var l=0,c=i.length;l<c;l++){s+='<ol class="panel" data-category="'+i[l].term+'"';s+=l!=n.activeTab-1?' style="display:none;"':"";s+=">";for(var h=0;h<t;h++){if(h==r.length)break;var p,d=r[h],v=d.published.$t,m=n.monthNames,g=d.title.$t,y="summary"in d&&n.showSummaries===true?d.summary.$t.replace(/<br ?\/?>/g," ").replace(/<.*?>/g,"").replace(/[<>]/g,"").substring(0,n.numChars)+"…":"",b="media$thumbnail"in d&&n.showThumbnails===true?'<img class="sitemapThumbnail" style="width:'+n.thumbSize+"px;height:"+n.thumbSize+'px;" alt="" src="'+d.media$thumbnail.url.replace(/\/s72(\-c)?\//,"/s"+n.thumbSize+"-c/")+'"/>':'<img class="sitemapThumbnail" style="width:'+n.thumbSize+"px;height:"+n.thumbSize+'px;" alt="" src="'+n.noThumb.replace(/\/s72(\-c)?\//,"/s"+n.thumbSize+"-c/")+'"/>',w=d.category?d.category:[],E=n.showDates?'<time datetime="'+v+'" title="'+v+'">'+v.substring(8,10)+" "+m[parseInt(v.substring(5,7),10)-1]+" "+v.substring(0,4)+"</time>":"";for(var S=0;S<d.link.length;S++){if(d.link[S].rel=="alternate"){p=d.link[S].href;break}}for(var x=0,T=w.length;x<T;x++){var N=n.newTabLink?' target="_blank"':"";if(w[x].term==i[l].term){s+='<li title="'+w[x].term+'"';s+=n.showSummaries?' class="bold"':"";s+='><a href="'+p+'"'+N+">"+g+E+"</a>";s+=n.showSummaries?'<span class="sitemapSummary">'+b+y+'<span style="display:block;clear:both;"></span></span>':"";s+="</li>"}}}s+="</ol>"}s+="</div>";s+='<div style="clear:both;"></div>';document.getElementById(n.containerId).innerHTML=s;clickTab(n.activeTab-1)}var tabbedTOC_defaults={blogUrl:"http://www.ciudadblogger",containerId:"SiteMapBlogger",activeTab:1,showDates:false,showSummaries:false,numChars:200,showThumbnails:false,thumbSize:40,noThumb:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsXdYObm41qeF_MnshseKJYKG7cmABs_k8OhXPDUTwK1N_1XOHCX6G502KDEMc84utPKVIOfsMhfwP8qxFsylv_JWLCxgjF3H2wYB5N-s4DJ5rVkfFqIyYvc478l1sx6NhBO1hm1QLqqg/s128/imagen.png",monthNames:["Enero","Febrero","Marzo","April","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre"],newTabLink:true,maxResults:99999,preload:0,sortAlphabetically:true,showNew:false,newText:" - <em style='color:red;'>¡Nuevo!</em>"};for(var i in tabbedTOC_defaults){tabbedTOC_defaults[i]=typeof tabbedTOC[i]!==undefined&&typeof tabbedTOC[i]!=="undefined"?tabbedTOC[i]:tabbedTOC_defaults[i]}(function(){var e=document.getElementsByTagName("head")[0],t=document.createElement("script");t.type="text/javascript";t.src=tabbedTOC_defaults.blogUrl+"/feeds/posts/summary?alt=json-in-script&max-results="+tabbedTOC_defaults.maxResults+"&orderby=published&callback=showTabs";if(tabbedTOC_defaults.preload!=="onload"){setTimeout(function(){e.appendChild(t)},tabbedTOC_defaults.preload)}else{window.onload=function(){e.appendChild(t)}}})()
</script>

En donde está en color rojo va el nombre de tu blog. En el área de los estilos verás en color verde dónde puedes personalizar el aspecto.

Ahora vamos con las opciones de este gadget, estas opciones se encuentran en el código que añadiste:

activeTab es la pestaña predeterminada
showDates cambiar a false para ocultar la fecha
showSummaries cambiar a true para mostrar resúmenes (sumarios)
numChars número de caracteres en el resumen
showThumbnails cambiar a true para mostrar miniaturas de las entradas
thumbSize tamaño de la miniatura
noThumb miniatura predeterminada para las entradas que no tienen imagen.
monthNames es el nombre de los meses cuando se muestra la fecha
newTabLink cambiar a true para abrir las entradas en una pestaña nueva
sortAlphabetically cambiar a false para ordenar las entradas por fecha
showNew cambiar a false para ocultar el texto "¡Nuevo!" que aparece en las entradas recientes, o define cuántas entradas recientes tendrán ese texto
newText es el texto "¡Nuevo!" de las entradas recientes

Aunque este gadget ofrece la posibilidad de mostrar resúmenes (sumarios) de las entradas con su respectiva miniatura, se recomienda no activar ninguna de las dos opciones para evitar lentitud en la carga. También es importante que una vez que pongas el código no cambies a la pestaña Redactar.

Este sitemap es responsive, o sea que se adapta al tamaño del contenedor y cambia su forma cuando se mira desde un móvil por ejemplo. Por tal motivo debajo de @media (max-width:700px) verás otros estilos, esos son los estilos para el modo "pequeño" del sitemap.

Esta tabla de contenido o sitemap me parece que es de las más completas que hemos visto hasta ahora ya que ofrece diversas opciones que podemos configurar para darle el aspecto que queramos. Y lo mejor de todo es que no dependeremos de librerías o scripts externos, todo está en un solo código listo para copiar y pegar.

Cursor para el blog con motivos navideños

2017-12-31T19:17:00.001-08:00

Esta es la excusa perfecta para hacer rabiar al Grinch con este cursor que al moverlo desprende motivos navideños por su paso.
Esferas, muñecos de nieve, botas, regalos, son algunas de las pequeñas imágenes que aparecen en el blog cuando este cursor está en movimiento.

El demo puedes verlo aquí mismo, al mover el cursor aparecerán objetos de Navidad que desaparecerán sutilmente.

Los encargados de esta curiosidad son nuevamente el equipo de Giffy, y le dará a tu blog ese toque festivo que ya se siente en el ambiente.

Para poner este cursor con motivos navideños en tu blog entra en Plantilla | Edición de HTML y antes de </body> pega el siguiente código:

<div style='display:none'><script type="text/javascript" src="http://blogparts.giffy.me/0035/parts.js"></script><p style="text-align: center;margin:0;padding:0;"><a href="http://giffy.me/"><img style="border:0;" src="http://blogparts.giffy.me/0035/parts.png" alt="クリスマスの足跡ブログパーツ" /></a></p><p style="text-align:center;font-size:12px;margin:10px 0 0 0;padding:0;">[PR] <a href="http://typing.twi1.me/" rel="nofollow">無料で面白タイピング！</a></p></div>

Guarda los cambios y listo. Una vez que se te haya pasado el espíritu de la Navidad elimina el código y el cursor se habrá ido.
Si buscas algo más discreto entonces quizá te interesen estos cursores de navidad.

Mostrar las URL de los enlaces al imprimir una entrada

2017-12-31T19:17:00.000-08:00

No es el caso de este blog, pero hay otros casos donde los usuarios recurrentemente imprimen las entradas del blog que visitan, por ejemplo blogs con recetas de cocina, letras de canciones, poemas, etc. Hasta ahí no hay nada fuera de lo común, pero, ¿qué pasa si la entrada tiene un link y el usuario está interesado en ese enlace? ¿cómo puede el usuario ver el link en la hoja impresa? Puede parecer un detalle insignificante, pero detalles como este pueden mejorar o no la experiencia del usuario.

Lo que veremos a continuación es un sencillo método para que cuando se imprima la entrada del blog aparezcan también las URLs de los enlaces que contenga la entrada. De esta manera el usuario podrá ver en su hoja impresa los links que vienen incluidos en la entrada.

Para conseguirlo recurriremos al pseudo elemento :after, la propiedad content, el atributo attr(href), y por supuesto al tipo de medio print que hará que estos estilos sólo se apliquen en las impresoras.

Puedes ver un ejemplo en la siguiente imagen, la primera es una impresión de una entrada "normal", la segunda muestra los enlaces que hay en el post (tres en total). Las URL se muestran entre paréntesis, junto al texto que contiene el enlace.

Pues bien, sin más preámbulos, sólo debes entrar en Plantilla | Edición de HTML y añadir antes de </head> el siguiente código:

<style media='print' type='text/css'>
a:after {
content:" (" attr(href) ") ";
font-size:0.7em;
font-weight:normal;
font-style:italic;
}
</style>

Con eso bastará para que se puedan imprimir las URLS de las entradas, por supuesto otros estilos pueden ser añadidos o modificados.

Notarás que al agregar el código también se imprimirán las URLs del título del blog y en algunos casos también el de la entrada, o el de las imágenes del post que tengan enlace, para corregir eso vamos a especificar que en esas áreas no se agregue ningún contenido. De modo que el código quedaría así:

<style media='print' type='text/css'>
a:after {
content:" (" attr(href) ") ";
font-size:0.9em;
font-weight:normal;
font-style:italic;
}
.Header h1 a:after, .post-title a:after, .separator a:after { {
content:"";
}
</style>

Así de sencillo puedes hacer que tus lectores tengan la información más completa al momento de imprimir las entradas de tu blog. También recomiendo este método para imprimir únicamente la entrada del blog y evitar que aparezca la sidebar y otros elementos.

Sonidos de Navidad al entrar al blog

2017-12-31T19:15:00.000-08:00

A medida que los días pasan el espíritu de la Navidad se siente cada vez más, es por eso que en estas fechas procuramos tener algunas decoraciones de Navidad para el blog y así puedas poner tu blog al tono de la temporada decembrina.

Tal es el caso de lo que veremos en esta entrada, un pequeño código para que cuando entremos al blog se reproduzca un sonido navideño.
Son 7 sonidos de corta duración entre los cuales se incluye la famosa risa de Santa Claus (Papá Noel), y algunas melodías representativas. El demo puedes verlo en este blog de pruebas, al entrar escucharás un sonido, y al recargar la página se reproducirá otro sonido al azar.

Para poner estos sonidos de Navidad en tu blog, entra en Plantilla | Edición de HTML y antes de </body> pega el siguiente código:

<script>
//<![CDATA[
// Sonidos de Navidad
// www.ciudadblogger.com
var mp3 = [
"https://sites.google.com/site/ciudadbloggercom/home/campanas_de_navidad.mp3",
"https://sites.google.com/site/ciudadbloggercom/home/jingle_bells.mp3",
"https://sites.google.com/site/ciudadbloggercom/home/noche_de_paz.mp3",
"https://sites.google.com/site/ciudadbloggercom/home/risa_papa_noel.mp3",
"https://sites.google.com/site/ciudadbloggercom/home/sugar_plum.mp3",
"https://sites.google.com/site/ciudadbloggercom/home/we_wish_you.mp3",
"https://sites.google.com/site/ciudadbloggercom/home/villancico.mp3"
];

var ran_unrounded = Math.random()*mp3.length;
var ran_number = Math.floor(ran_unrounded);

document.write('<iframe style="width:0;height:0;" src="http://www.gmodules.com/gadgets/ifr?url=http://prac-gadget.googlecode.com/files/google-audio.xml&up_MP3='+mp3[ran_number]+'&up_START=Yes" allowTransparency="true" frameborder="0" scrolling="no"></iframe>');
//]]>
</script>

Guarda los cambios y listo. Recuerda que los sonidos se reproducen aleatoriamente, así que no te preocupes si escuchas que alguno se repite varias veces.

Botones para compartir flotantes que se deslizan al bajar

2017-12-30T18:47:00.000-08:00

Hace poco veíamos una manera de poner debajo de los títulos botones para compartir en las redes sociales, de forma flotante, es decir, que éstos permanecían visibles aun cuando se bajara el scroll de la página.

En esta ocasión veremos algo similar, digo similar porque aunque también se mantienen flotantes, éstos botones para compartir las entradas del blog bajan junto con el scroll de la página pero con un ligero efecto deslizante, además, éstos botones se encontrarán del lado izquierdo de las entradas. Incluiremos sólo los botones básicos: Facebook, Google+ y Twitter, sin embargo se pueden agregar más o cambiarlos por otros.

Puedes ver el ejemplo aquí mismo en esta entrada, al bajar la página verás que los botones también bajan, y al subir de nuevo los botones regresarán a su lugar.

Para poner estos botones flotantes para compartir usaremos un script muy corto de jQuery.
Lo primero es ingresar a Plantilla | Edición de HTML, marcar la casilla Expandir plantillas de artilugios y pegar antes de </head> lo siguiente:

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
// <![CDATA[
$(function() {
var offset = $("#BotonesFlotantes").offset();
var topPadding = 15;
$(window).scroll(function() {
if ($(window).scrollTop() > offset.top) {
$("#BotonesFlotantes").stop().animate({
marginTop: $(window).scrollTop() - offset.top + topPadding
});
} else {
$("#BotonesFlotantes").stop().animate({
marginTop: 0
});
};
});
});
// ]]>
</script>
<style>
#BotonesFlotantes {
position: absolute;
left: -100px; /* Distancia desde la izquierda */
border: 1px solid #FB5F55; /* Borde del contenedor */
border-right: 0px;
padding: 10px;
background-color: #FFF; /* Color de fondo del contenedor */
z-index:9;
}
#BotonesFlotantes div {
margin: 10px 0;
}
</style>

Luego buscamos esta línea:

<div class='post-header'>

Y debajo de ella pega lo siguiente:

<b:if cond='data:blog.pageType == "item"'>
<div id='BotonesFlotantes'>
<div><iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url+ "&layout=box_count&show_faces=false&width=73&height=63&action=like&font=tahoma&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:73px; height:63px'/></div>

<div><a class='twitter-share-button' data-count='vertical' data-lang='es' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></div>

<div><script src='http://apis.google.com/js/plusone.js' type='text/javascript'/><g:plusone size='tall'/></div>

</div>
</b:if>

Guarda los cambios y listo.
En el primer código hemos puesto tanto el script como los estilos ya que ambos son muy breves. Ahí verás en color verde a qué corresponde cada área.
Donde dice /* Distancia desde la izquierda */ debes modificarlo hasta que quede a la distancia correcta según tu plantilla. Ahí mismo verás dónde cambiarle el borde y fondo del contenedor.

Estos botones se verán sólo en las entradas individuales, de otra forma no funcionarían.
Si quisieras agregar más botones entonces añádelos antes de </div> y cada uno encerrado entre <div> y </div>

Recuerda que este gadget usa jQuery, por lo que si ya tienes la última versión de jQuery no hace falta repetir el script. Y si usas Mootools o Scriptaculous debes aplicar unos cambios al script.

Sino te aparecieran, pon la /* Distancia desde la izquierda */ en 0px, si tampoco aparecen entonces el último código ponlo arriba de <data:post.body/>

Fanbox para Facebook, Twitter, y Google Plus, flotantes y con efecto deslizante

2017-12-30T18:46:00.001-08:00

AVISO
La API de Twitter cambió y ahora requiere autenticación para obtener los datos de los seguidores, por tal motivo éste y los demás fanbox para Twitter han dejado de funcionar. Si me entero de una solución u otra alternativa lo publicaré de inmediato.

Hace algún tiempo vimos cómo poner el fanbox de Facebook flotante y con efecto deslizante. En esa ocasión usamos un plugin de jQuery que aunque es bueno tiene la desventaja que la versión gratuita sólo permite poner una pestaña nada más, además que quienes usan otras librerías tenían problemas de compatibilidad.

En esta ocasión lo haremos sólo con CSS, de manera que no utilizaremos ni un solo sript y podremos mostrar no sólo una sino tres pestañas, el fanbox de Facebok, el fanbox de Google+, y el fanbox de Twitter.
Puedes ver un ejemplo en esta misma entrada, lo verás del lado derecho de la ventana.

Bien, para poner estos fanbox flotantes en el blog sólo tenemos que ir a Diseño | Añadir un gadget | HTML/Javascript y ahí pegar el siguiente código:

<style>
#flotante1 {
position:fixed;
top:100px;
right:-250px;
float:right;
width:288px;
display:block;
padding:0;
z-index:1002;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
#flotante2 {
position:fixed;
top:240px;
right:-250px;
float:right;
width:288px;
display:block;
padding:0;
z-index:1003;
border-radius:10px;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
#flotante3 {
position:fixed;
top:380px;
right:-250px;
float:right;
width:288px;
display:block;
padding:0;
z-index:1004;
border-radius:10px;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
#flotante1:hover, #flotante2:hover, #flotante3:hover {
right:0px;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
div.likeboxwrap {
margin-top:-5px;
margin-left:-45px;
width:238px;
height:325px;
background-color:#fff;
overflow:hidden;
border-radius:10px;
}
</style>


<div id='flotante1'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbuyuAocOObcg2Nsbw66kCQLVcHF8RH2CKRH2_z3j-vdUOqSlI4iCnNmFs_HD3p6gTqhtTUzUXVkq-1Nacj1DCKvh1Vrj2jjyH5Rp33MKiHDWMF03reOWeszbyL6J2hjdxU8FpETT4Jo4/' style='float:left;'/>
<div style='background: #3c5a98; height:325px; margin-left:38px;padding: 8px 5px 0pt 50px;border-radius: 0px 0px 0px 10px;'><span><div class='likeboxwrap'><iframe allowtransparency='true' frameborder='0' scrolling='no' src='http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fnombre-de-la-página-de-facebook&width=240&colorscheme=light&connections=15&stream=false&header=false&height=350' style='border:none; overflow:hidden; width:240px; height:325px;'/></iframe>
</div></span></div></div>


<div id='flotante2'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiNddRdnEW-QmGJB0lX-h6O8vHWaQkAKtkAlkVo6ejsTv1LevObuD87ACaX4AEB0cmAStqoRr7R1xZqFCs3ey-Zduu8Y5unqH6fT3QcPKU-ZS2AUSlUzhWHKrXUbotifK5HHCj0_coEpQ/s159/goo_tab.png' style='float:left;'/>
<div style='background: #9A9FA8; height:325px; margin-left:38px;padding: 8px 5px 0pt 50px;border-radius: 0px 0px 0px 10px;'><span><div class='likeboxwrap' style="padding-left:20px; padding-top:15px; height:310px !important;">

<div class="g-plus" data-action="followers" data-height="300" data-href="https://plus.google.com/XXXXXXXXXXXXXX" data-source="blogger:blog:followers" data-width="240">
</div>
<script type="text/javascript">
(function() {
window.___gcfg = {'lang': 'es'};
var po = document.createElement('script');
po.type = 'text/javascript';
po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po, s);
})();
</script>

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


<div id='flotante3'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVNa3JM5QIqXOVVeVlpfxYLc76hT8j-lWHIollqOb4MGPz4EwlejITHZPUqVNFpVs-KEqHa8s-9Qx8f98gPl73hjjCPh5JMSDAY-3ZJHLx_v9vSIcGt7gaAdPSALJ9yjSX3BnIRgQMubY/' style='float:left;'/>
<div style='background: #00a0e8; height:325px; margin-left:38px;padding: 8px 5px 0pt 50px;border-radius: 0px 0px 0px 10px;'><span><div class='likeboxwrap'>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script>
<style>
.follow_box_widget{overflow: hidden; padding-left: 5px; padding-right: 5px; padding-top: 5px; background-color: #fff transparent; position: relative; margin: auto;}
.follow_box{font-size: 11px; font-family: "lucida grande",tahoma,verdana,arial,sans-serif; color: #333; line-height: 1.28; text-align: left; direction: ltr;}
.follow_box .follow_top{padding: 5px 10px 0px 5px; margin-bottom: 8px; min-width: 230px; overflow: hidden;}
.follow_box .profileimage{float: left; width: 40px; height: 40px; padding: 0px; margin: 0 10px 4px 0;}
.follow_box img{border: 0;}
.follow_box a{cursor: pointer; color: #3B5998; text-decoration: none;}
.follow_box a:hover{text-decoration: underline;}
.follow_action{padding: 0 0 0 8px;}
.follow_box .follow_action .name{line-height: 15px; font-size: 14px; font-weight: bold;}
.follow_box .follow_button{margin: 5px 0 0;}
.follow_box .total{min-width: 230px; overflow: hidden; display: block;}
.follow_box .connections{padding: 5px 0 4px 0px; border-top: solid 1px #D8DFEA; border-bottom: 1px solid #CCC; min-height: 150px;}
.follow_box .connections .connections_grid{padding-top: 5px; overflow: hidden;}
.follow_box .clearfix{zoom: 1;}
.follow_box .connections .connections_grid .grid_item{float: left; margin:0px; margin-right: 5px; margin-bottom: 8px; overflow: hidden; width: 50px;}
.follow_box .connections .connections_grid .grid_item .name{font-size: 9px; color: gray; overflow: hidden; padding-top: 2px; text-align: center; white-space: nowrap;}
.follow_box .connections .connections_grid .grid_item img{width: 48px; height: 48px;}
.follow_box .follow_widget_footer{ cursor: default; width: 100%; min-width: 230px; overflow: hidden;}
.follow_box .footer_border{ margin-top: 5px;}
.follow_box .uiImageBlock{line-height: 14px;}
.follow_box .follow_widget_footer .footer_logo{float: left; margin-right: 5px;}
.follow_box .follow_widget_footer .footer_text{cursor: default; color: #808080; font-size: 9px; float: left;}
.follow_box .follow_widget_footer .footer_text a.footer_text_link{color: #808080;}
.follow_box .titlecase{text-transform:capitalize;}
</style>
<script>
/*
* Twitter Follow Box jQuery Plugin
* http://jobyj.in/twitter-follow-box-widget/
* Copyright 2012, Joby Joseph
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*/
(function(a){a.fn.followbox=function(b){function f(a,b){if(a>100)a=100;var c=new Array;for(var d=0;d<a;d++){c.push(b[d])}var e=c.join();return e}var c=a(this);var d="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUnj3iSScpd2j_XtvNGAYuDCix0FCdZd_PyJQLZ1JjWLoh9WSJO0D95mwBpkENkFAqFgF_eRvnrMIUpsxBu4sedq30EotZGPjgf3F4NgQz2TsABFe1dgQcK3cR9B3usGK9w7WK0ksUP4E/";var e=a.extend({user:"jobysblog",width:292,height:252,theme:"light",border_color:"#AAA",bg_color:"#fff",bg_image:"",title_color:"#3B5998",total_count_color:"#333",follower_name_color:"#BBB"},b);a.ajax({url:"http://api.twitter.com/1/users/lookup.json?screen_name="+e.user+"&include_entities=true",dataType:"jsonp",success:function(b){var g=e.width-2;var h=e.height-2;var i=e.height-115;var j=parseInt(e.width/55);var k=parseInt(i/69)+1;var l=j*k;c.html('<div class="follow_box_main" style="border: 1px solid #bbb; width: '+g+"px; height: "+h+'px;"><div class="follow_box_widget"><div class="follow_box"><div><div class="follow_top clearfix"><a href="http://www.twitter.com/'+e.user+'" target="_blank"><img class="profileimage img" src="'+b[0].profile_image_url_https+'" alt="'+b[0].name+'"></a><div class="follow_action"><div class="name_block"><a href="http://www.twitter.com/'+e.user+'" target="_blank"><span class="name titlecase">'+b[0].name.toLowerCase()+"</span> @"+b[0].screen_name+'</a></div><div class="follow_button"><iframe allowtransparency="true" frameborder="0" scrolling="no" src="//platform.twitter.com/widgets/follow_button.html?screen_name='+e.user+'&show_count=false&show_screen_name=false&lang=es" style="width:100px; height:20px;"></iframe></div></div></div><div class="connections"><span class="total"><span class="follow_box_follower_count">'+b[0].followers_count+'</span> personas siguen a <b class="titlecase">'+b[0].name.toLowerCase()+'</b></span><div class="connections_grid clearfix" style="height:'+i+'px;"></div></div></div><div style="height: 23px"><div class="follow_widget_footer"><div class="footer_border"><div class="clearfix uiImageBlock"><a class="footer_logo" target="_blank" href="http://jobyj.in/twitter-follow-box-widget"><img src="'+d+'"/></a><div class="footer_text"><a class="footer_text_link" target="_blank" href="http://jobyj.in/twitter-follow-box-widget">Twitter Social Plugin</a></div></div></div></div></div></div></div></div>');if(e.theme=="dark"){c.find(".follow_box_main").addClass("dark")}c.find(".follow_box_follower_count").text(c.find(".follow_box_follower_count").text().replace(/(\d)(?=(\d\d\d)+(?!\d))/g,"$1,"));if(a.browser.msie&&!a.support.boxModel)a(".follow_box .connections").css("padding-bottom","14px");if(e.theme=="custom"){c.find(".follow_box_main").css({"border-color":e.border_color,"background-color":e.bg_color,"background-image":'url("'+e.bg_image+'")'});c.find(".follow_box a").css({color:e.title_color});c.find(".follow_box .total").css({color:e.total_count_color})}a.ajax({url:"https://api.twitter.com/1/followers/ids.json?cursor=-1&screen_name="+e.user,dataType:"jsonp",success:function(b){var d=f(l,b.ids);a.ajax({url:"https://api.twitter.com/1/users/lookup.json?user_id="+d+"&include_entities=true",dataType:"jsonp",success:function(b){for(var d=0;d<b.length;d++){var f=a.trim(b[d].name);var g=f.split(" ");var h='<div class="grid_item"><a href="http://twitter.com/'+b[d].screen_name+'" target="_blank"><img class="img" src="'+b[d].profile_image_url+'" alt=""><div class="name titlecase">'+g[0].toLowerCase()+"</div></a></div>";c.find(".connections_grid").append(h)}if(e.theme=="custom"){c.find(".connections .connections_grid .grid_item .name").css({color:e.follower_name_color})}}})}})}})}})(jQuery)
</script>
<script>
$(document).ready(function(){
$('#twitterfollowbox').followbox({
'user':'usuarioTwitter',
'height':'300',
'width':'260',
'theme':'custom',
'border_color':'#ffffff',
'bg_color':'#ffffff',
'bg_image':'',
'title_color':'#3B5998',
'total_count_color':'#333333',
'follower_name_color':'#BDBDBB'
});
});
</script>
<div id="twitterfollowbox" class="follow-box-container"> </div>

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

Agrega donde se indica el nombre de tu página de Facebook, también pon la ID de tu página de Google Plus en donde están las equis en rojo, y el nombre de tu usuario de Twitter también donde se indica en color rojo.

El ID de tu página de Google Plus lo puedes ver ingresando a tu página, y al final de la URL aparecerán una serie de letras y números, ese es tu ID.

En el caso del fanbox de Twitter hemos usado el fanbox para Twitter que vimos recientemente, pero puedes usar otro, o bien, quitar la pestaña, o sustituirla por otro contenido, pues al menos ese fanbox sí usa jQuery y puede causar incompatibilidad con otros scripts.

En caso de que quieras cambiar alguna pestaña por otro tipo de contenido tendrás que localizar la URL de la imagen de la pestaña (color azul) y sustituirla por la que diseñes, luego quitar el contenido de la pestaña (según sea el caso) y en su lugar poner el código que desees.

La ventaja de este método es que no usamos scripts para las pestañas, ni para esconderlas, ni para mostrarlas, ni para el efecto deslizante. La contra es que el efecto deslizante son transiciones con CSS por lo que los navegadores que no son modernos no podrán ver el efecto de deslizamiento. Fuera de esto último es un método que además de ser fácil de aplicar también es una buena opción para tener tus distintos fanbox agrupados y mostrándolos de una forma elegante y original.

ACTUALIZACIÓN 1:

Si el fanbox de Facebook te marca error puede ser porque aún no tienes una URL personalizada en tu página de Facebook, en esos casos deberás cambiar esta parte:

http%3A%2F%2Fwww.facebook.com%2Fnombre-de-la-página-de-facebook

Por esta:

http%3A%2F%2Fwww.facebook.com%2Fpages%2Fnombre-de-la-página-de-facebook%2FXXXXXXXXXXXXXXX

Ahí además de poner el nombre de tu página donde se indica deberás poner en las equis una serie de números que aparecen al final de la URL de tu página de Facebook.

ACTUALIZACIÓN 2:

Es preciso mencionar nuevamente que el fanbox de Twitter sí usa jQuery por lo que si ya tienes alguna versión de jQuery o si usas otra librería de scripts como Scriptaculous entonces no se verá, en esos casos habrá que eliminar la versión de jQuery que incluye el gadget y/o hacer unos cambios para que sea compatible con Scriptaculous. Para más información mira la entrada sobre el fanbox de Twitter.

Facebook y las redirecciones por país de Blogger bloqueadas por supuesto SPAM

2017-12-30T18:46:00.000-08:00

Desde hace unos días algunos usuarios han reportado problemas al compartir las entradas en Facebook, aparece un mensaje que dice: "El contenido que intentas compartir incluye un enlace que fue bloqueado por ser spam o inseguro."

Salvo los casos de que un enlace de verdad haya sido reportado por considerarse SPAM, parece que el problema está en las redirecciones de los dominios por país que Blogger implementó hace algún tiempo, y aunque curiosamente no sucede con todas las extensiones, parece que al menos con la extensión .MX sí pasa esto, por qué, quién sabe.

Pero si ese es el problema entonces la solución es compartir las entradas con la URL canónica, es decir, la que termina en .com nada más, o bien, usar un script que evite la redirección, tal como Oloman ha explicado en esta entrada.

Puedes ver un ejemplo poniendo en práctica lo siguiente, intenta compartir este enlace en Facebook:

http://nombre-de-mi-blog.blogspot.mx/2011/10/blog-post.html

Como verás, tiene la extensión .mx y al querer publicarlo aparece el mensaje de advertencia que dice que la URL ha sido bloqueda.

Pero si compartes el mismo enlace sin la extensión del país entonces no ocurre lo mismo y se publica sin problema:

http://nombre-de-mi-blog.blogspot.com/2011/10/blog-post.html

Así que si ese fuera tu caso la solución como dije es, al compartir las entradas quitar la extensión del país, o mejor aun, usar un script que evite la redirección.

Iconos de redes sociales arriba del blog que giran al pasar el cursor

2017-12-30T18:45:00.000-08:00

Constantemente me preguntan sobre la forma de poner arriba del blog iconos que enlacen a las redes sociales como tengo ahora mismo en esta plantilla, y es que tener iconos como estos a la vista incrementa la posibilidad de que los lectores puedan seguirnos por las distintas redes sociales ya que les dejamos el acceso a ellas de una forma más visible.
Hay varias formas de hacerlo, nosotros lo haremos usando una lista desordenada que incluirá los iconos de Facebook, Twitter, Google+ y el feed del blog, y como un extra haremos que los iconos giren al pasar el cursor sobre ellos, como estos:

Para poner estos íconos sociales en tu blog entra en la Edición HTML de la plantilla y agrega antes de ]]></b:skin> los estilos:

/* Iconos de redes sociales
----------------------------------------------- */
#social-iconos {
width:100%;
height:50px;
margin-bottom:10px;
display:block;
clear:both;
}
.social-icons{display:table}
.social-icons ul {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
text-align:right;
padding:5px 5px 0 0
}
.social-icons ul {
padding:0;
float:right;
margin-bottom:0;
}
.social-icons li.social_icon {
background:none !important;
padding-left:0 !important;
display:inline;
float:left;
margin-left:6px;
}
.social-icons li:hover {
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(-360deg);
}

Luego SIN expandir los artilugios busca esta línea:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

Arriba de ella agrega la estructura:

<div class='social-icons' id='social-iconos'>
<ul>
<li class='social_icon'><a href='http://facebook.com/usuario'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzIidUd4WBl_gaEI_3FZeMyr42OFWdxVPaVAo1pu6CUSpS45MfWSwuV1VPTV6nxOONOH35jyBkHcguMV8561_36Bp4OkQKO5xHBXbvD8vckTQ2QkyerhuBlWdWBcXInIloocz04mYFvNI/s36/social-facebook.png'/></a></li>

<li class='social_icon'><a href='http://twitter.com/#!/usuario'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioo88y2Gy0QqPjFbswkvICrlfYm0voQxCsWvtVjxToHgD_G4Dc4_5A4zzQsBm7E8RpmjHFjD3TEpV8pAkRgQh8t3lkhNbJASD5OBmT3kqNmHYj3UqFW6yZVNB1lMN2mhs9TEW3LYLKRwE/s36/social-twitter.png'/></a></li>

<li class='social_icon'><a href='https://plus.google.com/XXXXXXXXXXXXXXXXXX/about'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhj30cR-ThZ_YvI7nBL-ogRpKW3aVJFxvw7t-gNnt7N06Z1NRYBs85T9-6mcs4IrarAUyV28sERmHoGYKJ96rfG-ahItAmy0PCdzPOcINzS9euXgz9B3rJyKBruvKviBiyif2S5sJjXyjk/s36/social-googleplus.png'/></a></li>

<li class='social_icon'><a href='http://nombre-de-mi-blog.com/feeds/posts/default'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimrKruGhbdxw5yhvSgrealplsJe4b-X23GGTKoNmLKaOTg_t2q6Wqb6tn20Wb5RP2tQHVWFcM8d1CNAUDSGrVywRxkXrZRDbrIdXCIpAnFDJTmBPdRKGFYz-Fwl9OKSV7R2pOpAuGTkAw/s36/social-rss.png'/></a></li>

</ul></div>

Cambia lo que está en color rojo por tus datos y listo. El primero es tu usuario de Facebook, el segundo el de Twitter, el tercero deberás cambiar las X por el ID de tu perfil de Google+, y en el cuarto deberás poner el nombre de tu blog.

Por supuesto que puedes añadir más iconos si lo deseas, sólo deberás agrega antes </ul></div> una línea como esta por cada icono extra que quieras:

<li class='social_icon'><a href='URL del enlace'><img border='0' src='URL de la imagen'/></a></li>

Aunque están pensados para mostrarse arriba del blog puedes ponerlos donde tú quieras, incluso puedes ponerlos en un elemento HTML/Javascript, eso quedará a elección de cada quien.

El efecto que gira está hecho con CSS3 así que en navegadores antiguos este efecto no funcionará.
Los iconos son de Iconfinder excepto el de Google+ que lo he diseñado yo, pero pueden sustituirse por los iconos de tu elección.

Botones de Redes Sociales con sprites y transiciones CSS3

2017-12-30T18:44:00.001-08:00

Esto me lo han pedido muchos lectores de este blog, y son los botones para las redes sociales que actualmente uso, y como lo prometido es deuda, y ya no me quiero endeudar más, pues aquí va.

Estos botones son para enlazar tus redes sociales: Facebook, Twitter, Google+, RSS Feed, y suscripción por correo.
Lo que a muchos les resulta atractivo es el efecto que tienen cuando se pasa el cursor sobre ellos, ya que el ícono se mueve hacia arriba mientras el fondo cambia de color.

Este gadget lo veremos en dos versiones, uno con 5 botones pequeños alineados de forma horizontal, y otro de 4 botones un poco más grandecitos y alineados en dos columnas. Están hechos con sprites y transiciones CSS3.

Cualquiera de las dos versiones las vamos a colocar de un solo paso, es decir, pegando tanto los estilos como la estructura HTML dentro de un gadget, ¿por qué? por pereza nada más, pero quien quiera poner los estilos en su lugar correspondiente de la plantilla podrá hacerlo sin ningún problema.
Entonces, para ponerlos en tu blog, entra en Diseño | Añadir un gadget | HTML/Javascript y ahí pega el código de los botones que más te gusten.

Este es la primera versión de 5 botones.

Y este es el código que has de pegar en tu gadget:

<style>
/* Botones de Redes Sociales - Ciudad Blogger */
.social_bookmarks_container {
width:100%;
height:65px;
padding:0;
position:relative;
}
.social_bookmarks {
position:relative;
float:left;
margin:0;
padding:0;
}
.social_bookmarks li {
margin:0 0 1px 1px;
height:57px;
width:57px;
list-style:none;
float:left;
padding:0;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.social_bookmarks li a {
float:left;
width:57px;
line-height:24px;
display: block;
text-indent: -99999px;
margin:0px;
outline: none;
padding:0;
min-height:57px;
height:100%;
text-decoration:none;
}
.social_bookmarks .iconrss{background: #A4A4A4 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCXkuOD92pbvxhhnZjke7Y25e3C4cUrOh1LWyr3rE6HGt9m39GHv2esbdmqik1Vw8p6VEukBuYOwPdP0TtkYPtdzogejQ1IaxBVSgek5abJGCRCzwwNO4n8_ucFNObungKi1JA1SUC6vBh/s114/icon-rss.png) top left no-repeat;}
.social_bookmarks .iconrssmail{background: #BDBDBD url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyPq-CjZXMQ9tczsdpzSq99If3JVQcBUBg6xaTBloEqYP9CdG02KPg7DUEp-vLleo5ASYFUjbzkZWUgo6FQIfuUMJrqxnLrxoHym-4VajCOzBF_27T0gip8z20j4jbTeH-YhHdcLc3oCxA/s114/icon-rssmail.png) top left no-repeat;}
.social_bookmarks .icontwitter{background: #D8D8D8url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqbfBVkmIwNv9CGbdH0SNaN3B61Odt9nc6pWy2MZFp2pPuqMTACJ6wtJVFYVW5B6_9GjRFxdx-8gy5Ma6D_Dg36ancgI1aiksN2vVWGyEmUC6MdufJ5H3vZyXfBZgWyA2Z-sNVvgpVCZJJ/s114/icon-twitter.png) top left no-repeat;}
.social_bookmarks .iconfacebook{background: #E6E6E6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGz4qEY0mLeGK3sJYnjHz4kNyM6ob4FMLd-LxqmMLrzg0TYvdeRbV5ZOVn1SePz2mJD0xQZ-7nrXSkp4gg5KuHIW6UyFoBUqffON8uyeGl6WRsD0cM6sz72Z6VzEUheYJ3BpA_FYxEp5WQ/s114/icon-facebook.png) top left no-repeat;}
.social_bookmarks .icongplus{background: #F1F1F1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5BRm_R91LSzegwNNm1_bxteIEgKFu3dPxyuijnES-Goz6REhU_ZsvVLvZHc94Hycm8l8p0ZKZj_J47vW_VBTlOUa9gwpnrGkxHEWO-yzVyOJBEN_4VyDH95QteQftI0b8dHvCLVcQKZm5/s114/icon-gplus.png) top left no-repeat;}
.social_bookmarks .iconfacebook:hover{background-position:center -57px; background-color: #37589b;}
.social_bookmarks .icontwitter:hover {background-position:center -57px; background-color: #46d4fe;}
.social_bookmarks .icongplus:hover {background-position:center -57px; background-color: #de5a49;}
.social_bookmarks .iconrss:hover{background-position:center -57px; background-color: #ff6600;}
.social_bookmarks .iconrssmail:hover{background-position:center -57px; background-color: #FFDE00;}
.social_bookmarks li:hover a{background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrbTxZB4Ln0BjG_gcRW64fCCQtxGFDuZWKB3hFxpExcN-h7qgUcJjrNmVf4E5ZJqUMTe1PpS3vxAvxN4Zm-tU93WLefEpB7WvbkBAZjiH3YXxt04q-xpuMx6FEFE88UADgfsfp7PiyGCNS/s57/icon-social-reflect.png) no-repeat;
}
</style>
<div class='social_bookmarks_container'>
<ul class='social_bookmarks'>
<li class='iconrss'>
<a href='/atom.xml'>
RSS
</a>
</li>
<li class='iconrssmail'>
<a href='http://feedburner.google.com/fb/a/mailverify?uri=NombreDelFeed'>
RSS Mail
</a>
</li>
<li class='icontwitter'>
<a href='http://twitter.com/usuario'>
Twitter
</a>
</li>
<li class='iconfacebook'>
<a href='http://facebook.com/usuario'>
Facebook
</a>
</li>
<li class='icongplus'>
<a href='http://plus.google.com/+usuario/about'>
Google Plus
</a>
</li>
</ul>
</div>

Esta es la otra versión, la de 4 botones.

Y este es el código que pegarías en tu gadget HTML/Javascript.

<style>
/* Botones de Redes Sociales - Ciudad Blogger */
.social_bookmarks_container {
width:176px;
height:176px;
padding:0;
position:relative;
}
.social_bookmarks {
position:relative;
float:right;
margin:0;
padding:0;
}
.social_bookmarks li{
margin:0 0 1px 1px;
height:77px;
width:77px;
list-style:none;
float:left;
padding:0;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.social_bookmarks li a {
float:left;
width:77px;
line-height:24px;
display: block;
text-indent: -99999px;
margin:0px;
outline: none;
padding:0;
min-height:77px;
height:100%;
text-decoration:none;
}
.social_bookmarks .iconrss{background: #A4A4A4 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCXkuOD92pbvxhhnZjke7Y25e3C4cUrOh1LWyr3rE6HGt9m39GHv2esbdmqik1Vw8p6VEukBuYOwPdP0TtkYPtdzogejQ1IaxBVSgek5abJGCRCzwwNO4n8_ucFNObungKi1JA1SUC6vBh/s0/icon-rss.png) top left no-repeat;}
.social_bookmarks .icontwitter{background: #D8D8D8url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqbfBVkmIwNv9CGbdH0SNaN3B61Odt9nc6pWy2MZFp2pPuqMTACJ6wtJVFYVW5B6_9GjRFxdx-8gy5Ma6D_Dg36ancgI1aiksN2vVWGyEmUC6MdufJ5H3vZyXfBZgWyA2Z-sNVvgpVCZJJ/s0/icon-twitter.png) top left no-repeat;}
.social_bookmarks .iconfacebook{background: #E6E6E6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGz4qEY0mLeGK3sJYnjHz4kNyM6ob4FMLd-LxqmMLrzg0TYvdeRbV5ZOVn1SePz2mJD0xQZ-7nrXSkp4gg5KuHIW6UyFoBUqffON8uyeGl6WRsD0cM6sz72Z6VzEUheYJ3BpA_FYxEp5WQ/s0/icon-facebook.png) top left no-repeat;}
.social_bookmarks .icongplus{background: #F1F1F1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5BRm_R91LSzegwNNm1_bxteIEgKFu3dPxyuijnES-Goz6REhU_ZsvVLvZHc94Hycm8l8p0ZKZj_J47vW_VBTlOUa9gwpnrGkxHEWO-yzVyOJBEN_4VyDH95QteQftI0b8dHvCLVcQKZm5/s0/icon-gplus.png) top left no-repeat;}
.social_bookmarks .iconfacebook:hover{background-position:center -77px; background-color: #37589b;}
.social_bookmarks .icontwitter:hover {background-position:center -77px; background-color: #46d4fe;}
.social_bookmarks .icongplus:hover {background-position:center -77px; background-color: #de5a49;}
.social_bookmarks .iconrss:hover{background-position:center -77px; background-color: #ff6600;}
.social_bookmarks li:hover a{background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrbTxZB4Ln0BjG_gcRW64fCCQtxGFDuZWKB3hFxpExcN-h7qgUcJjrNmVf4E5ZJqUMTe1PpS3vxAvxN4Zm-tU93WLefEpB7WvbkBAZjiH3YXxt04q-xpuMx6FEFE88UADgfsfp7PiyGCNS/s0/icon-social-reflect.png) no-repeat;
}
</style>

<div class='social_bookmarks_container'>
<ul class='social_bookmarks'>
<li class='iconrss'>
<a href='/atom.xml'>
RSS
</a>
</li>
<li class='icontwitter'>
<a href='http://twitter.com/usuario'>
Twitter
</a>
</li>
<li class='iconfacebook'>
<a href='http://facebook.com/usuario'>
Facebook
</a>
</li>
<li class='icongplus'>
<a href='http://plus.google.com/+usuario/about'>
Google Plus
</a>
</li>
</ul>
</div>

Fácil y rápido, ¿no? Lo único que resta hacer es poner tus nombres de usuario de cada red social donde se indica en color rojo.
En el caso de la primera versión deberás poner el nombre de tu feed de Feedburner donde se indica, y por supuesto tener activada la suscripción por correo electrónico en Feedburner.

Y si no te gustan los colores, también puedes cambiarlos. Los códigos hexadecimales que están en negritason los colores en su estado normal, y los que están en color naranja son los colores al pasar el cursor.

Y ahora sí, es todo.

Botones para compartir que se detienen y flotan al bajar la página

2017-12-30T18:44:00.000-08:00

Resulta cada vez es más importante que nuestras entradas sean valoradas y compartidas en las redes sociales, así que para muchos mantener visibles los botones para compartir es indispensable.
Y una buena forma de mostrar siempre los botones es hacerlos flotantes, de manera que el lector pueda seguir viéndolos aun cuando baje el scroll de la página.

Lo que hace este script de jQuery es que cuando un elemento, en este caso los botones, lleguen "al tope" de la página se quedarán flotando en una posición fija.
Puedes ver aquí mismo el resultado, baja el scroll de la página, y los botones que están a continuación se quedarán flotando. Si vuelves a la parte de arriba entonces los botones regresarán a su lugar.

2Guardar

Esta barra de botones la pondremos debajo del título de las entradas, la barra incluye los botones de Facebook, Twitter, Google+, Bitácoras, y Pinterest.

Lo primero es entrar en Plantilla | Edición de HTML y marcar la casilla Expandir plantillas de artilugios. Pegamos antes de </head> el script:

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

<script type='text/javascript'>
//<![CDATA[
$(function() {
var $flotarbotones = $("#botonesflotantes"),
$window = $(window),
offset = $flotarbotones.offset();
$window.scroll(function() {
if ($window.scrollTop() > offset.top) {
$flotarbotones.css({'position' : 'fixed', 'width' : '650px', 'top' : '0px'});
} else {
$flotarbotones.css({'position' : 'absolute', 'top' : 'auto'});
}
});
});
//]]>
</script>

Ahora antes de ]]></b:skin> pegamos los estilos de la barra:

#botonesflotantes {
width: 650px; /* Ancho de la barra */
height: 18px;
padding: 8px 0 10px 0;
position: absolute;
background: #eee; /* Color de fondo */
border: 1px solid #E6E6E6; /* Borde */
border-radius:5px;
z-index: 99;
}
.botonesflotantes {
margin-left: 5px !important; /* Distancia de los botones desde la izquierda */
}
.botonesflotantes li {
float: left;
margin-left: 5px;
list-style:none;
}

Por último, debajo de <div class='post-header'> agrega el siguiente código:

<b:if cond='data:blog.pageType == "item"'>
<div style='padding:5px 0 35px 0;clear:both;'>
<div id='botonesflotantes'>
<ul class='botonesflotantes'>


<li><iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url+ "&layout=button_count&show_faces=false&width=100&height=25&action=like&font=tahoma&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:100px; height:25px;'/></li>


<li><a class='twitter-share-button' data-lang='es' href='https://twitter.com/share'>Tweet</a><script src='//platform.twitter.com/widgets.js' type='text/javascript'/></li>


<li><script src='http://apis.google.com/js/plusone.js' type='text/javascript'/><g:plusone expr:href='data:post.url' size='medium'/></li>


<li><a expr:href='"http://bitacoras.com/anotaciones/" + data:post.url'><img alt='votar' expr:src='"http://widgets.bitacoras.com/votar/mini/" + data:post.url' style='vertical-align:middle;border:0;float:right; margin-left:0px;' title='Votar este artículo en Bitacoras.com'/></a></li>


<li><a class='pin-it-button' count-layout='horizontal' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&media=" + data:post.thumbnailUrl + "&description=" + data:post.snippet' style='margin:0 10px 5px 0;'>Pin It</a> <script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/></li>

</ul>
</div>
</div>
</b:if>

Si quieres que los botones estén al final de la entrada entonces el código anterior pégalo antes o después de <div class='post-footer'>

Verás que en el primer código aparece en color verde el ancho de la barra, y también aparece en los estilos, si cambias el tamaño deberás hacerlo en ambos. Toma en cuenta que son varios botones, por lo que no se recomienda hacerla más angosta, de lo contrario algunos botones se bajarán. En caso de que decidas hacerla más angosta entonces quizá sea necesario eliminar algún botón.

En el último código verás a cuál botón corresponde cada código, por si quisieras quitar alguno de ellos.

Si la barra quedara encimada al texto de las entradas entonces cambia el 35px por un valor más alto.
Los botones se verán únicamente al ingresar a las entradas individuales, de otra forma los botones se encimarían unos con otros al bajar la página.

Mostrar una imagen diferente en los links rotos de las imágenes

2017-12-28T19:23:00.000-08:00

Algunos tienen la mala costumbre de hacer hot-linking en su blog, es decir, andan navegando por la red, encuentran una imagen, consiguen su URL y la usan para mostrar dicha imagen en su blog. Es es el hot-linking, y lo único que hace es que perjudiquemos el ancho de banda del sitio al que le hemos tomado la foto. Pero además de eso corres el riesgo de que el dueño del sitio Web elimine la imagen y te quedes sin ella.

Cuando eso sucede obviamente la imagen ya no se mostrará en el blog y en su lugar veremos el típico icono que representa que una el vínculo de una imagen está roto, o sea que el link de esa imagen no funciona.

Pero esa no es la unica razón por la que pueda aparecernos ese icono, a veces aun cuando subimos las imágenes a nuestro propio hosting el servidor puede estar caído, la conexión puede andar lenta, sin querer eliminamos la foto, o simplemente hemos copiado mal la URL de la imagen. En cualquiera de esos casos puede aparecer el icono de la que hablo que indica que la imagen no existe o no cargó.

Lo que veremos hoy es cómo mostrar una imagen diferente al habitual icono predeterminado que trae el navegador, de manera que podamos cambiar la imagen que se muestra cuando la URL de la imagen está rota.

Así que cambiaremos esto:

Por una imagen personalizada, como por ejemplo, esta:

Para conseguirlo usaremos un script muy corto que lo que hace es detectar el tamaño ancho de la imagen, si lo encuentra en cero entonces mostrará la imagen que hemos elegido.
Sólo debes entrar en Diseño | Edición de HTML y antes de </head> pegar lo siguiente:

<script type='text/javascript'>
//<![CDATA[
// Script para sustituir imágenes rotas
function ImagenOk(img) {
if (!img.complete) return false;
if (typeof img.naturalWidth != "undefined" && img.naturalWidth == 0) return false;
return true;
}
function RevisarImagenesRotas() {
var replacementImg = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6LX7li2WCi9frWwIFMiiaTtqYzhzw8RF4DlzFWrLbah6vhnLjxYIWBNjLW9u6CfaEquA5-68xB0s1xaIDSgdgk-rv0ROS4Y9oBwVNSDKp0_koAWkNcBHBTPoksAKIp3Uc6IpIty3wtsQ/";
for (var i = 0; i < document.images.length; i++) {
if (!ImagenOk(document.images[i])) {
document.images[i].src = replacementImg;
}}}
window.onload=RevisarImagenesRotas;
// ]]>
</script>

Lo que está en color rojo es la URL de la imagen de ejemplo que he puesto, pero puedes cambiarla por alguna que tú diseñes o el icono que tú elijas.

Cabe aclarar, que este script no sustituirá las imágenes de los hostings que añaden su propia imagen para indicar que la imagen ha sido eliminada como es el caso de TinyPic y Photobucket.
Recuerda que, para evitar en lo mayor posible que las imágenes no se vean, no uses la imagen de alguien más, mejor sube tus imágenes a Picasa y así te evitarás muchos dolores de cabeza.

El script está probado en Firefox 5, Google Chrome 12, Opera 11, Safari 5, Internet Explorer 7, 8 y 9. En todos funciona, si no ves el icono personalizado de inmediato entonces tienes que esperar a que cargue el blog por completo.

Caja de aviso para el blog con opción de cerrar

2017-12-28T19:22:00.002-08:00

Esta caja de avisos es la que vieron ahora que me ausenté y que muchos me han estado pidiendo. No es nada del otro mundo, de hecho, es una mezcla del mensaje tipo Post-it, y de las etiquetas Fieldset y Legend.

El resultado es una caja de avisos con opción de cerrar y como tiene CSS3 se aprecian sombras tanto en la caja como en el texto de Aviso.

No, no intentes cerrarla, esta es una imagen.

Y bueno, la colocación es prácticamente sólo un paso, únicamente hay que entrar en Diseño | Añadir un gadget | HTML/Javascript, y ahí pegar lo siguiente:

<style type="text/css">
#aviso{
width:500px; /* Ancho de la caja */
padding:5px; position:absolute; z-index:5000;}
.caja-aviso{
border:4px double #0080FF; /* Color del borde */
-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: 8px 8px 6px #808080; -moz-box-shadow: 8px 8px 6px #808080; box-shadow: 8px 8px 6px #808080;
background-color: #CEECF5; /* Color de fondo */
padding: 10px; font-family: Verdana, Geneva, sans-serif;
color: #0B173B; /* Color del texto */
}
.letrero-aviso { /* Estilos de la palabra AVISO */
font-size:18pt;
font-weight:bold;
color:#B4045F;
text-shadow: 0px 0px 10px #BA55D3;}
</style>

<div id="aviso" style="left:300px; top:100px; padding:0;">
<div align="right" style="margin-bottom:-30px;"><b><a href="javascript:closeit()" ><font face="Arial" size="1">[CERRAR]</font> <img valign="middle" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNx5Td57vzMVlPWBjYU8mlfB5DjdMrQ9tXlN5-AnNNeOWQdTDcEZ4fVkjJJ9vEnm1BsWIVVixo5FhIJ6h68I3oPiLrnd72EqSeFvYbKb5QQE93pq6E8ZiVVDKtIUB-IYX-PGnWdMoPLNjw/" style="vertical-align:middle;"/></a></b></div>

<br/>
<fieldset class="caja-aviso">
<legend class="letrero-aviso" align="center">AVISO</legend>
...Aquí va el mensaje...
<br/><div align="right"><a href="http://www.facebook.com/usuario" target="blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhttBJPhqC0XTmNzGAx0PTPZ64kle-pDyqIBLHL9VJaDKEH7Yf9SOxORYTlSahhzGG6DlT8gZ8RI-_dWbTXQ7y04x8Cx72Y1ehumw7P1pkL9S-06JQ07gvpVdyDjRPPC-i1_rRXN7Zo8q5j/" width="26"/></a>
<a href="http://twitter.com/usuario" target="blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfH46xf2FW_Q17oQ7bBi5Q-kkrHJ5S4UWJtNfoNzT-IQpfFGqxVBN7uOwpSKysOyiFbdHbT5ThaOWpAb5WSREbga4-51nSC-rymDiqS412D4TvorbsadE9pWxh5bsbgRfjKz0UgfQUISeU/" width="25"/></a></div>
</fieldset>

<script>
function closeit(){
document.getElementById("aviso").style.visibility = "hidden";
}
</script>

</div><div class="clear"/></div>

Sólo tienes que agregar el mensaje donde se indica, y tu nombre de usuario de Twitter y Facebook (si es que tienes, y quieres) donde se señala.

En la primera parte del código he señalado en color verde los estilos más importantes que se pueden personalizar como el color de fondo, tamaño y posición de la caja, etc.

En donde dice left:300px; top:100px; se puede controlar la posición de la caja de avisos, left es la distancia desde la izquierda, y top la distancia desde arriba.

Y, eso es todo. Disculpen la entrada tan escueta pero mis energías se quedaron en la playa...

Mostrar una cabecera diferente en las entradas del blog

2017-12-28T19:22:00.001-08:00

En la entrada anterior vimos cómo mostrar una cabecera diferente en cada página de etiquetas, y algunos han preguntado si puede hacerse lo mismo pero con las entradas, es decir, que en la portada se muestre la cabecera de siempre, pero al ingresar a las entradas se muestre otra cabecera.

El procedimiento aquí es mucho más sencillo y menos complicado que el anterior pues sólo haremos dos condiciones. Uno que hará que la primera cabecera no se muestre en las entradas y otro para que la segunda cabecera sólo sea visible al ingresar a las entradas individuales.

Puedes ver un ejemplo en este blog de pruebas, al ingresar en algún post verás que la cabecera ha cambiado.

Lo primero que haremos será entrar en Diseño | Edición de HTML y SIN expandir los artilugios buscamos esta línea:

<b:widget id='Header1' locked='true' title='Nombre de mi blog (cabecera)' type='Header'/>

Justo debajo de ella agrega esta línea:

<b:widget id='Header2' locked='true' title='Nombre de mi blog (cabecera)' type='Header'/>

Con eso ya tenemos las dos cabeceras que necesitamos, ahora vamos a condicionarlas.
Para ello agrega antes de </head> lo siguiente:

<b:if cond='data:blog.pageType == "item"'>
<style>
#Header1 {display:none;}
body#layout #Header1 {display:block !important;}
</style>
</b:if>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style>
#Header2 {display:none;}
body#layout #Header2 {display:block !important;}
</style>
</b:if>
<b:if cond='data:blog.pageType == "archive"'>
<style>
#Header2 {display:none;}
</style>
</b:if>
<b:if cond='data:blog.pageType == "index"'>
<style>
#Header2 {display:none;}
</style>
</b:if>
<b:if cond='data:blog.pageType == "static_page"'>
<style>
#Header2 {display:none;}
</style>
</b:if>

Y listo. Por último entra en Diseño | Elementos de la página y verás las dos cabeceras, la primera es la que se muestra en la portada, y la segunda la que se mostrará en las entradas individuales.

Ahí puedes darle click en Editar para cambiarle la imagen que quieras. Fue rápido ¿no?
Es una forma sencilla de mostrar una cabecera diferente en las entradas del blog.