Valencia, 04/05/2013, G.B.
Blogger, la plataforma de blogging de Google, es un gestor de contenidos o CMS que suple bien tus necesidades, aunque tiene algunas deficiencias, si lo comparamos con la plataforma ‘rey’ de blogging: WordPress. Una de esas ‘deficiencias’ es la falta de ‘plugins’ o pequeñas aplicaciones ‘paralelas’ al código que se adaptan al mismo para añadir nuevas e interesantes funcionalidades.
Y una de esas funcionalidades que es realmente interesante, sobre todo a la hora del diseño, de la apariencia, es el slider o pase de diapositivas, quiero decir imágenes. JQuery es la tecnología más utilizada para la creación de sliders.
¿Y qué pasa si queremos crear un slider en Blogger? Una de dos: o instalamos una plantilla con el slider incluido o generamos uno en la nuestra. Si os encontráis en este segundo caso, hay buenas noticias, ya que existen varias formas de crear un slider en Blogger. Yo mismo he probado un par de lleas. OS adjunto una opción, que aunque no ha sido la que he probado, creo que os funcionará perfectamente.
De todas formas, en caso de duda o fallo, decídmelo y os pasaré el código que yo he utilizado en una determinada web a la que ahora mismo quiero dejar en ‘incógnito’, hasta que esté presentable, ¿de acuerdo? Aquí va el código para generar el slider en Blogger:
1) Copia antes de la etiqueta de cierre de cabecera </head> de tu plantilla de Blogger el siguiente código (ela anchura de la imagen es 550 píxeles y la altura 200 píxeles, modifícalos a tu gusto):
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
/* ------------------------------------------------------------------------
s3Slider
Developped By: Boban Karišik -> http://www.serie3.info/
CSS Help: Mészáros Róbert -> http://www.perspectived.com/
Version: 1.0
Copyright: Feel free to redistribute the script/modify it, as
long as you leave my infos at the top.
-------------------------------------------------------------------------- */
(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>
<style type='text/css'>
#s3slider {
background:#000000;
border:1px solid #818e8f;
width: 550px;
height: 200px;
position: relative;
overflow: hidden;
}
#s3sliderContent {
width: 550px;
position: absolute;
top:0px;
padding: 0px;
margin: 0px;
}
.s3sliderImage {
float: left;
position: relative;
display: none;
}
.s3sliderImage span {
position: absolute;
left: 0;
font: 20px Trebuchet MS, sans-serif;
padding: 10px 0px;
width: 550px;
background-color: #000;
filter: alpha(opacity=80);
-moz-opacity: 0.8;
-khtml-opacity: 0.8;
opacity: 0.8;
color: #fff;
display: none;
bottom: 0;
text-align:center;
}
.clear {
clear: both;
}
</style>
NOTE : To change the speed of slideshow, change the value 4000.
4.Save your template.
Con el anterior código hemos cargado en nuestra plantilla de Blogger (edición HTML) la biblioteca de JQuery, así como el código necesario para mostrar correctamente las imágenes que en el segunfdio paso vamos a añadir a nuestro slider. Para ello, crearemos una nueva entrada en Blogger y subiremos las imágenes que vayamos a utilizar en nuestro slider. Luego guardaremos la entrada como borrador y ya las tendremos subidas a nuestro espacio de Blogger reservado.
2) Ve a Diseño y añade un nuevo gadget o ‘artilugio’ en HTML/javaScritp con el siguiente código (recuerda que hemos elegido una anchura y altura de imagen determinadas: 550 y 200 píxeles, respectivamente):
<li class="s3sliderImage"><a href="TU-ENLACE-AQUI-1"><img style="width:550px;height:200px;" src="DIRECCION-ABSOLUTA-IMAGEN-1" /><span>Halo 3 : Play Game Online</span></a></li>
<li class="s3sliderImage"><a href="TU-ENLACE-AQUI-2"><img style="width:550px;height:200px;" src="DIRECCION-ABSOLUTA-DE-LA.IMAGEN-21" /><span>Avatar : Watch Movie Now !!!</span></a></li>
<li class="s3sliderImage"><a href="TU-ENLACE-AQUI-3"><img style="width:550px;height:200px;" src="DIRECCION-ABSOLUTA-IMAGEN-32" /><span>Call Of Duty 4 : Get Here</span></a></li>
<li class="s3sliderImage"></li>
</ul>
</div>
<div class='clear'></div>
Así, tendremos en la ubicación elegida un slider con 3 imágenes cada una de ellas enlazada a una URL o dirección web distinta.
Y si quieres un generador de script de Slider con Nivo Slider, visita esta página: http://www.way2blogging.org/widget-generators/nivo-slider-script-generator (es la que yo he utilizado y funciona perfectamente).
De todfas formas, os mostraré el proceso con capturas de pantalla. En breve, que ahora voy liadillo… Aunque realmente lo mejor para aprender es experimentar y equivocarse un poco, ¿verdad? Hasta pronto!