Slideshow con los titulares de tus entradas


Anteriormente ya os expliqué cómo poner un slideshow de imágenes para blogger, pues hoy toca cómo poner otro slideshow pero esta vez con los títulares de vuestro blogspot.




Para ver este gadget en movimiento haz clic aquí.


Este gadget puede ser realmente muy útil para centrar la atención de tus lectores y que no abandonen tu blog demasiado pronto.

Para instalarlo sigue los siguientes pasos:

1) Ves a Diseño
2) Elementos de página
3) Añadir un gadget
4) HTML/Javascript. En él pega el siguiente código:


Código a copiar/pegar<style type="text/css">
.gfg-root {
width : 100%;
height : auto;
position : relative;
overflow : hidden;
text-align : center;
font-family: "Arial", sans-serif;
font-size: 15px;
border: 1px solid #BCCDF0;
}

.gfg-title {
font-size: 24px;
font-weight : bold;
color : #3366cc;
background-color: #E5ECF9;
line-height : 1.4em;
overflow : hidden;
white-space : nowrap;
}

.gfg-title a {
color : #3366cc;
}

.gfg-subtitle {
font-size: 20px;
font-weight : bold;
color : #3366cc;
background-color: #E5ECF9;
line-height : 1.4em;
overflow : hidden;
white-space : nowrap;
margin-bottom : 0px;
}

.gfg-subtitle a {
color : #3366cc;
display:none !important;
}

.gfg-entry {
background-color : white;
width : 100%;
height : 6.9em;
position : relative;
overflow : hidden;
text-align : left;
margin-top : 3px;
}

/* To allow correct behavior for overlay */
.gfg-root .gfg-entry .gf-result {
position : relative;
background-color : white;
width : auto;
height : 100%;
padding-left : 20px;
padding-right : 5px;
}

.gfg-list {
position : relative;
overflow : hidden;
text-align : left;
margin-bottom : 5px;
display:none !important;
}

.gfg-listentry {
line-height : 1.5em;
overflow : hidden;
white-space : nowrap;
text-overflow : ellipsis;
-o-text-overflow : ellipsis;
padding-left : 15px;
padding-right : 5px;
margin-left : 5px;
margin-right : 5px;
}

.gfg-listentry-odd {
background-color : #F6F6F6;
}

.gfg-listentry-even {
}

.gfg-listentry-highlight {
background-image : url('garrow.gif');
background-repeat: no-repeat;
background-position : center left;
}

/*
* FeedControl customizations.
*/

.gfg-root .gfg-entry .gf-result .gf-title {
font-size: 24px;
line-height : 1.2em;
overflow : hidden;
white-space : nowrap;
text-overflow : ellipsis;
-o-text-overflow : ellipsis;
margin-bottom : 2px;
}

.gfg-root .gfg-entry .gf-result .gf-snippet {
height : 3.8em;
color: #000000;
margin-top : 3px;
}

/*
* Easy way to get horizontal mode, applicable via js options to gadget.
*/

.gfg-horizontal-container {
position : relative;
}

.gfg-horizontal-root {
height : 1.5em;
_height : 100%;
position : relative;
white-space : nowrap;
overflow : hidden;
text-align : center;
font-family: "Arial", sans-serif;
font-size: 13px;
border: 1px solid #AAAAAA;
padding : 5px;
margin-right : 80px;
}

.gfg-horizontal-root .gfg-title {
font-weight : bold;
background-color: #FFFFFF;
line-height : 1.5em;
overflow : hidden;
white-space : nowrap;
float : left;
padding-left : 10px;
padding-right : 12px;
border-right: 1px solid #AAAAAA;
}

.gfg-horizontal-root .gfg-title a {
color : #444444;
text-decoration : none;
}

.gfg-horizontal-root .gfg-entry {
width : auto;
height : 1.5em;
position : relative;
overflow : hidden;
text-align : left;
margin-top : 0px;
margin-left : 0px;
padding-left : 10px;
}

/* To allow correct behavior for overlay */
.gfg-horizontal-root .gfg-entry .gf-result {
position : relative;
background-color : white;
width : 100%;
height : 100%;
line-height : 1.5em;
overflow : hidden;
white-space : nowrap;
}

.gfg-horizontal-root .gfg-list {
display : none;
}

/*
* FeedControl customizations.
*/

.gfg-horizontal-root .gfg-entry .gf-result .gf-snippet,
.gfg-horizontal-root .gfg-entry .gf-result .gf-author {
display : none;
}

.gfg-horizontal-root .gfg-entry .gf-result .gf-title {
color: #0000cc;
margin-right : 3px;
float : left;
}

.gfg-horizontal-root .gfg-entry .gf-result .gf-spacer {
float : left;
}

.gfg-horizontal-root .gfg-entry .gf-result .gf-spacer,
.gfg-horizontal-root .gfg-entry .gf-result .gf-relativePublishedDate {
display : block;
color: #AAAAAA;
}

.gfg-branding {
white-space : nowrap;
overflow : hidden;
text-align : left;
position : absolute;
right : 0px;
top : 0px;
width : 80px;
}

.gfg-collapse-open, .gfg-collapse-closed {
background-repeat : no-repeat;
background-position : center;
cursor : pointer;
float : right;
width : 17px;
height : 20px;
}

.gfg-collapse-open {
background-image : url('arrow_open.gif');
}

.gfg-collapse-closed {
background-image : url('arrow_close.gif');
}

.gfg-collapse-href {
float : left;
}

.clearFloat {
clear : both;
}
#feedGadget {
margin-top : 5px;
margin-left: auto;
margin-right: auto;
width : 520px;
font-size: 10px;
color: #9CADD0;
}
</style>
<noscript><a href="http://anshuldudeja.blogspot.com" target="_blank">Blogger Hacks</a></noscript>
<script src="http://www.google.com/jsapi/?key=internal-sample"
type="text/javascript"></script>
<script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js" type="text/javascript"></script>

<script type="text/javascript">

function showGadget() {
var feeds = [
{title:'title',
url:'http://www.TUBLOG.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=999'},

];

new GFdynamicFeedControl(feeds, 'feedGadget',
{numResults : 1000, stacked : true,
title: "Entradas destacadas"});
}
google.load("feeds", "1");
google.setOnLoadCallback(showGadget);
</script>
<noscript><a href="http://www.quierocrearunblog.com" target="_blank">Trucos blogger</a></noscript>
<div id="feedGadget">Cargando...</div>

Sustituye donde dice TUBLOG por el nombre de tu blog y luego pon a tu gusto el nombre de este gadget en Entradas destacadas. Si deseas modificar el tamaño, cámbialo en donde dice 520px.

Si quieres modificar tamaños de las letras y/o colores, ya deberías saber que font-size hace referencia al tamaño de la letra, y el color viene referenciado por algo así como color: #9CADD0. Haz pruebas y de esa forma es como aprenderás.

Las entradas que se mostrarán aparecerán de forma totalmente aleatoria.




Código extraído de anshuldudeja.com

36 comentarios:

  1. Muy buen post!!!!!
    Una pregunta como puedo cambiar el alto??
    Muchas gracias por hacer tan sencillas estas cosas que a otros nos parecen mas complicadas.
    Un saludo

    ResponderEliminar
  2. Hola, gracias por tu consulta y por tu visita.

    El alto es automático. Va en función del tamaño de las letras de los títulos y subtítulos.

    fíjate en:

    .gfg-title {
    font-size: 24px; <-- Tamaño del título

    ...

    .gfg-subtitle {
    font-size: 20px; <-- Tamaño del subtítulo


    Si de todas formas quieres cambiarlo, puedes hacerlo al principio del código en donde dice height : auto; Quita auto y pon el valor que quieras en px.

    ResponderEliminar
  3. Muchas gracias!!!!
    Creo que ya lo tengo.
    Si quieres puedes verlo en mi blog http://laredentusmanos.blogspot.com/

    ResponderEliminar
  4. Gracias, muchas gracias.
    Me gusta mucho el widget este.
    estoy intentando implantarlo en mi blog, pero solo me sale el titulo y las entradas. No se si hago algo mal o tiene conflicto con algun otro script que tengo. Seguire intentandolo.
    Un saludo

    ResponderEliminar
  5. Perdon doble comentario.
    Queria decir "Solo me sale el titulo y no las entradas".
    Maldición, se va el dedo a "enviar" antes de repasar.

    ResponderEliminar
  6. Hola,

    He colocado el código en mi blog (http://babydeco.blogspot.com) y sólo me aparece la palabra cargando. ¿Qué es lo que he hecho mal? Lo único que he cambiado ha sido la dirección del blog, lo demás lo he copiado tal cual.

    Gracias por enseñarnos tantas cositas.
    Un saludete
    tururu

    ResponderEliminar
  7. @Laredentusmanos. Te ha quedado fenomenal, enhorabuena.

    @Gildo. Trata de implantar la solución que di en el comentario número 2. Si le das un valor fijo al alto se teverás sin problemas.

    @Tururu. Yo lo veo perfectamente en tu blog. Un saludo y bienvenido al blog.

    ResponderEliminar
  8. ¡Hola Juan!
    Magnífica entrada, y magnífico el recurso, de verdad, tomamos nota ;)
    ¡¡Saludos y nos vemos!!

    ResponderEliminar
  9. No, no es problema del "height:auto" o no.
    No se porque, debajo del nombre de la web, donde tu pones en el codigo "max-results=999" a mi solo me permite poner 14, a la que le pongo 15 ya no salen las entradas.
    Es igual, perdona las molestias y muchas gracias.
    Un saludo

    ResponderEliminar
  10. Hola, tienes un premio esperandote, en mi blog, felicitaciones!, Por favor pasa por él. Saludos

    ResponderEliminar
  11. @Trucoteca. ¡Muchas gracias compañeros! Me alegro que os haya gustado. Saludos

    @Don´t leave me. You welcome! Best regards ;)

    @Gildo. No debes tocar esa cifra de resultados. ¿En cuál de tus dos blogs lo estás probando?

    @María. Ahora he visto mi premio jajaja. Muchísimas gracias de corazón por todo. ¡Un saludo amigo!

    ResponderEliminar
  12. Hola, me encanta el blog, me sirve de mucha ayuda! entro todos los dias para ir mejorando dia a dia.

    Bueno voy con mi consulta...

    Intento cambiar el color del fondo donde viene el texto del princio de la entrada y siempre se queda en blanco. Como puedo ponerlo en negro con letras blancas?

    Gracias por este gran blog y un saludo :)

    ResponderEliminar
  13. Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
  14. Hola Webmaster, gracias por tus palabras. Cada color viene referenciado en donde poner "color". No sé muy bien a qué te refieres, así que te recomiendo que vayas probando hasta que des con la solución. Un saludo.

    ResponderEliminar
  15. Hola este truco esta muy bueno, pero engo una consula, pues el fondo de mi blog es negro y este gadget tiene color como blanco..
    como hago para ponerle color negro pues cambio todo los colores que ya venian predeterminados en el codigo y nada, solo el fondo del titulo cambio pero lo demas no, si alguien me señala en que parte es la que tengo q modificar se los agradecere mucho..
    me urge hace tiempos necesitaba este gadget para mi blog

    ResponderEliminar
  16. Hola Alis. Cambia white por black.

    /* To allow correct behavior for overlay */
    .gfg-root .gfg-entry .gf-result {
    position : relative;
    background-color : white;

    Espero que te sirva, un saludo :)

    ResponderEliminar
  17. Hola. Pues no sé porqué te ocurre eso. En el blog de pruebas que puse de ejemplo en la entrada puedes ver como funciona correctamente. Mucha gente lo está empleando sin problemas. Quizá pueda deberse al navegador que estés empleando.

    Saludos y gracias por comentar.

    ResponderEliminar
  18. Hola acabo de descubrir tu blog y me parece muy interesante.
    He intentado poner el slide para las entradas, he seguido tus pasos y me sale un mensaje:
    Feeds could not be loaded.
    ¿Se puede solucionar? Aviso, soy novata en esto de los blogs y siempre ando dando bandazos...

    Saludos.

    ResponderEliminar
  19. Siento las molestias... ya lo conseguí...
    Esta genial...
    Gracias y enhorabuena por el blog.
    Saludos

    ResponderEliminar
  20. Hola, yo aun tengo elproblema de Maribel...
    Como se arregla, gracias

    ResponderEliminar
  21. hermano de verdad eres lo maximo, le di un aspecto totalmente PRO a mi glog gracias a ti!

    ResponderEliminar
  22. Hola queria hacerte una consulta, como hago, para hacer lo mismo que tenes ahi, pero en vez de que me aparesca las distintas entradas, que vayan corriendo imagenes que yo carge externas.

    Gracias
    NADIa

    ResponderEliminar
  23. Las entradas que aparecen en el slide se pueden seleccionar o son aleatorias?

    ResponderEliminar
  24. Hola alguien me puede ayudar? como puedo poner un slideshow como el de esta pagina web?


    http://laurafarrisphotography.blogspot.com/

    ResponderEliminar
  25. Gracias!!!! fenomenal gadget, calza perfecto con mis propósitos de divulgación...Saludos

    ResponderEliminar
  26. Buenísimo, muchas gracias. Estoy haciendo pruebas en mi blog, pero aún falta afinar el widget. Quiero cambiar color, tamaño, ancho, altura, etcétera. Pero es genial.

    ResponderEliminar
  27. de lujo, habrá algo así, pero q muestre imágenes?

    ResponderEliminar
  28. Simplemente Fantástico!!!! Enhorabuena por tu blog, una currada tremenda y todo muy bien explicado. De lo mejor que he visto sobre este tema.
    Gracias por ayudarnos a mejorar nuestro blog.
    Saludos

    ResponderEliminar
  29. Hay algun modo para en vez de poner entradas aleatoria poner las ultimas entradas. Saludos

    ResponderEliminar
  30. y para cambiar la fuente ? a mi me gustaria una comic sans como poco ....es ke esa letra no me gusta y ya he intentando donde pone arial sans serif cambiarlo por comic sans pero nada he conseguido poner el fondo negro muy guay soy una makina jejeje y el recuadrillo blanco ke tampoko me entusiasma ...tambien le kiero quitar lo de entradas destacadas porke con el nombre de la entrada me sobra y lo unico que consigo es ke no cargue bueno muy guapo tu post y muchas gracias...io es ke soi muy enredona....

    ResponderEliminar
  31. quiero ponerlo mas corto de alto he conseguido poner entradas destacadas en color negro con lo que no se ve pero ahora kiero cambiar a comic sans u otra que el blog tiene muy chulas y hacerlo mas corto de altura muchas gracias...seguire enrredando ...:-)

    ResponderEliminar
  32. Hola desde ya muchas gracias porque me sirvio de mucho este truco!
    pero tengo una duda, como hacer para quitar la fecha y el autor? no me gusta que aparesca para el uso que le doy.
    un abrazo!

    ResponderEliminar
  33. Hola, me parecio muy bueno, quisiera personalizarlo un poco como ser quitar el texto entradas personalizadas, el nombre del autor y la fecha y en lo posible centrarlo, se que pido mucho pero he visto que han consultado esto y no han obtenido respuesta...

    ResponderEliminar