Pull quote en Blogger

Los pull quotes son frases destacadas de un post que aparecen en un lateral, como una cita aparte y es algo que por ejemplo los que lean el 20 minutos habrán visto en muchos de sus artículos (casi todos), también hay un plugin para Wordpress que permite incluirlos en las entradas.

Aquí en Blogger, toca currárselo a huevo modificando la plantilla (no se si lo he dicho alguna vez, pero a mi personalmente me encanta poder editar el CSS a mi antojo y de gratix).

Me encanta poder editar el CSS

Simplemente hay que añadir un pequeño código y luego podremos disfrutar de nuestros pull quote para darle un aire diferente al blog.

En el escaparate de Rosa explica su autora como implementarlo en la plantilla y como usarlo.

Guardado en: Informática.

Hablan de esto en..

CSS para ampliar imágenes

Aunque soy más de poner el enlace a la imagen a tamaño completo, ya sea encima de la miniatura o a pié de foto, la verdad es que estas cosillas no quedan nada mal y siempre y cuando no recargue mucho la página ni se abuse de su uso puede resultar hasta práctico. La cosa quedaría más o menos de este modo:


http://www.flickr.com/photos/70811875@N00/332725639/

Los códigos, tanto para la plantilla como para el mensaje los podeis ver en: Recursos Blog. El código lo he añadido en la parte de /* Posts dentro del CSS de la plantilla, no es necesario copiar las líneas style porque ya tenemos una plantilla CSS creada. Si alguien quiere cambiar el color del texto a pié de foto:

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: white;
padding: 5px;
left: -100px;
border: 1px dashed gray;
visibility: hidden;
color: #FFFF00;
text-decoration: none;
}

FFFF00 es amarillo y no se ve muy bien, para ponerlo en negro: 000000 .. para más colores, una tabla.

Guardado en: Informática.

Hablan de esto en..

Nuevo RSS

Como estaba un poco aburrido se me ha dado por crearme una cuenta en FeedBurner y cambiar el RSS del blog.

Así que ahora el feed para las entradas lo gestionaré desde allí y así cotilleo los programas que usa la gente y obtendré una estadísticas más detalladas, ya que hasta ahora solo tengo datos de las visitas in-situ.

Si no me equivoco los que tengan el RSS antiguo seguirán recibiendo normalmente los avisos de nuevos post y el contenido de los mismos en sus lectores pero no estaría de más perder unos segundos para agregar el nuevo enlace.

La cosa no es muy difícil, se registra uno en feedburner, como no tendremos ningún feed nos saldrá una caja de texto donde agregar la URI del feed y luego a seguir los pasos que nos van saliendo. Si el blog dispone de más de un feed nos saldrá un aviso para seleccionar uno, el feed rss2 de blogger no valida (al menos el mío no lo hacía) así que tuve que seleccionar el Atom, que aunque tira unos cuantos errores curiosos por lo menos si que valida.

Comprueba si tus feeds validan en feedvalidator.org, simplemente copia al dirección del feed y pincha en Validate.

Pero registrarse en feedburner no es suficiente, si queremos que el nuevo feed aparezca por defecto al pinchar en el icono en la barra de direcciones del navegador además tendremos que modificar la plantilla del blog.

La forma que explico a continuación sirve para los usuarios que no han migrado a la nueva versión de blogger o para aquellos que como yo sí han migrado pero siguen usando la vista clásica en lugar del horrendo nuevo panel que se han inventado y que dicen que es mucho más cómodo y tal y tal (¡ja!).

Primeramente copiamos el siguiente código, bueno no, primeramente hacemos una copia del código tal y como lo tenemos, por si acaso, luego ya copiamos el siguiente código:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="generator" content="Blogger" />
<link rel="alternate" type="application/atom+xml" title="FeedBurner Sample Blog" href="http://fbsample.blogspot.com/atom.xml" />
<link rel="service.post" type="application/atom+xml" title="FeedBurner Sample Blog" href="https://www.blogger.com/atom/24021304" />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://www.blogger.com/rsd.g?blogID=24021304" />

Ahora nos situamos en Plantilla (o Template) y buscamos la siguiente línea

<$BlogMetaData$>

La borramos sin ningún tipo de piedad y pegamos el código que previamente habíamos copiado.

Ahora buscamos la siguiente línea en el código que hemos copiado

<link rel="alternate" type="application/atom+xml" title="FeedBurner Sample Blog" href="http://fbsample.blogspot.com/atom.xml" />

Y lo sustituimos por este otro

<link rel="alternate" type="application/atom+xml" title="FeedBurner Sample Blog" href="http://feeds.feedburner.com/YOURFEEDNAME" />

Evidentemente donde pone YOUFEEDNAME tenemos que poner nuestro identificador de FeedBurner, en mi caso Liamngls. Y listo, ahora cuando alguien quiera agregarnos a su lector de feeds la dirección por defecto que le saldrá será la de FeedBurner y no la genérica de Blogger.

El código está sacado de los foros de FeedBurner, en el segundo mensaje del hilo explican como hacerlo para los que tienen la versión nueva de Blogger (evidentemente los que tienen la versión nueva con el nuevo megapanel 4.0).

Guardado en: Informática.

Hablan de esto en..

Imagen flotante en blogger

Como algunos habrán podido observar en la parte inferior derecha del blog hay una imagen flotante de un jamón guijuelo; una imagen flotante tiene la característica de que puedes bajar la página (scroll) y la imagen se mantiene siempre en la misma posición y digo algunos porque me parece que en el Internet Explorer no sale flotante, si no que lo hace de forma fija justo debajo del resto de componentes de la sidebar.

Como ya me han pedido un par de amigos el código y además me lo han pedido también en un comentario procedo a publicar el código que uso y las brevísimas instrucciones para colocarlo dentro de la plantilla, como siempre y por lo que pueda pasar lo mejor es hacerse una copia de todo el código CSS antes de tocar nada.

El código se puede ver aquí. Cuidado con el tamaño de la imagen no nos vaya a descuadrar la plantilla, luego cada uno puede usar la imagen que quiera solo con cambiar la uri.

Para blogs que usen Wordpress el código sería este otro, que es básicamente el que he usado yo aquí.

Para cualquier cosilla, dudas, ruegos, sugerencias, un guijuelo .... por aquí estaremos ;)

Guardado en: Informática.

Hablan de esto en..