Tutoriales Blogger: Cómo colocar el gadget últimas reseñas

15 de octubre de 2015

Hola ^^ este tutorial ya me lo han pedido varias veces y como lo prometido es deuda pues aquí esta.

Aprenderemos a color una galería de imágenes o lo que yo he llamado gadget de últimas reseñas ya que es para lo que lo uso en mi blog, pero ustedes lo pueden usar para lo que mejor les convenga :) 

Esto no es más que un código que tenemos que copiar y pegar con las respectivas modificaciones que ustedes le harán y ya, así que manos a la obra.



El Código:

<center><div class="widget-content">

<marquee direction="left" scrollamount="4" style="background- text-align: center; width:300 px;height:190px;border:0px solid #FFFFFF;padding:1px" onmouseover="stop()" onmouseout="start()" scrollamount="2" scrolldelay="100" >

<a href="Dirección a la que se dirigirá la imagen" title=" Nombre de imagen"><img style="width: 140px; height: 190px;" src=" URL Imagen " a="" /></a>

<a href="Dirección a la que se dirigirá la imagen" title=" Nombre de imagen"><img style="width: 140px; height: 190px;" src=" URL Imagen " a="" /></a>

<a href="Dirección a la que se dirigirá la imagen" title=" Nombre de imagen"><img style="width: 140px; height: 190px;" src=" URL Imagen " a="" /></a>

<a href="Dirección a la que se dirigirá la imagen" title=" Nombre de imagen"><img style="width: 140px; height: 190px;" src=" URL Imagen " a="" /></a>

<a href="Dirección a la que se dirigirá la imagen" title=" Nombre de imagen"><img style="width: 140px; height: 190px;" src=" URL Imagen " a="" /></a>

</a></marquee></div></center>


 Modificaciones:

Lo que deben cambiar lo explicaré por parte para que me entiendan mejor.

* <center> y </center> es para asegurar que tenemos todo centradito por lo que te debes asegurar de que todas las modificaciones que hagas estén dentro de este elemento.

* Lo que está en Azul es la dirección en la que se mueven las imágenes, si quieres que se muevan a la derecha cámbialo por right. 

* Lo que está en Verde es la velocidad de las imágenes, si quieres que se muevan más rápido aumenta el valor.

* Lo que está en Rojo es el color de de fondo de las imágenes, cámbialo por el que más te guste.

* Lo que está en Moradito son las direcciones a las que te dirigirá la imagen y la URL de la imagen. (en esta entrada te mostré como obtener la URL de una imagen)

* Lo que está en Naranja es el nombre la imagen o web.

width height son la anchura y altura de las imágenes, lo puedes cambiar por los valores que más te convengan. (esos valores son los que tengo en mi blog)

* Todo lo que está desde <a href= hasta </a> es lo que se debe repetir las veces que quieras añadir una imagen nueva. Este código está listo para 5 imágenes.

Instalación:

Una vez hechas todas las modificaciones correspondientes ya sólo queda instalar nuestro gadget y  Para eso vas a  Diseño → Añadir un Gadget → HTML  pegas el código modificado, lo colocas donde quieras y le das a guardar.

Listo ya tienes una galería de imágenes o gadget últimas reseñas (cómo quieras llamarlo) en tu blog. Espero que se entiendan las explicaciones traté de explicarme lo máximo posible pero es muy fácil si se dan cuenta. Si tienen alguna duda escríbanme y trataremos de solucionarlo.


¿Les resulta útil este tutorial? ¿que les ha parecido? ¿Les gustó?


TE RECOMIENDO VISITAR

INSTALA GADGET ÚLTIMAS RESEÑAS DEBAJO DE TU CABECERA



Ross

17 comentarios:

  1. Gracias por el tutorial, había estado probando varios gadgets de este tipo pero este es el más simple, ya me pongo en marcha. Gracias por tan buena explicación ¡Saludos!

    ResponderEliminar
  2. Holaaaa me ha encantado tu entrada!!
    Vengo de la iniciativa Blogs Asociados, ya te sigo ;)
    Mi blog es www.d3voradoresdelibros.blogspot.com
    Nos leemos :3
    Equipo DDL

    ResponderEliminar
  3. Hola!
    Super chulo el tutorial, es bastante útil.
    Gracias por compartirlo.
    Besos

    ResponderEliminar
  4. Justo estaba buscando una chama!
    le pasare el link :p
    Buena entrada

    ResponderEliminar
  5. ¡Holaa! tengo un problema con el gadget porque me aparece una imagen arriba y otra abajo, podrías ayudarme? deybelys_97@hotmail.com

    Un beso

    ResponderEliminar
  6. ¡Holaa!
    Por fin encuentro alguien que lo explica bien! Muchísimas gracias, de verdad! Yo soy malísima para esto del html y buah, tu entrada me ha ayudado muchísimo!
    Un besazo ^^

    ResponderEliminar
  7. Hola...
    Hace tiempo que intento colocarlo, pero tengo un problema. Las imágenes me aparecen una debajo de la otra y alineadas. Si podrías ayudarme te dejo mi mail: Brenchuuiannelli@gmail.com
    Muchas gracias

    ResponderEliminar
  8. Me has ayudado un montón con esta entrada! Gracias! Por cierto acabo de descubrir tu Blog y me quedo por aquí 😜

    ResponderEliminar
  9. Me has ayudado un montón con esta entrada! Gracias! Por cierto acabo de descubrir tu Blog y me quedo por aquí 😜

    ResponderEliminar
  10. Muchas gracias por la explicación, es super clara y pude hacerlo sin problemas. La única duda es que cuando terminan las imágenes se cortan y queda un espacio sin nada hasta que vuelve a empezar. ¿Hay alguna manera de que sea continuado el fluir de las imágenes? ¡Muchas gracias! Soy del blog http://leeresaeslacuestion.blogspot.com.ar/ y te espero para que me sigas también si te gusta lo que hago. ¡Saludos!

    ResponderEliminar
  11. Hola! Muchas gracias por el tutorial! Tengo un problema, las imagenes se me ponen una encima de la otra, me podrias ayudar porfavor? Gracias! nuriko140@hotmail.com

    ResponderEliminar
  12. ¡Muchas gracias, me ha sido muy útil! dejo el Link a mi nuevo blog por si os interesa cotillear un poquito:
    http://siemprenosquedaranloslibros.blogspot.com.es/

    ResponderEliminar
  13. ¡Hola!
    Muchísimas gracias por este tutorial tan útil :D Ya lo he puesto en práctica y queda genial!!
    Te dejo el link por si quieres echarle un vistazo a como me ha quedado https://unlibroyte.blogspot.com.es/
    Muchas gracias!! Por cierto, ya te sigo y me quedo por aquí ;)

    Nos leemos! Un besito <3

    ResponderEliminar
  14. Hola! Lo he intentado y no me queda! :(
    me puedes ayudar jejeje usando un ejemplo de unas de mis entradas en mi blog http://leerunlibroyalavezimaginar.blogspot.mx/
    Te dejo mi correo: noeerik99@gmail.com
    espero tu respuesta jejeje necesito ayuda ! jejje
    saludos!

    ResponderEliminar
  15. ¡Perfecto el tutorial! Ya añadí un gadget así a mi blog y te di los créditos en la sección correspondiente en el menú ♥ ¡Muchas gracias! Besotes.

    ResponderEliminar
  16. Hola!

    Esta muy bien explicado, muchas gracias. Has sido mi salvación :P Lo he podido hacer todo en un momentito.
    Un abrazo! ^^

    ResponderEliminar