A petición de algunos blogueros os traigo un nuevo slider manual, bastante simple y queda fenomenal.
Para instalarlo en vuestros blog, seguir estos pasos:
1º) Copiar y pegar el siguiente código antes de
]]></b:skin> de vuestra plantilla.
Yá sabéis: DISEÑO-EDICIÓN HTML-F3 o en su defecto CTRL+F (para buscar)
#s3slider {
background: none repeat scroll 0 0 #FFFFFF;
border: 3px double #CCCCCC;
height: 250px;
margin-bottom: 25px;
margin-top: 20PX;
overflow: hidden;
position: relative;
text-shadow: 0 1px 0 #000000;
width: 500px;
}
#s3sliderContent {
background: none repeat scroll 0 0 #FFFFFF;
height: 250px;
list-style: none outside none;
margin-left: 0;
overflow: hidden;
padding: 0;
position: absolute;
top: -2px;
width: 500px;
}
.s3sliderImage {
float: left;
position: relative;
width: 500px;
}
.s3sliderImage span {
background-color: #000000;
color: #FFFFFF;
display: none;
font-size: 12px;
height: 250px;
line-height: 16px;
opacity: 0.7;
overflow: hidden;
padding: 20px 10px;
position: absolute;
right: 0;
top: 0;
width: 130px;
}
.s3sliderImage strong a {
font-family: 'Myriad Pro',Helvetica,Arial,Sans-Serif;
font-size: 16px;
}
.s3sliderImage strong a:hover {
color: #FFFFFF;
}
2º) Copia y pega el siguiente código bajo la misma etiqueta:
]]></b:skin> y a continuación, guarda plantilla.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
(function($){
$.fn.s3Slider = function(vars) {
var element = this;
var timeOut = (vars.timeOut != undefined) ? vars.timeOut : 4000;
var current = null;
var timeOutFn = null;
var faderStat = true;
var mOver = false;
var items = $("#" + element[0].id + "Content ." + element[0].id + "Image");
var itemsSpan = $("#" + element[0].id + "Content ." + element[0].id + "Image span");
items.each(function(i) {
$(items[i]).mouseover(function() {
mOver = true;
});
$(items[i]).mouseout(function() {
mOver = false;
fadeElement(true);
});
});
var fadeElement = function(isMouseOut) {
var thisTimeOut = (isMouseOut) ? (timeOut/2) : timeOut;
thisTimeOut = (faderStat) ? 10 : thisTimeOut;
if(items.length > 0) {
timeOutFn = setTimeout(makeSlider, thisTimeOut);
} else {
console.log("Poof..");
}
}
var makeSlider = function() {
current = (current != null) ? current : items[(items.length-1)];
var currNo = jQuery.inArray(current, items) + 1
currNo = (currNo == items.length) ? 0 : (currNo - 1);
var newMargin = $(element).width() * currNo;
if(faderStat == true) {
if(!mOver) {
$(items[currNo]).fadeIn((timeOut/6), function() {
if($(itemsSpan[currNo]).css('bottom') == 0) {
$(itemsSpan[currNo]).slideUp((timeOut/6), function() {
faderStat = false;
current = items[currNo];
if(!mOver) {
fadeElement(false);
}
});
} else {
$(itemsSpan[currNo]).slideDown((timeOut/6), function() {
faderStat = false;
current = items[currNo];
if(!mOver) {
fadeElement(false);
}
});
}
});
}
} else {
if(!mOver) {
if($(itemsSpan[currNo]).css('bottom') == 0) {
$(itemsSpan[currNo]).slideDown((timeOut/6), function() {
$(items[currNo]).fadeOut((timeOut/6), function() {
faderStat = true;
current = items[(currNo+1)];
if(!mOver) {
fadeElement(false);
}
});
});
} else {
$(itemsSpan[currNo]).slideUp((timeOut/6), function() {
$(items[currNo]).fadeOut((timeOut/6), function() {
faderStat = true;
current = items[(currNo+1)];
if(!mOver) {
fadeElement(false);
}
});
});
}
}
}
}
makeSlider();
};
})(jQuery);
//]]>
</script>
<script type='text/javascript'>
$(document).ready(function() {
$('#s3slider').s3Slider({
timeOut: 4000
});
});
</script>
El Slide tiene unas dimenciones de
500 DE ANCHO POR 250 DE ALTO,
siendo modificable todo ello cambiando el
CSS del código. Si no lo entendéis mejor dejarlo tal cual, o pedirme ayuda mediante comentario.
Las imágenes que coloquéis no debe superar los 500px de ancho por 250px de alto (tamaño recomendado), para visualizarlo perfectamente.
3º) Colocar el siguiente código en un
gadget HTML, modificándo todo lo del interior.
<div id="s3slider"><ul id="s3sliderContent">
<li class="s3sliderImage"><img src="URL DE LA IMAGEN" /><span><strong><a href="URL DE LA ENTRADA">TITULO DE LA ENTRADA </a></strong><p>RESUMEN DE LA ENTRADA...</p></span></li>
<li class="s3sliderImage"><img src="URL DE LA IMAGEN POST 2" /><span><strong><a href="URL DE LA ENTRADA POST 2"> TITULO DE LA ENTRADA POST 2</a></strong><p>RESUMEN ENTRADA POST 2...</p></span></li>
<li class="s3sliderImage"><img src="URL DE IMAGEN POST 3" /><span><strong><a href="URL DE LA ENTRADA POST 3"> TITULO DE LA ENTRADA POST 3 </a></strong><p>RESUMEN ENTRADA POST 3...</p></span></li>
<div class="clear s3sliderImage"></div></ul></div>
Por defecto lleva 3 entradas, para incluir más ENTRADAS copiar lo que vá comprendido DESDE <li> hasta </li> y pegar a continuación del último </li>
