Nivo Slider

Bah, já é dia 30! Aff' 14 já tem aula :/

Estou um pouco feliz por ver meus amigos todos juntos de novo, mas por um lado, estou mal por ter que estudar! Preciso de um feriado de no mínimo seis meses, duas vezes por ano!

Então, alguém já ouviu falar do nivo slider neh? Ele é um slide bem fofinho que pode colocar no cabeçalho do seu blog, fica bem bonitinho ^^ Para ver como é apenas clique aqui! Lindo não?

GOH? 'kk

Então, curtiram a página?

Poxa, se curtiram muito obrigado por apoiar essa nova ''brincadeira'', se não curte aqui?

Vamos para o tutorial de uma vez neh? Eu acho que ando falando muito nas postagens ultimamente!

Abaixo de </head> no seu HTM cole o seguinte código:

<style type="text/css">

/* <![CDATA[ */

 #w2bSlideContainer           {position: relative;display: block; top:0px; left:0px; right:0px;/*Ajuste a 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/AVvXsEhniQegizYWB4z5FWTp8E4bSdmhdXHyZA6OOKre7YmFFw0c9qiXehloxKhQ_SCxo8uZo4nctrANmDagb21ZMVmtBKGfl7ThvYqNftNvE1XfqhoEHGdzRjjeslELCjRrPpCBG35rk9j__tOU/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/y66747w/9hlmdpcpa/nivoslider.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>

Os lugares destacados vocês trocam como querem.

E após isso apenas crie um widget de HTML/JavaScript e cole o código abaixo

<div id="w2bSlideContainer">

<div id="w2bNivoSlider">

<a href="Link_Do_Slide1"><img src="URL_Da_Imagem1" title="Legenda_Da_Imagem1"/></a>

<a href="Link_Do_Slide2"><img src="URL_Da_Imagem2" title="Legenda_Da_Imagem2"/></a>

<a href="Link_Do_Slide3"><img src="URL_Da_Imagem3" title="Legenda_Da_Imagem3"/></a>

<a href="Link_Do_Slide4"><img src="URL_Da_Imagem4" title="Legenda_Da_Imagem4"/></a>

</div>

</div>

Troque as partes necessárias, e visualize! As setas e os botões vocês terão que fazer quenem a Liah fez, assim:

Tipo, uma do lado da outra; E uma acima da outra;

E ai, gostaram doos seus novos slides?