Rotador de Imágenes para Blogger

Hoy voy a mostrarles como implementar el slider o rotador de imágenes que tengo en este blog. El tutorial lo he tomado de la página de coquitoblogger pero en realidad, investigando un poco sé que su creador es un diseñador que tenía una página llamada SOHTANAKA, la cual al parecer ya no existe.


Lo que hice, fué cambiar el CSS para que quedase con dimensiones aptas para poner el slider bajo el menú, además de cambiar la imagen de la numeración, lo cual también pueden hacer ustedes de manera de personalizarlo y adaptarlo a su estilo.
También comentarles que el slider es en base a Jquery, y que si ya lo tienen implementado en sus blogs no es necesario que vuelvan a ponerlo.

Bien, lo primero es poner el script. Para hacerlo iremos a plantilla, edición html presionamos F3 y en el buscador de la parte superior derecha ponemos </head>, justo arriba de ello pondremos el script:


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>


$(document).ready(function() {


//Set Default State of each portfolio piece
$(&quot;.paging&quot;).show();
$(&quot;.paging a:first&quot;).addClass(&quot;active&quot;);


//Get size of images, how many there are, then determin the size of the image reel.
var imageWidth = $(&quot;.window&quot;).width();
var imageSum = $(&quot;.image_reel img&quot;).size();
var imageReelWidth = imageWidth * imageSum;


//Adjust the image reel to its new size
$(&quot;.image_reel&quot;).css({&#39;width&#39; : imageReelWidth});


//Paging + Slider Function
rotate = function(){ 
var triggerID = $active.attr(&quot;rel&quot;) - 1; //Get number of times to slide
var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide


$(&quot;.paging a&quot;).removeClass(&#39;active&#39;); //Remove all active class
$active.addClass(&#39;active&#39;); //Add active class (the $active is declared in the rotateSwitch function)


//Slider Animation
$(&quot;.image_reel&quot;).animate({ 
left: -image_reelPosition
}, 500 );


}; 


//Rotation + Timing Event
rotateSwitch = function(){ 
play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
$active = $(&#39;.paging a.active&#39;).next();
if ( $active.length === 0) { //If paging reaches the end...
$active = $(&#39;.paging a:first&#39;); //go back to first
}
rotate(); //Trigger the paging and slider function
}, 6000); //Duracion de tiempo en rotar (6 segundos)
};


rotateSwitch(); //Run function on launch


//On Hover
$(&quot;.image_reel a&quot;).hover(function() {
clearInterval(play); //Stop the rotation
}, function() {
rotateSwitch(); //Resume rotation
}); 


//On Click
$(&quot;.paging a&quot;).click(function() { 
$active = $(this); //Activate the clicked paging
//Reset Timer
clearInterval(play); //Stop the rotation
rotate(); //Trigger rotation immediately
rotateSwitch(); // Resume rotation
return false; //Prevent browser jump to link anchor
}); 


});
</script>

Seguido de eso, volvemos a nuestro buscador y agregamos ]]></b:skin>, arriba de eso pondremos nuestro CSS:


/*--Main Container--*/
.main_view {
float: center;
position: relative;
}
/*--Window/Masking Styles--*/
.window {
height: 150px; width: 800px;
overflow: hidden; /*--Hides anything outside of the set width/height--*/
position: relative;
}
.image_reel {
position: absolute;
top: 0; left: 0;
}
.image_reel img {float: left;}
/*--Paging Styles--*/
.paging {
position: absolute;
bottom: 40px; right: 50px;
width: 155px; height:47px;
z-index: 100; /*--Assures the paging stays on the top layer--*/
text-align: center;
line-height: 50px;
background: url(http://3.bp.blogspot.com/-Ts0AbrLK7oY/Toc7gmcbHKI/AAAAAAAAA5k/rfBIdVmdgR8/s1600/paginas3.png) no-repeat; /*--aquí va la imagen de la paginación--*/
display: none; /*--Hidden by default, will be later shown with jQuery--*/
}
.paging a {
padding: 5px;
text-decoration: none;
color: #057CD7;
}
.paging a.active {
font-weight: bold;
background: #8FC5EF;
border: 1px solid #8FC5EF;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
}
.paging a:hover {
font-weight: blod;
}

"En el trozo height: 150px; width: 800px; especificamos las dimensiones de las imágenes. Si quisieras poner otras de distinto tamaño deberás ajustar los valores, además de bottom: 40px; right: 50px; que controla la posición de la imagen de la paginación".

Una vez puesto esto, pulsamos vista previa, si todo luce bién guardamos la plantilla. Por último debemos anexar nuestro html, para ello agregamos un gadget html/javascript y ponemos:



<div class='main_view'>
<div class='window'>
<div class='image_reel'>
<a href='URL DE TU ENLACE1'><img alt='' src='URL DE TU IMAGEN1'/></a>
<a href='URL DE TU ENLACE2'><img alt='' src='URL DE TU IMAGEN2'/></a>
<a href='URL DE TU ENLACE3'><img alt='' src='URL DE TU IMAGEN3'/></a>
<a href='URL DE TU ENLACE4'><img alt='' src='URL DE TU IMAGEN4'/></a>
</div>
</div>
<div class='paging'>
<a href='URL DE TU ENLACE1' rel='1'>1</a>
<a href='URL DE TU ENLACE2' rel='2'>2</a>
<a href='URL DE TU ENLACE3' rel='3'>3</a>
<a href='URL DE TU ENLACE4' rel='4'>4</a>
</div>
</div>



Recuerda escribir bien los códigos y cerrarlos correctamente.

Si te gustó compártelo en tu red social o recomiéndalo en Google!!!

14 comentarios:

  1. Hola! esta estupendo el slide la verdad no lo había visto..muy practico espero poder utilizarlo en algún blog saludos!!

    ResponderEliminar
  2. mi querida amiga,que interesante y bonito esto,pero para mi es complicado,algun dia lo intento,gracias por compartir,buen dia,te dejo bechitos

    ResponderEliminar
  3. hola como hago? me salio todo bien pero las imagenes que puse se ven de diferentes tamaños XDD me ayudarías?

    ResponderEliminar
    Respuestas
    1. "En el trozo height: 150px; width: 800px; especificamos las dimensiones de las imágenes. Si quisieras poner otras de distinto tamaño deberás ajustar los valores, además de bottom: 40px; right: 50px; que controla la posición de la imagen de la paginación".

      Eliminar
  4. Tengoun problema, la imagen 4 no se ve...que pasara???

    ResponderEliminar
  5. disculpa :( me podrías decir a que se refiere con URL DE TU ENLACE? :( ayudame

    ResponderEliminar
  6. pregunta. quisiera poner mis propias imagenes como hago ???

    ResponderEliminar
  7. Ola no se si me vayan a responder pero pos si acaso no mes sale el ]]> en la perzonalizacion de HTML ayuda

    ResponderEliminar

Tus comentarios ayudan a mejorar este Blog.