Un slider siempre es una excelente opción para que tus visitantes tengan una mejor visualización de los contenidos más importantes de tu sitio Web. A continuación les mostraré como hacer uno igual al que tengo en Informatics. También le podemos dar algo más de organización a nuestro sitio y contenido del mismo. Sin más que decir les pongo paso a paso como lograr tener uno:
PASO 1: jQuery
En este paso deberemos poner el script para que nuestro slider funcione, para eso vamos a Plantilla > Edición de HTML (en la interfaz actualizada de blogger). Recomiendo antes que nada hacer un back up de la plantilla, luego expandimos las plantillas de artilugios y buscan debajo pegan estos códigos:
$(document).ready(function() {
//Activate First Link
$(«.contentnav a:first»).addClass(«active»);
//width of a single content area
var contentwidth = $(«.contentholder»).width();
//Total number of content
var totalcontent = $(«.contenta»).size();
//Total width of all content area
var allcontentwidth = contentwidth * totalcontent;
//contentslider to new size which we got in above step
$(«.contentslider»).css({‘width’ : allcontentwidth});
//Now right a new function for slide and slide navigation
rotate = function(){
//Number of times we need to slide
var slideid = $active.attr(«rel») – 1;
//Set the distance which single content needs to slide
var slidedistance = slideid * contentwidth;
//Remove active class
$(«.contentnav a»).removeClass(‘active’);
//Add Active Class
$active.addClass(‘active’);
//Slider Animation
$(«.contentslider»).animate({
left: -slidedistance
}, 500 );
};//Set Time for Rotation of slide
rotation = function(){
play = setInterval(function(){
//Next slide nav
$active = $(‘.contentnav a.active’).next();
if ( $active.length === 0) {
//Move to first slide nav
$active = $(‘.contentnav a:first’);
}
rotate();
//Timer speed 5 sec
}, 5000);
};
//Run rotation fuction
rotation();
$(«.contentnav a»).click(function() {
$active = $(this);
clearInterval(play);
rotate();
rotation();
return false;
});
});
PASO 2: HTML
Ahora añadimos un widget en Blogger de Javascript/HTML y pegamos lo siguiente:
Lorem ipsum dolor sit ametLorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut odio. Nam sed est. Nam a risus et est iaculis adipiscing. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer ut justo. In tincidunt viverra nisl. Donec dictum malesuada magna. Curabitur id nibh auctor tellus adipiscing pharetra. Fusce vel justo non orci semper feugiat. Cras eu leo at purus ultrices tristique.
Lorem ipsum dolor sit ametLorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut odio. Nam sed est. Nam a risus et est iaculis adipiscing. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer ut justo. In tincidunt viverra nisl. Donec dictum malesuada magna. Curabitur id nibh auctor tellus adipiscing pharetra. Fusce vel justo non orci semper feugiat. Cras eu leo at purus ultrices tristique.
Lorem ipsum dolor sit ametLorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut odio. Nam sed est. Nam a risus et est iaculis adipiscing. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer ut justo. In tincidunt viverra nisl. Donec dictum malesuada magna. Curabitur id nibh auctor tellus adipiscing pharetra. Fusce vel justo non orci semper feugiat. Cras eu leo at purus ultrices tristique.
Lorem ipsum dolor sit ametLorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut odio. Nam sed est. Nam a risus et est iaculis adipiscing. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer ut justo. In tincidunt viverra nisl. Donec dictum malesuada magna. Curabitur id nibh auctor tellus adipiscing pharetra. Fusce vel justo non orci semper feugiat. Cras eu leo at purus ultrices tristique.
PASO 3: CSS
En este paso le daremos formato a este slider, para que se vea bien y tenga una vista agradable, habrá que adaptar el color según tengas un blog de color oscuro o claro. Deben buscar ]]> y pegar arriba:
#wrappera {
width:560px;
margin-left:auto;
margin-right:auto;
margin-top: 19px;
overflow:visible;
}#slider {
background-color: #161616;/*Color de fondo del slider*/
position:relative;
padding:20px;
overflow:hidden;
}
.contenta {
width:520px;
float: left;
position: relative;
}
.inslider a {
text-decoration:none;
}
.contentholder {
height:250px;
width: 520px;
overflow: hidden;
position: relative;
}
.contentslider {
position: absolute;
top: 0; left: 0;
}
.imgslider img {
float: left;
}
.contentnav {
position: absolute;
bottom: 30px; left:200px;
height:30px;
z-index: 100;
text-align: center;
line-height: 30px;
}
.contenta h2 a {
text-decoration: none;
color: #FFFFFF;/* Color de los números*/
}
.contentnav a{
padding-top: 5px;
padding-bottom: 5px;
padding-right: 10px;
padding-left: 10px;
text-decoration: none;
color: #2432F6;
}
.contentnav a.active {
font-weight: bold;
color:#FFF;
background: #2432F6;/* Color del círculo de los números*/
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border-radius: 25px;
}
Bueno, eso es todo. Espero que les sirva y logren implementarlo de manera correcta. Ante cualquier duda dejenla en los comentarios, serán respondidas a la brevedad 😉 .
El contendio de esta entrada esta protegido bajo Derechos de Autor y leyes de Copyright. Su reproducción PARCIAL O TOTAL sin mencionar la fuente esta penada por la Ley 11.723 y la DMCA vigente en EE.UU. Todo el contenido está bajo licencia de Creative Commons.
elecasoft 