FACEBOOK
INSTAGRAN


SEGUIDORES

segunda-feira, 16 de junho de 2014

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.
  Está tudo bem simples, primeiro crie um novo gadget html, onde você vai colar o código abaixo:

/* 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 shown
boxCols: 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 first
directionNav:true, //True: if you want the next&prev buttons, False: if you don't want
directionNavHide:true, //True: the next&prev buttons will appear only in hover
keyboardNav:true, //Use left & right arrows
pauseOnHover:true, //Stop animation while hovering 
manualAdvance:false, //Force manual transitions
captionOpacity:.6, //Change to play with the caption's opacity
prevText: 'Prev', // Prev directionNav text 
nextText: 'Next', // Next directionNav text 
});}); </script></center>

  Feito isso, leia com cuidado que nele já está descriminado tudo oque se precisa alterar, mas agora vamos ver como posicionamos o slider em qualquer lugar do layout. Salve o gadget, e o slide aparecerá aonde está a sidebar, mas para posicionar ele aonde você quer adicione acima de <div id="slider"> o código abaixo:
<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.  

8 comentários:

  1. Gaby não disse que passava aqui??
    Acho esse slide tão fofo, mas nunca tive muita paciência de colocá-lo, e já tentei inúmeras vezes.
    Ah, também estou com afita, odeio isso.
    ~kissus
    http://kawaiiyujo.blogspot.com.br/

    ResponderExcluir
  2. Este comentário foi removido pelo autor.

    ResponderExcluir
  3. Estou bem sim e você Unnie? Eu vivo mordendo a minha bochecha e a minha língua, é horrível, eu também vivo tendo afta, até porque eu sou alérgica a coisas ácidas. Espero que você melhore >///<
    Só observo Gosick ali :v É bem simples de se colocar, não esperava por isso, sempre achei que era algo complicado .-.

    Chu ~ >3<

    ResponderExcluir
  4. Vou bem, sim ^-^, eu o d e i o ficar com afta, sério, faz tempo que não fico, graças a deus porquê sei lá, é agoniante, espero que suma logo.
    Mas meu Deus, que rapidez '0', muito obrigada por atender meu pedido ♥♥

    O quê? É só isso? Achava que lá vinha um horror de códigos, porém foi bem fácil de entender este código, com toda certeza (se eu tiver paciência pra por) usarei no próximo lay do CP <333

    Beijos and Abraços,
    Porto do Amor ~ portodoamor.blogspot.com | Cherry Pump ~ cherry-pump.blosgpot.com

    ResponderExcluir
  5. Gente, eu quase não achei o lugar pra comentar haha
    Enfim, amei o slide, é muito kawaii *-* eu uso um lá no blog, mas não fui eu que fiz, então até agora não sabia como faz por minha própria conta. Obrigada pelo tuto!
    Abraços!

    Essie, Cherry Nerd (CN)

    ResponderExcluir
  6. Olá Gaby minha fofa sumida junto comigo huehue' ♥
    Você passou lá no GB e publicou um comentário e acidentalmente eu apertei em excluir em vez de publicas... opps! Por isso desculpa hehehe ~burra~.
    Eu prometo que voltarei lá no blog viu?
    Emfim indo pro seu post...
    Nossa moça, tadinha de você... (e da sua boca huehue'), deve doer muito, *u* é muito fofo o Slider *u* kawaii ~vo rouba~ huehue, é bem fácil de entender o código, se minha preguiça amiga sair eu vou colocar lá no blog *u* kisses!

    ResponderExcluir
  7. Yooo Gabychin!!
    Quanto tempo!! Sumi hihi Gomene.

    O lay esta tão lindo e colorido *u* amei <3

    Que lindo, do jeito q vc esta mostrando parece fácil.

    Afita é horrível, eu uso aparelho e vivo com afita, não da pra comer direito T_T

    Enfim, amei o lay
    kisuss
    My Universe Otaku

    ResponderExcluir
  8. Eu uso aparelho, afta é como se fosse meu sobrenome -qqq
    Amei o tutô! Bem simples e tals... Se bem que não gosto de rosa :s
    Kissus~ Alice's Kingdom

    ResponderExcluir


Fico muito feliz que estejas aqui! Adorarei ler e responder seu comentário, contanto que:
- Use um vocabulário sem palavras de baixo calão.
- Não ofenda ninguém em hipótese alguma.
- Deixe o link do seu blog, para eu poder retribuir a visita.