El Escaparate (Ayuda para tu blog)

Solución al diseño del gadget de suscripción

2009-11-26T14:11:00.004+01:00

Hace tiempo que desde Diseño podemos añadir un gadget de Blogger que permite a nuestras visitas el suscribirse a entradas y comentarios de nuestro blog.

El gadget no tenía demasiada aceptación entre los bloggers de habla hispana, ya que en los blogs en español la frase que anima a suscribirse a los comentarios, al traducirse automáticamente del inglés, se alargaba demasiado y sobresalía de la imagen de fondo:

Gracias a nuestro amigo Vku del fantástico blog de ayuda ¿Como se hace? ahora podemos corregir este error añadiendo un código para controlar la apariencia del gadget y que quede muchísimo más presentable.

[1] Añadimos el gadget desde Edición si es que aún no lo tenemos añadido, si ya lo estamos usando no es necesario más que añadir el código para controlar su diseño.

[2] Localizamos desde Edición HTML de nuestro panel, la etiqueta ]]></b:skin> dentro del código de nuestra plantilla, y justo encima de esa etiqueta colocamos este código:

div.subscribe div.top{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://3.bp.blogspot.com/_kZA33lWARzc/SwWaujGtCTI/AAAAAAAAAB0/RxmpcpAhg7g/s1600/s_top180.png',sizingMethod='crop');font-size:1em;padding:4px 5px 1px 5px;width:180px;}

html>body div.subscribe div.top{background:url(http://3.bp.blogspot.com/_kZA33lWARzc/SwWaujGtCTI/AAAAAAAAAB0/RxmpcpAhg7g/s1600/s_top180.png) top left no-repeat;background-color: transparent;}

div.subscribe div.bottom{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://3.bp.blogspot.com/_kZA33lWARzc/SwWauSzeNyI/AAAAAAAAABs/SbcV1yk5fq0/s1600/s_bottomx180.png',sizingMethod='crop');height:3px;font-size:3px;line-height:0;}

html>body div.subscribe div.bottom{background:url(http://3.bp.blogspot.com/_kZA33lWARzc/SwWauSzeNyI/AAAAAAAAABs/SbcV1yk5fq0/s1600/s_bottomx180.png) bottom left no-repeat;width:180px;margin-bottom:0;padding-bottom:0;}

Resultado:

No se os olvide visitar el blog de Vku donde encontraréis muchos trucos y cosillas interesantes y donde podéis contar con su ayuda si algún problema tenéis para aplicar cualquiera de sus "trucos".

Tampoco estaría mal si vais a usar el "truco" de esta entrada, le dejaséis a Vku un comentario de agradecimiento en su blog en lugar de en este post.

¿Cómo se hace?

Nuevas opciones del editor de entradas (Blogger in Draft)

2009-11-19T05:04:00.007+01:00

Si accedes a tu panel de Blogger desde Blogger in Draft comprobarás que hay añadidas nuevas funciones en su editor.

¿Qué es Blogger in Draft?

Es una versión de Blogger en la cual el equipo de Blogger va habilitando nuevas funcionalidades a modo de prueba. Para acceder a esta versión de Blogger, usamos los mismos datos que para acceder a nuestro panel de Blogger "normal", y una vez dentro lo usamos exactamente igual que hacemos en Blogger. La única diferencia es que a la hora de añadir un nuevo elemento a nuestra sidebar, veremos algunas opciones que en el otro Blogger no están disponibles aún.
Podría decirse que Blogger in Draft es como un laboratorio donde se prueban nuevas funcionalidades antes de sacarlas definitivamente al público.

Aunque la información respecto a las imágenes que vamos a subir aparece en inglés, no es difícil de entender, nos informa por ejemplo que podemos usar archivos de imagen en formato JPG, GIF o PNG.

Debajo aparece una frase que dice "Images will we added to this Picasa album" o lo que es lo mismo "Las imágenes han sido añadidas a este álbum de Picasa" y vemos el título del blog en el que estamos trabajando ya que el álbum que se crea en Picasa para las imágenes subidas al mismo, llevará el mismo título.

En ese mismo despegable, aparece una lista con el resto de blogs que tenemos en Blogger, aunque eso no quiere decir que si escogemos uno que no sea en el que estamos trabajando en ese momento las imágenes vayan al álbum de ese blog... las imágenes van a ir siempre al álbum de Picasa creado para el blog desde donde las subimos.

Si pinchamos a la derecha de la ventana, donde dice "Álbunes Web de Picasa veremos una vista previa de los albunes que tenemos allí alojados.

Para acceder a nuestra cuenta de Picasa y ver los albunes de imágenes subidas a nuestros blogs, lo hacemos con los mismos datos de acceso de nuestra cuenta de Blogger.

Nota:

Si aún no sabías que Picasa estaba integrado con Blogger te interesará leer esta información:
Usar Álbumes web de Picasa con Blogger

Para añadir un vídeo es tan sencillo como pinchar en el icono y una vez en la pantalla que se abre, pinchar en Examinar, localizar el vídeo en nuestro PC y pinchar al fin en Unpload.

En cuanto al traductor dispone de dos opciones: Traducir y Definir.
Para usar el Traducir marcamos con el puntero del ratón donde vamos a incluir la palabra traducida en modo Redactar del editor, después escogemos el idioma del que vamos a traducir y el idioma que traduciremos el texto, nos mostrará una lista con las posibles traducciones, pinchamos sobre la que vamos a utilizar y damos en Insertar, la palabra que aparecerá de forma automática donde marcamos con el puntero.

He podido comprobar que en el caso de traducción de frases enteras, se traduce de forma automática, no presenta varias opciones como en el caso de una palabra sola.

El traductor usa la tecnología del Diccionario de Google así que la forma de usarlo es prácticamente la misma.

En el caso de la opción Definir, los resultados te muestran una serie de resultados en Google a los que, si he de ser sincera, no encuentro ninguna utilidad...

Enlace Siguiente Blog en la Navbar mejorado

2009-11-12T23:25:00.000+01:00

Desde Blogger Buzz nos informan de una nueva mejora que se ha incluido en la Navbar de Blogger.

Traduzco la entrada al español que viene a decir algo así:

Algunos de ustedes se habrán preguntado para que sirve el enlace Siguiente que vemos en la NavBar de Blogger.
Ese enlace se utiliza para llevar al usuario a un blog al azar, publicado en Blogger, si una vez en ese blog se pincha de nuevo en Siguiente, el enlace nos mostrará otro blog al azar y así sucesivamente.
El blog o blogs a los que llegamos de esta manera, podría estar escrito en un idioma distinto al nuestro, puede ser que el blog donde estamos sea sobre cocina por ejemplo, y el enlace nos lleve a uno sobre deportes...

Hemos hecho el enlace Siguiente más útil, por que ahora nos llevará a un blog con contenido similar al blog de donde partimos, en un idioma que usted entienda.
Si usted está leyendo un blog español sobre los alimentos, el vínculo de blog Siguiente probablemente le llevará a otro blog sobre los alimentos y en español.

Usted puede descubrir así un nuevo blog que quizá tenga curiosidad e intereses similares.
Vamos a terminar el despliegue de las nuevas mejoras en el enlace de blog Siguiente durante la próxima semana y esperamos que disfruten descubriendo blogs que es probable que le interesen.

Esta ha sido una diversión y un esfuerzo de colaboración en el equipo de Blogger y hemos contado con el apoyo que hemos recibido de otros equipos de Google.
Realmente esperamos que disfrute de la nueva función blog Siguiente tanto como nosotros.

Como usar correctamente el Leer más (More) en Blogger

2009-11-12T16:51:00.000+01:00

Son muchas las personas que me solicitan ayuda últimamente para resolver el mismo problema: la sidebar sin motivo aparente se ve debajo de las entradas.

Esto puede ser causado por diferentes motivos, aunque en estos últimos días el problema común parece ser el uso de la "Leer más" o More que Blogger ha incluido en su nuevo editor.

El problema está en que el nuevo editor de Blogger incluye la opción de Leer más para ser usada desde la pestaña de Redactar, así que una vez hemos formateado la entrada a nuestro gusto, incluimos el More donde mejor nos parece y le damos a "Publicar entrada", podríamos llevarnos la desagradable sorpresa de encontrar que nuestra sidebar se "ha venido abajo".

Para solucionar esto una vez preparada nuestra entrada (antes de publicarla), debemos comprobar desde la pestaña Edición de HTML de nuestro editor que el More está bien colocado.

Ejemplo:

Supongamos que queremos publicar una entrada donde el texto de la misma vamos a mostrarlo centrado.

Una vez la hemos redactado seleccionamos el texto, lo centramos con el botón del editor e incluimos el Leer más o More, desde la pestaña Redactar del editor en la que estamos la entrada se vería como esta:

Todo parece estar correcto, pero si observamos la misma entrada desde la pestaña Edición de HTML, veríamos entonces algo como esto:

Vemos entonces que el Leer más o More, está "cortando" el div que hemos colocado para centrar el texto de la entrada, así que si diéramos a Publicar entrada en este momento con toda probabilidad la sidebar se "vendría abajo".
La forma de solucionar esto, sería volver a la pestaña de Redactar y centrar los dos párrafos o partes de la entrada (la que irá antes del More y la que irá después) por separado.
Volvemos entonces a mirar la entrada desde Edición de HTML y tendríamos que ver algo así:

El More ya no está "cortando" el div y podremos publicar la entrada entonces sin temor a encontramos con el problema en la sidebar.

Pensad que esto podría suceder con cualquier etiqueta de las que habitualmente usamos en las entradas y no solo con los div, cualquier etiqueta que se abra antes de la colocación del More, también debe ser cerrada antes del mismo.

Si aún necesitáis una explicación más completa o no habéis entendido la mía, esta fantástica entrada de Vagabundia estoy segura que os ayudará a despejar cualquier duda al respecto.

Problema en "Diseño" del panel de Blogger

2009-11-09T13:40:00.003+01:00

Llevo varios días recibiendo consultas sobre un problema aparecido en la parte de Diseño (añadir elementos de página) del panel de Blogger.

En todos los casos que me han consultado e incluso en el mio propio, los elementos de Diseño aparecen centrados, aunque esto no implica para nada a la vista "real" del blog o a su funcionamiento, ha provocado la alarma en muchos usuarios.

Parece ser que el error solo afecta a las plantillas con cambios en su diseño (customizadas), en el caso de las plantillas originales de Blogger sin cambios de diseño posteriores a su instalación, esto no sucede.

En el caso del Escaparte, así es como aparecen desde hace días los elementos de página:

Desde Known Issues for Blogger (Problemas conocidos por Blogger) informan a los usuarios del fallo y comentan que están investigando la causa para tratar de solucionarlo:

Saturday, November 07, 2009

"Layout" rearranging for users with customized templates is currently broken. We are investigating the issue.

¡Paciencia una vez más!

Actualización:

Parece ser que el equipo de Blogger ya ha solucionado el tema del error en Diseño.
En mi caso todo ha vuelto a la normalidad y me sigue llegando confirmación de que ha sido solucionado en otros casos que tenían el mismo problema.

Gadget para Twitter

2009-11-07T23:28:00.000+01:00

Me he encontrado en kadazuro blog con este gadget diseñado en flash para mostrar los updates de Twitter en el blog.

Muestra nuestro avatar de Twitter y además mediante las flechitas que tiene incorporadas podemos ir retrocediendo a updates anteriores.

Para colocarlo solo tenemos que copiar y pegar el código en un gadget HTML aunque funciona perfectamente en las entradas, como podéis comprobar aquí mismo:

[1] Este es el código que deberemos copiar y pegar donde vayamos a mostrar el gadget:

<object width="170" height="140" bgcolor="#FFFFFF">
<param name="movie" value="http://kadazuro.com/twitter/twitterReader.swf?userId=RosaTorre&mainColor=0x336699&fontColor=0xFFFFFF&dateColor=0x336699&layoutMode=left">
</param>
<embed src="http://kadazuro.com/twitter/twitterReader.swf?userId=RosaTorre&mainColor=0x336699&fontColor=0xFFFFFF&dateColor=0x336699&layoutMode=left" type="application/x-shockwave-flash" width="170" height="140" bgcolor="#FFFFFF">
</embed>
</object>

[2] Modificaciones que podéis hacerle de forma manual:

userId=RosaTorre Cambiáis RosaTorre que es mi nick de Twitter por el vuestro. Fijaros que habréis de hacerlo dos veces.

mainColor =0x336699 Cambiáis por el código del color que queréis que tenga el la burbuja donde van incluidos los updates. Fijaros que tendréis que hacerlo sin tocar el 0x que está pegado al código del color.

fontColor=0xFFFFFF El color del texto de los updates, tendréis que respetar igual que antes el 0x previo al código del color.

dateColor=0x336699 El color del texto con la fecha de los updates.

bgcolor="#FFFFFF" El color de fondo del gadget.

[3] Las mismas modificaciones anteriores, pueden hacerse de forma automática desde el blog del creador del gadget a través de un generador incluido en la entrada de presentación del gadget.

Moderar los comentarios

2009-11-02T23:58:00.000+01:00

Esta es una función de Blogger muy útil que podemos usar cómodamente desde nuestro propio panel, y que nos dará la posibilidad de ver todos los comentarios antes de que se publiquen en nuestro blog, lo que nos permitirá aceptarlos o rechazarlos según nos interese.

Se que es una función de sobra conocida por muchos de vosotros, pero últimamente he estado recibiendo emails sobre el tema de nuevos usuarios de Blogger que desconocían como activar esta opción, así que he decidido publicarlo para los que necesiten la información.

Esta opción se encuentra en la pestaña de Opciones - Comentarios, donde encontramos también las demás opciones de comentarios. Simplemente tenemos que marcar la opción "Siempre":

Al elegir "Siempre", vemos que sale una casilla para introducir una dirección de correo electrónico.
Esto nos permite moderar los comentarios a través del correo electrónico, aunque esta función es opcional, ya que aunque la escojamos podremos moderar igualmente los comentarios desde el panel de Blogger.

Una vez guardados los cambios, podemos empezar a recibir los nuevos comentarios con la seguridad de que nosotros seremos los primeros en leerlos, ya que a partir de este momento, todos los comentarios que recibamos se verán en una página especial llamada "Moderar comentarios", que encontraremos en la pestaña Creación de entradas:

Pinchando ahí, veremos una lista de todos los comentarios que hemos recibido en el blog, pero que aún no se han publicado.
La lista excluye de forma automática los comentarios hechos por los administradores del blog.
Los comentarios se mostrarán ordenados en función de la hora de creación, pero también podemos mostrarlos según la entrada, pinchando en la opción de clasificación "Nombre de entrada", en la parte de arriba.

En la página principal de nuestro panel (donde vemos el nombre de nuestros blogs) también aparecerá la opción de moderación a la que también podremos acceder directamente desde allí:

Los comentarios que ya se han publicado o rechazado se eliminan de la lista de moderación.

Los comentarios rechazados se suprimen y no se pueden recuperar.

Los comentarios aceptados se pueden también suprimir de la forma habitual, si decidimos más tarde eliminarlos.

Únicamente podrán moderar comentarios los administradores de blog.

Los miembros del equipo que no disfruten de privilegios de administrador no tendrán acceso a esta función.

Más información en Ayuda de Blogger

Botón "enviar entradas a FaceBook"

2009-11-01T16:09:00.000+01:00

Hace unos días que a través de la última entrada de Blogger Widgets, me enteraba de que Facebook presentaba de forma oficial un botón que posibilita el envío de entradas.

El botón está disponible en cuatro modelos, todos ellos con un contador que mostrará la cantidad de veces que la entrada ha sido compartida en FaceBook.

¿Como colocar el botón en el blog?

[1] Antes que nada hemos de escoger que botón vamos a mostrar y copiar su código.

[2] Iremos a la parte de Edición HTML de nuestro panel y marcamos la casilla de "Expandir las plantillas de artilugios".

[3] Localizamos esta línea:

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

y justo después, copiamos el código del botón elegido.

Si esa línea no estuviese disponible en nuestra plantilla, localizamos entonces esta:

<data:post.body/>

y justo antes, copiamos el código del botón elegido.

Códigos para los distintos modelos de botones

[1] Botón grande situado a la derecha del contenido de la entrada:

Código:

<div style="float:right;padding:4px;">
<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='box_count'/>
<script type="text/javascript" src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"/>
</div>

Para usar este mismo botón pero que se muestre a la izquierda del contenido de la entrada, cambiamos en el código anterior float:right por float:left

[2] Botón pequeño situado a la derecha del contenido de la entrada:

Código:

<div style="float:right;padding:4px;">
<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='button_count'/>
<script type="text/javascript" src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"/>
</div>

Para usar este mismo botón pero que se muestre a la izquierda del contenido de la entrada, cambiamos en el código anterior float:right por float:left

Iconos Twitter para Halloween

2009-10-25T16:14:00.000+01:00

Ya quedan pocos días para Halloween, así que en DesingBlog han pensado que sería una buena idea para aquellos que gusten de decorar su blog con este motivo, el disponer de un icono "terrorífico" para el enlace de Twitter.

En DesingBlog nos la presentan como una "espeluznante" calabaza, aunque a decir verdad, a mi me parece de los más simpática.

Están disponibles en un archivo PNG con tres tamaños diferentes.

Descargar Iconos Twitter para Halloween

Navbar transparente Blogger

2009-10-23T13:32:00.000+02:00

A través de un comentario me entero por Fran administrador de Bailadicción que hay dos nuevas opciones para mostrar la barra de Blogger (Navbar) que yo aún no había visto: "Claro transparente" y "Oscuro transparente".

Dependiendo del color de fondo del blog no en todos los casos el resultado es demasiado aceptable por lo que he comprobado...

Podéis ver como queda el "Claro transparente" sobre fondo blanco en los blogs de Fran.

Imagen y fondo de color en los títulos de la sidebar

2009-10-12T02:47:00.004+02:00

Colocar una imagen a la derecha del título

[1] En nuestro panel vamos a Edición HTML y localizamos este código:

.sidebar h2{

[2] Colocamos este código justo debajo de esa línea:

background: #CEF7FF url(url_de_la_imagen) no-repeat right;
border: 1px solid #808080;
padding: 5px;

En el caso de que .sidebar h2{ no estuviera en el código de nuestra plantilla (como es el caso de algunas plantillas de Blogger) lo incluimos directamente antes de ]]></b:skin> de esta manera:

.sidebar h2{
background: #CEF7FF url(url_de_la_imagen) no-repeat right;
border: 1px solid #808080;
padding:5px;
}

Cambios:

Para eliminar o cambiar el color de fondo, en la línea del background borramos el código del color (#CEF7FF) o lo cambiamos por el del color que queramos.
Para cambiar el color, grosor o aspecto del borde, lo haremos en la línea del border y si no queremos mostrar ningún borde, eliminamos esa línea por completo.

Colocar una imagen a la izquierda del título

El código a usar entonces, sería algo como esto:

.sidebar h2{
background: #CEF7FF url(url_de_la_imagen) no-repeat left;
border: 1px solid #808080;
padding: 5px 5px 5px 35px;
}

Cambios:

Los cambios que podemos hacer son casi los mismos que antes, si os fijáis en el código la única diferencia está en la línea del padding.

En esa línea tendríamos que poner, en lugar del 35px, el mismo valor o incluso algo más que el ancho de la imagen que vamos a usar para separarla del título.

Colocar una imagen distinta en cada título a derecha o izquierda

[1] Localizamos el código de cada gadget con los artilugios expandidos, que empezará por algo como esto (ejemplo de gadget HTML):

<b:widget id='HTML2' locked='false' title='Menú del blog' type='HTML'>
<b:includable id='main'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>

La línea que está destacada en negrita, es la que corresponde al título del gadget y como podéis ver he marcado en naranja la clase que tiene añadida (class='title').

[2] Cambiamos la clase del título (class='title') por otra, por ejemplo class='TitleIcon' y colocamos estas líneas de CSS antes de ]]></b:skin> en la plantilla si queremos mostrar la imagen a la derecha del título:

.TitleIcon {
background: #CEF7FF url(url_de_la_imagen) no-repeat right;
border: 1px solid #808080;
padding:5px;
}

Si vamos a mostrar la imagen a la izquierda del título, entonces tendría que ser algo como esto:

.TitleIcon {
background: #CEF7FF url(url_de_la_imagen) no-repeat left;
border: 1px solid #808080;
padding: 5px 5px 5px 35px;
}

Algunos gadget como el de Archivos por ejemplo, podrían no tener una clase añadida en el código del título:

<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>

Se la añadimos:

<b:if cond='data:title'>
<h2 class='Archivo'><data:title/></h2>
</b:if>

Y seguimos el mismo método que para los demás gadget:

.Archivo {
background: #FF99CC url(url_de_la_imagen) no-repeat right;
border: 1px solid #999900;
padding:5px;
}

Ayuda a Cari respondiendo una encuesta

2009-10-09T00:12:00.005+02:00

Mi amiga Cari del blog El ángel de Cari está solicitando colaboración en su blog para que quien tenga unos minutos responda a una sencilla encuesta.

Las respuestas serán después enviadas a las autoridades competentes para así demandar soluciones que eliminen las barreras arquitectónicas que impiden el acceso a determinados servicios o lugares a personas con problemas de movilidad.

Colaborar es sencillo, solo tenéis que responder a tres preguntas a través de los comentarios de esta entrada.

Enlaces del sitio en Google

2009-10-02T01:41:00.001+02:00

Una de las preguntas que me hacen varias veces incluso a diario, es que hacer para que en las búsquedas de Google se muestren debajo del título del blog los enlaces mas relevantes del sitio.

Los SiteLinks o "enlaces de sitio", ayudan a los usuarios a navegar por nuestro sitio. Los sistemas de Google analizan la estructura de enlaces de los sitios para buscar los atajos que ahorrarán tiempo a los usuarios y les permitirán encontrar con rapidez la información que están buscando.

Únicamente se muestran los enlaces de sitios en los resultados de Google cuando consideran que serán útiles para el usuario. Si la estructura del sitio no permite que sus algoritmos encuentren enlaces de sitios de calidad o si no consideran que el sitio contenga enlaces relevantes para la consulta del usuario, Google no los mostrará.

Actualmente, los enlaces de sitios aparecen de forma totalmente automática.

Si nos parece que los enlaces que se muestran para nuestro sitio son inadecuados o incorrectos, podemos bloquearlos para que dejen de aparecer desde Herramientas para webmasters de Google.

En realidad es Google quien decide si mostrar o no esos enlaces (SiteLinks) en los resultados de sus búsquedas y no hay ninguna "formula mágica" que nosotros podamos emplear para lograr esto, lo mejor es no darle demasiada importancia a este tema y seguir trabajando en nuestro sitio con ilusión, con el tiempo recibiremos esta y otras recompensas a nuestro esfuerzo.

Por supuesto que hay cosas que podemos intentar para acelerar el proceso de indexación en Google,como añadir un sitemap y metatags en la plantilla.

Información original: Herramientas para webmasters

Entradas Relacionadas con miniatura de imagen

2009-09-27T05:19:00.009+02:00

En una entrada anterior vimos como colocar un gadget de "Entradas relacionadas" al pie de cada entrada usando LinkWithin, con este sistema de Blogger Widget conseguiremos un resultado casi idéntico tal y como veis en la imagen.

[1] En nuestro panel de Blogger vamos a Edición HTML y marcamos la opción de expandir las plantillas de artilugios.

[2] Localizamos la etiqueta </head> y justo encima colocamos este código:

<b:if cond='data:blog.pageType == "item"'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{
font-size: 15px;
font-weight: bold;
color: #000;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color: #000;
}
#related-posts a:hover{
color:#000;
}

#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
</b:if>

Fijaros que he resaltado en negrita la url del script que hace funcionar el gadget, ya que aunque en Blogger Widgets nos la proporcionan, lo mejor sería que cada uno usase su propio alojamiento para evitar problemas futuros...

Podéis ver como alojar un script en vuestro propio servidor si aún no sabéis como hacerlo.

En ese mismo código están incluidos los estilos CSS para el gadget, donde podemos por ejemplo cambiar el tamaño y color del texto de su título en #related-posts h2{

font-size: 15px; Cambiamos aqui el tamaño de fuente.
color: #000; El color de la fuente, negro en el ejemplo.

[3] Localizamos ahora esta línea de código en la plantilla:

<div class='post-footer-line post-footer-line-1'>

Que en algunos casos podría verse así:

<p class='post-footer-line post-footer-line-1'>

[4] Justo después de esa línea colocamos este código:

<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:if></b:loop><a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger widgets</a>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=5;
var relatedpoststitle="Entradas relacionadas";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>

Esto hará que el gadget se muestre justo al final de la entrada, si queremos que se vea a continuación del contenido del post-footer deberíamos de pegarlo entonces después de esta línea o incluso algo más abajo:

<div class='post-footer-line post-footer-line-3'>

[5] Escogemos en esta línea del código cuantas entradas se mostraran en el gadget:

var maxresults=5;

Si queremos ponerle al gadget un título distinto a "Entradas relacionadas" lo cambiaremos directamente en esta parte del código:

var relatedpoststitle="Entradas relacionadas";

Nota:

El gadget solo es visible en las páginas de entrada, es decir, cuando accedemos a una entrada y esta se muestra "abierta" con los comentarios debajo de ella.

Entrada original: Blogger Widgets / Ejemplo online: Eternamente cabreada

Nuevo editor y avatar en comentarios

2009-09-25T04:56:00.002+02:00

Nuevo editor Blogger

Noto en los emails y comentarios que muchos aún no os habéis enterado de las nuevas funcionalidades integradas en Blogger...

Hace días que Blogger ha puesto a nuestra disposición un nuevo editor de entradas que ya llevaba tiempo implementado en Blogger in Draft.

El nuevo editor incluye algunas mejoras y otras que no lo son tanto, aunque según mi opinión, es mejor que el antiguo, de hecho llevo tiempo usándolo desde Blogger in Draft.
A destacar el manejo de imágenes, que podremos colocar donde situemos el cursor del ratón y no como en el antiguo que se colocan arriba por defecto, una vez subidas a la entrada podremos alinearlas a derecha o izquierda con el texto de la entrada y escoger su tamaño, entre otras cosas.

Hay alguna otra función de menor importancia para dar formato al texto e incluso podemos agrandar el tamaño de la pantalla del editor "tirando" de el con el ratón desde la esquina inferior derecha de la ventana... se trata de probar e ir viendo las posibilidades.

Para activar el uso del nuevo editor, hemos de ir en nuestro panel de Blogger a la pestaña "Configuración" y luego a "Básico".

Como se ve en la imagen, marcamos la opción de "Editor actualizado", esta configuración del nuevo editor afectará a todos los blogs que tengamos en esa cuenta, aunque si nos arrepentimos bastará volver a marcar la opción "Editor anterior" para recuperar el editor clásico.

Avatar en los comentarios

Hace días también que podemos mostrar la imagen del avatar de nuestro perfil en los comentarios, como podéis ver en El Escaparate.

Para acceder a esta función tenemos que ir en nuestro panel a Configuración pestaña Comentarios y marcar la opción:

Una vez guardados los cambios, el avatar se verá en el comentario si el autor del comentario tiene activado su perfil de Blogger y una imagen colocada en el mismo.
Los comentaristas que no tienen su perfil activado, hacen el comentario de forma anónima, comentan usando su nombre y url o los que tienen el perfil activado pero no usan imagen en el perfil, mostraran como imagen un icono de Blogger (el que se ve en el navegador cuando accedemos a cualquier blog que no ha personalizado ese icono).

En los blogs más antiguos o con una plantilla muy modificada, aún marcando la opción, podrían no mostrar los avatares.
Como solución he visto algunas propuestas añadiendo código directamente en la plantilla, una de las primeras opciones que encontré fueron las instrucciones de Jéssica del blog Diversas y Variadas gracias al comentario de una persona en mi blog.

[1] En Diseño - Edición HTML marcamos la opción de expandir las plantillas de artilugios y localizamos esta línea de código:

<dl id='comments-block'>

[2] Cambiamos esa línea por :

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>

[3] Unas líneas más abajo localizamos algo como esto:

<b:loop values='data:post.comments' var='comment'>
<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:comment.authorUrl'>

[4] Debajo de la línea que vemos resaltada en negrita, colocamos este código:

<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>

Como Jéssica dice, el código tendría que quedar de esta manera:

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
<b:if cond='data:comment.authorUrl'>

Entrada original: Diversas y Variadas

Exportar / Importar el contenido del blog

2009-09-19T18:44:00.000+02:00

Hace algún tiempo que está función está disponible en Blogger y precisamente por está razón, no había publicado nada al respecto.
Pensé que no sería necesario ya que el sistema está bastante visible en nuestro panel y además, hay bastante información al respecto en Internet...

El caso es que en estos últimos días me han llegado varios emails y comentarios preguntando si hay alguna manera en Blogger de respaldar el contenido del blog (entradas y comentarios), así que decidí hacer esta entrada para los que aún tengan necesidad de esta información.

Al acceder a nuestro panel de Blogger desde el enlace "Configuración" en la pestaña de "Básico" veremos algo como lo que se muestra en la imagen:

Como podéis ver, están a la vista tres enlaces: Importar blog, Exportar blog y Suprimir blog.

Tendremos mucho cuidado en no pinchar en "Suprimir blog" por error, ya que el blog quedaría eliminado de forma automática, aunque ahora existe la posibilidad de volver a recuperarlo antes de 90 días, nunca está de más tomar las debidas precauciones.

Para enviar a nuestro PC una copia de todas las entradas y comentarios del blog, pinchamos en "Exportar blog".
Con esto conseguimos una copia de todas las entradas y comentarios en un archivo en formato xml, sin afectar para nada al blog, que seguirá estando online con todas sus entradas y comentarios y por supuesto con el mismo diseño.

Esta copia nos será muy útil en el caso de que algo sucediese con nuestro blog, ya que podríamos cargarlo de nuevo en cualquier momento pinchando en el enlace "Importar blog".

Por supuesto podemos usarlo en un blog distinto, es decir, una vez descargada la copia de nuestras entradas y comentarios (archivo xml) podemos subirla a cualquier otro blog desde su panel en "Importar blog".

Si subimos la copia a un blog que ya contenga entradas, las añadidas desde el archivo se colocarán en su lugar correspondiente de forma automática por la fecha de su publicación, respetando las que ya estaban en el blog y mantendrán además su formato, incluidas las imágenes.

Como colocar el botón de Wikio

2009-09-18T03:10:00.001+02:00

Me envía Tomás un email donde dice:

Quiero agregar un botón de Wikio al final de cada artículo para que, quien quiera, pueda compartir ese artículo.
Pero no sé cómo hacerlo.

[1] Accedemos a la web de Wikio, concretamente a la página para obtener el código del botón.

[2] Marcamos la casilla del modelo de botón que vamos a usar.

En el caso del botón Interactivo (pop-up), marcamos a continuación los servicios que se van a mostrar en el despegable del botón.

[3] Copiamos el código que nos proporcionan.

En el caso de Tomás, quiere colocarlo al pie de sus entradas.

[1] Iremos a nuestro panel de Blogger y en Edicion HTML deberemos marcar la opción "expandir las plantillas de artilugios", para localizar esta línea dentro de la plantilla:

<div class='post-footer-line post-footer-line-3'/>

[2] Pegamos el código para el botón a continuación y, antes de guardar los cambios en la plantilla, haremos unos "retoques" en el código del botón ya que si no lo hacemos así, nos saltará un mensaje de error.

El cambio es sencillo, solo hay que añadir dentro del código donde veamos este simbolo: & justo a continuación, pegado y sin espacios, esto: amp;

Este añadido lo hacemos todas las veces que el símbolo: & aparezca en el código del botón.

[3] Guardamos cambios.

Imagen y enlace en la firma del post para varios autores

2009-09-14T00:12:00.000+02:00

Ya habíamos visto como cambiar la firma de las entradas por una imagen, veremos ahora como hacer eso mismo en un blog compartido es decir, con más de un autor.

Antes de empezar tendremos preparadas las imágenes que vamos a usar para cada autor, teniendo en cuanta que lo lógico será que todas tengan las mismas medidas y que no sean demasiado grandes pues no obtendríamos un buen resultado dado el lugar donde van a mostrarse.

[1] Una vez en nuestro panel de Blogger, vamos a "Edición HTML" y marcamos la opción de "expandir las plantillas de artilugios" para localizar este código:

<span class='post-author'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/> <data:post.author/>
</b:if>
</span>

[2] Tendremos que cambiar ese código por este otro:

<span class='post-author'>
<b:if cond='data:post.author == "TU_NICK"'>
<data:top.authorLabel/>
<img class='blog-autor' src='URL_TU_IMAGEN'/><data:post.author/>
<b:else/>
<data:top.authorLabel/>
<img class='blog-autor' src='URL_IMAGEN_OTRO_AUTOR'/><data:post.author/>
</b:if>
</span>

[3] En "TU_NICK" colocamos el nombre del autor principal del blog, escrito exactamente como su nick aparece en la firma de entradas, y en "URL_TU_IMAGEN" la url de la imagen que usará el autor principal.

En "URL_IMAGEN_OTRO_AUTOR" colocaremos la url de la imagen para el otro autor del blog.

[4] Si es necesario, añadimos algo de CSS para controlar la posición de la imagen (lo colocamos como siempre antes de ]]></b:skin>):

img.blog-autor {
padding: 2px; margin: 0; border: 0;}

Resultado:

Modificaciones:

En el ejemplo son dos los autores que publican en el mismo blog, para hacer lo mismo cuando son más de dos, tendríamos que añadir en el código las condicionales necesarias por cada autor.
Por ejemplo para un tercer autor, colocaríamos en el código después de <b:else/> esta nueva condición :

<b:if cond='data:post.author == "SU_NICK"'>
<data:top.authorLabel/>
<img class='blog-autor' src='URL_SU_IMAGEN'/><data:post.author/>
<b:else/>

Haciendo unos ligeros cambios en el código, también podemos conseguir:

Mostrar la imagen después del nombre del autor

<span class='post-author'>
<b:if cond='data:post.author == "TU_NICK"'>
<data:top.authorLabel/>
<data:post.author/><img class='blog-autor' src='URL_TU_IMAGEN'/><data:post.author/>
<b:else/>
<data:top.authorLabel/>
<data:post.author/><img class='blog-autor' src='URL_IMAGEN_OTRO_AUTOR'/>
</b:if>
</span>

Firma sin el "publicado por"

<span class='post-author'>
<b:if cond='data:post.author == "TU_NICK"'>
<data:post.author/><img class='blog-autor' src='URL_TU_IMAGEN'/><data:post.author/>
<b:else/>
<data:post.author/><img class='blog-autor' src='URL_IMAGEN_OTRO_AUTOR'/>
</b:if>
</span>

"Publicado por" y la imagen de la firma

<span class='post-author'>
<b:if cond='data:post.author == "TU_NICK"'>
<data:top.authorLabel/>
<img class='blog-autor' src='URL_TU_IMAGEN'/>
<b:else/>
<data:top.authorLabel/>
<img class='blog-autor' src='URL_IMAGEN_OTRO_AUTOR'/>
</b:if>
</span>

Enlace en la imagen de la firma a un sitio determinado

Lo haremos tal como ya hicimos antes al añadir el enlace en la firma del autor, dentro del código anterior y en la imagen de cada uno:

<a href='http://url_del_enlace' target="_blank"><img class='blog-autor' src='URL_IMAGEN_OTRO_AUTOR'/></a>

"Leer más" nueva opción disponible en Blogger

2009-09-10T04:37:00.003+02:00

Blogger in Draft anuncia que ya esta disponible la opción de "Leer Más" en todos los blogs.

Toda la información al respecto en Vagabundia

Descubre quién te copia las entradas

2009-09-09T01:02:00.000+02:00

Quem me ama? es una página donde podemos comprobar si han sido publicadas copias de las entradas de nuestro blog en otros sitios (si es que las hay).

Es un servicio independiente de Blogger, aunque solo funciona con blogs alojados en esta plataforma y que no usen dominio propio, es decir, solo funciona en "blogspot".

La página está en portugués pero su interfaz es tan sencilla que no necesitaremos ni entender el idioma, tan solo hemos de introducir la url del blog y pinchar en "Pesquisar!", el sistema nos devuelve la información al instante, pudiendo ver los resultados entrada por entrada.

Podemos añadir uno de sus botones en la sidebar de nuestro blog (hay dos tamaños) directamente desde su página de instrucciones.
Por supuesto que eso no nos protegerá de quien quiera copiarnos, pero al menos sabrá que si lo hace no tardaremos en descubrirlo... quizá se lo piense dos veces antes de hacerlo.

Aviso de antemano que los resultados, al menos en mi caso, han sido tan abrumadores, que casi no podía creer lo que estaba viendo con mis propios ojos ...tendréis que estar preparados para cualquier cosa.

Visto en: Dicas Blogger

Botón de acceso al blog en la barra de Google

2009-09-06T02:56:00.021+02:00

Con solo un click tus visitas podrán añadir un botón de acceso directo a tu blog en su barra de Google.
Toda la información necesaria para instalarlo en ¿Como se hace...?

Como añadir los enlaces en un menú

2009-09-03T03:13:00.000+02:00

Incluir un menú en el blog no resulta demasiado complicado, especialmente cuando lo añadimos siguiendo las instrucciones de cualquier web de menús o desde alguna de las entradas de mi blog al respecto por ejemplo.

El mayor problema que se presenta y que yo misma he comprobado a través de algunos de los correos que recibo, suele ser a la hora de construir los enlaces del menú, en concreto la pregunta que más se repite es:

¿Como hago para que las pestañas de mi menú lleven a tal o cual página?

Dependiendo del tipo de menú, este constará de códigos distintos para su funcionamiento, pero siempre incluirá el código HTML que será necesario precisamente para la construcción de los enlaces, y que será algo parecido a este código:

<div class="MenuLove">
<div id="Lovenav">
<ul>
<li><a href="url-de_la_pagina" title="cartel_enlace">Inicio</a></li>
<li><a href="url-de_la_pagina" title="cartel_enlace">Enlace_1</a></li>
<li><a href="url-de_la_pagina" title="cartel_enlace">Enlace_2</a></li>
<li><a href="url-de_la_pagina" title="cartel_enlace">Enlace_3</a></li>
<li><a href="url-de_la_pagina" title="cartel_enlace">Enlace_4</a></li>
</ul>
</div>
</div>

Visto así, no es complicado de configurar:

url-de_la_pagina Sustituimos esto por la url de la página o destino que vamos a enlazar.

cartel_enlace Sustituimos por una pequeña descripción, que se mostrará en un cartelito (tooltip) al pasar el ratón sobre la pestaña del menú.

Enlace_1, Enlace_2, etc. Sustituimos por el texto de cada enlace que se verá en el menú.

El problema aparece cuando, a pesar de que sabemos que vamos a enlazar, no tenemos claro como obtener exactamente la url de destino...
Veremos a continuación como conseguir la url de los enlaces más habituales en cualquier menú:

Enlazar una pestaña con la página de Inicio o Home.

Como veis en el código de ejemplo, es el primer enlace que he puesto, allí en lugar de "url-de_la_pagina" es donde colocaríamos la url de nuestro blog.

Enlazar una pestaña con la página de nuestro perfil.

Entramos a la página de nuestro perfil de Blogger y copiamos la url que vemos en el navegador, esa url es la que usaremos en el enlace que dirá "Mi perfil" por ejemplo.

http://www.blogger.com/profile/06743611108067453905

Enlazar una pestaña con una entrada.

Si tenemos añadido en una entrada el formulario de correo, un mensaje de bienvenida, o lo que sea, y queremos enlazar esa entrada concreta en el menú, pinchamos sobre el título de la entrada para que dicha entrada se muestre en su propia página (donde se ven los comentarios debajo de ella) y copiamos la url que vemos en el navegador. Esa es la url que usaremos para enlazar la entrada desde la pestaña correspondiente del menú.

http://elescaparatederosa.blogspot.com/2009/08/manual-blogger-para-principiantes.html

Enlazar una pestaña con una etiqueta concreta.

El procedimiento es exactamente igual que para las entradas, solo que en este caso usaremos la url que vemos una vez hemos pinchado sobre la etiqueta a enlazar, y que mostrará todas las entradas con esa etiqueta.

http://elescaparatederosa.blogspot.com/search/label/Blogger

Enlazar una pestaña con un mes de archivo.

Para mostrar solo las entradas del mes de vacaciones o lo que sea... El mismo procedimiento que los anteriores, pero obtendríamos la url pinchando sobre el mes a enlazar en el gadget de archivos:

http://elescaparatederosa.blogspot.com/2009_07_01_archive.html

Enlazar una pestaña con el "suscribirse".

Si no estamos usando un servicio distinto al de Blogger para facilitar la suscripción, la url a colocar en el enlace y que por defecto proporciona Blogger, sería esta:

http://NOMBRE DE NUESTRO BLOG.blogspot.com/feeds/posts/default

Para enlazar un sitio fuera del blog, por supuesto que tendríamos que colocar la url del sitio en el enlace.

Compartir el blog desde la navbar de Blogger

2009-08-30T00:31:00.003+02:00

Leo en Blogger Buzz (28-8-09) una nueva función que el equipo de Blogger ha incluido en la navbar (barra superior del blog).

Cuando un lector está en la página principal de cualquier blog que muestre la navbar, tendrá la posibilidad de enviar la url del blog a Twitter, Facebook o Google Reader.
Pinchando en el botón "Compartir" de la navbar se abrirá una ventana (popup) con las opciones (IE Y Firefox).

Si se encuentra en la página de una entrada concreta, además de enviar la url a cualquiera de estos sitios, podrá compartir también la entrada por correo electrónico.

Cada url que se comparte incluye un parámetro especifico adjunto (FB Facebook, tw = Twitter, y gr = Google Reader), esto permite (si estás utilizando Google Analytics para medir el tráfico en tu blog) buscar las cadenas para ver la cantidad de tráfico que está recibiendo de cada fuente.

Por supuesto aquellos que hemos optado por ocultar la navbar o estamos usando una plantilla que en su diseño ya no la incluía, no tendremos acceso a esta nueva funcionalidad.
Para poder usar el botón de "compartir" tendríamos que optar por volver a mostrar la navbar, para ello tendríamos que localizar el código que la oculta en nuestra plantilla (desde Edición HTML de nuestro panel) y eliminarlo:

#navbar-iframe {
height:0px;
visibility:hidden;
display:none;
}

Leer la noticia en Blogger Buzz (inglés)

Nube de etiquetas (gadget de Blogger)

2009-08-26T01:26:00.000+02:00

Desde Blogger Buzz nos comunican que ya podemos añadir fácilmente y desde el gadget de etiquetas la opción de mostrarlas en forma de nube.

[1] Para hacerlo tenemos que añadir un nuevo gadget de Etiquetas desde Diseño en nuestro panel de Blogger.

[2] Marcamos la opción "Nube"

[3] Si guardamos los cambios en este momento, ya tendríamos la nube de etiquetas instalada, donde se mostrará el nombre de las etiquetas en cinco tamaños diferentes según el número de entradas publicadas bajo cada etiqueta.

[4] Si queremos antes de guardar los cambios también es posible escoger que etiquetas mostrar en el gadget, para hacerlo pinchamos en "Etiquetas seleccionadas" y luego en "Editar".

[5] Veremos una lista con las etiquetas marcadas por defecto. Desmarcamos las que vamos a ocultar y pinchamos en Finalizar.

Wallpapers en DeviantART

2009-08-24T03:56:00.000+02:00

Si haceis una visita a Deviantart, estoy segura que vais a encontrar algún maravilloso diseño para usar en vuestro Blog o PC.

DeviantART es un sitio de internet que aglutina a una comunidad internacional de artistas en la red.
Es un espacio virtual en el que cada cual puede mostrar su arte y aprovechar las posibilidades de la red para someterlo a los comentarios de cualquiera y en particular de otros artistas. DeviantART está abierta a muchos tipos de artistas pero principalmente los relacionados con las artes visuales y gráficas, como fotógrafos, diseñadores gráficos o pintores.
-Wikipedia-

Entre otros muchos sorprendentes trabajos, hay multitud de impresionantes Wallpapers como estos:

[ Pincha en las imágenes para acceder a su descarga en DevianART ]