Transformando el gadget de posts populares | Oloblogger Los gadgets que vienen de serie con Blogger normalmente están controlados por clases con nombres fij...

15 de junio de 2012

Transformando el gadget de posts populares

Los gadgets que vienen de serie con Blogger normalmente están controlados por clases con nombres fijos y por lo tanto es relativamente fácil atacarlos para después de instalados modificar su apariencia con CSS.

En este ejemplo cambiaremos un poco el de Entradas Populares de manera que se convierta en un menú gráfico con tooltips o mensajes emergentes que muestran el título del posts.

Menú gráfico para Posts populares

Actualmente podéis ver uno igual con pequeñas variaciones en la parte inferior de este blog y el resultado exacto en la demo que hace tiempo preparé para ilustrar una serie de modificaciones que propuse para la plantilla Blogger Store.


Sólo tenéis que copiar este cógigo en cualquier parte entre las etiquetas SKIN de vuestra plantilla y listo. Para los curiosos, una pequeña explicación después.

.popular-posts {margin-top:10px;}
.popular-posts ul {width: 500px; margin: 0 auto; text-align:center;}
.popular-posts .item-snippet{display: none;}
.popular-posts ul li {position:relative; float:left; list-style-type: none; padding: 0 0 0 5px ;}
.popular-posts ul li a {text-decoration:none; color: #000;}
.popular-posts li img {background: #666666; padding: 2px; filter:alpha(opacity=100); -moz-opacity:1; -webkit-opacity:1;-o-opacity:1;-ms-opacity:1; opacity:1;
transition: all .5s linear; -o-transition: all .5s linear; -moz-transition: all .5s linear; -webkit-transition: all .5s linear;}
.popular-posts li img:hover {filter:alpha(opacity=60); -moz-opacity:.6; -webkit-opacity:.6; -o-opacity:.6; -ms-opacity:.6; opacity:.6;}
.popular-posts li .item-title a {z-index:1; width: 150px; height: auto; line-height: 16px; padding: 5px; font-style: italic; font-size: 14px; text-decoration:none; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); text-align: center; border: 2px solid #cc0000; background: #eeeeee; background: rgba(255,255,255,0.8); -moz-border-radius: 3px; -webkit-border-radius: 3px; -o-border-radius: 3px; -ms-border-radius: 3px; border-radius: 5px; pointer-events: none; position: absolute; left: 50%; margin-left: -75px; bottom:190px; box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
filter:alpha(opacity=0); -moz-opacity:0; -webkit-opacity:0;-o-opacity:0;-ms-opacity:0; opacity:0;
-webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}
.popular-posts li:hover .item-title a {bottom:80px; filter:alpha(opacity=100); -moz-opacity:1; -webkit-opacity:1;-o-opacity:1;-ms-opacity:1; opacity:1;}


El gadget Entradas Populares lo que simplemente hace es montar una lista en la que muestra título del post, miniatura y un pequeño resumen de texto, estos dos últimos de manera opcional. Sabiendo esto y viendo el código que se genera, lo demás sólo consiste en reconocer qué parte controla qué:

<div class='widget PopularPosts' id='PopularPosts1'>
<h2>Los más demandados</h2>
<div class='widget-content popular-posts'>
<ul>
<li>
<div class='item-thumbnail-only'>
<div class='item-thumbnail'>
<a href='URL_POST' target='_blank'>
<img alt='' border='0' height='72' src='URL_MINIATURA' width='72'/>
</a>
</div>
<div class='item-title'><a href='URL_POST'>Título de la entrada</a></div>
<div class='item-snippet'>Resumen</div>
</div>
<div style='clear: both;'></div>
</li>
(sigue con el resto de elementos de la lista, cierre de UL y cierre del DIV principal)

En un principio podríamos usar la ID PopularPost1 como contenedor general, pero si alguien añade un segundo gadget de este tipo, la ID terminará en 2, por eso preferí usar la clase anidada siguiente junto a widget-content, esto es, popular-posts.

Siguiendo el código...

.popular-posts ul se corresponde con el contenedor general
.popular-posts ul li con cada elemento de la lista o conjunto título-miniatura-resumen
.popular-posts ul a con los enlaces (título del post, imagen)
.popular-posts li img con la miniatura

Los efectos se hacen con los correspondientes hover añadiendo una opacidad total para un estado y trasparencia para el contrario. Lleva añadido una posición vertical distinta (bottom) en cada estado para conseguir la aparición del tooltip. Lo demás es el resultado de utilizar transition.

En esta entrada hay más información sobre este tipo de mensajes emergentes animados.


Con el mismo sistema y con la clase adecuada, se pueden hacer cosas parecidas con casi todos los gadgets, así que a practicar que yo me voy de fiesta. Esta semana me lo he ganado aunque no sea por mi actividad en el blog.

¿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

88 comentarios :

  1. ¿Este efecto no se puede aplicar a las imágenes para que se vea cuando usemos el atributo title?

    Y si se puede hacer, cómo se haría.

    ResponderEliminar
    Respuestas
    1. Se puede hacer con imágenes de manera prácticamente igual a la de aquí (sigue el enlace casi al final del post "mensajes emergentes"), pero no lo puedes aplicar diretamente al title.

      Eliminar
  2. Hola oloman puse el codigo de las marquesian


    pero las imagenes se pasan muy juntas como hago para separarlas un poco???


    este es mi blog

    www.seduccionelite.blogspot.com

    ResponderEliminar
    Respuestas
    1. No sé qué código usaste y tampoco ayuda mucho que tengas deshabilitado el botón derecho :)

      Si lo haces para que no se pueda ver el código fuente, debes saber que es lo mismo. La mayoría de navegadores incluyen herramientas para hacerlo sin usar ese botón.

      De todas formas la cosa se puede solucionar incluyendo espacios en blanco entre las imágenes o &nbsp;

      Eliminar
  3. otra cosa por que no puedo poner el codgio ke tengo en mi blog??

    asi lo veas bien?? (el codgio de las marquesinas)

    ResponderEliminar
    Respuestas
    1. Si escribes código en los comentarios, este se interpreta y por eso no es visible. Tienes que transformarlo primero en texto plano. Si buscas "HTML texto plano" encontrarás diversas herramientas para ello.

      Eliminar
  4. Si eso del boton derecho como lo solusiono, una vez puse ese codigo de tu pagina pero ahora no me acuerdo como se hace la saca la verdad

    ResponderEliminar
  5. YY otra cosa se puede saber que plantilla usa otra pagina?? o de donde la saco mirando el codigo fuente??

    ResponderEliminar
    Respuestas
    1. No sé cómo pusiste lo del botón derecho, pero tampoco es tan importante. Ya te comenté que hay maneras de saltarlo :)

      Y sobre las plantillas, en las de Blogger suele venir algo así al principio:
      /*
      =============================================
      Oloblogger (http://www.oloblogger.com)
      Plantilla creada por Oloman
      Base: Minima Stretch de Blogger
      Fecha: Enero 2012
      ============================================*/

      Pero algunos lo borran y en otros casos son tan personalizadas como esta y no te ayudará mucho esa información.

      Eliminar
  6. Hola Oloman, te felicito por tu blog que siempre me ha ayudado mucho, aunque últimamente lo de que también es para torpes o novatos no lo veo claro (Sin ánimo de crítica)
    Reconozco que no tengo mucha idea de HTML y ninguna de CSS, y el nivel de tus publicaciones es cada vez más avanzado, así que muchas veces me quedo con las ganas de poder instalar los códigos en cuestión, acostumbrado a los típicos tutoriales de "busca esto, y detrás pégale aquello, borra tal, pon nosequé y listo"
    No obstante, seguiré suscrito y leyendo cada uno de tus posts, donde siempre aprendo alguna cosa, me encantan siempre tus propuestas, así que ¡Gracias! y Saludos

    ResponderEliminar
    Respuestas
    1. Tomo nota del "toque de atención". En mi descargo diré que creo preferible explicar las cosas y no simplemente indicar "copia esto y pégalo aquí". Pienso que entendiendo lo que se hace es más fácil aprender a hacer las cosas por uno mismo. Al menos así fue conmigo.

      Además, la segunda opción sería sin duda la más fácil para mí. Te aseguro que explicar e ilustrar con ejemplos es como 5 veces más laborioso.

      Aunque no lo parezca, este post en concreto es de los que echas de menos, así que adelante ;)

      Eliminar
  7. hola amigo puse el codigo de markesinas en mi blog

    www.seduccionelite.blogspot.com

    ahora la pregunta es como hago para que las imagenes se detengan al pasar el puntero sobre ellas??

    vagabunda me dijo que tenia que crear un escrip pero no me dijo como

    espero que vos me puedas ayudar

    ResponderEliminar
    Respuestas
    1. Tienes una marquesina simple hecha con HTML y por lo que dices quieres algo que se detenga a voluntad del usuario. Lo que Vagabundia quiso decir es que para eso necesitas código JavaScript.

      Yo sólo he publicado este modelo, pero en la Red podrás encontrar muchos más.

      Eliminar
  8. Hola Oloman,

    he colocado este tip en mi blog y me ha quedado de miedo, la verdad es que andaba buscando, está forma de colocar las entradas populares con thumbnails, porque lo vi en tu blog, y me encanto cómo quedaba, te felicito por tu gran blog y la ayuda que ofreces, eres un crack, gracias.

    Mi blog: http://aizum.blogspot.com

    ResponderEliminar
    Respuestas
    1. Veo que no es lo único que tomaste de aquí ;)

      Eliminar
  9. Ya lo se, que no es lo único qué tome de aquí, pero es que para mi eres una referencia, no te lo tomes a mal, si quieres sí hay algo que no te guste de mi blog o te moleste y te he copiado de tu blog y te sientes mal, lo quito sin problemas, dímelo y no hay ningún problema. Iván.

    ResponderEliminar
    Respuestas
    1. No problemo. Fue sólo un comentario. Mi pensamiento es siempre que si algo te gusta tanto como para copiarlo, al menos adáptalo, personalízalo todo lo que puedas, que sólo sea copiada la idea o el concepto, pero no todo. Lo que vi en tu blog estaba modificado, pero supongo que entiendes que para mi es fácil reconocer ciertos elementos si yo los tengo ;)

      Eliminar
  10. oloman con respecto a las marquesinas como hago para que ni bien pasen todas las imagenes vuelvan a comenzar otra vez?? por que em mi blog demoran un rato hasta que vuelven a salir

    www.seduccionelite.blogspot.com

    ResponderEliminar
    Respuestas
    1. Todas las características dependen del script que estés utilizando. Hay muchos y cada uno funciona de una manera distinta. No sabría decirte con el que tienes ahora, pero la solución es tan fácil como seguir buscando hasta encontrar uno que funcione exactamente cómo tú quieres.

      Eliminar
  11. Hola amigos. Os quiero hacer una consulta.
    Estoy buscando una clase de gadget para blogger que me permita visionar a través de él las entradas que se van colocando en la página 2 de mi blog, o que están catalogados en una determinada etiqueta. Sería una buena manera de que las entradas de que van pasando a segunda página pudieran seguir viéndose en portada y así darle un mayor rendimiento a los posts.
    Entiendo que no debe ser difícil, pero no doy con la solución. ¿Tenéis algún dato?.
    Muchas gracias y felicidades por vuestro blog.
    Un abrazo

    ResponderEliminar
    Respuestas
    1. Una idea rápida.

      Añade un gadget tipo feed y en la dirección escribe
      http://DIRECCION_HOME/atom.xml?redirect=false&start-index=6&max-results=5

      El start-index marca el primer post a mostrar (en el ejemplo el 6º) y max-results el número de posts totales que se verán. Creo que no te admitirá más de 5.

      Para que sólo sean los de una etiqueta, la dirección sería:
      http://DIRECCION_HOME/feeds/posts/default/-/NOMBRE_ETIQUETA

      ;)

      Eliminar
  12. Hola oloman.. Muchas gracias por todo esto que nos brindas, ayudas a que hayan blogs bien presentados.. :)

    Tengo una pregunta y es que parte del código se debe cambiar si lo quiero usar con "las entradas similares"??
    yo estuve moviendo un poco el código allí y aca.. pero no logre mucho, remplazé la clase .popular-posts en el CSS por related-posts y otras cosas en el HTML pero me di por vencido.. no logré el efecto del hover =/ al pasar el mouse.. Es muy complicado?? ;)

    Gracias

    ResponderEliminar
    Respuestas
    1. Depende de cómo tengas montado concretamente tus posts relacionados. Hay varios códigos circulando y no tengo acceso a tu perfil por lo que no puedo ver tu blog.

      De todas formas se trata de ponerle un opacity: .; a la clase de cada elemento (li) del artilugio y un opacity: 1; a la misma clase añadiéndole un :hover, sólo eso. O al revés si quieres que "aparezca" cuando se pone el puntero por encima.

      Eliminar
    2. Graias por responder.. he logrado algo, pero tengo problemas con el manejo del hover.. para que salga el titulo al poner el mouse. :P

      Aun asi, sigo moviendo un poco el código para ver que logro.

      Te dejo el link del blog: http://elsolucionario.blogspot.com/

      Eliminar
    3. Este comentario ha sido eliminado por el autor.

      Eliminar
    4. Después de mucho esfuerzo he logrado hacerlo. :P solo que no me ha quedado igual de bueno al de entradas populares.

      Muchas gracias..

      Eliminar
    5. De nada. Tampoco tienen por qué ser idénticos los efectos. Incluso podrías cambiar también los colores del borde y/o fondo para evitar que se confundan.

      Eliminar
  13. Hola una consulta, antes de todo soy nuevo en este mundo de los Blog pero me gusta y también el Blog está interesante y sirve de mucha ayuda para nosotros, yo tengo un problema h1, h2, bueno todos los h que existen, quisiera que me ayudes a ordenar esto en mi Blog, hice la grande cambiando en artilugios, los h3 por h1 y ahora no se como devolverlos, quisiera que me ayudes

    ResponderEliminar
  14. Pues hay que repasar toda la plantilla, pero la forma más sencilla sería haciendo todo justo al revés. Esto es, busca (CTRL+C) con plantillas de artilugios expandidas todos los h1 y los cambias provisionalmente, por ejemplo, con un hx. Luego, todos los h3 los cambias por h1 y por último, los hx los pones como h3. El paso intermedio del hx es para que no falles ni confundas ninguno.

    De todas formas, la pista definitiva por si lo anterior no te funciona totalmente, es que en las plantillas originales h1 es para el título del blog, h2 para fechas de entradas y títulos de gadgets y h3 para los títulos de las entradas.

    ResponderEliminar
  15. Oloman estaba pensando como podría hacerlo vertical y si en vez de mostrar el titulo mostrar las etiquetas del post.

    ResponderEliminar
    Respuestas
    1. No me compliques Stuka, que estoy intentando disfrutar unas medio vacaciones :)

      Bueno en serio, lo de ponerlo en vertical se podría hacer, aunque tendría que trabajarlo, pero con respecto a mostrar las etiquetas, eso es bastante más complicado. Tanto que no se me ocurre ni por dónde empezar :s

      Eliminar
    2. Bueno espero que descanses pero puedes ponerte a trabajar? ajajajj y aunque sea decirme como hacerlo vertical no?

      Eliminar
    3. Como cosa rápida prueba a poner un width en la primera línea del estilo:
      .popular-posts {WIDTH: 72PX; margin-top:10px;}

      Eliminar
    4. No no funciono pero toqueteando un poco el CSS quedo horizontal poniendo
      .popular-posts ul {width: 100px; margin: 0 auto; text-align:center;} (PARA QUE QUEDEN EN FILA DE 1)
      .popular-posts ul {width: 200px; margin: 0 auto; text-align:center;} (PARA QUE QUEDEN EN FILA DE A 2)

      Eliminar
    5. Bueno, más o menos la idea es la misma, pero si esa fue la forma en que te funcionó, pues perfecto ;)

      Eliminar
  16. Hola Oloman.
    Me gustaría saber si es posible mostrar mas de 10 post y como hacerlo.
    Saludos y gracias.

    ResponderEliminar
    Respuestas
    1. Con este gadget no. Habría que montar algo con JSON y JavaScript para que los leyera sin límite o mejor dicho, con un límite mayor. Desafortunadamente eso no lo he hecho ni visto nunca, así que no te podría explicar.

      Eliminar
  17. buenas noches! Queria que me resolvieras una duda que consiste en que las entradas populares no se ven de manera lineal una detras de otra, queria introducir 10 entradas populares y que queden de forma lineal pero cuando introduzco mas de cinco entradas las demas quedan debajo. en definitiva, lo que quiero es que se me vean todas en una sola fila. Espero su respuesta. gracias, un saludo.

    mi blog: informarnos

    ResponderEliminar
    Respuestas
    1. Hoy veo 9 en la misma línea. Supongo que ya lo arreglaste ;)

      Eliminar
  18. Excelente, y simple! Gracias!

    ResponderEliminar
  19. oloman, me puedes ayudar, esque ami no me salen la vista en miniatura, ya lo tengo seleccionado y aun no salen

    mi blog:

    toxicosm.blogspot.com

    ResponderEliminar
    Respuestas
    1. No veo que tengas este gadget en tu barra, por lo que no puedo saber si te funciona o no.

      Eliminar
  20. Hola como estas?
    queria ver si alguien me puede ayudar aplique este gatget a mi blog, y todo esta exelente, pero lo unico que me gustaria que todo se habra en la misma pagina que nosea en otra ventana y nose como se cambia eso muchas Gracias

    ResponderEliminar
  21. Ya lo resolvi, gracias de todas formas

    ResponderEliminar
  22. Oloman, excelente todo! Como puedo colocar el gadget dentro de una entrada, no en la sidebar? Saludos

    ResponderEliminar
    Respuestas
    1. Que yo sepa, en una entrada no se pueden incluir gadgets de este tipo y sólo funcionan como parte de la plantilla. Si acaso podrías incluirlo al final o al principio de un post, pero siempre incluyendo su código en la plantilla.

      Eliminar
  23. Oloman, me puedes decir algun buen widget multitab (al- de 3 pestañas) en el que pueda meter entradas populares, ultimos comentarios, ... Lo he estado buscando en tu blog y en varios y me toy volviendo loco, porque tngo ya un multitab en mi blog pero al añadirle el codigo no se q pasa q no se ve casi nada.

    ResponderEliminar
    Respuestas
    1. No he publicado casi sobre eso, pero aquí tienes una manera de construir cajas con pestañas.

      Eliminar
    2. grax oloman, enseguida me pongo a hacerlo y te cuento como me ha ido.

      Eliminar
  24. Hola :) supongo que este código se podrá adaptar para hacer lo mismo con el blogroll...lo supongo menos de lo que lo suponía antes de probar a hacerlo por mi misma y ver que el blogroll se queda tan pancho, exactamente igual que estaba. La idea me gusta mucho como tantas otras que te he copiado, antes y ahora :D Si es posible poner el blogroll de esta misma manera te agradecería mucho que me explicaras como...

    Saludos

    ResponderEliminar
    Respuestas
    1. Hola. No recuerdo si ese otro gadget tenía la misma estructura que el los posts populares, pero posiblemente sea muy parecido. Como tardaría en vértelo con más detalle, en un principio prueba a cambiar en este CSS todos los .popular-posts por .BlogList

      Puede que no vaya exactamente igual pero ya sólo sería cuestión de retocarlo a tu gusto.

      Eliminar
  25. No, eso no resulta. Al menos a mí no me resultó :( ya lo había probado. Gracias por responder :)

    ResponderEliminar
    Respuestas
    1. Pues el caso es que lo probé tras decírtelo y si que iba. No salía muy limpio pero funcionaba. Vuelve a probar por favor.

      Eliminar
  26. Pues no sé que hago mal, peo a mí me queda igual todo el tiempo, ni se inmuta, he probado cambiando .popular-posts por .BlogList, por blog-list, por blog-list 1 (aunque sólo tenog uno) y el resultado es siempre el mismo, osea ninguno...igual gracias, Oloman, seguiré probando. Un abrazo

    ResponderEliminar
  27. Mete al final de tu CSS (justo antes del cierre SKIN) este código:
    .BlogList ul li {
    float: left;
    clear: none;
    width: 200px;
    height: 100px;
    }

    Te debe alinear todos los bloques de tu blogroll. Si funciona eso, de la misma manera debe funcionar lo otro.

    ResponderEliminar
  28. Pues no, pero ahora ya sé por qué, hay algo que he cambiado en la configuración del css, no sé lo que es porque la plantilla está más tocada que el .... de la Bernarda, con perdón, pero eso es lo que hace que las modificaciones que quiero hacer algunas se apliquen y otras no. Tengo un blog de pruebas y las modificaciones las hago primero allí, si funcionan las exporto, lo que he hecho es devolver el blog de pruebas al estado original y probar y allí funciona todo, este código que me das ahora y también el otro. El caso es que en el widget de entradas populares el otro si que funcionaba, por eso me obcequé...ahora me pondré a investigar que es lo que falla, siento mucho haberte dado tanta tabarra. Muchísimas gracias Oloman, de verdad. Un abrazo grande

    ResponderEliminar
  29. Hola Oloblogger, tengo un problema con la implementación de estas entradas populares en la plantilla Blogger Store que me he descargado de ti. El problema es que no se visualiza. Aparece el título del gadget pero no se ven los recuadros ni nada. Tampoco tengo en HTML en código como lo expones en este post. A mi me aparece así:

    -(código)-




    alguna ayuda?

    ResponderEliminar
  30. Mejor que el código es dejarte el blog, no sé en qué estaba pensando... :) http://biblioteca-delmundo2.blogspot.com.ar/

    ResponderEliminar
    Respuestas
    1. Yo sí los veo. Supongo que era cuestión de esperar a que algunas entradas pasaran a ser "Populares" ;)

      Eliminar
  31. Como puedo hacer que el título de este Widget quede centrado?

    ResponderEliminar
    Respuestas
    1. .PopularPosts h2 {display:block; text-align:center;}

      Eliminar
  32. Saludos Oloman QmQ

    Estoy intentando arreglar este no sé si llamarlo pequeño, o gran detalle. Tengo puesto este gadget de entradas populares, lo tengo puesto "Populares esta semana", pero, primero, las miniaturas de los artículos, se escoge al azar la imagen que le da la gana. Y segundo, algunos artículos tienen imágenes y sin embargo aparecen en blanco, no sacan Vista en miniatura >.<

    Aparte, lo del fragmento texto, pues lo quiero dejar como está, pero si supiese configurarlo, mejor.

    Solo querría poder configurar la miniatura de imagen que aparezca. No sabía como buscar esto en Google así que solo busqué .PopularPosts .item-thumbnail y me apareció tu Blog que ya he visitado mucho :3

    Lo que pasa es que no estoy seguro, he imaginado que si modifico esos parámetros dinámicos, entonces no funcionará el gadget mostrando los más populares, pero la verdad yo solo sé HTML y CSS

    He montado mi Blog gracias a ti, Vagabundia, CiudadBlogger y Diarios de la nube :D

    Gracias Oloman, es solo un detalle, que como muchos, me hace calentar la cabeza.
    Saludos.

    ResponderEliminar
  33. No sé si será este el problema, pero en la mayoría de casos sí lo es, así que verifica que subes las imágenes a Blogger y no a otros servicios de hosting. En este último caso pasa lo que cuentas, que no salen las imágenes.

    ResponderEliminar
  34. Aaaaah, aja, eso era Oloman, ahora sí, muchas gracias.

    La verdad es que temo que me cierren tarde o temprano el Blog por algunas cosillas de Copyright, así que pongo las imágenes en otra cuenta en Google Drive y desde ahí las enlazo, y si llega el caso no tendré que resubir las imágenes solo importar la plantilla.

    El caso es que ahora le he encontrado la utilidad. A la imagen que quiera que aparezca en la miniatura, la subiré desde el Blog y la colocaré en el artículo, y las demás, las subo al hosting :D

    Ojalá fuese especialista en algo, sé HTML, CSS, editar imágenes, audio, vídeo, soy informático, y sé hacer muchas cosas en general... Pero me doy cuenta que aunque lo que más me gusta es editar vídeos, no soy especialista ni mejor que nadie en algo, no sé si considerar bueno ser multiusos, pero precisamente si fuese especialista creo que podría ganarme mejor la vida con esto, aunque mi mejor contenido original son los tutoriales... Los gamers son los que más llaman la atención :(

    PD.: No sé porqué cuento eso aquí, lamento parecer deprimido XD

    Y de nuevo:
    ¡Muchas gracias Oloman!

    ResponderEliminar
    Respuestas
    1. Yo te recomendaría que pusieras todas las imágenes en Blogger (Picasa) porque pienso que una cosa es que te cierren el blog y otra que te anulen todas las cuentas de Google, incluida la de Picasa. Y si estás decidido a subir unas a un lado y otras a otro, casi mejor las subes a Blogger y las vas duplicando en otro servicio. Eso último no va a fallar seguro :)

      Eliminar
  35. de casualidad sabes como se puede modificar el numero del widget entradas populares para poner las que yo quiera y no solo 10 como maximo?
    saludos

    ResponderEliminar
    Respuestas
    1. No Efenix, no tengo ni idea, pero es que además sospecho que no se puede... o al menos que no tiene que ser nada fácil.

      Eliminar
  36. Hola Oloman, sin saberlo me has ayudado muchas veces, pero esta vez necesito hacerte dos consultas sobre esto:
    ¿Existe alguna forma de que el widget se vea en otro lugar de la plantilla?
    (me explico, quiero que se vea inmediatamente al final del texto del post, pero agregándolo desde diseño aparece al final de toda la sección del post, al final de los comentarios, que a veces pueden ser muchos, como te ocurre a ti siempre, y si lo cambio de sitio manualmente en la plantilla no me deja integrarlo dentro de la sección del post "The widget with id "Blog1" cannot contain element: "b:widget". A widget can only contain b:includable elements").
    Y la segunda cuestión ¿se puede personalizar de alguna manera para que entre los resultados que devuelve no aparezca la misma entrada que estamos visitando en ese momento?
    Gracias de antemano, y mi más sincero reconocimiento por tu ayuda a los demás.

    ResponderEliminar
  37. La primera cuestión casi que la descubres tú, pues ya viste que Blogger no te deja ponerlo en la sección que quieras... y así es. Cada gadget funciona en una determinada zona de la plantilla y no lo puedes poner en cualquier otra. Dentro de la zona de las entradas, este no va, así que no te canses en buscar la manera.

    Y sobre la segunda, pues la respuesta es también negativa. Los gadgets "de serie" basados en el contenido de las entradas son controlados por Blogger desde su base de datos, así que lo que muestran no es modificable por nosotros.

    Ahora bien, en ocasiones alguien inventa códigos que realizan la misma tarea que algunos gadgets y en ese caso claro que se pueden modificar. Lamentablemente no recuerdo ningún destino para enlazarte para simular uno con entradas populares (las más visitadas).

    ResponderEliminar
  38. Bueno, al menos me quedo tranquilo de que lo he intentado todo. Muchas gracias, y buscaré algún código funcional, realizándole alguna modificación.
    Un saludo

    ResponderEliminar
  39. Gracias Oloman por el tutorial.

    A priori no me salía así que probé directamente en el apartado de widget: .widget .popular-posts

    Mi pregunta es si se puede modificar el número de caracteres del resumen que aparece en popular post.

    Muchas gracias.

    Saludos.

    ResponderEliminar
    Respuestas
    1. Si se puede sería con JavaScript, pues no hay ninguna forma nativa que yo conozca. Sería cuestión de capturar el texto y luego recortarlo. Ampliarlo no se podría.

      Eliminar
  40. Hola. Esto me sirve genial para un proyecto que tengo, pero para otro.. tengo una duda. Si quisiera transformar un popular post en un gadget manual ¿como podría hacer? intenté modificando el código pero me cargo todo el gadget y queda inservible U_u

    ResponderEliminar
    Respuestas
    1. Hola. Pienso que si lo que quieres es hacer algo parecido pero con ciertos posts seleccionados por tí de forma manual, lo mejor sería olvidarte del código del gadget y hacer un simple lista (ul-li) con la misma estructura.

      Eliminar
  41. Es posible obtener un gadget de entradas populares pero bajo una etiqueta o categoría específica ?? Espero sus respuestas. Gracias.

    ResponderEliminar
    Respuestas
    1. No que yo sepa Angelitux. Los posts populares los muestra el gadget en función de visitas y esos datos no los tenemos a mano para manejarlos nosotros, así que tampoco podemos filtrar por etiquetas. Al menos no de una manera fácil

      Eliminar
    2. Y bueno a esperar entonces que Blogger en un futuro nos permita tener mejores experiencias. Gracias por la respuesta.

      Eliminar
  42. Hola Oloman!
    Mi pregunta es también lo que pregunta Angelitux.
    ¿Hay alguna manera de sustituir todos los .popular-posts por un código que me permita mostrar una etiqueta determinada?
    Ya tengo en la plantilla del blog el diseño y posición de las entradas a mostrar y funciona, sólo me queda cambiar eso.

    Te agradecería montones si me orientas al respecto.

    Saludos y gracias! :)

    Mi blog es http://inventoimaginario.blogspot.com/

    ResponderEliminar
    Respuestas
    1. No entiendo lo tuyo exactamente igual que lo de Angelitux. Él quiere filtrar los posts populares (más visitados) por una determinada etiqueta y lo que entiendo que tú quieres es un código para mostrar sólo los posts con una determinada etiqueta... ¿o también lo quieres teniendo en cuenta las visitas?
      En el segundo caso la respuesta es la misma que le di hace un momento a él, que no sabría como.
      Sin embargo, si quieres sólo las entradas de una determinada etiqueta, con cualquier gadget basado en feed, podrías obtener esa lista con la dirección http://nombredelblog.blogspot.com/feeds/posts/default/-/nombredelaetiqueta

      Eliminar
  43. Hola, tengo una duda, para limitar la cantidad de post que aparecen, que codigo se utiliza?
    Por ejemplo ahora me aparecen unos 10 post y no se el codigo para limitar a que me aparezcan 5
    Ojalá puedan ayudarme, desde ya gracias :D

    ResponderEliminar
    Respuestas
    1. Hola. Eso no se controla desde el código, sino desde el propio gadget.

      Sólo tienes que ir a Diseño, editar el gadget de posts populares y desde allí seleccionar la cantidad que quieres.

      Eliminar
  44. Buenas, muchas gracias por el truco. Queda genial.
    Tenía una pregunta, Me gusta el efecto de que pasas el mouse arriba de la imagen y sale el titulo. Me gustaría saber si eso se puede hacer con las entradas.

    Osea en mi web: www.familyrenders.com ... salen las entradas mostrando solo la imagen, yo quisiera que saliera el titulo al pasar el mouse por arriba como pasa con el gadget de populares. Lo intente con el .h3 pero no funciona D:.

    Ojala puedas decirme si eso que pide se puede o no para dejar de hacer experimentos XD.

    Saludos

    ResponderEliminar
    Respuestas
    1. Se puede, pero me resulta imposible individualizar las explicaciones a ese nivel cuando, como en este caso, son diversas modificaciones las que hay que realizar en la plantilla.
      No obstante en esta entrada se explica bastante como se consigue el efecto (posicion absoluta y cambio de coordenada con hover), así que si estudias el ejemplo un poco es posible que puedas acoplarlo a tu portada.

      Eliminar
    2. Gracias! Solo necesitaba saber eso, si era posible para no estar perdiendo el tiempo.

      Saludos y gracias por la rápida respuesta <3

      Eliminar
  45. Gracias por tu apoyo y asesoría Mr. Oloman.
    Lo unico que desearia ya que todo lo he comprendido. y aun un poco mas .jejeje.
    Quiero que con la transformación del gadget de posts populares. cuando le de clik en las imágenes me abra el detalle del articulo en la misma pagina.

    ResponderEliminar
    Respuestas
    1. Hola Jerry. Eso es algo más complicado de hacer, especialmente con este gadget que es de los predeterminados por Blogger. No obstante, quizás este otro artículo te sirva como inspiración: Mostrar datos adicionales

      Eliminar