Seguidores: Personalizar el gadget

Seguramente ya habrán visto el nuevo juguetito de Blogger, ese que comenzaron a promocionar hace unos meses pero que no estaba disponible para los que hablamos español.

Colocarlo es muy sencillo, no tiene opciones de ninguna clase (excepto el título) y en principio, se adapta al estilo de la sidebar. En la plantilla, vamos a encontrar un código largo, muy largo que comienza con:

<b:widget id='Followers1' locked='false' title='Seguidores' type='Followers'>

Un código bastante críptico por cierto y donde hay muy poco que podamos modificar:

<b:widget id='Followers1' locked='false' title='Seguidores' type='Followers'>
<b:includable id='main'>

esta parte define el título:

<b:if cond='data:title != ""'>
<b:if cond='data:codeSnippet != ""'>
    <h2 class='title'><data:title/></h2>
<b:else/>
<h2 class='title'><data:title/> (<data:totalFollowerCount/>)</h2>
</b:if>  
</b:if>

NOTA: parece haber una opción para que en el título se muestre o no se muestre la cantidad de seguidores en función de algún dato pero, desconozco donde está. Podríamos hacerlo manualmente, eliminando esa parte y dejando sólo la parte de color.

No es el único caso donde hay opciones poco claras, en el resto siguen apareciendo:

<div expr:id='data:widget.instanceId + "-wrapper"'>
<b:if cond='data:codeSnippet != ""'>
<data:codeSnippet/>
<b:else/>
<b:if cond='data:followingLinkPresent'>

este es el enlace que por defecto dice "Seguir este blog" y que nos permite agregarnos:

<div class='follow-this profile-link item-control following-follow-this'>
<a expr:href='"javascript:_FollowersView._openPopup(\"" + data:followUri + "\");"'>
<data:followThisMessage/>
</a>
</div>

este es el enlace que aparecerá si estamos siguiendo un blog y queremos dejar de hacerlo. Por defecto dice "Parar siguiente" (una traducción increible):

<div class='follow-this profile-link item-control following-stop-following-this'>
<a expr:href='"javascript:_FollowersView._openPopup(\"" + data:followUri + "\");"'>
<data:stopFollowingMessage/>
</a>
</div>

</b:if>

<div class='followers-grid'>

este es el mensaje que se muestra si el blog no tiene seguidores y que por defecto dice "Sé el primero en  seguir  este blog":

<b:if cond='data:totalFollowerCount == 0'>
<div class='profile-link item-control following-follow-this'>
<data:emptyFollowersMessage/>
</div>
</b:if>

este es el bucle que muestra el avatar de los seguidores con un enlace a su perfil de Blogger y con el atributo nofollow que no tiene sentido quitar ya que al no apuntar al blog, no significará un enlace valido para posicionar un sitio y de esta manera se evita el "seguimiento spam":

<!-- Relies on the js written out in navbar.gxp -->
<b:loop values='data:followers' var='follower'>
<div class='follower'>
<a expr:href='data:follower.profileUrl' expr:title='data:follower.displayName' rel='nofollow'>
<img class='follower-img' expr:alt='data:follower.displayName' expr:height='data:follower.imageHeight' expr:onerror='"this.onerror=null;this.src=\"" + data:anonFollowerImageUrl + "\";"' expr:onload='"setAttributeOnload(this, \"src\", \"" + data:follower.imageUrl + "\")"' expr:width='data:follower.imageWidth' src='http://img1.blogblog.com/img/blank.gif'/>
</a>
</div>
</b:loop>

<div class='clear'/>
</div>

<div class='followers-canvas profile-link'>

este es el mensaje que muestra la cantidad de seguidores:

<data:followersFooterMessage/>

este enlace permite "Ver todos los seguidores" ya que sólo se mostrará una cantidad máxima:

<span class='item-control following-not-admin'>
<a expr:href='data:followersUri'>
<data:viewAllMessage/>
</a>
</span>

este enlace dice "Administrar" y sólo lo veremos nosotros si estamos logueados:

<span class='item-control blog-admin'>
<a expr:href='data:manageFollowersUri'>
<data:manageFollowersMessage/>
</a>
</span>

</div>
</b:if>
<b:include name='quickedit'/>
</div>

</b:includable>
</b:widget>

Los datos que podemos modificar fácilmente son los textos que muestra el gadget; basta reemplazar el código que contiene ese texto por defecto por uno nuestro o incluso por una imagen:

<data:followThisMessage/> es el texto del enlace Seguir este blog
<data:stopFollowingMessage/> es el absurdo texto del enlace Parar siguiente
<data:emptyFollowersMessage/> es el texto Sé el primero en seguir este blog.
<data:viewAllMessage/> es el texto del enlace Ver todos
<data:manageFollowersMessage/> es el texto del enlace Administrar

A diferencia de los últimos agregados de Blogger, este no es un IFRAME así que, por un lado es relativamente más rápido y por otro, nos permite utilizar CSS para modificarlo.

Como la gran mayoría de las clases y definiciones de estilo están en un archivo externo que Blogger agrega, lo ideal es hacer estas modificaciones sobrescribiendo estos datos y colocando todo en una etiqueta STYLE pero no en el encabezado de nuestra plantilla sino después de <BODY>:

<style type='text/css'>
[... aquí colocamos las definiciones ...]
</style>

Estas son definiciones generales, no son demasiado útiles salvo casos especiales:

#Followers1 h2 {
aquí podemos modificar el estilo del título
}

#Followers1-wrapper  {
este es el DIV general que contiene el elemento
}

Los enlaces usan una clase que suele estar definida en las plantillas por defecto y que se llama profile-link a la que se le suma otra que podemos cambiar de manera simple; en mi caso coloqué estas definiciones:

.follow-this {
margin: 0 5px 5px 0;
text-align: right;
}
.follow-this a { /* los enlaces superiores */
color: #7E92A6;
font-weight: normal;
font-size: 11px;
}
.follow-this a:hover {
color: #9EB2C6;
font-weight: bold;
}

.followers-canvas { /* la cantidad de seguidores */
background: transparent url(URL_imagen) no-repeat scroll left top;
color: #778899;
float: right;
font-size: 11px;
font-weight: normal;
margin: 5px 5px 0 0;
padding-left: 15px;
text-align: right;
}

.following-not-admin a { /* es el enlace "Ver Todos" */
color: #7E92A6;
display: block;
font-size: 11px;
font-weight: normal;
text-align: right;
}
.following-not-admin a:hover {
color: #9EB2C6;
font-weight: bold;
}

.blog-admin a { /* es el enlace "Administrar" */
color: #7E92A6;
font-weight: normal;
font-size: 11px;
}
.blog-admin a:hover {
color: #9EB2C6;
font-weight: bold;
}

El área donde se muestran los avatares también es configurable. Para empezar, la clase que usa Blogger es errónea, está definida como follower-grid pero, en realidad se llama followers-grid (una s no es nada, claro). Así que:

.followers-grid { /* el espacio donde se mostrarán los avatares */
margin: 0 auto; /* esto lo centra */
padding: 0;
width: anchopx; 
/* ese ancho es importante ya que define cuántas imágenes se mostrarán por línea */
}

.follower-img { /* es la imagen en si misma que tienen 28x28 */
float: left;
margin: 0;
padding: 0;
}

.follower { /* cada imagen está dentro de un DIV */
float: left;
height: valorpx;
margin: 0px;
width: valorpx}
/* ancho y alto son la imagen más los bordes y márgenes */
}

OTRA MIRADA:

Gem@ Blog