:::: MENU ::::
  • Desarrollo Web - Responsive Design

  • Easy to Customize

  • Customizable fonts.

viernes, 17 de enero de 2014

slider con javascript

Hoy les voy a compartir  un slider de imágenes que funciona con JavaScript, el cual tiene unos efectos de transición geniales e incluye una banda lateral con el texto "Populares".Ademas cabe mencionar que este slider es muy facil de agregar a nuestra plantilla ya que vasta con agregar un nuevo gadget de tipo Html/JavaScript, así podemos mostrar a nuestros lectores las entradas mas populares de nuestro blog.

Si quieres ver como funciona este slider da clic AQUI.

Empezamos a instalar nuestro slider:

  • En el Escritorio Blogger hacemos clic en Diseño.
  • Hacemos clic en Añadir un Gadget donde queramos poner los anuncios.
  • En la lista seleccionamos HTML / JavaScript.
Ahora solo copiamos y pegamos este codigo: 

<style type="text/css"> <!-- tutoriales2010.blogspot.mx --> #mcis { display: none; } #sliderFrame { position: relative; width: 500px; margin: 0 auto; margin-bottom:35px; border:5px solid #000; } #ribbon { width: 111px; height: 111px; position: absolute; top: -4px; left: -4px; background: url(https://lh3.googleusercontent.com/-lOmnjBSMK0E/Ufo5ZIu8GNI/AAAAAAAABEU/vrIaUC-urzI/s109-no/ribbon.png) no-repeat; z-index: 7; } #slider { width: 500px; height: 250px; background: #fff url(https://lh6.googleusercontent.com/-V7xLkgfh1O8/Ufo_dpsg85I/AAAAAAAABF0/pFT5oNtt_2w/s32-no/loading.gif) no-repeat 50% 50%; position: relative; margin: 0 auto; box-shadow: 0px 1px 5px #999999; } #slider img { position: absolute; border: none; display: none; } #slider a.imgLink { z-index: 2; display: none; position: absolute; top: 0px; left: 0px; border: 0; padding: 0; margin: 0; width: 100%; height: 100%; } div.mc-caption-bg, div.mc-caption-bg2 { position: absolute; width: 100%; height: auto; padding: 0; left: 0px; bottom: 0px; z-index: 3; overflow: hidden; font-size: 0; } div.mc-caption-bg { background-color: black; } div.mc-caption { font: bold 14px/20px Arial; color: #EEE; z-index: 4; padding: 10px 0; text-align: center; } div.mc-caption a { color: #FB0; } div.mc-caption a:hover { color: #DA0; } div.navBulletsWrapper { top: 265px; left: 190px; width: 150px; background: none; padding-left: 20px; position: relative; z-index: 5; cursor: pointer; } div.navBulletsWrapper div { width: 11px; height: 11px; background: transparent url(https://lh6.googleusercontent.com/-PrCS8GOrP-s/Ufo5rj88CbI/AAAAAAAABEk/mLp19FTjxQI/w11-h22-no/bullet.png) no-repeat 0 0; float: left; overflow: hidden; vertical-align: middle; cursor: pointer; margin-right: 11px; _position: relative; } div.navBulletsWrapper div.active { background-position: 0 -11px; } #slider { transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); } </style> <script src="https://googledrive.com/host/0B-WopI-jeOOsT1NPRC1acHpxWmc/js-image-slider.js" type="text/javascript"></script> <div id="sliderFrame"> <div id="ribbon"></div>
 <div id="slider">
 <a href="#"><img src="https://lh4.googleusercontent.com/-NZBdSjNnq8Y/Ufo7i20BECI/AAAAAAAABFE/WmPQj-wHtvM/w500-h250-no/1.jpg" alt="Slider de Imágenes"/>
</a>
<a href="#"><img src="https://lh6.googleusercontent.com/-k-23xqeuGoA/Ufo7i5DJZII/AAAAAAAABFA/flwryNHakH0/w500-h250-no/2.jpg" alt="tutoriales2010"/></a>
<a href="#"><img src="https://lh3.googleusercontent.com/--wowk_eCjQ0/Ufo7jGqnu2I/AAAAAAAABFQ/bWFnl2dQrwQ/w500-h250-no/3.jpg" alt="Hecho con JavaScript"/>
</a>
<a href="#"><img src="https://lh5.googleusercontent.com/-83H2OEWPumU/Ufo7jyUMyqI/AAAAAAAABFU/PMBkHwj6JDk/w500-h250-no/4.jpg" alt="Aquí puedes poner el texto que quieras"/>
</a>
<a href="http://www.tutoriales2010blogspot.mx"><img src="https://lh4.googleusercontent.com/-ROPTHF1Uh_s/Ufo7kXzlNgI/AAAAAAAABFc/bDoWeJTe8Ys/w500-h250-no/5.jpg" alt="No olvides comentar"/></a> </div> </div>

Ahora solo nos falta modificar algunas cosas:

COLOR AZUL: Esas son las URL de las imagenes que vamos a poner en nuestro slider ( se recomienda usar la medida de 500px x 250px.
COLOR ROJO: Es el link al que se va dirigir la imagen al momento de dar clic sobre la misma.
COLOR AMARILLO: Es el texto que aparece en la descripción de cada una de las imágenes.

3 comentarios:

Publicar un comentario

¿Necesitas una pagina web? Contáctanos