Nivo Slider - Simplificado e fofo -

  

Olá amados e amadas, tudo bem com vocês? Eu espero realmente que estejam! Aí, gente, eu estou tão agoniada, dois dias atrás, eu estava almoçando e sem querer mordi minha boca a tirar sangue, doeu o resto dos dias até que hoje está com uma afta! É muito desconfortável!

   Bem, indo para o tema da postagem, a Hazel-chan me pediu para ensinar a colocar slide no blog, ela disse que já tinha tentado usando tutoriais de outros blogs e ainda não tinha conseguido ao certo. Então por meio desta vou ensinar a vocês a usar o Nivo Slider, com os códigos simplificados e kawaizados por mim. Claro que eu não inventei esses códigos, os códigos originais são do blog http://www.wehearthtml.com/ , apenas modifiquei eles para algo mais simples e mais "fofo", por que tem rosa. Preview Aqui.

/* Imagens que aparecerão, altere o que está em itálico para o endereço das sua*/<div id="slider"><a href="seulink"><img src="https://31.media.tumblr.com/b14a14c285aa854c192d719fe33d017d/tumblr_n79yqm0LOS1rm9bxjo1_400.png" title="Legenda da Imagem" /></a><a href="seulink"><img src="https://24.media.tumblr.com/7dd7c04742158392d0a3a06be9c35c27/tumblr_n79yqm0LOS1rm9bxjo2_400.png" title="Legenda da Imagem" /></a><a href="seulink"><img src="https://31.media.tumblr.com/c1709a2bc6e1e89b312a674b4e562411/tumblr_n79yqm0LOS1rm9bxjo3_400.png" title="Legenda da Imagem" /></a></div>/* Style*/<style>/* Posição do slider- Não mecha!*/#slider     {position: relative;} #slider img {display: none;} #slider a {display: block;}
/* Dimensões do Slider- Altere de acordo com suas imagens e o tamanho que quer seu slide */.nivoSlider {width: 300px;height: 150px;} .nivoSlider img {width: 300px;height: 150px;}.nivo-slice {position: absolute;display: block;z-index: 5;height: 100%;}.nivo-box   {position: absolute;display: block;z-index: 5;}.slider     {width: 100%;} .slider a {border: 0;display: block;} .slider img {position: absolute;top: 0px;left: 0px;display: none;} 
/* Images- não mecha aqui.. */.nivoSlider a.nivo-imageLink {position: absolute;display: none;top: 0px;left: 0px;width: 100%;height: 100%;border: 0;padding: 0;margin: 0;z-index: 6; }
/* Legenda- pode se altear as cores*/.nivo-caption   {position: absolute;width: 96.8%;left: 0px;bottom: 0px;background: pink;color: #fff;text-transform: uppercase;padding: 5px;text-align:center;z-index: 50;}.nivo-caption p {margin: 0;font-size: 11px;}
/* Imagens de Navegação - corações, podes trocar por outra imagem*/.nivo-directionNav a {position: absolute;top: 45%;z-index: 99;cursor: pointer;}.nivo-prevNav {left:0px;} .nivo-nextNav {right:0px;}.nivo-directionNav a {display: block;width: 35px;height: 35px;background: url(http://static.tumblr.com/l2v8dwa/MKkn79x3y/sem_t__tulo-1.png) no-repeat;font:0px arial; margin-top:-11px;}.nivo-controlNav {display: none;}a.nivo-nextNav {background-position: -30px 0;right: 15px;} a.nivo-prevNav {left: 15px;}</style>
/* Script*/<script src="http://yourjavascript.com/1250421341/jquery-min.js" type="text/javascript"></script><script src="http://yourjavascript.com/3641231211/jquery-nivo-slider-pack.js" type="text/javascript"></script><script type="text/javascript">var $nv4wp = jQuery.noConflict();$nv4wp(window).load(function() {$nv4wp('#slider').nivoSlider({effect:'random', slices:15, // What animations and how many you want to be shownboxCols: 5, //For box animations boxRows: 3, //For box animations animSpeed: 400, // Slide transition speed pauseTime: 4000, //How long each slide will show startSlide:0, //Set what image will show firstdirectionNav:true, //True: if you want the next&prev buttons, False: if you don't wantdirectionNavHide:true, //True: the next&prev buttons will appear only in hoverkeyboardNav:true, //Use left & right arrowspauseOnHover:true, //Stop animation while hovering manualAdvance:false, //Force manual transitionscaptionOpacity:.6, //Change to play with the caption's opacityprevText: 'Prev', // Prev directionNav text nextText: 'Next', // Next directionNav text });}); </script></center>

<div style="position:absolute; top: 0px; left:0px;">

Aonde está com 0, substitua pelos valores de ondes queres, lembrando de que em top, quando maior o número mais ele desce, e menor, podendo até ser negativo ele sobe; e em left, quanto maior o número mais ele se afasta para direita e menor mais para esquerda.

Salve, e se estiver tudo certinho, coloque os créditos, haha. Mas se der algo errado quando fizerem esse tutorial, mesmo se seguirem os passos extramente certinhos, venham aqui, que eu vou ver se tem algo errado, mas para mim está tudo ok, como podem ver no preview.