Personalizando gadget de Seguidores

El gadget de Seguidores es la novedad, lo añadimos pero algo no termina de gustarnos así que vamos a personalizarlo, comenzaremos por situarnos en plantilla Edición de HTML y marcamos la casilla de expandir plantilla de artilugios ¿ya está? pues empezamos.

* Eliminar el número de seguidores que aparece en el título que añadimos al gadget.
Buscamos:

<b:widget id='Followers1' locked='false' title='(aquí saldría el título de la sidebar' type='Followers'>

Unas líneas después encontraremos:
<h2 class='title'><data:title/> (<data:totalFollowerCount/>)</h2>
eliminamos (<data:totalFollowerCount/>) y con esto nos deshacemos del numero de seguidores que aparece junto al título.

* Para añadir un icono junto al texto de X Seguidores.
Esta vez localizamos:
<div class='followers-canvas profile-link'>
en la siguiente línea veremos:<data:followersFooterMessage/> justo antes de esa línea podemos añadir la imagen del icono.
<img src='url-imagen-icono'/><data:followersFooterMessage/>
Si deseamos añadirlo a la derecha lo añadiremos justo después.
<data:followersFooterMessage/> <img src='url-imagen-icono'/>

*Sustituir texto de SEGUIDORES.
Si deseamos sustituir el texto de Seguidores bastará con suprimir la etiqueta <data:followersFooterMessage/> y en su lugar añadimos cualquier otro texto.

* Modificar el texto de "Parar siguiente"
Cuando ya somos seguidores de un blog en lugar de mostrar el texto de "Seguir este blog" nos muestra "Parar siguiente" que no es otra cosa que eliminarle de nuestra lista.
Buscamos:
<div class='follow-this profile-link item-control following-stop-following-this'>

En las siguientes líneas veremos <data:stopFollowingMessage/> lo eliminamos y en su lugar añadimos otro texto de nuestro agrado.

*Abrir en ventana cuando accedemos a un avatar.
(Esta solución a encontré leyendo los comentarios de J.Miur)
Cuando hacemos click en una imagen de los seguidores accedemos a su blog. Lo ideal sería hacerlo sin salir de nuestra página y para ello es necesario modificar el enlace del avatar. Añadimos el atributo target='_blank' de esta forma:
Buscamos:

<a expr:href='data:follower.profileUrl' expr:title='data:follower.displayName' rel='nofollow'>

y lo sustituimos por:

<a target='_blank' expr:href='data:follower.profileUrl' expr:title='data:follower.displayName' rel='nofollow'>

También podemos hacer la misma operación en el enlace "Ver todos"

Buscamos:

<a expr:href='data:followersUri'>

lo sustituimos por:

<a target='_blank' expr:href='data:followersUri'>

* Borde,color y fondo de avatar...
Nos queda esa parte que más nos gusta, la de añadir estilos a nuestro gadget. Nos aseguramos de haber guardado los cambios en la plantilla y esta vez sin necesidad de expandir la plantilla nos vamos justo antes del famoso ]]></b:skin>

Borde y color de fondo en las imágenes con:

.follower-img {
border:1px solid #901d14;
background-color:#000000;
padding:1px;
margin:0;
}

Texto de "Seguir este blog" y "Parar siguiente" añadimos efecto hover de negrita al texto, color de fuente, tamaño y justificamos.

.follow-this {
text-align:right;
}
.follow-this a {
color:#7E92A6;
font-weight:normal;
font-size:8px;
}
.follow-this a:hover {
font-weight:bold;
color:#000;
}

(right para la derecha, center para centro y left izquierda)


Justificar texto de X seguidores:

.followers-canvas{
text-align:right;}
}

(right para la derecha, center para centro y left izquierda)


Ajustamos las imágenes de nuestros seguidores a la medida de nuestra sidebar:

.followers-grid {
width:170px;
margin:0 auto;
padding:0;
}




0 comentarios:

Publicar un comentario