Nivo Slide
Autor: Alan Felipe | Publicado: 2016-02-15T18:09:00-02:00


&nbsp; Olá pessoas, como estão? Espero que estejam bem, afinal faz um tempo que não posto aqui, não é mesmo? Minhas aulas começaram, é meu último ano no ensino médio, então não esperem postagens com muita frequência. A alguns dias eu estava precisando de um slide bem simples e decidi pegar o Nivo Slide, então mudei algumas coisinhas nele e o resultado me agradou muito, então vou compartilhar ele com vocês!




1. Primeiro de tudo, vá em Modelo &gt; Editar HTML &gt; Clique na caixa de códigos e procure por &lt;head&gt; , abaixo desta tag você cola o seguinte script:

&lt;script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/&gt;
&lt;script src='http://static.tumblr.com/y66747w/9hlmdpcpa/nivoslider.js' type='text/javascript'/&gt;
&lt;script type='text/javascript'&gt;/*
&lt;![CDATA[ */jQuery(document).ready(function($) { $('#w2bNivoSlider').nivoSlider({ &nbsp;effect &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; : 'random', &nbsp;slices &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; : 10, &nbsp;boxCols &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;: 8, &nbsp;boxRows &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;: 4, &nbsp;animSpeed &nbsp; &nbsp; &nbsp; &nbsp;: 500, &nbsp;pauseTime &nbsp; &nbsp; &nbsp; &nbsp;: 4000, &nbsp;startSlide &nbsp; &nbsp; &nbsp; : 0, &nbsp;directionNav &nbsp; &nbsp; : true, &nbsp;directionNavHide : true, &nbsp;controlNav &nbsp; &nbsp; &nbsp; : true, &nbsp;keyboardNav &nbsp; &nbsp; &nbsp;: false, &nbsp;pauseOnHover &nbsp; &nbsp; : true, &nbsp;captionOpacity &nbsp; : 0.8 });});/* ]]&gt; */
&lt;/script&gt;

Você não faz nenhuma alteração.

2.&nbsp;Agora procure por&nbsp;]]&gt;&lt;/b:skin&gt; e acima cole o seguinte código, fazendo alterações apenas nas linhas com legenda, as que não possuem legenda, você não mexe.

#w2bSlideContainer { /* Container do Slide, não mexa!*/
position: relative; display: block; top:0px; left:0px; right:0px; }
#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 p { padding:2px; margin:0; }
.nivo-caption a { display:inline!important; }
.nivo-html-caption { display:none; }
.nivo-prevNav { left:10px; }
.nivo-nextNav { background-position:-30px 0!important; right:10px; }
.nivo-controlNav { position:absolute; right:10px; bottom:0px; text-align:center; }

#w2bNivoSlider { /* Caixa do Slide, mude apenas as linhas que tem legenda */
border: 5px solid #ddd; /* borda do slide */
width:600px &nbsp;!important; /* largura do slide */
height:230px &nbsp;!important; /* altura do slide */
background: &nbsp;#fff url("https://vikingco.com/static/img/loader.gif") no-repeat 50% 50%; /* barra de carregamento que mostra ao carregar os slides, não é necessário trocar, mas caso queita, MUDE APENAS O LINK */
margin: 0px auto 35px; position:relative;
}
.nivo-caption { /* Aqui é a parte de edição da legenda, mude o que tem legenda */
text-align: left; padding: 15px 0px 15px 0px; font-family: Arial,sans-serif; position:absolute; bottom: 0;-ms-filter:"alpha(opacity=80)"; filter:alpha(opacity=80); opacity:.8; z-index:8; text-indent: 15px;
Font-size: 14px; /*Tamanho da fonte da legenda*/
background:#000; /*Cor de fundo da legenda*/
color:#fff; /*Cor do texto da legenda*/
width: 600px; /*Largura da legenda, mude até ficar certo com o slide*/
}
.nivo-directionNav a { /* Aqui é a parte de edição das setas, mude o que tem legenda */
position:absolute; top:45%; z-index:9; cursor:pointer; display:block; width:30px; height:30px; text-indent:-9999px; border:0;
background: url("http://i.imgur.com/GQ8QPGR.png") no-repeat; /* Para trocar as setas, você deve mudar o link desta linha, MAS NÃO HÁ NECESSIDADE */
}
.nivo-controlNav a { /* Aqui é a parte de edição das bolinhas, mude o que tem legenda */
position:relative; z-index:9; cursor:pointer; display:inline-block; -moz-webkit-transition-duration: .5s; -webkit-transition-duration: .5s; bottom: 16px; text-indent:-9999px; margin-right:5px;
height:13px; /* altura da bolinha */
width:13px; /* largura da bolinha */
background: rgba(255,255,255,0.3); /* fundo da bolinha */
border: 3px solid #fff; /* cor da borda */
-webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; /*bordas arredondadas */
}
.nivo-controlNav a.active { /* Aqui é a parte de edição das bolinhas ao clicar nelas/hover, mude o que tem legenda */
-moz-webkit-transition-duration: .5s; -webkit-transition-duration: .5s;
background: rgba(255,255,255,0.8); /* fundo da bolinha ao clicar/hover */
}
3. Feito as alterações necessárias, salve.

4. Agora vá em Layout, adicione um Gadget HTML/JavaScript e cole o seguinte código nele:

&lt;div id="w2bSlideContainer"&gt;
&lt;div id="w2bNivoSlider"&gt;
&lt;a href="LINK"&gt;&lt;img src="LINK_DA_IMAGEM" title="Título do Slide" /&gt;&lt;/a&gt;
&lt;a href="LINK"&gt;&lt;img src="LINK_DA_IMAGEM" title="Título do Slide" /&gt;&lt;/a&gt;
&lt;a href="LINK"&gt;&lt;img src="LINK_DA_IMAGEM" title="Título do Slide" /&gt;&lt;/a&gt;
&lt;a href="LINK"&gt;&lt;img src="LINK_DA_IMAGEM" title="Título do Slide" /&gt;&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;

5. Faça as devidas edições e salve.

As bolinhas vão aparecer automaticamente, para colocar mais slides apenas copie de &lt;a até &lt;/a&gt; e cole antes da primeira &lt;/div&gt; . A quantidade de Link é a mesma da quantidade de bolinhas.

Tchau :3

Créditos: x