Tutorial:Slider en la cabecera ♥


Hola ¡¡ como estan?  Bueno este tutorial me lo pidio Sofia ,y perdon por el retraso ,pues estube ocupadita,de que trata el tutorial? es un slider en la cabecera , el slider es cuando unas imagenes estan en movimiento, y hasta puedes pasar al siguiente imagen.,yo tengo el slide en la cabecera .Bueno si no me entendieron aqui una imagen :

A eso me refiero al aser clic en la imagen te llevara a la url de la pagina que pusiste,y tiene unas flechitas para cambiar de imagen.Si les gusta sigan los pasitos:
Primero vamos a plantilla / Edicion HTML
Buscamos </head> (Con ctrl+F ) y al encontrarlo pegar el siguiente codigo abajo de </head>

<style type='text/css'>
/* <![CDATA[ */
 #lunSlideContainer           {position: relative;display: block; top:0px; left:0px; right:0px;}
 #lunNivoSlider              { position:relative;
width:270px;height:170px;
background:  #fff url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKgC70ejMHRl0StXjLwhqB1viiMZed7n7CSjRc081HGFjuvGFVds8t8ADBXAtiQRAyzDmJ-w7nXJ6bbcUr175CnYX9k1dwQXDM9_4hX7wvPDMhd6X09Cqi2hJXWXWkE85pFzRcEDGFHRpx/s1600/w2bLoader.gif") no-repeat 50% 50%;
margin: 20px auto 35px;
border: 6px solid #E6ADFF; }
 #lunNivoSlider img           {position:absolute; top:0; left:0;  display:none}
 .nivoSlider                  {position:relative;width:100%;height:auto;}
 .nivoSlider img              {position:absolute;top:0;left:0}
 .nivo-main-image             {display:block!important;position:relative!important;width:100%!important}
 .nivoSlider a.nivo-imageLink {position:absolute;top:0;left:0;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%;top:0}
 .nivo-box                    {display:block;position:absolute;z-index:5;overflow:hidden}
 .nivo-box img                {display:block}
 .nivo-caption                {padding: 5px;
font-family: Arial,sans-serif;position:absolute; Font-size: 14px; background:#000; color:#fff; -ms-filter:"alpha(opacity=80)";filter:alpha(opacity=80);opacity:.8; width: 238px; z-index:8;}
 .nivo-caption p              {padding:2px;margin:0}
 .nivo-caption a              {display:inline!important}
 .nivo-html-caption           {display:none}
 .nivo-directionNav a         {position:absolute;top:45%;z-index:9;cursor:pointer;display:block;width:30px;height:30px;
background: url("Url de las flechas") no-repeat;text-indent:-9999px;border:0}
 .nivo-prevNav                {left:10px}
 .nivo-nextNav                {background-position:-30px 0!important;right:10px}
 .nivo-controlNav             {position:absolute;left:0;right:0;bottom:-35px;text-align:center}
 .nivo-controlNav a           {position:relative;z-index:9;cursor:pointer;display:inline-block;width:22px;height:22px;
background:url("Url de las bolitas") no-repeat;text-indent:-9999px;border:0;margin-right:3px}
 .nivo-controlNav a.active    {font-weight:bold;background-position:0 -22px}
/* ]]> */
 a.tablo{
margin-bottom:10px;
background:#D5F0FB;
width:90px;
text-decoration:italic;
border:1px dotted #E6ADFF
;
border-radius:33px;
color:#E6ADFF
;
display:inline-block;
text-align:center;
}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='http://static.tumblr.com/y66747w/9hlmdpcpa/nivoslider.js' type='text/javascript'/>
<script type='text/javascript'>
/* <![CDATA[ */
jQuery(document).ready(function($) {
 $('#lunNivoSlider').nivoSlider({
  effect           : 'random',
  slices           : 10,
  boxCols          : 8,
  boxRows          : 4,
  animSpeed        : 500,
  pauseTime        : 4000,
  startSlide       : 0,
  directionNav     : true,
  directionNavHide : true,
  controlNav       : true,
  keyboardNav      : false,
  pauseOnHover     : true,
  captionOpacity   : 0.8
 });
});
/* ]]> */
</script>
Para personalisarlo:
270:Tamaño ancho del slider
170:Altura del slider
E6ADFF del borde del slider
Para sacar la url de las siguiente:
Url de las flechas
Url de las bolitas
yo les dare algunos ¡escogen el color que mas les guste y dan clic derecho para copiar la url de la imagen.
Para las bolitas:
Para las flechitas:


Y aora lo guardamos y se van a diseño y añaden un nuevo gadget en HTML/Javascript pegan el siguiente codigo:

<div style="position: absolute; margin-top: -353px; left:68px;"><div id="lunSlideContainer">
<div id="lunNivoSlider">
<a href="Url de la pagina"><img src="Url de la imagen" /></a>
<a href="Url de la pagina"><img src="Url de la imagen" /></a>
</div>
</div></div>

Cambiar la posicion:
353: si bajas la cantidad el slide bajara mas abajo y si subes la cantidad ,subira mas ariba
68:si aumentas se ira mas a la derecha y si disminuyes se ira mas al lado izquierdo
Pruebenlo y me entenderan n.n
Bueno cambian lo demas por lo que indican
y listo y siquieres aumentar mas imagenes en el slide solo aumenta el siguiente codigo debajo de  <div id="lunNivoSlider">
<a href="Url de la pagina"><img src="Url de la imagen" /></a>
Bueno eso es todo ufff, ya sabia que iba a tardar en aser este tutorial ,por que es mucho codigo y esplicarles x.x ¡ pero bueno todo sea por ustedes para que decoren su blog  y me avisan si tienen algun problema¡ no olviden dar creditos si lo usan ok? ¡ se los agradecere ,bueno el concurso que hiba aser aun lo toy pensando y mas ratito colocare de que se tratara .

11 comentarios :

  1. me encanto es tutorial sera de mucha ayuda en un proximo diseño!!!

    ResponderEliminar
  2. wow Q' hermozo tutorial!! Quedario muy hermozo *.*

    ResponderEliminar
  3. Que bien que lo hayas publicado!!!! Desde que hiciste la remodelación, me he preguntado como se hacía, pero a mis adentros

    ResponderEliminar
  4. ohh luna de que tamano tienen que ser la fotos?

    ResponderEliminar
    Respuestas
    1. luna ya lo resolvi!!!ohh y te di creditos yap!!ok!esta en la pagin de creditos!

      Eliminar
  5. Algo ya me decía que lo que estaba en tu cabecera era un slider *-* sugoi!!! buen tuto

    ResponderEliminar
  6. waaa lunany que maravilla !!
    gracias !!
    esos tutoriales de efectos me facina
    gracias !!
    saludos linda bunny

    ResponderEliminar
  7. muchisimas gracias!! no sabes lo mucho que lo queria ... pero la mayoria de las cosas como esta no las digo XD ... pero bueno.. muchas gracias y cualquier duda que tenga.. vendre :)

    ResponderEliminar
  8. Luna, lo estoy intenado pero no puedo!! TT-TT ayudame porfas!! please!! ayudame si?? :(

    ResponderEliminar
  9. Holaaaa, estoy siguiendo los pasos pero parece que no se puede x.x

    ResponderEliminar

Hola :3 Bienvenidos a Lunany-kawaii
Debera seguir las siguientes reglas:
-No insultos
-No spam
-Ni peleas
gracias ♥