Número de comentarios arriba del post

La mayoría de las plantillas tienen el número de comentarios y su enlace en la parte del footer del post, es decir, al final de la entrada, pero igual podemos ponerlo arriba de la entrada encima de un icono para que sea más visible y atractivo para los lectores.

La modificación es sencilla, sólo entra en Diseño > Edición de HTML, marca la casilla Expandir plantillas de artilugios y busca esta línea:

<b:includable id='post' var='post'>

Justo debajo de esa línea pegamos esto:

<span class='post-comment-link-arriba' style='font-size:24px; background: url(http://2.bp.blogspot.com/_qgZA1ny_dAs/TAMD0pviQsI/AAAAAAAAEQE/wIJ6xT5MjFA/s400/bubble.png) no-repeat top right; width:48px; height:48px; text-align:center; float:right; margin:5px 0 0 0; padding:5px 7px 0 5px;'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <b:else/><data:post.numComments/></b:if></a>
</b:if>
</span>

Y listo, tendrás el número de comentarios arriba de la entrada.
Por supuesto puedes cambiar el icono por otro, sólo cambia lo que está en color rojo por la URL de tu icono.
Si cambias el icono deberás cambiar donde dice width (ancho) y height (alto) por las medidas del nuevo que has puesto.
El tamaño de los números se cambia donde dice font-size:24px; y la posición de los mismos en donde dice padding:5px 7px 0 5px;

ACTUALIZACIÓN (02/06/2010)

El ícono con el número de comentarios también aparecerá en las Páginas estáticas, se deseas que no aparezca ahí entonces encierra el código anterior así:

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

...aquí va el código...

</b:if>

De ese modo sólo aparecerá en las entradas pero no se mostrará en las Páginas estáticas.

ACTUALIZACIÓN (08/06/2011)
En las plantillas hechas con el Diseñador de Plantillas de Blogger se debe quitar el float:right; del código, eso lo pondrá del lado izquierdo y quizá no se vea muy estético, pero si no se hace entonces el enlace a los comentarios no funciona.

Les dejo unos iconos que pueden usar:

Descargar | Iconos de comentarios

Menú horizontal con marquesina

Hace unos días en la entrada sobre el editor HTML online puse un menú de ejemplo y si bien instalarlo es fácil para la mayoría, otros me han preguntado cómo ponerlo en el blog. Y bueno, además de esto se me ocurrió que el menú tuviera un mensaje en marquesina para que pudieran anunciar algo, dar la bienvenida o promocionar una entrada.

<style type="text/css">#menu-title{padding:5px;background:#333;border-bottom:1px solid #fff;}#menu-title h3{padding:0; margin:0;color:#ccc;font-family:Verdana, serif;font-weight:bold;font-size:140%;}#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(http://4.bp.blogspot.com/_qgZA1ny_dAs/S_Qq7NYdkxI/AAAAAAAAELs/hSMXOms6o6I/s400/nav_slant.gif)no-repeat top right;}#nav #nav-1 a {padding-left:20px;}#nav a:hover{color:#000;}</style><div id="menu-title"><h3><marquee >Ciudad Blogger</marquee></h3></div><ul id="nav"><li id="nav-1"><a href="javascript: void(0)">Inicio</a></li><li><a href="javascript: void(0)">Directorio</a></li><li><a href="javascript: void(0)">Contacto</a></li><li><a href="javascript: void(0)">Acerca de</a></li></ul>

ATENCIÓN: Si usas una plantilla hecha a través del Diseñador de plantillas de Blogger primero necesitas seguir los pasos de esta entrada.

Para ponerlo en tu blog entra en Diseño > Edición de HTML y pega antes de ]]></b:skin> lo siguiente:

#menu-title {
padding:5px;
background:#333; /* Color de fondo de la marquesina */
border-bottom:1px solid #fff;
}
#menu-title h3 {
padding:0; margin:0;
color:#ccc; /* Color de texto de la marquesina */
font-family:Verdana, serif;
font-weight:bold;
font-size:130%; /* Tamaño de la letra de la marquesina */
}
#nav {
float:left;
width:100%;
margin:0; padding:0;
list-style:none;
background:#ccc; /* Color de fondo del menú */
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-family:Verdana, serif;
font-weight:bold;
font-size:90%; /* Tamaño del texto del menú */
color:#666; /* Color del texto del menú */
/* Color de fondo del menú */
background:#ccc url(http://4.bp.blogspot.com/_qgZA1ny_dAs/S_Qq7NYdkxI/AAAAAAAAELs/hSMXOms6o6I/s400/nav_slant.gif)no-repeat top right;
}
#nav #nav-1 a {padding-left:20px;}
#nav a:hover {color:#000;}

Ahora después de <body> pega lo siguiente:

<div id="menu-title">
<h3><marquee behavior="alternate">Aquí va el mensaje</marquee></h3>
</div>
<ul id="nav">
<li id="nav-1"><a href="URL del enlace">Inicio</a></li>
<li><a href="URL del enlace">Directorio</a></li>
<li><a href="URL del enlace">Contacto</a></li>
<li><a href="URL del enlace">Acerca de</a></li>
</ul><div class='clear'/>

Eso hará que el menú quede arriba de la cabecera, si lo deseas debajo de la cabecera o en otro lugar entonces entra en Diseño > Elementos de la página > Añadir gadget > HTML/Javascript y pega ahí el contenido, ya después arrastra el elemento donde quieras.

Ya sabes que, lo que está en color rojo hay que remplazarlo por el mensaje de bienvenida y por las URL de los enlaces correspondientes. Para personalizar los colores y texto cambia las partes que están en color verde.

Problemas con los comentarios y número de entradas

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.

Quo Template: Plantilla para Blogger

descargas

Descarga externa

Nombre:	Quo
Diseñador:	El Potro
Compatibilidad:	Google Chrome, Mozilla Firefox, Safari, Opera, Internet Explorer
Características:	Plantilla para Blogger, 2 columnas principales, 3 columnas en el footer, 860px de ancho, Optimizada para SEO, Colores minimalistas, Comentarios numerados, Comentarios destacados
Incluye:	Plantilla XML, Instrucciones de instalación, Licencia

Inicialmente estaba diseñando una plantilla para Ciudad Blogger pero poco a poco me fui alejando de lo que tenía en mente hasta que di con una combinación que me gustó mucho para compartirla con todos ustedes.

Quo es una plantilla gratuita de dos columnas principales y tres columnas más en la parte del footer para poder colocar ahí más gadgets, tiene una cabecera reducida alineada a la izquierda para que el contenido de las entradas inicie desde la parte superior.

El diseño de la plantilla es minimalista, los colores blanco y negro predominan en ella y un elegante color rojo resalta ciertas áreas como la letra inicial de cada título de entrada. Es una plantilla que denota seriedad pero al mismo tiempo simplicidad y modernidad.

Personalización:

La cabecera tiene un ancho máximo de 320px por lo que se recomienda usar un título pequeño o un logotipo que no exceda esa medida; si se desea poner un título largo se recomienda ajustar el tamaño de la letra del título a un tamaño más pequeño, se modifica en esta área:

#header h1, #header h2 {
margin:5px 5px 0;
padding:15px 0 .25em;
line-height:1.2em;
font-size:120px;
font-family:Georgia;
word-wrap:break-word;
}

Es compatible con todos los navegadores más conocidos (arriba se especifica cuáles) según la última versión actual de cada uno de ellos.

Los títulos se han optimizado para SEO con la finalidad de ser más amigables para los robots de los buscadores y facilitar el posicionamiento en la web.

Espero que les guste y sobre todo que la disfruten.

ACTUALIZACIÓN 1.0
Ya se ha corregido el problema de visualización en Internet Explorer 7. El color del texto de las entradas así como el texto de la cabecera ya es visible.

Si el enlace de descarga no funcionara también puedes descargarla desde aquí.

Editor de HTML online

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(http://4.bp.blogspot.com/_qgZA1ny_dAs/S_Qq7NYdkxI/AAAAAAAAELs/hSMXOms6o6I/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

Botón para votar en Bitácoras.com

Ya hemos visto cómo poner un botón para compartir los artículos en Facebook y Twitter, ahora le toca el turno a Bitácoras.com

Pondremos un botón para que los lectores puedan votar un articulo y así facilitar que se posicione en los primeros lugares de la portada de Bitácoras de forma más rápida.

Hay distintos botones (agregadores) que puedes colocar, en todos los casos es el mismo procedimiento.

Entra en Diseño > Edición de HTML, expande los artilugios y localiza esta línea:

<data:post.body/>

Debajo de ella agrega lo siguiente:

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

El resultado será el siguiente:



SI quieres un botón más grande entonces el código que debes pegar es este:

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

Y se verá así:



Para un botón más pequeño el código a pegar es el siguiente:

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

Quedará de esta forma:



Y para ese mismo mini botón pero sin imagen de fondo sería con este código:

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

Y el resultado será este:




Si quieres que el botón se muestre SÓLO en las entradas individuales y no en la página principal del blog entonces encierra el código que hayas elegido en un código condicional. De esta forma:

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

...Código del botón...

</b:if>

Cualquiera de esas opciones será estupenda para promocionar tus entradas en Bitácoras y tendrás muchas más posibilidades de conseguir más votos por tu artículo.

Gadget de cuenta regresiva para Sudáfrica 2010

Como ya se acerca la Copa mundial Sudáfrica 2010 me di un espacio para hacer este gadget que es una cuenta regresiva de los días que faltan para el mundial. Para mostrarlo en tu blog sólo haz agrega el siguiente código en un elemento HTML/Javascript.

<table background="http://1.bp.blogspot.com/_qgZA1ny_dAs/S-rzk2j1d4I/AAAAAAAAEJw/0tSVYuDOtck/s1600/bg_countdown.png" border="0" width="200" height="100" cellpadding="0"><tbody>
<tr><td><div style="_margin-top:7px;*margin-top:7px;margin-left:120px;font-size:45px;font-family:impact;color:#FFF;"><script language="JavaScript">
TargetDate = "06/11/2010";
BackColor = "transparent";
ForeColor = "white";
CountActive = true;
CountStepper = -1;
LeadingZero = true;
DisplayFormat = "%%D%%";
FinishMessage = "00";
</script>
<script language="JavaScript" src="http://ciudad-blogger.googlecode.com/files/countdown.js"></script></div>
</td></tr>
</tbody></table>

Que lo disfruten

S3Slider: Mostrar contenido destacado

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

Para ponerlo en tu blog sigue estos pasos:

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

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

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

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

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

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

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

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

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

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

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

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

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

Arrastrar imágenes con JQuery

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

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

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

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

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

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

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

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

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

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

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

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

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

Descargar | JQuery EasyDrag