JMiur [E]

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
  • 58 comentarios:

    Gem@  

    Te configuraste hasta las vacaciones de los chicos de Blogger !bárbaro¡ (el post claro)

    Responder
    JMiur  

    Creo que cuando quité el texto de "Parar siguiente" ya fui feliz y lo demás es de puro pesado :D

    Responder
    Opcionez  

    Parece que Blogger al fin se puso las pilas, estos pequeños juguetes lo hacen más entretenido. Por cierto, ya veo a la perfección el botón "Vista previa" para los comentarios, Otra sorpresita mas de Blogger! :)

    Responder
    Pepiche  

    ¡Grande JMiur, ya te estoy siguiendo!

    Saludos.

    Pepiche.

    Responder
    Eifonso Lagares  

    Hola, en tus "Seguidores" al pulsar "Ver la lista completa" accedes a un página con los 10 primeros y al pulsar "siguientes 10" ya no se mueve. Por si no lo sabías.

    Otra cosa en los comentarios al pulsar "Vista previa" desaparece el comentario y hay que volver a repetir texto.

    Por si no lo sabías y puedes echarle una mano a los de Blogger, que son muy ingenieros, pero muy chapuzas.

    Un saludo

    Responder
    Mar  

    Sí que se mueve! Los he visto a todos!

    (Por cierto lo de la vista previa es verdad, no me había pasado cuando lo probé por casa...)

    Un saludo, JMiur

    Responder
    Mar  

    No sucede JMiur, volví a probar, sale una ventanilla con una cuz de cierre peque, (a lo lightwindow)y el comentario no se borra.

    Bueno, era para avisarte nada más.

    Responder
    k_nelita  

    Si, yo también los veo todos, después de los diez primeros, lo de vista previa no he vuelto a probar.

    Me trae aquí otra cosa rara hoy, o mejor dicho desde anoche, no me sale el favicón en ninguno de los dos blogs, en los demás, como el tuyo y otros si lo veo, pero en los míos sale el icono de Blogger o sea la B.

    Que crees que pueda ser?? Me fije en los html de la plantilla y está todo bien, o sea está la imagen y todo como estaba, no toqué nada.

    Es mas en la barra de direcciones, el historial de FireFox salía el favicón y ahora sale la B.

    Que cosa mas rara :S Vos como lo ves??

    No, el botón de vista previa sigue sin funcionar y te borra el texto, menos mal que ultimamente los copio antes :D

    Responder
    Carlos Goldin  

    Yo no tengo la linea de "h2..." :(

    No podré modificarlo :(

    Responder
    Camila :(  

    Dandote una molestia: fíjate que no me salen los avatares en mi panel de seguidores :(
    :( :(

    Responder
    Carlos Goldin  

    ¡Me faltaba expandir artilugios! ¡ya pude!

    Responder
    JMiur  

    El gadget este parece tener, por ahora, dificultades. Ayer no se abrían la ventana Ver Todos o mejor dicho, se abría pero estaba vacía. Lo mismo ocurrió un par de veces con los avatares. En todos esos casos, conviene forzar la recarga de la página CTRL+F5 y si continúa igual, el problema es de Blogger; hay que esperar que se arregle.

    k_nelita: Lo del favicon parece un error en la plantilla. Online, leo esto:
    <link href='http://www.blogger.com/favicon.ico'
    rel='icon' type='image/vnd.microsoft.icon'/>
    Tendría que ver cómo está escrita la plantilla en este momento para contestarte exactamente. Cualquier cosa, me mandas un mail.

    Responder
    Camila  

    Muchas gracias, JMiur :D

    Responder
    k_nelita  

    JMiur mirá, no se si va a salir acá, sino te mando mail, pero no se que cosa ves online, yo acabo de copiar lo que tengo en las plantillas de los dos blogs y nada que ver, aparte solo en los blogs de Blogger me pasa esto, en el de Miarroba si sale el favicón.

    No, no sale, va mail...

    Responder
    Claudio  

    Hola te escribo para invitarte a participar en este nuevo blog para dar a conocer los secretos de la psicología para que todos tengamos una vida mejor.

    Ven a ver si te sirve, puedes hacer tus preguntas y hasta contar una experiencia.

    Te espero

    http://nuestrapsique.blogspot.com
    http://nuestrapsique.blogspot.com

    Responder
    Fali  

    ¡Genial!
    Saludos
    Fali

    Responder
    Camila  

    No se que será, JMiur, en todos los blogs si se ven los avatares y en el mio no, si acercas el cursor al lugar donde están los avatares si se ve que están ahi, pero los avatares no se ven. Quien sabe qué será. Esperaré.
    Te agradezco mucho.

    Responder
    Yola  

    Hola y gracias.

    Lo cierto es que (además de no tener seguidores todavía :() me lo estoy pensando porque al pinchar en la fotito de un seguidor se carga su perfil y se va nuestro blog.

    ¿se podría poner el "target=_"blanc""? o algo así :S

    Responder
    JMiur  

    Camila: eso suele pasar pero es un problema de Blogger.

    Yola: Tienes razón, no lo había pensado y acabo de ponerlo sin problemas. Puede agregarse en dos lugares, los avatares y el Ver Todos:

    <a target="_blank"

    Responder
    Yola  

    Genial JMiur, gracias.

    Entonces lo dejaré, con los cambios pertinentes que tan explícitamente explicas.

    MUCHAS GRACIAS de nuevo.

    Responder
    Camila  

    Gracias MUCHAS.
    Algo que admiro de ti, es que siempre contestas casi de inmediato. Eres muy amable, tu trabajo es excelente.

    Responder
    JMiur  

    Yola: gracias a ti por la idea, no se me había ocurrido :D

    Camila: eso trato de hacer pero claro, no siempre es posible. De todos modos, cualquier detalle puedes enviarme un mail sin problema :D

    Responder
    La Blogueria  

    Añadí en el followers-grid:

    height:150px;
    overflow:hidden;

    Para que se vean solo dos líneas de avatares. No sé si con ello se deja de ver algo porque no está funcionando muy bien.

    El "parar-siguiente" DEBE ser exterminado.

    Saludos!

    Responder
    JMiur  

    Vane:

    Eso está perfecto y es verdad, a veces no funciona bien; se nota que están haciendo muchos retoques en los archivos internos que carga Blogger.

    Lo de "Parar siguiente" es increible :D

    Responder
    La Blogueria  

    Entre eso y los zurullitos, o sea los iconitos, es para matarlos, para matarlos.

    Responder
    k_nelita  

    JMiur en que quedó lo de ponerle el target="_blank" a los iconos de los perfiles de los seguidores para que no te saque de la pagina??

    Donde se pone? Vos lo tenés así, yo no :(

    Vi que alguien te lo preguntó en los comentarios pero no vi la respuesta o no la entendí, me podrías explicar porfi... ;)

    Responder
    JMiur  

    Eso puede agregarse en dos partes, en los íconos de los seguidores y en el enlace que dice "Ver Todos" agregando en ambos casos target='_blank'

    El primero, ahora dice:

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

    lo cambiamos por:

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

    El segundo, ahora dice:

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

    lo cambiamos por:

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

    Responder
    Psicojack  

    Hola, me gustaria saber si me puedes ayudar por favor, es que no encuentro la forma de "instalar" este widget de seguidores y el de de etiquetas en mi blog, que está alojado con un dominio personalizado...

    de verdad te lo agradezco

    Responder
    JMiur  

    Esos dos elementos se agregan desde Elementos de la página. Si allí no los ves, fíjate entrando por Blogger Draft.

    Responder
    Janice  

    Holas !!!
    esta bonito tu post
    pero tengo un problemilla
    mi Pag es con un template clasico y no puedo añadir el artilugio de la manera normal, q podria hacer?
    Saluditos

    Responder
    JMiur  

    No sabría decirte cómo funiciona en als viejas plantillas.

    Responder
    jαvιєя_ɢ  

    Hola JMiur, implementé casi todos los cambios que mencionas, pero no puedo eliminar ese logo similar al de MSN que aparece.. ojalá me puedas ayudar a eliminarlo.

    Saludos

    BLOG: http://clockwork-tangerine.blogspot.com

    Responder
    JMiur  

    Ese nunca lo había visto :D

    A ver si sirve esto:

    .profile-link {background:none !important;}

    Responder
    jαvιєя_ɢ  

    Muchas gracias, funcionó a la perfección. :D

    Responder
    jαvιєя_ɢ  

    Y otra consultilla..
    ¿Hay alguna forma de que los seguidores aparezcan al azar y no solamente los últimos en anotarse?

    Saludos

    Responder
    JMiur  

    Hasta donde yo sé, eso es algo que maneja Blogger.

    Responder
    Shark_Bloody  

    Dios, cada cosita que uno agrega suma, mas lo que nos empaquetan ellos, siempre estamos en desventaja.

    Blospot rapido= html plano XD

    Decidi agregarlo, a ver como afecta... ya me esta pegando mal esto del tiempo de carga...

    Responder
    Rose Kavalah  

    upps...
    ahora hay nuevo gadget!!feo de cojones, por cierto... :S

    hay alguna manera de quitarle el borde y empequeñecer las fotos de nuestros seguidores??

    un millón de gracias :)

    Responder
    JMiur  

    Rose:
    Por ahora no tengo nada claro. Sigo intentándolo. En cuanto sepa algo lo publico y si alguien sabe, que avise :)

    Responder
    pablo cholvis  

    Tu trabajo es genial. Se puede hacer que se vean todos los seguidores y no sólo los últimos? O fijar un valor más elevado para la cantidad que se muestran? .CH.

    Responder
    JMiur  

    No, Pablo, esas cosas no pueden cambairse y varias de las que aquí se muestran, ya tampoco funcionarán porque el gadget ha cambiado.

    Responder
    pablo cholvis  

    Ahhhh, me parecía que algunas cosas ya no funcionaban porque antes de escribirte leí todo y fui probando. Gracias por tu tiempo e insisto, tu trabajo es muy pero muy bueno. Seguiré visitándote. Saludos.

    Responder
    El Hippie Viejo  

    Como hacer para que aparezcan todos los seguidores los seguidores juntos y no de en 5 en 5
    muchas gracias por tu atencion

    Adal

    Responder
    JMiur  

    El Hippie Viejo: Creo que eso no puede hacerse.,No estoy seguro pero me parece que es algo que controla Blogger.

    Responder
    El Hippie Viejo  

    JMiur
    muchas gracias.

    Creo que todo se debe al ancho del sidebar.

    Puse a los seguidores arriba de las entradas con un gadget y de los 68 seguidores que tengo
    aparecen 40.
    Me gustaría que aparezcan todos
    pero creo que es por el ancho, no me da.
    Muchas gracias y
    saludos!

    Adal

    Responder
    JMiur  

    Es bueno saber ese dato, hace rato que no pruebo ese widget, estoy atrasado de noticias :D

    Responder
    Manfenix  

    Hola JMiur, tengo un problema con la visualización de este gadget. En IE se vé pero en FF no. Cuál será la causa?.
    Mi blog

    Responder
    JMiur  

    Manfenix:
    No sabría responderte. Puede ser que haya algún script o gadget que esté interfiriendo. Prueba moverlo a otra posición, por ejemplo al inicio de la sidebar.

    Responder
    CHiCken  

    hola Jmiur me decidi despues de mucho tiempo poner el gadget de seguidores y ahora que los puse no se ve, sabes porque?

    Responder
    JMiur  

    Si usas Protoype, fíjate en esta entrada.

    Responder
    CHiCken  

    ya habia visto esa entrada pero nunca me imagine que me iva a pasar a mi :D gracias era eso.

    Responder
    Antonio Martínez Jover  

    Saludos, JMiur. Por más modificaciones que haga en la plantilla para el gadget de seguidores de mi blog, no hay manera: vuelve a quedar como estaba, y cuando consulto el texto se encuentra igual que si no lo hubiera tocado. Sin embargo, el resto de la plantilla sí acepta los cambios que le hago. No entiendo nada ¡¿?!

    Responder
    JMiur  

    Es que Blogger ha cambiado la forma de mostrar el gadget y ahora es un IFRAME por lo tanto, no puede ser modificado.

    Responder
    Antonio Martínez Jover  

    ¡Vaya! Muchas gracias igualmente, JMiur. Saludos.

    Responder
    Peter  

    Hola Jmiur!, como se podría personalizar el titulo de cada Gadget, por ejemplo cambiar el nombre, el tipo y tamaño de letra y el color de fondo..

    Muchas gracias

    JMiur  

    Si quieres que sean distintos unos de otros, debes buscar el código de cada uno de ellos y establecer alguna clase para identificarlos. Fíjate en esta entrada.

    Responder
    Kenan  

    oye amigo a mi no meda queria ponerle un fondo al gadget de seguidores pero cuando pongo este css antes de b skin :

    #Followers1 h2 {
    background:url();
    }
    despues guardo los cambios no me cambia nada ayudame porfis gracias !

    JMiur  

    EL gadget cambio hace mucho tiempo; hasta donde sé, ya no peude ser personalizado más allá de las opciones que te muestra el editor al agregarlo.

    Responder
     
    CERRAR