Nuevos gadgets en Blogger in Draft

Hace unos días que Blogger ha incluido dos nuevos gadgets en Blogger in Draft: Gadget de Entradas populares y Gadget de Estadísticas.

En el momento de añadir cualquiera de los gadgets, veremos que estos tienen una serie de opciones para escoger como se verán en nuestro blog.
En el caso de "Entradas populares" podemos seleccionar el mostrar las entradas más populares entre todas, los últimos treinta días o las más populares en la última semana.
Es posible también elegir si mostraremos las entradas con imagen en miniatura, con un pequeño resumen o ambas cosas al mismo tiempo.

Por lo que he podido comprobar, este gadget no se basa en el número de comentarios en la entrada para mostrarla como más popular, así que supongo se basa en las estadísticas, es decir, en las visitas que cada entrada recibe.
Si además escogemos la opción "Imagen en miniatura" y en alguna entrada no hay imágenes o no hay una imagen a comienzo de entrada, en el gadget no se mostrará ninguna miniatura de imagen.

En el caso del gadget Estadísticas, se muestran las páginas vistas en total, y también hay una serie de opciones para escoger como se verá una vez aplicado al blog:

Nota:

Recordad que, como todo lo que se incluye en Blogger in Draft, estos gadgets aún están en pruebas y que, por el momento, solo pueden añadirse accediendo a nuestro escritorio desde Blogger in Draft.

Fotografía y descripción del autor de las entradas

Veremos como colocar un apartado especial al pie de cada entrada con la fotografía del autor de la entrada y una breve descripción sobre su persona.
Podrá usarse para blogs con solo un autor o para los que publican varios autores, una vez instalado el código, se mostrará de forma automática el apartado que diferencia a cada autor de las entradas.

[1] En nuestro Escritorio de Blogger nos situamos en Edición HTML y marcamos la casila de Expandir las plantillas de artilugios.

[2] Buscamos la etiqueta ]]></b:skin> y justo antes colocamos el CSS para controlar el diseño del apartado:

#post-footer-autor {
width: 100%;
height: 70px; /*Altura del apartado de autor */
background: #669900; /* Color de fondo del apartado */
margin: 8px 0px 8px 0px; /* Margenes del apartado de autor */
border: 2px solid #ccc; /*Borde del apartado*/
}
/* Estilo del avatar */
#autor-avatar {
width: 54px; /* Anchura del espacio para el avatar */
height: 54px; /* Altura del espacio para el avatar */
background: #ccc; /* Color de fondo del avatar */
float: left;
margin: 7px; /* Margenes del avatar */
}
#sobre-autor {
padding-right: 5px;
margin: 0px;
}
/* Estilo del texto de la descripción */
#sobre-autor p{
font-size: 12px; /* Tamaño de la fuente */
padding: 10px;
margin: 0;
text-align: justify;
text-transform: normal;
color: #fff;/* Color del texto */
}
/* Estilo texto de enlace */
#sobre-autor a{
color: #9A9A9A; /* Color del enlace */
text-decoration:none;
}
/* Estilo texto enlace al paso del ratón */
#sobre-autor a:hover {
color: #9A9A9A; /* Color enlace */
text-decoration:none;
}

[3] Localizamos esta etiqueta: <div class='post-footer'>
o en su defecto, esta otra: <div id='post-footer'>

[4] Una vez localicemos una u otra, según aparece en nuestra plantilla, tenemos que colocar justo antes, este código:

<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.author == &quot;NOMBRE DEL AUTOR&quot;'>
<div id='post-footer-autor'>
<div id='autor-avatar'>
<img src='URL DE LA IMAGEN DE AUTOR' style="border: 2px solid #ccc; padding: 0; margin: 0;"/>
</div>
<div id='sobre-autor'>
<p>
DESCRIPCION BREVE DE AUTOR
</p>
</div>
</div>
</b:if>
</b:if>

A tener en cuenta:

El código tal cual lo vemos arriba -paso [4]- sería para solo un autor, para que se muestre la descripción de autor en blogs compartidos tendremos que repetir ese código tantas veces como autores publiquen en el blog, después hacemos los cambios correspondientes para cada autor.

El apartado de autor solo será visible en las páginas de entrada, para mostrarlo también en el home del blog, eliminamos la primera línea del código: <b:if cond='data:blog.pageType == "item"'> y el último </b:if> del final.

NOMBRE DEL AUTOR Colocamos aquí el nombre del autor exactamente igual a como aparece en nuestro perfil de Blogger, es decir, el nombre que usamos en nuestra cuenta de Blogger para firmar las entradas.

URL DE LA IMAGEN DE AUTOR Colocamos la url aquí de nuestro avatar, que tendrá aproximadamente unas medidas de 50px por 50px.

DESCRIPCION BREVE DE AUTOR Aquí escribimos una breve descripción sobre el autor, usando la vista previa para calcular que el texto no sobrepase el espacio disponible para el. Se pueden incluir enlaces en el texto si así lo queremos.

Cómo utilizar las fuentes personalizadas de Google en Blogger

En Blogger solo podemos utilizar las fuentes habituales disponibles en la mayoría de los de ordenadores (Arial, Courier, Georgia, Impact, Times New Roman, Trebuchet y Verdana).

Esto es así porque, aunque nosotros tengamos instaladas en nuestro PC muchas más fuentes y podamos incluso aplicarlas a nuestro blog, nuestros lectores se limitarán a ver solamente las fuentes que ellos tengan instaladas en su PC.


Eso puede cambiar si utilizamos Google Font API que nos permite utilizar las fuentes disponibles en su Directorio de fuentes en nuestro blog sin importar que fuentes o no tienen instaladas nuestros lectores en sus ordenadores, pues la La API de Google utiliza fuentes que están alojados por Google.

Un ejemplo online podéis verlo en el título del Escaparate, donde hace tiempo utilizo la fuente Droid Serif.


[1] Vamos al Directorio de fuentes y vemos allí la lista de fuentes disponibles.

[2] Pinchamos sobre la fuente que nos interese y después en Preview this font para probar el efecto de algunas de las propiedades que pueden aplicarse a la fuente (tamaño de la letra, espaciado, sombra, etc.).

[3] Para obtener el código que necesitamos, pinchamos en "Get the code" (destacado en azul).
Antes de copiar el código marcamos las casillas para las variantes (Normal, itálica, negrita, negrita itálica) si es que la fuente elegida las proporciona.

[4] El código resultante y que hemos de copiar, será algo como esto:

<link href='http://fonts.googleapis.com/css?family=Cantarell' rel='stylesheet' type='text/css'>

Nota:

Antes de usar el código en Blogger tendremos que añadirle la barra de cierre final para que lo admita:

<link href='http://fonts.googleapis.com/css?family=Cantarell' rel='stylesheet' type='text/css'/>

[5] Pegamos el código antes de la etiqueta </head> de nuestra plantilla.

[6] Para aplicar el tipo de fuente, añadimos en el CSS según donde vamos a utilizarlo lo que en el directorio se nos indica:

font-family: 'Cantarell', arial, serif;

[7] Utilizando una plantilla Mínima de Blogger por ejemplo, lo usaríamos así en el título de nuestro blog:

#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font-family: 'Cantarell', arial, serif;
}

Y de esta manera en el título de nuestras entradas:

.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-family: 'Cantarell', arial, serif;
line-height:1.4em;
color:$titlecolor;
}

Botones oficiales de Twitter

Ya hace días se venían haciendo eco algunos blogs de la presentación de unos nuevos botones oficiales de Twitter prevista para esta semana.

Ayer mismo pude comprobar que ya están disponibles para todos y que podemos obtener su código desde nuestra página de Twitter.

[1] Desde nuestra página de inicio en Twitter y al pie de la misma, pinchamos en el enlace que dice "Extras".

[2] Accedemos entonces a la página "Extras de Twitter", donde vemos que aparece una nueva opción llamada "Botón de Twittear". Pinchamos ahí.

[3] Ahí vemos los modelos disponibles de botones (Cuenta vertical, cuenta horizontal y sin contador)y una serie de opciones que podemos utilizar.

[4] Una vez marcado el que vamos a utilizar, vemos debajo una vista previa y el código para copiar y pegar en nuestro blog.


Como añadir el botón a nuestras entradas

Vamos a ver como añadir el botón debajo del título de cada entrada y a la derecha o izquierda del texto del post.
En primer lugar añadiremos una condicional para que el botón solo sea visible al acceder a la página de entrada, ya que de esta manera será la url de la entrada la que se enviará a Twitter y no la url de nuestro blog.

[1] Vamos a Edición HTML en nuestro panel y marcamos la opción de "Expandir las plantillas de artilugios" para localizar esta etiqueta en el código de la plantilla:

<div class='post-body entry-content'>

[2] Justo debajo añadimos el código para el botón de esta manera:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='display: inline; float: right; margin-left: 5px;'>
AQUI EL CODIGO QUE COPIAMOS EN TWITTER PARA EL BOTON
</div>
</b:if>

Ejemplo:

Notas:

Para mostrar el botón a la izquierda de la entrada, cambiamos donde dice en el código float: right; margin-left: 5px; por float: left; margin-right: 5px;

Comentarios en Blogger con filtro anti-spam

Nos informan desde el blog oficial de Blogger Buzz de la implantación de dos nuevas mejoras en el sistema de comentarios de Blogger: la posibilidad de ver todos los comentarios del blog en un solo lugar y un filtro anti-spam que manejaremos tal como hacemos en nuestra Bandeja de correo.

Antes de continuar traduciendo el artículo de Blogger Buzz, he de comentaros que la implantación de estas funciones será gradual, es decir, algunos podrían disponer ya de las mismas en su panel y otros aún no (tal es mi caso).

Será un sub-enlace en Configuración - comentarios, tal como nos muestra la imagen tomada del ejemplo de Blogger Buzz:

Los comentarios en la bandeja de entrada de spam no son visibles para nuestros lectores. Aquí, nosotros podremos eliminar permanentemente los comentarios spam seleccionándolos y eligiendo "Eliminar".
También podremos marcar los comentarios como No Spam que se han clasificado incorrectamente como spam (lo que suele llamarse "falsos positivos"). Elegimos "No es spam" y los comentarios seleccionados se ubicarán fuera de la lista de spam y serán publicados de inmediato en nuestro blog.

Estas acciones ayudaran a Blogger a identificar mejor el spam en nuestro blog.

Una vez implementadas estás funciones, sería ideal que de vez en cuando comprobásemos nuestra bandeja de entrada de spam para ver si cualquier comentario que no es spam se han marcado como spam.
Tendremos en cuenta que el filtrado de spam en la actualidad sólo se aplicará a los nuevos comentarios.

Nota:

Esta entrada es tan solo una traducción más o menos libre, del artículo original en Blogger Buzz, pues como ya he dicho antes, aún no tengo las funciones habilitadas en mi panel.

ARTICULO ORIGINAL:Blogger Buzz

Entradas duplicadas

Me han llegado últimamente varias consultas sobre un problema que parece se esta dando especialmente cuando pasamos a usar una plantilla de las del nuevo diseñador de Blogger y después volvemos a utilizar de nuevo una de las anteriores.

Estoy hablando de la duplicación de entradas, es decir, la plantilla una vez cargada de nuevo muestra dos gadgets de "Entradas del blog" en la parte de Diseño y en la vista del blog las entradas se repiten.

No se si la solución será la misma en todos los casos, ya que podría haber más problemas añadidos, aunque todas las veces que me han consultado sobre esto se ha solucionado de la forma que veremos a continuación.

[1] En nuestro panel de Blogger, nos situamos en Diseño - Edición de HTML.

[2] Sin marcar la casilla de "Expandir las plantillas de artilugios" localizamos está línea de código:

<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>

[3] Cerca de esa línea, probablemente a continuación, encontraremos otra línea casi idéntica, que solo se diferenciará de la primera por su id.

Podría ser algo así:

<b:widget id='Blog2' locked='true' title='Entradas del blog' type='Blog'/>

Aunque también podría tener una numeración distinta en su id: Blog3, Blog5, etc.

Lo que nos interesa es eliminar esa línea, es decir, la línea duplicada que no incluya el id='Blog1'.

[4] Usamos vista previa para comprobar que las entradas aparecen correctamente y no se repiten.

[5] Si todo está bien, guardamos los cambios.

Usar imagen propia de fondo desde el Diseñador de plantillas

Después de que en Blogger empezase a funcionar el Diseñador de plantillas, una de las características más demandadas es la capacidad para usar nuestra propia imagen de fondo.
Desde el blog de Blogger in Draft nos informan de que ya es posible cargar una imagen propia desde nuestro PC usando el Diseñador de plantillas.

[1] Accedemos a nuestro Escritorio desde Blogger in Draft.

[2] Vamos a Diseño - Diseñador de plantillas - Fondo y pinchamos sobre la imagen de fondo del ejemplo.

[3] Vemos que aparece una nueva opción que dice "Subir imagen":

Nota:

Para las imágenes que llenan todo el fondo, se recomienda utilizar una resolución de 1800 píxeles de ancho y 1600 píxeles de alto, y el archivo de tamaño inferior a 200KB para reducir al mínimo el tiempo de la página.
Acepta imágenes en formato JPEG, GIF y PNG.

[4] Una vez subida la imagen, podrás ver las opciones adicionales que están disponibles para el incorporado en imágenes: Alineación, Repetición, y opciones de desplazamiento.

ENTRADA ORIGINAL:Blogger in Draft