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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUwLN_T2SMztrcCSOmzzhbSuaW_i116eXf9OGibbo63Hj37oiMv0_yo60ZMVtARelfzbHFEhhPs3VFL-57-gcCv8DlhosnvRP-KZHDis26WmZ0w_0RXC103MndKkerD806qjsCuHFnlVBQ/s109-no/ribbon.png) no-repeat;
z-index: 7;
}
#slider {
width: 500px;
height: 250px;
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhu3vVvHiOlGTgXokS98z-Ira3YSlO67zwTb5VLjLEJC3gtuJrWBzrp_oYehgijMvbsZs27ERtPZWdbnLvZdXG80-wq50zcHtAPu0a7Kit9cXLHUIyw9VKlr6vakKoQk_gLE8hawd0Inkr7/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidsGTiCNTkGLXr5yc5nxfGXlL8Wl8RcSdeUvpcN2oAhULWGwxgFCaN2OAv4s98P3TGtdMkJNc7sFETcrOuw7klSC6ZeLXaQUTlwRslYv0s4NGsMbdC6ud75apacARV4MhnWpF-ybBNXfbk/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzNPuaB6h5TxeMpK2Ulz1D3I9CRVv-6AGX_y8Gct7631HaXfHOJuT_RemzMT3Or8mJJdCnm3yZijZH4dpHADJ6UUDdm5QeINHr7upWZx6ZFzaheLC2Hyp5G13dE_NGM_kB3_nzkc6WpJUh/w500-h250-no/1.jpg" alt="Slider de Imágenes"/>
</a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6PLvdlh0J7POrBBT4aflb0SykTxuRu6At3MSyZz5GMyaSTIYnnsaWGWf3imZbzwdyYy3QC4YdEt2u9n5P2lHDV6BVI7sZ-GB-4tfBWR0C4NbxyEWTfBFU3MusYZAHD6WA0Q9BNQthRwRQ/w500-h250-no/2.jpg" alt="tutoriales2010"/></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS2ezrcoEwtXTGBWBcK3QRTAuhTbvDjZkvFcTCVveqJUBm1qSIu5XU8HRRPn3YkXPvmcKNywGyMQg9_xtkIPC_bL9s79Xl3JOtQaSC_ibkjjF6Aagp9-zxZIvYavpz4MpFSKGQhT2zSLIl/w500-h250-no/3.jpg" alt="Hecho con JavaScript"/>
</a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLh6LUyoI3i1np9w6WNAKtt9OdY7A2naJ3HtEJ_ogGPjAx8vjDCPiw7QDpXbSxo8i4xKSgF9RmJPDROrpmAfDXulxOpnEI2LXoOUSO_bh4lKDn2A308YExieTYtfU-iXYE6bPtbI0Z9I5u/w500-h250-no/4.jpg" alt="Aquí puedes poner el texto que quieras"/>
</a>
<a href="http://www.tutoriales2010blogspot.mx"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghE2-4UsTzdGx_YdeE2fHjZWJu2BTdjNAMa6wHyCh1gjnuGQ8Omqk0zxx6bJ6OQYwgEsshxJTjYGOvF1XjxZjYwLQEB6nbjoEd5DCzCO0SNhiOmhA7P0xHW_nSeSdsTe1X2yhXjBGSXLMZ/w500-h250-no/5.jpg" alt="No olvides comentar"/></a> </div> </div>
<div id="slider">
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzNPuaB6h5TxeMpK2Ulz1D3I9CRVv-6AGX_y8Gct7631HaXfHOJuT_RemzMT3Or8mJJdCnm3yZijZH4dpHADJ6UUDdm5QeINHr7upWZx6ZFzaheLC2Hyp5G13dE_NGM_kB3_nzkc6WpJUh/w500-h250-no/1.jpg" alt="Slider de Imágenes"/>
</a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6PLvdlh0J7POrBBT4aflb0SykTxuRu6At3MSyZz5GMyaSTIYnnsaWGWf3imZbzwdyYy3QC4YdEt2u9n5P2lHDV6BVI7sZ-GB-4tfBWR0C4NbxyEWTfBFU3MusYZAHD6WA0Q9BNQthRwRQ/w500-h250-no/2.jpg" alt="tutoriales2010"/></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS2ezrcoEwtXTGBWBcK3QRTAuhTbvDjZkvFcTCVveqJUBm1qSIu5XU8HRRPn3YkXPvmcKNywGyMQg9_xtkIPC_bL9s79Xl3JOtQaSC_ibkjjF6Aagp9-zxZIvYavpz4MpFSKGQhT2zSLIl/w500-h250-no/3.jpg" alt="Hecho con JavaScript"/>
</a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLh6LUyoI3i1np9w6WNAKtt9OdY7A2naJ3HtEJ_ogGPjAx8vjDCPiw7QDpXbSxo8i4xKSgF9RmJPDROrpmAfDXulxOpnEI2LXoOUSO_bh4lKDn2A308YExieTYtfU-iXYE6bPtbI0Z9I5u/w500-h250-no/4.jpg" alt="Aquí puedes poner el texto que quieras"/>
</a>
<a href="http://www.tutoriales2010blogspot.mx"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghE2-4UsTzdGx_YdeE2fHjZWJu2BTdjNAMa6wHyCh1gjnuGQ8Omqk0zxx6bJ6OQYwgEsshxJTjYGOvF1XjxZjYwLQEB6nbjoEd5DCzCO0SNhiOmhA7P0xHW_nSeSdsTe1X2yhXjBGSXLMZ/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.
.png)
