[TUTORIALES]Como colocar Slider a tu blog.

Me estoy obsecionando con onew.
Hello Pollitos? Sip, para este diseno.....voy a tratar de cambiar un poco el estilo de las entradas. Ya saben, una imagen y texto abajo, que tal ahora una imagen al lado(para sentirme cool)Pues como habia comentado antes, que iba a subir entradas los jueves y domingo(si dios, me lo permite)y como ven, hoy es jueves...y toca una entrada. Bueno... tambien quiero dar las gracias por sus lindos comentarios en la entrada pasada, muchos de ustedes llevan mucho tiempo conmigo y se los agradezco.(los amo~!!!)Sobre la sorpresa, quiero hacer un giveaway, pero no se cuando sera....No puedo decir fecha, ni nada. Pero ocurrira pronto. jejeje Hoy vengo con tutorial, que me solicitaron...El tutorial trata de como colocar un slider,(eso que cambia de imagen con efecto,pero todas en la mismo sitio)Se que hay muchos blogs que publicaron este tutorial,pero yo lo publicare a mi modo. Osea, como pueden ver, en esta plantilla o en la imagen que les dejare abajo(o la preview). Es muy limpio y sencillo(mas elegante)Bueno...Por que no empezamos?:


Nota: Dependiendo del tamaño de tus imagenes, asi de grande sera el tamaño tu slider.
| Vista previa aqui |
1.Vamos a ir a plantilla| Editar HTML| Buscar el siguiente codigo </head>
2.Arriba de </head>  Colocar este codigo:
<style type='text/css'>
/* <![CDATA[ */
 #w2bSlideContainer           {position: relative;display: block; top:0px; left:0px; right:0px;/*Ajuste as posição do slide*/}
 #w2bNivoSlider              { position:relative;
width:460px  !important; /*largura do slide*/height:273px  !important; /*Altura do slide*/
background:  #fff url("http://4.bp.blogspot.com/-TBMTXcO0VxM/T7dSfCUe9dI/AAAAAAAABgY/dmbkzgOPQI0/s1600/w2bLoader.gif") no-repeat 50% 50%;
margin: 20px auto 35px; }
 #w2bNivoSlider 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; /*Fonte da legenda*/Font-size: 14px; /*Tamanho da fonte da legenda*/background:#000; /*Cor de fundo da legenda*/color:#fff; /*Cor do texto da legenda*/-ms-filter:"alpha(opacity=80)";filter:alpha(opacity=80);opacity:.8; width: 630px;/*Largura da legenda*/ 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("") 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("nada") no-repeat;text-indent:-9999px;border:0;margin-right:3px}
 .nivo-controlNav a.active    {font-weight:bold;background-position:0 -22px}
/* ]]> */
</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/ifqwhnb/GBsm20q7d/jquery.nivo.slider.pack.js' type='text/javascript'/>
<script type='text/javascript'>
/* <![CDATA[ */
jQuery(document).ready(function($) {
 $('#w2bNivoSlider').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>

3.Ahora vamos a abrir un gadget y ahi colocas este codigo:
<div style="position: absolute; margin-top: -477px; left: -661px;">
<div id="w2bSlideContainer">
<div id="w2bNivoSlider">
<img src="URL DE TU IMAGEN" title=""/>
<img src="URL DE TU IMAGEN" title=""/>
<img src="URL DE TU IMAGEN" title=""/>
<img src="URL DE TU IMAGEN" title=""/>
</div>
</div></div>

*-477: Mientras mas lo aumentes mas subira, si disminuyes el numero ira abajo.
*-661: Si lo aumentas ira mas a a izquierda, menos a la derecha.

Pues la preview, no la hice tan wow, pero se ve el efecto(single ladies x2) ok, soy la unica que escucha musica para hacer sus entradas jajajajja. Espero que les guste mucho, cualquier duda no olvides dejarla en los comentarios o mi correo.
Recuerda dejar tu comentario~
Les dejo besos de cherryT.O.P
Att:Lee rae mi{dayi}

14 comentarios:

  1. Lindo tuto Dayi :3 y lindo el diseño del blog

    ResponderEliminar
  2. No eres la única que para escribir las entradas escucha música xD Yo igual!!
    Gran tutorial y sencillo! me gusta♥
    Saludos♥

    Larita

    ResponderEliminar
  3. Gracias por el tutorial! <3
    intentare ponerlo en la nueva plantilla de mi blog!:)
    saludos :^)

    ResponderEliminar
  4. (´• ω •`)ノ Holaaa!!!
    que hermoooosoooo el diseño del blog!!
    la imagen al costado de las entradas la lleva XDDD gracias por el tutorial!

    穛 S4Ku SEK4i®

    ResponderEliminar
  5. Hola!
    Estaba buscando un tutorial como este y el post me ha caído como anillo al dedo jajajajaja
    Todavía estoy analizando en que usarlo pero si quiero agregarlo a mi blog.
    Gracias por el tutorial.
    Besos

    ResponderEliminar
  6. Hola!!
    Gracias! este tutorial me servirá mucho! :3
    PD: la nueva plantilla esta maravillosa~
    Saluditos~

    ResponderEliminar
  7. Gracias por el tutorial
    creo que le agregare uno a mi blog
    Saludos!!

    ResponderEliminar
  8. Me gusta mucho la slider!
    Y si se vio cool la entrada XD
    Estare esperando ese giveaway aunque nunca corro con suerte XD
    Bueno si puedes podrias hacer un tuto sobre como tienes u menu, es que me encanto que esten torcidias y luego se muevan!!
    Gracias
    Saludos ^^

    ResponderEliminar
    Respuestas
    1. Me alegra que te guste este tuto jajaja y claro que puedo hacer la tutorial de ese menu.cuando lo haga te avisare.

      Saludos

      Eliminar
  9. Excelente tutorial! se agradece mucho tus tutoriales ^^
    Saludoss!

    ResponderEliminar
  10. Hola mi loquera! XD

    que chulo!! gracias es muy util

    ResponderEliminar
  11. ¡Hola Guapa!,
    He echo el tutorial pero no se me queda fijo, es decir cuando pongo otro tipo de zoom (de pantalla) se mueve en vez de quedarse fijo. En cambio el tuyo aunque cambies la resolución de la pantalla no se mueve, ¿Porque puede ser? Un beso

    ResponderEliminar
    Respuestas
    1. Este comentario ha sido eliminado por el autor.

      Eliminar

Puedes dejar cualquier tipo de comentario(*≧m≦*)Pero si el comentario no es de gusto del blog sera borrado..
No insultes.
No spam(;¬_¬)
Si tienes algo que decirme privado:
dayi123466@gmail.com