0

Etiquetas con feed

Podemos colocar en nuestro blog un nuevo widget en la sidebar donde mostrar las categorías o etiquetas con la posibilidad de ofrecer a nuestras visitas el suscribirse a la etiqueta que prefieran. Para ello mostraremos un pequeño icono de rss delante de cada etiqueta que al pinchar sobre el, posibilite la suscripción a cada etiqueta en particular.

En el html de nuestra plantilla buscamos la zona de los elementos o widget, o lo que es más fácil aún, buscaremos un <:b/widget> cualquiera y justo a continuación pegamos estas líneas de código para el nuevo elemento:

<b:widget id='Label2' locked='false' title='Feeds de Etiquetas' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<a expr:href='data:post.url + "/feeds/posts/default/-/" + data:label.name'><img src='http://img402.imageshack.us/img402/305/rect18st2bx0.png'/></a>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>

<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Una vez guardados los cambios, podremos cambiar el título del nuevo elemento y arrastrarlo a donde mejor nos parezca en Editar Plantilla.

En el código he puesto id='Label2' por si ya existe en la plantilla un id='Label1', pudiera darse el caso de que estemos utilizando más de dos widget de etiquetas, para evitar problemas podríamos poner un número alto en el id, por ejemplo, id='Label50'.
También es posible cambiar la imagen del icono, simplemente sustituimos la url del ejemplo (en negrita) por la de nuestro icono. En este caso el icono es de color gris, si os gusta más "el de siempre" de color naranja, podéis usar esta url:
http://img442.imageshack.us/img442/3060/feedpj9.png

Seguro que a más de uno le gustará la idea de mostrar el icono de rss a continuación de las etiquetas en vez de antes de ellas, para ello hemos de colocar en el código anterior la url de la imagen a continuación de (<data:label.count/>).
(<data:label.count/>)<img src='http://img402.imageshack.us/img402/305/rect18st2bx0.png'/>


Basado en una idea de: PurpleMoggy´s Blog

0

Imagen en el perfil (opción Blogger)

Visitando el blog de Romina acabo de leer una entrada donde nos informa de que Blogger a añadido la opción de subir directamente desde el PC una imagen a nuestro perfil.
Mucho más sencillo que andar subiendo la imagen a un hosting para conseguir su url ¿no os parece?



¡Gracias Romina!

0

Contando los días que faltan para Navidad

En SpringWidgets podemos obtener un árbol de Navidad personalizado (bolas, adornos, colores, nieve...)que muestra además los días que faltan para navidad.

0

Fondos de Navidad

Ya estamos en Diciembre, dentro de nada llega la Navidad y algun@s seguro que están pensando en adornar sus blogs con este motivo.
Hoy mismo Manu me pedía en un comentario alguna cosilla para adornar su blog de cara a estas fiestas, el me pedía la dirección de alguna web con fondos navideños. En realidad, conozco algunas, pero he preferido poner aquí los fondos navideños que he encontrado y que más me han llamado la atención.

Para colocarlos, buscamos en la parte de edición, HTML de nuestra plantilla este código:
body {
background:$bgcolor;


Algunos tendréis seguramente el color de fondo añadido directamente en la plantilla, así que se verá más o menos así:
body {
background:#2A4359;


Añadiremos el código para la imagen de fondo, justo antes del cierre (;):

body {
background:$bgcolor url(Dirección-url de tu imagen ) repeat;


Ejemplo

Fondos navideños animados
Para conseguir su dirección (url) pincha con el ratón derecho sobre la imagen escogida y en propiedades copia su url (están subidos a Photobucket )



Fondos navideños estáticos

0

Visitas online con imagen

En la web de Opromo conseguiremos un código de forma gratuita que muestra nuestras visitas en tiempo real en forma de texto precedido de una pequeña imagen (icono).

[1] Ingresamos a la web y en el menú de la izquierda escogemos "Visitas Online"

[2] Introducimos la url (dirección) de nuestro blog.

[3] Escogemos el tipo de fuente, tamaño y color.

[4] Seleccionamos la imagen que nos gusta (hay un par de ellas animadas).

[5] Escogemos la forma de mostrar el texto (lo que se leerá).

[6] El resultado se verá allí mismo pinchando en "Visualizar Abaixo" y debajo el código de HTML para copiar y pegar en nuestro blog.

Ejemplo

0

Ensanchar la plantilla Sound of Moto

[1] Iremos a la parte de editar HTML de nuestra plantilla.
Buscamos esta parte del CSS y cambiamos el valor de width, por ejemplo a 850px. Este cambio hace que se ensanche el "cuerpo" del blog.

#outer-wrapper {
margin: 0 auto;
border: 0;
width: 850px;
text-align: left;
background: $mainBgColor url(http://www.blogblog.com/moto_son/innerwrap.gif) top right repeat-y;
font: $bodyFont;
}

[2] En este paso ensancharemos la parte de nuestras entradas, cambiando de nuevo el width, por ejemplo, a 500px.
#main {
width: 500px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

[3] Vamos a ensanchar ahora nuestra sidebar, aumentando el valor de width a, por ejemplo, 290px.
#sidebar {
background: url(http://img518.imageshack.us/img518/6425/innerwrapxs1.gif);
width: 290px;
float: right;
color: $sidebarTextColor;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

[4] En el código anterior de la sidebar, he añadido una imagen como la original de la plantilla (el fondo de rayas semitransparente) para que el texto no se "desborde" fuera del fondo. Es esta línea:
background: url(http://img518.imageshack.us/img518/6425/innerwrapxs1.gif);

Ejemplo de plantilla

0

Sistema de identificación libre en Blogger

Gracias a la última entrada de Francisco en Blog and Web, acabo de enterarme de un paso más de Blogger en la mejora de su servicio, en este caso en los comentarios de nuestros blogs.
Podemos usar ya el sistema de identificación libre (Open ID) en nuestros comentarios, así si quién nos deja un comentario en el blog tiene su blog publicado en otra plataforma, por ejemplo, Wordpress, podremos ver su blog a través del comentario.
Como bien dice Francisco, hasta ahora eso no era posible, así que es una considerable mejora que nos permitirá una mayor y mejor relación con el resto de la blogosfera.


[1]Entramos al blog desde Blogger Draft
[2]Vamos a "Configuración" - "Comentarios".
[3]En "Persona que puede realizar los comentarios" escogeremos la opción "Usuarios registrados - incluido OpenID".
[4]Guarda los cambios.

Ejemplo
Nota
Tendremos en cuenta que usando esta opción no estarán permitidos en el blog los comentarios anónimos.
Actualización
En algunos blogs, incluido el mio, ya está operativa esta opción y además se puede comentar también como "alias" o "anónimo". Además ha sido automático, yo no he marcado ninguna opción, así que supongo que irá integrándose en los blogs de forma automática.