Nivo Slider

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?  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 este post do falecido Cherry Bomb #TodosChoram.

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

Procure por }]]></b:skin> (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; /* altura */ } .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; /* Cor de fundo do título */  color: #fff; /* Cor do título */  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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPm1O8RSMOrxzKc3X7CVjeuuW_70mKHhP9doN8ITfUdQGEuxXzdL-Qzt7OnT4Hfd_uYlru_nC4fBuHoQycShTaS1jbUhGFQ5XFoKrMG6SRI8T9Oe-1Va2zNtlwORs6WxlAe-r4GpfAv0sB/s1600/s-12.png)

no-repeat; /* imagem das setinhas */ 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 </head> e acima dele cole:

   <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/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'>

var $nv4wp = jQuery.noConflict();

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

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

effect:&#39;random&#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: &#39;.jpg&#39;, // Replace this with...

controlNavThumbsReplace: &#39;_thumb.jpg&#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: &#39;Prev&#39;, // Prev directionNav text

nextText: &#39;Next&#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

});

});

</script>

Visualize e se estiver tudo ok salve. 

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:

<div id="slide"><div id="slider">

<a href="Link do Post" target="_blank"><img src="Link da Imagem" title="Título do Post" width="350" height="210" /></a>

<a href="Link do Post" target="_blank"><img src="Link da Imagem" title="Título do Post" width="350" height="210" /></a>

<a href="Link do Post" target="_blank"><img src="Link da Imagem" title="Título do Post" width="350" height="210" /></a>

<a href="Link do Post" target="_blank"><img src="Link da Imagem" title="Título do Post" width="350" height="210" /></a>

</div></div>

Altere o que se pede e seja feliz!

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

Espero que consigam e tenham gostado!