Hola, por fin es viernes o(>U< )o Y hoy tengo un tutorial muy largo que me pidio Tamara. Antes los créditos a Mell de MMC por estos hermosos tutoriales. Vamos a poner un slider en la cabecera como tengo yo ahora en el blog. Comencemos aunque va a costar un poco (シ__ )シ Haremos dos tutoriales diferentes:
1) Desbloquear cabecera
Primero desbloquearemos la cabecera, ¿Que es eso? No os habeís dado cuenta que cuando os poneis en diseño para ver los gadgets no podeís mover la cabecera, pues al desbloquearla podeís moverla, eliminarla y poner un gadget en su lugar. En este caso un slider. Buscamos en la plantilla este codigo:
<b:widget id='Header1' locked='true'
Cambiamos true por false y mas arriba busca:
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
Cambiamos no por yes y ya está ヾ (º U º ) ノ
2) Poner el slider
Para poner el slider buscamos en nuestra plantilla </body> y arriba ponemos esto:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/ifqwhnb/GBsm20q7d/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">
var $nv4wp = jQuery.noConflict();
$nv4wp(window).load(function() {
$nv4wp('#slider').nivoSlider({
effect:'random',
slices:15, // For slice animations
boxCols: 4, // For box animations
boxRows: 2, // For box animations
animSpeed: 500, // Slide transition speed
pauseTime: 3000, // How long each slide will show
startSlide:0, // Set starting Slide (0 index)
directionNav:true, //Next & Prev
directionNavHide:true, //Only show on hover
controlNav:true, // 1,2,3... navigation
controlNavThumbs:false, // Use thumbnails for Control Nav
controlNavThumbsFromRel:false, // Use image rel for thumbs
controlNavThumbsSearch: '.jpg', // Replace this with...
controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src
keyboardNav:true, //Use left & right arrows
pauseOnHover:true, //Stop animation while hovering
manualAdvance:false, //Force manual transitions
captionOpacity:0.8, //Universal caption opacity
prevText: 'Prev', // Prev directionNav text
nextText: 'Next', // Next directionNav text
beforeChange: function(){}, // Triggers before a slide transition
afterChange: function(){}, // Triggers after a slide transition
slideshowEnd: function(){}, // Triggers after all slides have been shown
lastSlide: function(){}, // Triggers when last slide is shown
afterLoad: function(){} // Triggers when slider has loaded
});
});
</script>
Ahora buscamos ]]></b:skin> y encima pega el siguiente codigo:
#slider {position:relative;}
#slider img {position:absolute; top:0px; left:0px; display:none;}
#slider a {border:0; display:block;}
.nivoSlider {position:relative; width: 356px;}
.nivoSlider img {position:absolute; top:0px; left:0px;}
.nivoSlider a.nivo-imageLink {position:absolute; top:0px; left:0px; width:100%; height:100%; border:0;
padding:0;margin:0; z-index:6; display:none;}
.nivo-slice {display:block;position:absolute;z-index:5;height:100%;}
.nivo-box {display:block;position:absolute;z-index:5;}
.nivo-caption {position:absolute;left:0px; bottom: -30px; background:#fff; color:#F88594; text-transform: uppercase; width: 100%;
z-index:50; border-right: 5px solid #;padding: 5px 0;}
.nivo-caption p {padding:0 20px;margin:0;font-size:14px;}
.nivo-caption a {display:inline !important;}
.nivo-html-caption {display:none;}
.nivo-directionNav a {position:absolute;top:45%;z-index:99;}
.nivo-prevNav {left:0px;}
.nivo-nextNav {right:0px;}
.slider {width:100%;}
.slider img {position:absolute;top:0px;left:0px;display:none;}
.slider a {border:0;display:block;}
.nivo-controlNav {display:none;}
.nivo-directionNav a {display:block;width:31px;height:34px;background:url(URL IMG FLECHAS) no-repeat; text-indent:-9999px;border:0;}
a.nivo-nextNav {background-position:-30px 0;right:15px;}
a.nivo-prevNav {left:15px;}
.nivo-caption {font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;}
.nivo-caption a {color:#efe9d1; text-decoration:underline;}
Si le quieres poner flechas en el slider, cambia url img flechas por cualquiera de estas imágenes:
Ya está, donde queramos poner el slider solamente ponemos este gadget:
<div id="slide" style="margin-bottom: 30px;"><div id="slider">
<a href="URL" target="_blank"><img src="URL IMG" width="790" height="270"/></a>
<a href="URL" target="_blank"><img src="URL IMG" width="790" height="270"/></a>
<a href="URL" target="_blank"><img src="URL IMG" width="790" height="270"/></a>
<a href="URL" target="_blank"><img src="URL IMG" width="790" height="270"/></a>
</div></div>
Width y height es para cambiar el tamaño del slider, podeís añadir un gadget/html, ponerlo en la cabecera. ¡Y ya está! Recuerda, creditos a -Mell-
