Agregar Slider en tu Blogger Simplemente como un Gadget

Agregar Slider en tu Blogger Simplemente como un Gadget. Muy buenas amigos, hoy seguimos con el paso número 6 de como crear un blog gratuito y ésta vez les enseñaré a colocar un Slider como portada de nuestro blog. Colocar un slider en nuestro blog o página web es un paso muy importante ya que le da algo más de profesionalismo a lo que estamos creando y podemos aprovecharlo para colocar en él los contenidos mas importantes
que hemos creado como también las diferentes categorías. En la mayoría de los Slider que he buscado por internet, para poder instalarlos debemos meter mano en nuestra plantilla HTML y realizar una serie de pasos. El Slider que les dejare a continuación es bastante práctico porque podemos instalarlo sólo como un gadget normal sin necesidad de meter mano en nuestra plantilla. Así que simplemente copiando el código que les dejaré a continuación y lo ponen como un gadget normal, ya tendrían su Slider listo para comenzar a agregarles las imágenes. 😉


Los pasos que realizaremos serán los siguientes:

Desde nuestro panel de control iremos a Diseño >> Agregar un Gadget >> HTML/JavaScript. Luego colocaremos el siguiente código.


<style type="text/css">
.slider-box {
    background: none repeat scroll 0 0 #FAFAFA;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 0 3px #333333;
    margin: 0 auto;
    width: 675px;
            overflow: hidden;
}
#slider-wrapper {
    margin: 0 auto;
    padding: 10px;
}
#jslider-container {
    border: 2px solid #FFFFFF;
    max-width: 550px;
    position: relative;
    text-align: left;
    z-index: 90;
}
</style>
<link href="http://project.dimpost.com/image-slider/wowslider/css/wow-slider.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

<div class="slider-box">
<div id="slider-wrapper">
<div id="jslider-container">
            <div class="jslider_images">
      <ul>
                        <li><a href="url a donde van si dan clic>
                        <img src="url de la imágen 550x309" title=""/>
                        </a></li>

                        <li><a href="url a donde van si dan clic">
                        <img src="url de la imágen 550x309" title=""/>
                        </a></li>

                        <li><a href="url a donde van si dan clic">
                        <img src="url de la imágen 550x309" title=""/>
                        </a></li>

                        <li><a href="url a donde van si dan clic">
                        <img src="url de la imágen 550x309" title=""/>
                        </a></li>

                        <li><a href="url a donde van si dan clic">
                        <img src="url de la imágen 550x309" title=""/>
                        </a></li>

                        <li><a href="url a donde van si dan clic">
                        <img src="url de la imágen 550x309" title=""/>
                        </a></li>

                        <li><a href="url a donde van si dan clic">
                        <img src="url de la imágen 550x309" title=""/>
                        </a></li>
              </ul>
    </div>
 
            <div class="jslider_thumbs">
        <div>
                        <a href="misma url de arriba" title="Neobux"><img src="url de la imágen 85x48"/></a>
                        <a href="misma url de arriba" title="Curso DLC"><img src="url de la imágen 85x48"/></a>
                        <a href="misma url de arriba" title="Trafficmonsoon"><img src="url de la imágen 85x48"/></a>
                        <a href="misma url de arriba" title="Clixsense"><img src="url de la imágen 85x48"/></a>
                        <a href="misma url de arriba" title="EasyHits4U"><img src="url de la imágen 85x48"/></a>
                        <a href="misma url de arriba" title="MarketGlory"><img src="url de la imágen 85x48"/></a>
                        <a href="misma url de arriba" title="GiftHunterClub"><img src="url de la imágen 85x48"/></a>
        </div>
            </div>
 
</div>
</div>
</div>
<script type="text/javascript" src="http://yourjavascript.com/1130198352/wow-slider.js"></script>



Los número que les dejo de color naranjo son las medidas totales del ancho y altura de nuestro slider. Podemos ir modificándolas a nuestro gusto pero recomiendo no hacerlo si no las medidas de las imágenes que iremos poniendo también cambiarán.


Donde aparece el texto de color rojo, debemos colocar la url en donde queremos llevar a nuestros visitantes cuando den clic en las imágenes.


Donde aparece el texto de color verde. debemos colocar la url de la imágen 550x309 que queramos colocar como portada de nuestro Slider. Importante respetar las medidas tanto para la imágen de portada como la de miniatura color azul 85x48. Si por casualidad cambiaste el ancho y altura total del blog, lo más probable es que éstas medidas ya no te sirvan y tendrás que ir probando nuevas medidas hasta que encuentres la adecuada.


Importante: Una vez que coloquemos el código y guardemos el gadget, debemos arrastrarlo arriba de las Entradas del blog. De lo contrario no se les verá bien.


Simplemente realizando éstos pasos ya tendríamos nuestro slider instalado en el blog. Después tendríamos que ir agregando las url de las imágenes (importante respetar las medidas para que se les vea bien) tanto la principal como la miniatura y los enlaces a donde queremos llevar a nuestros visitante si pinchan la imágen principal. Si les ha quedado cualquier duda no se preocupen que en el vídeo que les dejo abajo les explico todos estos pasos y así pues les puede quedar todo mucho más claro (también les explico como agregar más imágenes). 😎




Agregar Slider en tu Blogger Simplemente como un Gadget

"Vídeo Tutorial"






¿Qué te ha parecido éste artículo?. Me encantaría saber tu opinión y para eso tienes la sección de comentarios un poco más abajo para que te expreses siempre en el margen del respeto y así poder dejar un comentario positivo como tambien uno negativo en el cual podamos debatirlo de forma amigable. Saludos amigos y a seguir ganando dinero por internet !!  😉


Puedes Seguirme en





Agregar Slider en tu Blogger Simplemente como un Gadget 

Cualquier duda que tengas, puedes dejarla en los comentarios y en cuanto la vea te respondo.

¡¡No te olvides de revisar el Ranking Top 10 donde se encuentran las mejores páginas para ganar dinero por internet!!


40 Comentarios

  1. tengo un pequeño problema, cuando coloco el slider no se me visualizan las pestañas del menu que llegan hasta donde esta el slider.

    ResponderBorrar
  2. Entiendo Juan, te recomiendo que vayas a Plantilla >> Editar HTML y en el buscador pongas la palabra Menú. Revisa el código html completo del menú horizontal que habíamos puesto y sube todos los z-index: a 99. Me parece que ese es el error. Me avisas por favor si se te solucionó el problema. Saludos.

    ResponderBorrar
  3. Tengo un problema intento ponerla y me sale el gadget pero me sale con un codigo y cuando pongo las imagenes me van saliendo en fila hacia abajo

    ResponderBorrar
    Respuestas
    1. Amigo contactame al facebook y mándame por mensaje el link de tu blog para ver cual es el problema. Saludos.

      Borrar
    2. me pasa lo mismo como lo solucionaste?

      Borrar
    3. Gokustian, me pasa igual.... la miniatura me sale en fila con la imagen original :(

      Borrar
    4. El código está fallando y no sé porqué =( Si quieres te mando el código completo que tengo en mi blog, si te sale de manera normal entonces simplemente tendrías que cambiar los link por los tuyos, ahora si no funciona es porque algo está fallando con el código. Solicitame el código al correo quematucrisis@gmail.com Saludos.

      Borrar
    5. Dinero a chorro como lo solucionaste? :(

      Borrar
    6. ya te mande un mensaje :) espero que si me sirva

      Borrar
    7. Te mandé el código al correo amigo.

      Borrar
    8. Tambien Tengo El Mismo Problema :( Aiudame

      Borrar
  4. Gokustian ya resolvi el problema que te mencione, pero ahora es que no se me visualizan las pestañas y cuando entro a una entrada sigue arriba

    ResponderBorrar
    Respuestas
    1. Claro amigo, el slider siempre te aparecerá arriba a menos que introduzcas un código html para ocultarlo. Te recomiendo buscar en google "ocultar gadget en cualquier parte del blog" para que sepas como hacerlo.

      Borrar
    2. mepueden decir la solucion pe salo mismo

      Borrar
  5. Que hago para que el slider no me salga en todas las paginas del blog?

    ResponderBorrar
    Respuestas
    1. Aquí lo explico amigo =) http://www.gokustian.com/2017/05/ocultar-slider-en-todas-partes-menos-en.html

      Borrar
  6. amigo no me sale el slider

    me sale un punto y title=""/>

    ResponderBorrar
    Respuestas
    1. Tienes que haber copiado algo mal amigo, intenta realizar los pasos de nuevo por favor. Saludos.

      Borrar
  7. Hola Gokustian, yo hice mi blog y pude poner el slider pero le hice un blog a mi hijo y cuando intento poner el slider, me sale lo mismo que a Bryan Torres, un punto y la palabra title=""/>, si sabes como ayudarnos te lo agradeceria.

    ResponderBorrar
    Respuestas
    1. Hola Emanuel, si seguiste todos los pasos que realicé en el vídeo pues ni idea cual puede ser el problema amigo.

      Borrar
  8. Socio, revisalo plis ya que sale un punto y la palabra title=""/> y no funciona..

    ResponderBorrar
    Respuestas
    1. Revisa el nuevo código que acabo de poner he intentar ir colocando las url haber si resulta. Saludos.

      Borrar
  9. Ya descubri el problema, lo que sucede es que ya la plantilla simple no la acepta, pero probe el gadget de este slider en la plantilla contemporánea y si la acepta y funciona bien.

    ResponderBorrar
    Respuestas
    1. Gracias por esa información amigo, ya se me hacía raro. Un saludo.

      Borrar
  10. Tengo Un Problema Es Que El Slider No Me Deja Abrir Ciertas Pestañas Del Menu Horizontal. Hice Lo Que Dijistes En El Paso 3 Y Nada. Necesito Ayuda Plis :)

    ResponderBorrar
    Respuestas
    1. Te refieres a que las pestañas del menú se te ven por debajo del slider?

      Borrar
    2. Si Ya lo Solucione Pero Ahora El Slider Se Le Ven Todas Las Imagenes En Una Fila De Abajo Y No van pasando. Aiudame

      Borrar
    3. Hola socio, según lo que me han dicho otros ususario, creo que el slider ya no está funcioando para la plantilla simple de blogger, pero creo que si la cambias a otra te puede servir. Sería cosa de intentarlo. Un saludo.

      Borrar
    4. Ya Lo intente Y Nada. Que Me Recomendarias?

      Borrar
    5. En ese caso te recomendaría buscar otro slider amigo.

      Borrar
  11. maestro gokustian ya intente poner el slider y no me sirve... tienes alguna solucion yo tengo entendido que en el tema sencillo del video ya no se puede pero pongo otros temas y tampoco... espero tu respuesta :)

    ResponderBorrar
    Respuestas
    1. Hola amigo, yo tengo entendido lo mismo y si ya no funciona con otro tema pues supongo que habrá que buscar otro slider amigo.

      Borrar
    2. tendrás otro código para agregar mi slider ?

      Borrar
  12. Amigo, me gustaria saber como puedo hacer una entrada y poner distintos pagos que vayan pasando en una entrada?

    ResponderBorrar
  13. Hola, gokustian. Me gusto ucho tu post sobre como hacer un slider. Lo hice y vi los resultados, pero en realidad me interesa hacer un pequeño slider en el sidebar, con imágenes que sean tipo portrait, es decir de 724x487 px (o proporcionales a éstas). Podrías ayudarme? Tengo días buscando la manera, pero no he encontrado que alguien lo explique y pueda yo ir viendo los resultados de la manera en que tú lo has hecho.

    ResponderBorrar
    Respuestas
    1. Hola Carmen, la verdad no sé muy bien como se podría hacer, lo otro sería cambiarle las medidas pero me parece que este slider ya no está funcionando según los comentario que he recibido 😕.

      Borrar
  14. Excelente Muy Bueno Explicado. Saludos. Y Exito y Se Todos Los Pasos Y Me Salio Bien Todo Gracias

    ResponderBorrar
    Respuestas
    1. Excelente Alfredo y gracias por comentar. Un saludo y mucho éxito.

      Borrar