Mil Trucos Blogger

Gadget de Entradas Populares con Efecto Slider

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

Las entradas populares es quizas uno de los gadgets mas usados por los usuarios de Blogger asi que personalizarlo un poco y darle un poco de estilo a este gadget no viene nada mal.

Con el truco de hoy el gadget se convertira en una especie de pequeño slider, ya que las entradas tendran un efecto de deslizamiento en el area del gadget,mejor pongo una imagen para que entiendan mejor el truco.


Para agregar este truco a tu blog primero debes tener el gadget de entradas populares, si ya lo tienes solo debes pegar en un gadget HTML/JavaScript lo siguiente:


<style type="text/css" media="screen">
#PopularPosts1 {
overflow:hidden;
margin-top:5px;
width:100%;
padding:0px 0px;
height:310px;

}
#PopularPosts1 ul {
width:310px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:10px 0px 0px 10px;
}
#PopularPosts1 li {
width:290px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:80px;
overflow: hidden;
background:#fff url(http://4.bp.blogspot.com/-AexFsTTa33c/TmFNoxg9zSI/AAAAAAAAE6I/7K8bPKYBr8Q/s400/popular%2Bposts.jpg) repeat-x;
border:1px solid #ddd;
}
#PopularPosts1 li .item-title {

font-size:1em;
margin-bottom:0.5em;
}
#PopularPosts1 li .item-title a {
text-decoration:none;
color:#7CA2C4;
font:bold 12px verdana;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#PopularPosts1 li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:2px solid #7CA2C4;
}
#PopularPosts1 li .item-snippet {
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#289728;
padding:0px 0px;
margin:0px 0px;
}
#PopularPosts1 .item-snippet a,
#PopularPosts1 .item-snippet a:visited {
color:#3E4548;
text-decoration: none;
}
#PopularPosts1 .spyWrapper {
height: 100%;
overflow: hidden;
position: relative;
}
#PopularPosts1 {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
.tags span,
.tags a {
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
}
a img {
border: 0;
}
-->
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(function () {
$('.popular-posts ul').simpleSpy();
});
</script>
<script src="http://accordion-for-blogger.googlecode.com/svn/trunk/simplespy.js" type="text/javascript"></script>

Consideraciones
Para que el gadget se vea como yo lo tengo debes activar las imagenes en miniatura y el fragmento.

Puedes ver el gadget funcionando en mi blog.

0
Shares

Relacionados...

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

72 Comentarios

  1. JLO JLO
    Octubre 14, 2012    

    pegar eso en otro gadget? o en el mismo de la entradas populares? no se entiende o soy muuuy bruto ja…. salu2…

    • Octubre 14, 2012    

      Amigo debes pegar el codigo en un elemento HTML/JavaScript

  2. Octubre 14, 2012    

    De maravillas muchas gracias, acá dejo mi blog http://todo-anime-gratis.blogspot.com aunque se ve un poco diferente como si se cortara el texto en el mio a diferencia del tuyo por que sera?

    • Octubre 14, 2012    

      Chavo yo lo veo muy bien,que resolucion de pantalla usas?

  3. Octubre 14, 2012    

    Muy Bueno eres Un Genio: Mira me gustaria que buscara algun truco para tener un slider carrusel a los lado de mi pagina como los diario de noticias algo asi..

    • Octubre 15, 2012    

      DJ KRAC hay un truco que convierte este gadget en un verdadero slider, muy pronto lo publicare

  4. Octubre 15, 2012    

    1280×1024 como que el texto de se entrecorta quise decir perdón, solo en algunos que tiene imágenes, pero en el tuyo aun con imágenes el texto esta bien. pero igual me gusta esta nueva opción de mostrar entradas populares, estaré revisando periódicamente por que siempre encuentro cosas copadas

    • Octubre 15, 2012    

      Chavo hay un par de opciones para presentar el gadget, estate atento que muy pronto las publicare.

  5. Octubre 15, 2012    

    Perdon por mi ignorancia.
    Tengo el gadget entradas populares, y creo uno nuevo Html en el que pego su codigo.
    Bien, ahora el gadget entradas populares funciona como el suyo… pero el gadget nuevo aparece en mi pagina con el codigo visible a todo el mundo

    • Octubre 15, 2012    

      David en cual blog se presenta ese problema?

  6. Octubre 16, 2012    

    Hola, Juvinao, saludos. Felicitaciones por tu blog, excelente. Sobre lo de entradas populares siempre he tenido una concepción, y es que si uno le sugiere a la gente que es lo más leído, seguramente se enfocan en eso, y desechan lo demás. ¿No crees?

    ¡Bendiciones, mi hermano!

    • Octubre 16, 2012    

      Emilio desde el punto de vista que planteas talvez tengas razon pero mostrar las entradas populares tambien puede atraer más lectores, personalmente estoy de acuerdo con agregar este gadget.

      Saludos 😀

  7. Anonymous Anonymous
    Octubre 22, 2012    

    Muy buena esta aportación gracias, entre otras muchas.
    De dejo la dirección de mi blog para q le eches un vistazo a ver q te parece…..
    http://www.programaciondeportivadiaria.blogspot.com
    Un saludo.

    • Octubre 23, 2012    

      Se ve muy bien amigo pero como recomendacion te digo que deberias dejar solo 2 columnas para que este truco se vea mejor.

  8. Octubre 23, 2012    

    Ya lo hice! Me quedó muy bien. Gran página y grandes aportes, te felicito. Te invito a ojear la mía, a ver que te parece.

    Saludos
    @raulamo83

    • Octubre 23, 2012    

      Esencia de Fútbol gracias por tu comentario 😛

  9. Octubre 25, 2012    

    hola juviano como podria quitarle el fondo blanco ya que mi blog es oscuro mira lo que te digo parece un parche http://topdirectas.blogspot.com.es/

  10. Octubre 25, 2012    

    Hola yo tengo el gadget de entradas populares, pero cuando le doy editar no veo ningun espacio para pegar ese codigo, por donde busco para pegarlo? Gracias!♥

    • Octubre 26, 2012    

      Melissa debes pegar este codigo en un gadget HTML/JavaScript aparte.

  11. Octubre 28, 2012    

    Muy buenooooo!!!!!!!!!!!!

    • Octubre 28, 2012    

      Sex Shop tienes razon, este es un gran efecto 😛

  12. Octubre 29, 2012    

    Hola como estas? sabes que me dejo de funcionar =S pero esto sucedió después de instalar otro slider en el cual tuve que tocar la edición HTML se podrá arreglar?
    de aca saque el slider http://ciudadblogger.com/2012/05/slider-automatico-para-mostrar-las.html
    y esta era mi pagina http://todo-anime-gratis.blogspot.com
    si no se pude no hay problema. gracias

    • Octubre 31, 2012    

      Chavo la verdad no se porque dejo de funcionar ya que son 2 funciones totalmente distintas.

      Si encuentro algo te aviso 😕

  13. Noviembre 3, 2012    

    Me encanto la idea pero cuando lo pongo me sale así http://puu.sh/1lPXn me podrías pasar el codigo adaptado mejor a mi plantilla? mi web es esta http://apple-adictos.blogspot.com/

    • Noviembre 3, 2012    

      Adrian esto es CSS estandar que todas las plantillas deben interpretar, vere que puedo hacer para ayudarte.

      Saludos 😛

    • Noviembre 4, 2012    

      ok gracias me avisas 🙂

  14. Noviembre 10, 2012    

    puede exitir problemas en tre librerias por que a mi me paso que nada nomas no rota me podrias ayudar gracias este es mi blog http://publisureste.blogspot.mx/

    • Noviembre 16, 2012    

      David tu usas un truco que publico el potro de las ultimas entradas, ese truco genera incompatibilidad con este truco.

  15. Noviembre 12, 2012    

    me puedes ayudar, mi blog:

    toxicosm.blogspot.com

    no salen las imagenes en miniatura ya active la casilla para las imagenes en miniatura desde las opciones del gadget,

    saludos compa

    • Noviembre 16, 2012    

      Amigo tu no tienes activado este gadget,primero activalo para poder verificar cual es el problema.

  16. Noviembre 16, 2012    

    El efecto está muy bien, pero no se podria modificar el script, para que la última entrada que desaparece por la parte de abajo, en lugar de desvanecerse por encima del marco del gadget, lo hiciese al llegar al límite de dicho marco?

    Creo que quedaría más estético visualmente

  17. Diciembre 1, 2012    

    XD

  18. Diciembre 9, 2012    

    Es fantástico!! Me gustaria hacerte varias preguntas que no consigo solucionar:
    El margen derecho de la imagen no consigo arreglarlo para que se vea completamente redondo
    No consigo modificar los paddings ni el interlineado del titulo para centrar y justificarlos en la caja

    Mi blog es LOS VIAJES DE PACO, VERO Y HELIA

    Por cierto el codigo lo he alojado en la caja del SIGUENOS porque sino aparecía un gadgets nuevo 😉

    por cierto seria fantástico poder hacer esto mismo con las entradas recientes!!

    Muchas gracias de antemano por tu ayuda

    • Diciembre 13, 2012    

      Veronica veo que ya editaste el gadget a tu gusto, lo has dejado fenomenal, tienes talento como diseñadora web..

      Saludos 😛

  19. Diciembre 13, 2012    

    Me has subido los colores!! En firefox se ve bien pero en Safari se me corta la redondez de la foto.

    Esperare impaciente ese slider de ultimas entradas 😉

    Saludos y gracias por tu ayuda 🙂

    • Diciembre 16, 2012    

      Veronica la verdad es que no trabajo con Safari, mis trucos los pruebo en Firefox y Chrome :blaf:

      Saludos 😛

  20. Diciembre 14, 2012    

    Queda genial! muchas gracias 😀

  21. Diciembre 14, 2012    

    Hola, una pregunta. Tengo el Nivo Slider en mi blog y encima un menu con pestañas. Cuando accedo a una pestaña que está redireccionada a un post no me sale el slider, pero si la pestaña está redireccionada a mostrar las entradas de una etiqueta si me sigue apareciendo el slider. ¿Cómo podría hacer para que no me saliera el slider en el último caso?

    Un saludo y muchas gracias

    • Diciembre 16, 2012    

      Antonio la verdad no he entendido lo que quieres, podrias ser un poco mas explicito :blaf:

  22. Diciembre 24, 2012    

    Hace poco hice mi blog de fotografía. Le he puesto muchas cosas pero todavía lo veo un poco verde

  23. Diciembre 24, 2012    
  24. Diciembre 29, 2012    

    Brother me funciono de maravillas aca la prueba en mi blog: http://sofware-premium.blogspot.com/

  25. Febrero 23, 2013    

    muy bueno pero la foto de la entrada no se ve 100% completa, la colomna de la derecha de la foto es mas gruesa que la izquierda, minimo detalle pero bue, de todas maneras gracias n.n

    • Febrero 24, 2013    

      Juan gracias por tu comentario, un pequeño error ;).

      Saludos

  26. Marzo 2, 2013    

    Hola,
    Tengo la misma problema que Melissa MB, edito mi gadget y no sale nada sino su forma predeterminado, y dónde cojones la pego? además que quieres decir con un HTML/Javascript? por que si no hay espacio no lo hay 🙁

    Por Favorrrrrrr, ayudame.

    • Marzo 2, 2013    

      Debes pegar el código en Diseño, Añadir gadget, HTML/Javascript

  27. Mayo 19, 2013    

    disculpa amigo, tengo un problema, cambie mi plantilla y en un principio salían las entadas populares y ya no salen mi blog es http://advent7d.blogspot.com/ agradezco mucho tu ayuda

    • Mayo 20, 2013    

      ya pude resolverlo, gracias

    • Mayo 23, 2013    

      Edwar gracias por comentar y que bueno que hayas solucionado tu problema.

      Saludos

  28. Mayo 31, 2013    

    A mi Me A Keado de A peloss Xeveree BRother Aki te dejo mi Blog para k le heches un Ojo…

    http://descargar-full-apk-android.blogspot.com/

  29. Julio 16, 2013    

    Hola! Me aparece muy abajo y sin imágenes. ¿Alguna sugerencia?

  30. Inma Inma
    Noviembre 4, 2013    

    Me quedó perfecto, es preciosoooo….gracias

  31. Juvinao Juvinao
    Noviembre 4, 2013    

    @Inma gracias por comentar, y me mucho gusto que los tutoriales del blog te sirvan.

    Saludos

  32. Juvinao Juvinao
    Noviembre 4, 2013    

    Inma gracias por comentar, y me mucho gusto que los tutoriales del blog te sirvan.

    Saludos

  33. Jorge Jorge
    Noviembre 8, 2013    

    Verónica
    Soy Jorge, un profesor de Madrid y soy nuevo en esto del blog. Estoy haciendo uno para mi colegio yme ha gusrtado lo de poner la fecha en las entradas como lo tienes en tu blog. Cómo lo has hecho? Y lo de ” seguir leyendo” cómo se hace?
    Puedes enviarme el html del gadget de entradas populares con efecto slider que has modificado? Me gusta.

    Gracias, y perdona
    Puedes enviarmelo a scalumno2@gmail.com

  34. Jorge Jorge
    Noviembre 8, 2013    

    Buenas Verónica
    Soy Jorge, un
    profesor de Madrid y soy nuevo en esto del blog.
    Estoy haciendo uno para mi colegio yme ha gusrtado lo de poner la fecha en las entradas como lo tienes en tu blog. Cómo lo has hecho? Y lo de ” seguir leyendo” cómo se
    hace?
    Puedes enviarme el html del gadget de entradas populares con efecto slider que has modificado? Me gusta.
    Perdona que puida tanto pero es que no tengo mucha idea de estoy y me gustaria poder probar con la forma que tienes tu el blog porque me parece bastante chula
    Gracias, y perdona
    Puedes enviarmelo a scalumno2@gmail.com

  35. Diciembre 13, 2013    

    Este comentario ha sido eliminado por el autor.

  36. Enero 30, 2014    

    sabes como cambiar el numero de las entradas populares? que sea mas de 10 o todas en su defecto
    saludos, buen post

    • Febrero 4, 2014    

      Eso lo haces desde el gadget de etiquetas no desde este código.

      Saludos

  37. Marzo 8, 2014    

    Buenas, cuando creo el HTML/Java y pego el código, le doy a guardar pero no pasa nada.
    Sabes a que es debido? Grácias.

    • Abril 12, 2014    

      Joan acabo de probar el código y todo funciona muy bien.

  38. Abril 10, 2014    

    Por Que No Se Desliza..! ;((
    Ayuda Este Es Mi Blog :http://oficialsoundcartagena.blogspot.com/

    • Abril 12, 2014    

      Brayan acabo de probar el código y todo funciona muy bien.

  39. Agosto 1, 2014    

    muy bueno site actualidadsv.com

  40. Agosto 26, 2014    

    tenes para post populares horizontales???yo tengo el post popular pero esta horizontal y queria darle efecto de movimiento

    • Agosto 27, 2014    

      Hay algunos diseños horizontales, con mucho gusto puedo publicar algunos.

  41. Diego Damas Diego Damas
    Enero 14, 2015    

    Como puedo lograr que se deslizen de Izquierda a Derecha y que esten uno al lado del otro en lugar de uno encima del otro?

  42. Marzo 23, 2015    

    Hola como estas? Existe la posibilidad de que el gadget de entradas populares me muestre la entradas de otro blog? No justamente de donde se este mostrando el gadget.
    Necesito saber si se puede ya que tengo dos blog enlazados…

    Muchas gracias

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Categorías

Síguenos en Facebook

Suscribete por Email

Introduce tu Correo:

Recibiras nuestros últimos posts en tu correo