Presentar los posts populares como barras de colores | Oloblogger Este efecto consiste en transformar el gadget de entradas más populares de manera que en lugar del t...

26 de abril de 2012

Presentar los posts populares como barras de colores

Este efecto consiste en transformar el gadget de entradas más populares de manera que en lugar del típico blogroll, se vean unas barras gruesas de distintos colores y tamaños que contendrán el título (y enlace) del post y una pequeña miniatura.

Para ciertos diseños puede quedar muy cuco y aunque el código es un poco largo, realmente se instala en unos pocos pasos y la mayoría son de copiar y pegar.

Supongo que estará en más sitios, pero un servidor vio esto en HelpBlogger y sólo ha añadido el código para edición rápida del gadget, algunas pequeñas explicaciones adicionales y esta página de demostración dónde se puede ver en acción.



0Un paso previo sería eliminar el gadget de serie caso de que lo tuviéramos instalado. Se podría sustituir por el que veremos más adelante, pero creo que es más fácil así. Sin miedo, que si no os sale esto -que os saldrá- o no os gusta una vez puesto, con añadirlo de nuevo estará todo solucionado.

Escritorio ► Diseño ► Gadget Entradas Populares ► Editar ► Eliminar


1Ahora editamos la plantilla. Mejor NO expandir plantillas de artilugios para que el código no se haga muy largo y confuso.

Escritorio ► Plantilla ► Edición HTML ► Continuar

Lo primero sería copiar justo después de /* Variable definitions =========== el código necesario para generar unas variables que después podremos utilizar desde el Diseñador de plantillas para cambiar fácilmente los colores.

Para las últimas versiones de plantillas sería este:

<Group description="PopularPosts Backgrounds" selector="#PopularPosts1">
<Variable default="#fa4242" description="background color1" name="PopularPosts.background.color1" type="color" value="#ff4c54"/>
<Variable default="#ee6107" description="background color2" name="PopularPosts.background.color2" type="color" value="#ff764c"/>
<Variable default="#f0f" description="background color3" name="PopularPosts.background.color3" type="color" value="#ffde4c"/>
<Variable default="#ff0" description="background color4" name="PopularPosts.background.color4" type="color" value="#c7f25f"/>
<Variable default="#0ff" description="background color5" name="PopularPosts.background.color5" type="color" value="#33c9f7"/>
</Group>

Para las plantillas anteriores (no las clásicas), sería este otro y la diferencia es que no nos saldrían todos los colores en la misma opción del menú:

<Variable default="#fa4242" description="background color1" name="PopularPosts.background.color1" type="color" value="#fa4242">
<Variable default="#ee6107" description="background color2" name="PopularPosts.background.color2" type="color" value="#ee6107">
<Variable default="#f0f" description="background color3" name="PopularPosts.background.color3" type="color" value="#ff00ff">
<Variable default="#ff0" description="background color4" name="PopularPosts.background.color4" type="color" value="#ffff00">
<Variable default="#0ff" description="background color5" name="PopularPosts.background.color5" type="color" value="#00ffff">

2Ahora nos vamos algo más abajo y en la parte CSS insertamos el estilo. Para no fallar, lo hacemos justo antes de ]]></b:skin>:

#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none;}
#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px;}
#PopularPosts1 ul li:first-child{background:$(PopularPosts.background.color1);width:90%;}
#PopularPosts1 ul li:first-child:after{content:"1";}
#PopularPosts1 ul li:first-child + li{background:$(PopularPosts.background.color2);width:85%;}
#PopularPosts1 ul li:first-child + li:after{content:"2";}
#PopularPosts1 ul li:first-child + li + li{background:$(PopularPosts.background.color3);width:80%;}
#PopularPosts1 ul li:first-child + li + li:after{content:"3";}
#PopularPosts1 ul li:first-child + li + li + li{background:$(PopularPosts.background.color4);width:75%;}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4";}
#PopularPosts1 ul li:first-child + li + li + li + li{background:$(PopularPosts.background.color5);width:70%;}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5";}
#PopularPosts1 ul li:first-child:after,#PopularPosts1 ul li:first-child + li:after,#PopularPosts1 ul li:first-child + li + li:after,#PopularPosts1 ul li:first-child + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff;}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:40px;height:40px;}
#PopularPosts1 ul li a{font-size:12px;color:#444;text-decoration:none;}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none;}

Además de otras propiedades más comunes como márgenes, bordes, fuentes, etc., si os fijáis todo esto no es más que asignar un color de fondo distinto a cada uno de los elementos de la lista que forma la relación de posts, usando las variables que generamos en el paso anterior. Para ello utilizamos la pseudoclase first-child y los selectores que nos permiten usar el siguiente elemento (+li), el siguiente del siguiente (+li+li) y así hasta completar los cinco que vamos a poder conseguir con este código.

Si queréis añadir más de cinco ya tenéis los dos primeros sitios que habrá que ampliar: las variables y el estilo. Si no vais a necesitar/querer el diseñador para cambiar los colores, el paso 1 os lo podéis saltar y directamente ponéis un código de color hexadecimal en lugar de $(PopularPosts.background.colorX).

Los números en cada content también los podéis cambiar por otra cosa, como por ejemplo una flecha o un asterisco. Cualquier entidad HTML os podría servir, pero también está la opción de colocar una pequeña imagen. En fin por ahí van los tiros para modificar cosas.


3Ahora hay que buscar un b:widget para insertar el nuevo artilugio. En un principio se podría poner detrás o delante de cualquiera pero si buscáis la section correspondiente al bloque dónde lo queréis colocar, pues os ahorráis luego tener que moverlo. Por ejemplo, en la plantilla demo lo coloqué en la sidebar, justo el primero:

<b:section-contents id='sidebar-right-1'>
AQUÍ PARA QUE SALGA EL PRIMERO
<b:widget id='BlogArchive1' locked='false' title='Archivo del blog' type='BlogArchive'/>
TAMBIÉN PODRÍA IR AQUÍ
<b:widget id='Profile1' locked='false' title='Datos personales' type='Profile'/>
O AQUÍ

Este es el código que habría que insertar en ese lugar:

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content popular-posts'>
<ul>
<b:loop values='data:posts' var='post'>
<li>
<b:if cond='data:showThumbnails == &quot;false&quot;'>
<b:if cond='data:showSnippets == &quot;false&quot;'>
<a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
<b:else/>
<a expr:href='data:post.href' expr:title='data:post.snippet' rel='bookmark'><data:post.title/></a>
</b:if>
<b:else/>
<b:if cond='data:showSnippets == &quot;false&quot;'>
<b:if cond='data:post.thumbnail'>
<img class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnail'/>
<b:else/>
<img alt='no image' class='item-thumbnail' src='http://2.bp.blogspot.com/-XQt2v4x5dl8/T1zdpFh392I/AAAAAAAABUU/xMJZDedw38k/s1600/default.jpg'/>
</b:if>
<a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
<div class='clear'/>
<b:else/>
<b:if cond='data:post.thumbnail'>
<img class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnail'/>
<b:else/>
<img alt='no image' class='item-thumbnail' src='http://2.bp.blogspot.com/-XQt2v4x5dl8/T1zdpFh392I/AAAAAAAABUU/xMJZDedw38k/s1600/default.jpg'/>
</b:if>
<a expr:href='data:post.href' expr:title='data:post.snippet' rel='bookmark'><data:post.title/></a>
<div class='clear'/>
</b:if>
</b:if>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>

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

Guardamos y ya tenemos nuestras coloridas barras a falta de unos pequeños ajustes.


4Seleccionar el número correcto de entradas a mostrar para lo cual editamos el gadget bien desde Diseño, bien con el icono de edición rápida y marcamos Mostrar un máximo de 5 entrada(s), tantas como colores hemos definido con los anteriores códigos.



5Por último, si queremos cambiar los colores de cada barra sólo habrá que acudir al Diseñador de Plantillas...

Escritorio ► Plantilla ► Personalizar ► Avanzado ► PopularPosts Backgrounds

...y desde allí ir seleccionando los que nos gustan.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

116 comentarios :

  1. Buenísimo lo haba visto en otro blog y me preguntaba como implementarlo, voy a hacerlo!!!

    ResponderEliminar
    Respuestas
    1. Oloman no me aparecen las variables en el diseñador de plantillas, no se puede aplicar el CSS directamente en la plantilla?

      Eliminar
    2. Omite el comentario anterior, ya lo pude poner directamente en la plantilla

      Eliminar
    3. Yurika-Chan ¿podrías confirmar que con el código publicado te funcionó todo bien? Si tuviste que realizar algún ajuste necesitaría saberlo. Es para contestar a todos los que vienen después que comentan que no le funciona, porque así descarto error en la publicación del código.

      Eliminar
  2. ]]>:

    No encuentro esto, para hacr el paso 2 y pegar correctamente...

    ResponderEliminar
    Respuestas
    1. Busca bien sin los dos puntos (:). Está en todas la plantillas Blogger.

      Eliminar
    2. Gracias, sigo intentando y algo salió, sólo q el paso 1 se resiste, me da error :S

      Para que veas cómo queda por ahora: http://micine-halbert.blogspot.com.ar/

      GRACIAS!!!

      Eliminar
    3. Me acabo de dar cuenta de que tienes plantilla del Nuevo Diseñador (que odio). Actualizado de nuevo el código del paso 1. A ver si no te da error ahora.

      Eliminar
    4. Ahora sí!!!! 1000 gracias por ocuparte y responder! sos un genio, gracias por tus aportes a mejorar nuestros blogs!! queda buenísimo! Seguiré recorriendo tu blog buscando más cosillas!! :D
      Saludos OLOMAN!!

      Eliminar
  3. no tengo el código /* Variable definitions ===========,debería estar dentro del html?, donde lo puedo ubicar?

    ResponderEliminar
    Respuestas
    1. Debería estar poco después de la apertura del SKIN. Si no lo tienes, simplemente inserta esa parte entre símbolos de comentario /* CODIGO */

      Eliminar
    2. lo ubique una vez arriba y otra abajo del <b:skin><![CDATA[/* y no pude usar el diseñador de plantilla para los colores.

      Eliminar
    3. Muy bueno!! Pero me pasó igual que EGPP, en el diseñador no me aparece. Intentaré de nuevo cuando tenga tiempo.

      Eliminar
    4. responde oloman please

      Eliminar
    5. Estuve de celebraciones familiares :)

      He atualizado el código referente a la variables para que sirva con las plantillas anteriores al nuevo diseñador, pues he comprobado que el que puse sólo funcionaba con las últimas. A ver si podéis probarlo.

      Eliminar
    6. Nada,ahora al meter el codigo antes de ]]> me da error bx-xkzjy6, me falla la previsualizacion y me sigue sin funcionar. Pena.

      Eliminar
    7. Probad por partes y decidme cual de ellas es la que os falla.

      Eliminar
    8. Gracias por tu paciencia...`por partes:

      Paso 1. Me admite solo el de últimas versiones. El otro me da error.
      Paso2. Una vez introducido me provoca un fallo en la previsualización del blog y me da el error que te comenté antes.
      Paso 3. En principio sin problema. Pero voy a personalizar plantilla y sigue sin aparecer, con lo cual no puedo cambiar el color.

      Eliminar
    9. Para insertar el 2 y hacer una vista previa sin errores, es imprescindible tener insertado el 1. Prueba esos dos, visualiza (o graba, es difícil que "rompas" algo con eso) y a ver si no te da error. Luego haces el 3.

      Eliminar
  4. hola oloman te queria hacer una consulta necesito un rator de imagenes que me pases las imagenes de todas mis entradas que me recomiendas

    saludoss

    ResponderEliminar
    Respuestas
    1. Me costó adivinar que era eso del "rator", pero he llegado a la conclusión de que lo que pretendías escribir era "rotor". De todas formas nunca me he puesto a ver casi nada de sliders -el nombre con el que son más conocidos- así que no te puedo recomendar ninguno en particular. Tengo pendiente de publicar uno que sólo utiliza CSS pero mientras tanto, por si tardo tanto como acostumbro, mejor que busques opciones más normales que son con JavaScript.

      Eliminar
  5. Me ha parecido interesante y he tratado de subirlo a mi blog de Orígenes, pero, tal vez por el tipo de plantilla, al colocar el último de los códigos (<b:widget id='PopularPosts1'...) que te permite situarlo donde te apetece, pues me da el consiguiente error de blogger.
    Seguiremos esperando algún código nuevo, que seguro que sale.
    Un saludo

    ResponderEliminar
    Respuestas
    1. Quizás me precipité con que servía en cualquier sitio, pues aunque supongo que es así, sólo lo comprobé en la barra lateral que parece el sitio más natural. En tu caso, como ya tienes un gadget de post populares, sustituye el que lleva la ID PopularPosts1 por este.

      Si no expandes artilugios encontrarás una línea con esto a <b:widget ... id='PopularPosts1'... /> Pues cambia esa línea por el segundo código del paso 3.

      Eliminar
  6. Grande Oloman hace poco intente hacer, lo mismo con un post que encontre en Pizcos y pues no me salio, pero faltaba los retoques que vos le distes Thanks!

    ResponderEliminar
  7. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
    Respuestas
    1. Me parece que va a ser que no lo vamos a poder hacer ya, porque tienes una plantilla dinámica y ahí no se pueden incorporar gadgets :(

      Eliminar
  8. MUy bueno! Pero... cuando intento guardar la plantilla se me aparece que hay un error :'(
    Saludos

    ResponderEliminar
    Respuestas
    1. Prueba con la segunda opción que añadí ahora en 1

      Eliminar
  9. Ami tambien me paso lo mismo....
    Saludos

    ResponderEliminar
    Respuestas
    1. La respuesta de momento es la misma que en el comentario anterior...

      Eliminar
  10. Esto no funciona en plantillas antiguas? El paso 3 es muy confuso.

    ResponderEliminar
  11. Me desdigo...es fácil el paso 3...lo máximo que he llegado Oloman en el blog de pruebas es poner el gadget solo fallan los colores...que no salen. Creo que el tema de las variables no me funciona.

    ResponderEliminar
    Respuestas
    1. Pues no funciona bien en las plantillas que no son del Nuevo Diseñador, pero no me había dado cuenta hasta ahora que os habéis "quejado". Para lo de las variables, ver tres comentarios atrás y de nuevo la entrada.

      Eliminar
  12. Por cierto, recuerdas que te pregunté --no recuerdo el post-- sobre por qué al escribir un comentario en mi blog --con el formulario incrustado-- no volvía a dicho comentario recién publicado y se quedaba al principio del post. Pues probé quitando el facebook comments y nada. Se puede saber que script o que es lo que le pasa Oloman? Un abrazo. Perdona por tantas cuestiones.

    ResponderEliminar
    Respuestas
    1. Por mi parte no. No sabría ni por dónde empezar para arreglar eso porque nunca he visto ni leído nada parecido. De todas formas no es demasiado grave, pues después de escribir un comentario lo más normal es terminar con esa página... salvo nosotros los administradores.

      Eliminar
    2. Muchas gracias Oloman por tu tiempo. Ya me funciona de manera perfecta.

      Eliminar
  13. Saludos Oloman, cómo hago para lograr que el número quede centrado en el círculo? Mi blog es: sociedadhogwarts.blogspot.com

    Gracias.

    ResponderEliminar
    Respuestas
    1. Es que tú tienes configurado ese margen para todas las listas de tu barra lateral, por lo que en este caso tendrás que decir expresamente que no lo quieres. A #PopularPosts1 ul li{} añádele un text-indent:0;

      Eliminar
  14. Saludos Oloman,
    No me sale, he probado con los dos códigos, me da el siguiente error,
    "Declaración de variable no válida en máscara de página: La variable se utiliza, pero no está definida. Información: PopularPosts.background.color1

    Error 500"
    Gracias

    ResponderEliminar
  15. Hola de nuevo Oloman,suprime el comentario anterior , ya lo he conseguido, saludos.

    ResponderEliminar
    Respuestas
    1. Ok. La próxima vez si comentas el fallo que tuviste/encontraste y cuál es la solución, valdrá para otro que le pueda psar lo mismo.

      Eliminar
  16. Hago todos los pasos pero al final me sale:

    "Declaración de variable no válida en máscara de página: No se pueden analizar las variables de fondo porque no están construidas correctamente. Información:"

    Aparte que para hacer el primer paso no se la mía es una plantilla vieja o nueva solo la descargue de http://btemplates.com/?s=Liquorice&x=0&y=0 se llama liquorice

    otra cosa, hago todo y a mi me sale en lugar de "configurar entradas populares" me sale Configurar lista de enlaces... EXPLICA MEJOR EL ULTIMO PASO, Entendi que el ultimo codigo ese que comienza y termina en hay que pegarlo en cualquir widget que queramos de los que salen..

    ResponderEliminar
    Respuestas
    1. No, no hay que pegarlo en cualquier widget, sino ENTRE cualquier para de widgets. El penúltimo trozo de código de esta entrada es un ejemplo de sitios dónde se puede insertar. En lugar de las palabras en verde (de cualquiera de ellas) se puede poner el último trozo de código que es el que construye el gadget de posts populares.

      Si te sale lo de la lista de enlaces es porque probablemente lo insertaste DENTRO de ese gadget.

      Con respecto a lo de la declaración de variables no válidas, de las dos primeras opciones prueba la contraria. Eso es porque utilizaste la que no servía para tu tipo de plantilla.

      Eliminar
  17. Hola !!! yo lo he puesto y todo bien!!!! menos en una cosilla, y es que no me sale como cualquier widget con su configuracion de fondo etc como soy nuevo en estas cosillas no se ni como se llaman jajaja bueno en fin que me sale todo bien pero con widget transparente... y no es como los demas !!! que puedo hacer ?.... Gracias !!!! un cordal saludo !!!

    ResponderEliminar
    Respuestas
    1. En teoría, si añadiste el primer trozo de código (o el segundo) de esta entrada, deberías poder manejar esas características (estilo) desde el Diseñador de Plantillas. Sin embargo, si no te funciona, siempre puedes hacerlo a mano. Esto se hace desde el tercer trozo, cambiando los valores que ahí aparecen como variables -$(variable)- por colores hexadecimales (#xxxxxx).

      Eliminar
    2. Muchísimas Gracias !!! Oloman !!! ya lo solucione !!!.
      ah !! una cosilla por fa !!! si me pudieras orientar o informar donde encontrar como hacer para poner estos estilos de enmarcar los comentarios como los tuyos ? te lo agradecería .
      ¡¡¡ un cordial saludo !!!

      Eliminar
    3. hola !!! de nuevo !!! olvida lo anterior ya lo encontré un saludo !!! :D

      Eliminar
  18. Ahhh!!! me salvaste *-*! Lo he estado buscando como loca por todos lados de la red y nada. Muchísimas Gracias por publicarlo. Lo guardo en favoritos para hacer la prueba ;)!

    ResponderEliminar
  19. Hola Oloman, pasaba por aquí para pedirte un ayuda con respecto a este tema. Mira, he seguido todos los pasos al pie de la letra y me ha funcionado casi bien, a excepción del diseño atractivo que no aparece. Es decir la relación de posts sale como si no tuvieran un diseño :/ ! Lo he probado en mi otro blog y allí si se puede apreciar el diseño. Sinceramente no se que he borrado de la plantilla de mi blog para que no aparezca el diseño. Espero que me respondas y me puedas ayudar.

    Un saludo!

    ResponderEliminar
    Respuestas
    1. Parece que ya lo solucionaste. Me alegro.

      ...a menos que quieras ponerlo en otro distinto de Brisa de Sueño :S

      Eliminar
  20. A parte de Brisa de sueño lo he colocado en : http://unpocoanime.blogspot.com/. Pero por alguna razón no sale el diseño. Soy consciente que hace mucho borre algo de la plantilla del blog "De todo un poco...", lo cual no permite que salgan los diseños :S ! No se si hay alguna solución, ya que el top esta publicado, pero no se aprecia como debe ser.

    ResponderEliminar
    Respuestas
    1. Aparentemente lo pusiste todo bien en ese otro blog. Lo único raro que veo es que tienes dos <style id='page-skin-1' type='text/css'>. Es como si tuvieras dos apartados CSS seguidos. No sé si puede ser eso lo que te da problemas.

      Comprueba que haya sólo una par de etiquetas SKIN (la de apertura y la de cierre) metiendo todo el CSS entre ese par.

      Eliminar
  21. Muchísimas gracias! Ya lo puse en mi blog de Belleza y quedó re lindo :)
    Una cosita sola: Si quiero cambiar la letra o ponerla más grande ¿cómo hago?
    Un saludo.

    ResponderEliminar
    Respuestas
    1. Cambiando las dos últimas líneas del trozo de código del apartado 2:

      #PopularPosts1 ul li a{font-size:12px;color:#444;text-decoration:none;}
      #PopularPosts1 ul li a:hover{color:#222;text-decoration:none;}

      La primera es el aspecto en el estado normal y la segunda el que toma el texto cuando se pasa el puntero por encima.

      Eliminar
    2. Gracias por la respuesta, voy a probar a ver si me sale! Muchas gracias! Besos!

      Eliminar
  22. Hola, esta genial!

    mm.. yo queria preguntarte, lo que pasa es que una vez vi uno de entradas recientes-populares, que iba subiendo (se movía como en tipo marquesina), tenia movimiento, pero no lo he encontrado, ¿lo conoces? porfis es que me gustaria ponerlo en mi blog,
    de antemano gracias :D

    ResponderEliminar
    Respuestas
    1. No lo conozco Ichan. Si lo encuentras aunque sólo sea funcionando (sin explicación), por favor nos pasas el enlace que le echemos un vistazo.

      Eliminar
  23. Hola muchas gracias pero los colores no me van
    mirar:http://gamezox33.blogspot.com.es/

    ResponderEliminar
    Respuestas
    1. Lo vi, y el problema es que no te lee las variables de Blogger con los colores. Eso lo hace el primer y segundo trozo de código.

      Pero no hay que poner los dos a la vez sino sólo uno de ellos. Tienes que usar uno de los dos y si no funciona, el otro. Dependerá del tipo de plantilla que tengas.

      Eliminar
  24. Buenas tardes Oloman! cómo podría hacer para que en el ranking no participaran las entradas con cierta etiqueta?

    ResponderEliminar
    Respuestas
    1. Pues cómo este sistema está basado en el gadget "oficial", no creo que se pueda. Por lo que he podido observar creo que saca las entradas más visitadas, así que no se me ocurre cómo se podría cambiar lo que Blogger muestra...

      Eliminar
  25. Hola, tengo un blog de pruebas en el que he tratado de aplicar este gadget y aunque en el diseñador de plantillas se ven los colores de fondo, cuando abro el blog normalmente no se ve el fondo del gadget. Realmente soy nuevo en esto y me gustaría saber si cometí algún error. Esta es la url: http://testingsanctum.blogspot.com/. Agradezco tu orientación, pues veo que eres muy versado en estos asuntos.

    ResponderEliminar
    Respuestas
    1. No tanto como os parece :)

      Prueba a quitar las etiquetas GROUP y su contenido. Hay una al principio y otra final del primer trozo de código.

      Si sigue sin funcionarte, directamente sustituye en el código que hay en 2) todos los $(PopularPosts.background.colorX) por el color en hexadecimal que quieras (o su correspondiente de arriba). Esto último seguro que no falla.

      Eliminar
    2. Muy agradecido amigo. Resulto quitanto las etiquetas GROUP. Seguire pendiente de lo que publiques, sigo tus entradas en mi lista de lectura en blogger.

      Eliminar
  26. hay otra metodo mas facil con css, solo agregamos el estilo y el gadget por defecto de entradas populares y listo.

    ResponderEliminar
    Respuestas
    1. La verdad es que lo he pensado alguna vez pero nunca me he puesto a comprobarlo, porque la ventaja de este es que si no entiendes de CSS desde el Diseñador de plantillas puedes cambiar los colores ¿lo has probado tú?

      Eliminar
  27. Buenas tardes, hay alguna manera de que solo muestre entradas de una determinada etiqueta?
    Muchas gracias!

    ResponderEliminar
    Respuestas
    1. Yo no sabría cómo, pero de todas formas pienso que no. Este es uno de esos gadgets que controla por entero Blogger desde su base de datos y aquí lo único que se hace es cambiar el continente (estilo), no el contenido.

      Eliminar
  28. Saludos!!! Muy interesante. Pero no me da la opción para cambiarle el color. Que me recomienda ???

    ResponderEliminar
    Respuestas
    1. Pues ese es un problema que todavía no sé solucionar, así que lo único que te queda es prescindir de la primera parte de esta entrada y directamente poner los colores que quieres en la parte de estilo. Sería cambiando todas las apariciones de variables como esta -$(PopularPosts.background.color1)- por colores directamente -#cc0000-.

      Eliminar
  29. como se podria poner eso en una plantilla externa a todas las que te ofrece Blogger?

    ResponderEliminar
    Respuestas
    1. Supongo que te refieres a una plantilla personalizada (no de las que da Blogger entre sus opciones). En ese caso y suponiendo que no incluya variables, sólo tienes que usar el código marcado como 2, pero sustituyendo las variables tipo $(PopularPosts.background.color1) directamente por el color que quieras (#9e9e9e).

      Eliminar
  30. Servirá para darle más color al sitio, gracias :)

    ResponderEliminar
    Respuestas
    1. Sí, claro. Es sólo un detalle estético.

      Eliminar
  31. Me ha encantado este post.

    1º Por como lo explicas.
    2º Por lo resultón que queda.
    3º Por lo fácil que ha sido.
    4º Por haber descubierto esta página.

    Gracias por tu trabajo, intentaremos aprender.
    Un saludo.

    ResponderEliminar
    Respuestas
    1. Gracias a tí. Siempre es agradable que te hagan saber este tipo de cosas que comentas :D

      Eliminar
  32. Como te va, primero gracias por el aporte.

    http://wtfdownload.blogspot.com.ar/

    Ese es mi Blog quedo bastante bien pero se superpone el titulo de la entrada con la foto, como lo puedo solucionar.

    De antemano gracias!

    ResponderEliminar
    Respuestas
    1. Añade un text-indent: 0; al selector #PopularPosts1 ul li

      Es que por defecto Blogger pone en las listas de la barra lateral un -15px y por eso se te montan.

      Eliminar
  33. Hola Oloman lo puse en el blog pero no funcionan los enlaces, puedes darle un vistazo http://goo.gl/XgIbG

    Gracias y saludos.

    ResponderEliminar
  34. Hola de nuevo, parece que sólo funciona en IE, en Google Chrome y en Safari no trabaja, alguna idea.

    ResponderEliminar
    Respuestas
    1. Hola. Prueba a abrir la demo que hay enlazada al principio del post con Chrome y FF. Seguro que te funciona igual que en IE. Si tu código no lo hace entonces es porque algo pusiste mal, de menos o de más.

      Pero esa parte no la puedo ver desde aquí. Tendrás que repasar lo que hiciste y la mejor manera suele ser quitarlo y volverlo a poner desde el principio.

      Eliminar
  35. Hola de nuevo,

    puse y quite el código varias veces pero parece que mi plantilla tiene algún problema con este widget, así que puse otro que también queda guapo...

    Saludos

    ResponderEliminar
    Respuestas
    1. Pues nada, son muchos los caminos que llevan a Roma ;)

      Eliminar
  36. Hola. A mi no me funciona. Hago todo tal cual y me sigue apareciendo de la misma forma que lo tenia, que encima no me gusta nada...
    ¿Qué se podría hacer?

    ResponderEliminar
    Respuestas
    1. Pues además de lo que explico, no se me ocurre nada más. El gadget es complejo de montar y es fácil que no funcione si alguna de las cosas que hay que hacer se omite o se cambia. Lo único que te puedo indicar es que sigas meticulosamente lo que se explica, leyendo también las aclaraciones cuando las haya.

      Eliminar
  37. Muchos saludos Oloman. Quizás puedas ayudarme.

    El artilugio me ha funcionado perfectamente. Sin embargo, parece que tengo un problema con las imágenes de la lista. A pesar de que en las entradas tengo imágenes, no se cargan.

    ¿Podrías orientarme acerca de esto?

    Muchas gracias.

    ResponderEliminar
    Respuestas
    1. ¿Las subes a Blogger desde el editor de entradas o están alojadas en otros hostings de imágenes? Es que sólo funciona si es el primer caso, si alojas fuera de Blogger/Picasa, la mayoría de imágenes en gadgets no se ven.

      Eliminar
  38. ¡Oh, comprendo! Sí, las subo desde Photobucket para no perder calidad en la imagen.

    Bueno, he ahí el problema. Muchas gracias.

    ResponderEliminar
    Respuestas
    1. Olvídate de Photobucket si es por eso. En Blogger no se pierde calidad y además no consume capacidad de almacenaje para imágenes de menos de 800px de ancho, más que suficiente por lo normal.

      Eliminar
  39. muy bueno, necesitaria que me explicaras como enmarcar los comentarios como los tuyos y que apunten al avatar del que ha comentado, porfavor :(

    ResponderEliminar
    Respuestas
    1. Utiliza el buscador de la izquierda con "comentarios comic" ;)

      Eliminar
  40. Hola Oloman no me funciona bien este TRUCO, no me salen los colorines ni los números, eh aplicado todo lo que has puesto.
    Te dejo mi blog para que le des una revisada.

    www.ginsou.blogspot.com

    ResponderEliminar
    Respuestas
    1. Además mi gadget esta en el ado izquierdo, por lo que lo ubique en: b:section-contents id='sidebar-right-1'
      Esperando tu respuesta Thanks

      Eliminar
    2. b:section-contents id='sidebar-left-1'
      lo siento me olvide corregirlo. :P

      Eliminar
    3. Hola. El lugar dónde lo sitúes es indiferente, así que si no te funciona el tema de los colores, lo más rápido es que prescindas de los códigos que se citan en el apartado 1 y que sustituyas los colores que se expresan en el código 2 como variables ($(PopularPosts.background.color1, $(PopularPosts.background.color2), etc.) por colores hexadecimales (#ff0000) directamente.

      Eliminar
  41. ola mira que me puede ayudar no encuentra estas letras /* Variable definitions ===========
    bueno la pantilla no lo tienes no si pueda ayudarme como puedo hacerlo
    me entiende

    ResponderEliminar
    Respuestas
    1. Cuando estés en la edición HTML de la plantilla, pincha sobre el cuadro dónde está el código y luego pulsa CTRL+F. Se abrirá un pequeño buscador con el que podrás encontrar esa parte de código. Con que busques "definitions" posiblemente lo podrás encontrar.

      Eliminar
  42. Me sale:

    Declaración de variable no válida en máscara de página: La variable se utiliza, pero no está definida. Información: bordercolor

    Cuando intento agregar el código debajo de <![CDATA[/*

    ResponderEliminar
    Respuestas
    1. Echa uno vistazo unos comentarios por encima del tuyo. Exactamente el 42.3

      Eliminar
  43. Hola Oloman,
    Estoy trabajando en un blog con seudónimo y aunque no el principal motivo es de apoyo emocional y no para obtener ingresos económicos(si los hay bienvenido jeje), pero si quiero que llegue a muchas personas que necesiten de esta información, por lo pronto quiero crear mi dominio y ya leí las instrucciones de "Ayuda blogger", es decir que yo entiendo que solo debo anteponer www a el nombre de mi dominio simple; lo tengo como orugalibramariposa.blogspot.mx y lo cambié a www.orugalibramariposa.blogspot.mx, pero no me lo acepta porque dice que ya está en Google, entonces ¿Qué debo hacer?
    Muchas gracias, siempre me han sido útiles tus respuestas.

    ResponderEliminar
  44. Tuve un error de dedo Oloman,
    quise decir: El principal motivo sí es dar apoyo emocional.
    Gracias

    ResponderEliminar
    Respuestas
    1. ¿Solucionado? Al menos yo accedo sin problemas...

      Eliminar
  45. Hola, me encanta esta propuesta. Lo intenté una, dos y tres veces sin éxito. Igual gracias. Tu página es genial. Saludos

    ResponderEliminar
    Respuestas
    1. No soy capaz de explicarlo con más detalle en un comentario de como lo hice en la entrada. Sólo puedo añadir que leas detenidamente el artículo y que intentes seguir las instrucciones al pie de la letra.

      Eliminar
  46. Hola Oloman, comentarte que he implementado este nuevo estilo, por cierto sin problemas, ha quedado perfecto:)

    Pero me encuentro con el problema de que el gadget no actualiza los posts ni muestra las miniaturas, siempre muestra las mismas entradas, algo que no es posible, decirte que no es por tu código, sencillamente ya con el modelo predefinido de blogger ya me pasaba.

    Ahora mismo tengo las miniaturas desactivadas, porque solo muestra "noimage" cosa que no es así:) entonces solo tengo por ahora el texto activado.

    Tienes alguna idea de cual puede ser el problema? lo he intentado ya con varios códigos de otros blogs y estilos, pero no hay forma.

    Gracias de antemano, estaré pendiente de tu respuesta o posible solución:)

    ResponderEliminar
    Respuestas
    1. Hola MakeUp. Realmente no sé cuál puede ser el problema en tu caso, pero piensa que los posts populares son los que más visitas reciben y que estos son seleccionados por Blogger en función de los datos recogidos por su sistema. Lo más normal es que los más visitados sean casi siempre los mismos, sobre todo si tienes seleccionada la opción "En cualquier momento". Prueba a cambiar eso y a poner por ejemplo "Última semana". Eso sí que tiene que hacer que se muevan los posts que ahí van saliendo... al menos cada semana :)

      Eliminar
  47. Hola Oloman, pues tenías razón, al cambiar a semana han cambiado las entradas, lo he vuelto a poner en cualquier momento que me gusta más, quizá también sea porque hace muy poco que lo tengo y por eso sigan saliendo las mismas, pero viendo que ya funciona estoy más tranquila.

    Pero eso si...sigo con el problema de las miniaturas, siguen sin verse, una pena la verdad..pero de todas formas muchas gracias por tu ayuda:)

    ResponderEliminar
    Respuestas
    1. Una cosa importante para que los gadgets de Blogger funcionen bien en cuanto a las imágenes, es que estas estén almacenadas en el propio Blogger (G+, Picasa). Si no es así, las miniaturas no estarán disponibles.

      Eliminar
  48. Hola!!!!!! Primero que nada quería agradecerte las entradas que haces, ya que siempre me ayudan mucho. Y en segundo lugar comentarte que he seguido al pie de la letra los pasos, pero desgraciadamente he tenido algún problema, pero no se identificarlo. Lo que pasa es que cuando acabo los 5 pasos, los post populares no me salen con la barra de colores si no que, se queda como si hubiera agregado el gadgets de Blogger y es extraño por que es lo primero que elimine. Otra cosa que no me explico es que si me salen los pasos 4 y 5, y me deja cambiar de colores la barras y el número de entradas, pero sigue sin verse las barras. Y ya lo he intentado con otro blog y si que salen perfectamente las barras y todo perfecto. He intentado cambiando el paso 1, pero tampoco cambia nada, por lo que te estaría eternamente agradecida si me ayudaras. :)

    ResponderEliminar
    Respuestas
    1. ¿Lo tienes ahora mismo en algún sitio hecho que lo pueda ver, Niki?

      Eliminar
  49. Al final lo he podido solucionar, pero en el blog que me salio a la primera fue en este, http://adorotodolokawaii.blogspot.com.es/ . Pero fue muy extraño por que se arreglo al quitar un estilo de fuente que tenía en los títulos de las entradas. Aunque el problema ahora es que si le doy formato de color y tamaño al título de las entradas queda puesto tal cual en las barras. ¿Y quería preguntarte si hay alguna manera de evitar que pase?

    ResponderEliminar
    Respuestas
    1. No puedo ver tu blog; "Permiso denegado" :(

      Eliminar