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.

Lista de Enlaces con Efecto Hover

Esta es un lista de enlaces que tiene la propiedad de que al pasar el mouse sobre cada enlace, éste cambiara el icono  de cruz a una flechita en color azul. Da un bonito efecto. De esta forma se señala que se está pulsando sobre el enlace escogido.
El resultado es el siguiente:

Para realizarlo es muy sencillo. Primero agregamos a través de diseño, añadir un gadget, lista de enlaces. En seguida vamos a plantilla edición de html y pulsamos F3, seguidamente nos saldrá un buscador en la parte superior derecha y buscaremos  ]]></b:skin>, justo arriba de esto pegamos nuestro código CSS, el cual sería:


#LinkList1 li {
list-style:none;
margin-left:0;
border:none;
font-family: Georgia, 'Times New Roman', serif;
padding: 2px 2px 2px 2px;
font-style:italic;
}
#LinkList1 li a{
color: #000000;
background: transparent url(https://lh6.googleusercontent.com/-PNdYSx9mOqo/TpQfqZmZPSI/AAAAAAAABAo/kXVPI1HYuQc/s16/dbtool.png) no-repeat center left;
padding: 2px 2px 2px 20px;
}
#LinkList1 li a:hover {
list-style:none;
color: #585858;
padding-left: 20px;
font-family: Georgia, 'Times New Roman', serif;
font-style:italic;
background: transparent url(https://lh6.googleusercontent.com/-cO0fZ7mcJJk/TpP5trSawYI/AAAAAAAABAg/AYUoWa1-P68/s16/check.png) no-repeat center left;
text-decoration:none;
}


Luego de ello ya tendrás la lista de enlaces funcional. Si quieres puedes personalizarla aún más cambiando los colores, fuentes, o agregándole tus propios iconos. Para esto último en donde dice background, cambia la URL (lo que está entre paréntesis), por la URL de tu imagen.