slider

C-box ¿Alguna duda?
Aqui va el código de tu c-box

Top comentaristas

viernes, 14 de junio de 2013

Desbloquear cabecera + Slider en cabecera o donde quieras


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-


19 comentarios:

  1. aw si yo me acuerdo de ese tuto es precioso

    ResponderEliminar
  2. wooow primera vez que leo este tutorial no tenia idea sobre esto.... quiero hacer mi pedido asi que te dejo el render

    http://animespirit.com.br/uploads/galeria/imagem/render-renders-games-blue-211389,070820101912.png

    que el tamaño la verdad me da igual que no sea tangrande si :D

    quiero que diga ♥Saku-Chan♥ y en algun lado http://sakusekai.blogspot.com la espero si falta algo avisame :D

    ResponderEliminar
  3. Ui por dios , eso parece dificil jaja. No hago esas cosas tan raras xd, pero me parece muy interesante!
    Me alegro qe te guste el comic de inuyasha. Y me alegro que te guste el diseño! Adoro a lamu ^^

    ResponderEliminar
    Respuestas
    1. Jajaja si xD Es verdad me encantó el diseño jejeje

      Eliminar
  4. Muchas gracias por compartir el tuto nene!! se agradece mucho n_n

    ResponderEliminar
  5. No había caído que se podía utilizar también de esta manera.
    Y me gusta la forma tuya de desbloquear la cabecera. Es mucho más fácil que la manera en la que yo lo hacía. Muchas gracias ^^

    ResponderEliminar
  6. Gracias por el tuto *O*

    Saludos y se cuida!!

    ResponderEliminar
  7. Yo no sabia que se podía hacer eso, gracias por el tuto *-*

    Saludos!!!

    ResponderEliminar
  8. Muchísimas gracias por el tutorial! Te daré los créditos en la sección correspondiente! :D Te gustaría intercambiar publicidad?
    Besos.

    ResponderEliminar

Tutoriales Recursos
Descargas Afiliados
Afilianos Reflexiones
Dibujo Historias