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.


72 comentarios

JLO · octubre 14, 2012 a las 5:15 am

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

    Juvinao · octubre 14, 2012 a las 3:56 pm

    Amigo debes pegar el codigo en un elemento HTML/JavaScript

Chavo · octubre 14, 2012 a las 6:25 pm

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?

    Juvinao · octubre 14, 2012 a las 9:01 pm

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

DJ KRAC · octubre 14, 2012 a las 11:06 pm

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..

    Juvinao · octubre 15, 2012 a las 3:34 pm

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

Chavo · octubre 15, 2012 a las 12:23 am

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

    Juvinao · octubre 15, 2012 a las 3:17 pm

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

David G. · octubre 15, 2012 a las 7:49 am

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

    Juvinao · octubre 15, 2012 a las 3:32 pm

    David en cual blog se presenta ese problema?

Emilio García Jr. · octubre 16, 2012 a las 2:47 pm

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!

    Juvinao · octubre 16, 2012 a las 7:29 pm

    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 😀

Anonymous · octubre 22, 2012 a las 7:31 pm

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.

    Juvinao · octubre 23, 2012 a las 1:13 am

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

Esencia de Fútbol · octubre 23, 2012 a las 10:32 am

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

    Juvinao · octubre 23, 2012 a las 4:39 pm

    Esencia de Fútbol gracias por tu comentario 😛

rewind · octubre 25, 2012 a las 5:40 pm

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/

Melissa MB · octubre 25, 2012 a las 8:22 pm

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!♥

    Juvinao · octubre 26, 2012 a las 12:07 am

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

Sex Shop · octubre 28, 2012 a las 1:17 am

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

    Juvinao · octubre 28, 2012 a las 4:07 pm

    Sex Shop tienes razon, este es un gran efecto 😛

Chavo · octubre 29, 2012 a las 1:31 pm

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

    Juvinao · octubre 31, 2012 a las 8:25 pm

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

    Si encuentro algo te aviso 😕

Adrian Saltos · noviembre 3, 2012 a las 5:16 am

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/

    Juvinao · noviembre 3, 2012 a las 4:25 pm

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

    Saludos 😛

    Adrian Saltos · noviembre 4, 2012 a las 9:29 pm

    ok gracias me avisas 🙂

david parra · noviembre 10, 2012 a las 4:37 pm

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/

    Juvinao · noviembre 16, 2012 a las 8:54 pm

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

Chiknaui.Mikistli Joel Molina Reyes · noviembre 12, 2012 a las 2:40 am

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

    Juvinao · noviembre 16, 2012 a las 8:51 pm

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

Accionglobal kike · noviembre 16, 2012 a las 9:53 pm

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

francis albert liz muñoz · diciembre 1, 2012 a las 2:35 am

XD

VERÓNICA CORRALES · diciembre 9, 2012 a las 1:08 pm

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

    Hayder Juvinao · diciembre 13, 2012 a las 3:57 pm

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

    Saludos 😛

VERÓNICA CORRALES · diciembre 13, 2012 a las 7:17 pm

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 🙂

    Hayder Juvinao · diciembre 16, 2012 a las 11:41 pm

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

    Saludos 😛

perlica84 · diciembre 14, 2012 a las 2:08 pm

Queda genial! muchas gracias 😀

Antonio José Palacios Alvarez · diciembre 14, 2012 a las 3:11 pm

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

    Hayder Juvinao · diciembre 16, 2012 a las 11:45 pm

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

Martín Del Busto · diciembre 24, 2012 a las 3:55 pm

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

Martín Del Busto · diciembre 24, 2012 a las 3:56 pm

aaa! es http://www.martindelbusto.blogspot.com.es

Alexander Guerra Padilla · diciembre 29, 2012 a las 6:08 am

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

Juaη · febrero 23, 2013 a las 6:57 pm

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

Ihueghian Edodo · marzo 2, 2013 a las 1:05 pm

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.

    Hayder Juvinao · marzo 2, 2013 a las 10:57 pm

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

Edwar Palacios · mayo 19, 2013 a las 8:39 am

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

Carlos Sanchez · mayo 31, 2013 a las 12:09 am

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/

mett colombia · julio 16, 2013 a las 4:02 pm

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

Inma · noviembre 4, 2013 a las 1:00 pm

Me quedó perfecto, es preciosoooo….gracias

Juvinao · noviembre 4, 2013 a las 8:50 pm

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

Saludos

Juvinao · noviembre 4, 2013 a las 8:55 pm

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

Saludos

Jorge · noviembre 8, 2013 a las 7:01 pm

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

Jorge · noviembre 8, 2013 a las 7:03 pm

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

MariaLuisaJB · diciembre 13, 2013 a las 3:46 am

Este comentario ha sido eliminado por el autor.

Masiosare · enero 30, 2014 a las 9:17 pm

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

    Hayder Juvinao · febrero 4, 2014 a las 9:34 pm

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

    Saludos

Joan Bastida · marzo 8, 2014 a las 9:00 am

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.

Brayan Yesid Alcazar Garces · abril 10, 2014 a las 2:01 pm

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

jose batres · agosto 1, 2014 a las 5:00 am

muy bueno site actualidadsv.com

Ot@kus · agosto 26, 2014 a las 2:47 pm

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

    Hayder Juvinao · agosto 27, 2014 a las 9:42 pm

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

Diego Damas · enero 14, 2015 a las 8:23 pm

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?

Admin Lalala · marzo 23, 2015 a las 4:04 am

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

Responder a Diego Damas Cancelar la respuesta

Marcador de posición del avatar

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