[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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPZERcfPF7sVV9hPSefdNowKtO22GlMKhzNfTeXiirTdCFVTYHFrvsqAreViFoTQ4sGnpu7tkKsiICKwBMHHmYq08GdV37eYkATTVDF0v-3ErV-DP_Z3FqWRfAUfc6q-HyHVHPt_0pTftC/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}