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"

---

Todos los pasos de principio a fin >>

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

---