Nivo Slider
Autor: Anny S. | Publicado: 2013-08-15T14:44:00-07:00






Sim gente, resolvi tomar vergonha na cara e aparecer por aqui. Foi sacanagem da minha parte sumir assim sem dar explicações, eu sei. Mas agora estamos no último semestre e as provas finais começam a chegar, como sou por natureza uma aberração em matemática, física e exatas em geral, vocês devem imaginar como é. Fora os trabalhos, pra vocês terem uma noção tenho até um curta metragem pra fazer. E isso dá trabalho hein? Confesso também que ando bem desanimada para postar. Sobre o 8 on 8 não sei o que vou fazer. Aquela semana choveu muito e não consegui tirar as fotos. "Mas Anny, dentro de casa não chove!". Eu sei, mas chuva traz preguiça que por sua vez traz desânimo e vontade de não fazer nada além de ficar deitadinha na cama com o notebook. Alguém me entende?&nbsp; Mas... Ball forward!

Quem estava com saudades de tutoriais se manifeste! haha Como estou super sem criatividade ultimamente (culpa da chuva e do frio, j-u-r-o!) e sei que vocês sentem falta dos tutoriais, é isso que vamos ter pra hoje!






Esse tutorial aprendi num blog que para meu desespero descobri hoje ter sido excluído. Sorte a minha ter o slide no blog e poder compartilhar com vocês o código. #MeAmem!



O slide vai ficar mais ou menos assim (dependendo das suas configurações):





Não vou ensinar especificamente um lugar para colocar, mas você pode por no cabeçalho (como o meu) ou mesmo no topo das postagens em tamanho grande. Se você quiser colocar no cabeçalho recomendo ler com atenção&nbsp;este post do falecido&nbsp;Cherry Bomb&nbsp;#TodosChoram.







Os códigos são grandes, então clique em "leia mais"!







Procure por&nbsp;}]]&gt;&lt;/b:skin&gt; (Ctrl + F) e acima dele cole o seguinte código:








/* The Nivo Slider styles */

#slider {position:relative;}

#slider img {position:absolute; top:0px; left:0px;

display:none;}

#slider a {border:0; display:block;}

.nivoSlider {position:relative; width: 556px; /* largura */ height: 440px;&nbsp;/* altura */&nbsp;}
.nivoSlider img {position:absolute; top:0px; left:0px;}

/* If an image is wrapped in a link */

.nivoSlider a.nivo-imageLink {position:absolute; top:0px;

left:0px; width:100%; height:100%; border:0;

padding:0;margin:0; z-index:6; display:none;}

/* The slices and boxes in the Slider */

.nivo-slice

{display:block;position:absolute;z-index:5;height:100%;}

.nivo-box {display:block;position:absolute;z-index:5;}

/* Caption styles */

.nivo-caption {position:absolute;left:0px; bottom:0px;

background: #ccc;&nbsp;/* Cor de fundo do título */&nbsp;&nbsp;color: #fff;&nbsp;/* Cor do título */&nbsp;&nbsp;text-transform: uppercase; width: 100%;
z-index:50; border-right: 5px solid #;padding: 5px 0;}

.nivo-caption p {padding:0 20px;margin:0;font-size:14px;}

.nivo-caption a {display:inline !important;}

.nivo-html-caption {display:none;}

.nivo-directionNav a

{position:absolute;top:45%;z-index:99;cursor:pointer;}

.nivo-prevNav {left:0px;}

.nivo-nextNav {right:0px;}

/*============================*/

/*=== Custom Slider Styles ===*/

/*============================*/

.slider {width:100%;}

.slider img

{position:absolute;top:0px;left:0px;display:none;}

.slider a {border:0;display:block;}

.nivo-controlNav {display:none;}

.nivo-directionNav a

{display:block;width:31px;height:34px;background:url(http://3.bp.blogspot.com/-jHZ1kB65wgQ/UDp__7gnPwI/AAAAAAAACck/y3X8PV6EFuQ/s1600/s-12.png)

no-repeat;&nbsp;/* imagem das setinhas */&nbsp;text-indent:-9999px;border:0;
}

a.nivo-nextNav {background-position:-30px 0;right:15px;}

a.nivo-prevNav { left:15px;}

.nivo-caption {font-family:"Trebuchet MS", Arial,

Helvetica, sans-serif;}

.nivo-caption a {color:#efe9d1; text-decoration:underline;}








As únicas coisas que você precisa alterar são as negritadas. Principalmente o tamanho (width e height).







Agora procure por &lt;/head&gt; e acima dele cole:








&nbsp; &nbsp;&lt;script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'/&gt;

&lt;script src='http://static.tumblr.com/ifqwhnb/GBsm20q7d/jquery.nivo.slider.pack.js' type='text/javascript'/&gt;

&lt;script type='text/javascript'&gt;

var $nv4wp = jQuery.noConflict();

$nv4wp(window).load(function() {

$nv4wp(&amp;#39;#slider&amp;#39;).nivoSlider({

effect:&amp;#39;random&amp;#39;,

slices:15, // For slice animations

boxCols: 4, // For box animations

boxRows: 2, // For box animations

animSpeed:500, // Slide transition speed

pauseTime:3000, // How long each slide will show

startSlide:0, // Set starting Slide (0 index)

directionNav:true, //Next and Prev

directionNavHide:true, //Only show on hover

controlNav:true, // 1,2,3... navigation

controlNavThumbs:false, // Use thumbnails for Control Nav

controlNavThumbsFromRel:false, // Use image rel for thumbs

controlNavThumbsSearch: &amp;#39;.jpg&amp;#39;, // Replace this with...

controlNavThumbsReplace: &amp;#39;_thumb.jpg&amp;#39;, // ...this in thumb Image src

keyboardNav:true, //Use left and right arrows

pauseOnHover:true, //Stop animation while hovering

manualAdvance:false, //Force manual transitions

captionOpacity:0.8, //Universal caption opacity

prevText: &amp;#39;Prev&amp;#39;, // Prev directionNav text

nextText: &amp;#39;Next&amp;#39;, // Next directionNav text

beforeChange: function(){}, // Triggers before a slide transition

afterChange: function(){}, // Triggers after a slide transition

slideshowEnd: function(){}, // Triggers after all slides have been shown

lastSlide: function(){}, // Triggers when last slide is shown

afterLoad: function(){} // Triggers when slider has loaded

});

});

&lt;/script&gt;








Visualize e se estiver tudo ok salve.&nbsp;



O slide ainda não irá aparecer. Para mostrá-lo vá até Layout e adicione em um lugar estratégico um gadget de HTML/JavaScript. Dentro dele cole:








&lt;div id="slide"&gt;&lt;div id="slider"&gt;

&lt;a href="Link do Post" target="_blank"&gt;&lt;img src="Link da Imagem" title="Título do Post" width="350" height="210" /&gt;&lt;/a&gt;

&lt;a href="Link do Post" target="_blank"&gt;&lt;img src="Link da Imagem" title="Título do Post" width="350" height="210" /&gt;&lt;/a&gt;

&lt;a href="Link do Post" target="_blank"&gt;&lt;img src="Link da Imagem" title="Título do Post" width="350" height="210" /&gt;&lt;/a&gt;

&lt;a href="Link do Post" target="_blank"&gt;&lt;img src="Link da Imagem" title="Título do Post" width="350" height="210" /&gt;&lt;/a&gt;

&lt;/div&gt;&lt;/div&gt;








Altere o que se pede e seja feliz!



Lembrando que&nbsp;você deve alterar&nbsp;height e width conforme o tamanho que estipulou lá no primeiro código!



Espero que consigam e tenham gostado!&nbsp;