Tutorial - Colocando o Nivo Slider

 

Boa tarde, pessoal.

Bom, resolvi deixar nossas quatro últimas vagas para serem entregues como prêmio em alguns joguinhos bobos que teremos por aqui, principalmente quando eu estiver com uma certa preguiça de postar. Fiquem sempre atentos, principalmente para os que querem ser afiliados ao blog. Pretendo fazer hoje mesmo um desses jogos, valendo duas vaguinhas.

Para essa segunda postagem, trouxe um tutorial que todos já estão carecas de verem, mas como me pediram eu decidi fazer, principalmente para fazer parte do nosso arquivo de tutoriais. O tutorial vai ensiná-los a colocar o famoso Nivo Slider, que é esse slide que todo mundo agora está usando e que eu, particularmente, acho super útil e lindo. Usei o tutorial do Cherry Bomb, mas com o código já atualizado por causa daquele erro que encontrei.

1. Vá até editar HTML e procure por </head>. Abaixo da tag, cole:

<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:640px  !important; /*largura do slide*/height:300px  !important; /*Altura do slide*/

background:  #fff url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8NSgMcz0t5qWKgpejZT_m-5hRUjj6WxUuYGEVXC8oz6uQKi5sSSUrYhcZ9z4IbnDAWhr8hx4EJGTFVCbuiUL3YNr4CVoPXe8oewrKTa4VVfB9XwB6jFViM1wiS6xCP6m4O_tPCZOoV-Nt/s1600/w2bLoader.gif") no-repeat 50% 50%;

margin: 20px auto 35px;

border: 3px solid #000;/*Coloque borda se quiser*/ }

 #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("URL_IMG_SETA") 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_IMG_BULLETS") 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>

2. Após editar as partes que possuem instruções, crie um gadget de HTML/JavaScript e nele, cole:

<div id="w2bSlideContainer">

<div id="w2bNivoSlider">

<a href="LINK_DO_SLIDE_1"><img src="URL_DA_IMAGEM_1" title="LEGENDA DA IMAGEM 1"/></a>

<a href="LINK_DO_SLIDE_2"><img src="URL_DA_IMAGEM_2" title="LEGENDA DA IMAGEM 2"/></a>

<a href="LINK_DO_SLIDE_3"><img src="URL_DA_IMAGEM_3" title="LEGENDA DA IMAGEM 3"/></a>

<a href="LINK_DO_SLIDE_4"><img src="URL_DA_IMAGEM_4" title="LEGENDA DA IMAGEM 4"/></a>

</div>

</div>

Edite tudo e salve. Lembrem-se: URL_IMG_SETA é onde você coloca a url das setinhas, se for usá-las. Se o seu slide for mais na opção estética como eu usei naquele template da Demi, não precisa mudar nada.