Tutorial - Nivo Slide

|| ||
Yoo, minna-san~ ♥
 
Não posto muito esses tipos de tutoriais, então irei aproveitar essa chance, espero que gostem do tuto, é um Nivo Slide, eu pessoalmente adoro o efeito que esse slide faz, mas só tem um problema, Não tem setinhas nem nada para clicar nos links, o jeito é esperar vir a imagem para poder clicar na novidade que você querm, mas nada é perfeito né? Cada um com suas qualidades e defeitos. Role mais aos animes e filmes~
 
Bom, ontem vi todo o Live action XXXHolic. E tem um novo site de anime. Se chama AnimeYokai, eu gostei do site muito bom, tem animes legendados, dublados, doramas, live action e mangás! Ahh e sem esquecer os tokusatsus, ainda é bem novo mas eu recomendo, cheguem nele clicando aqui. Acabei de ver K-Project, vi todo o Live action ontem também e estou começando um novo anime, Arcana Famiglia.

Nivo Slide
Script
1. Vá em seu HTML e cole abaixo de </head>.
<style type="text/css">
 /* <![CDATA[ */
  #w2bSlideContainer           {position: relative;display: block; top:0px; left:0px; right:0px;/*Ajuste as posição do slide*/}
  #w2bNivoSlider              { position:relative;
 width:640px  !important; /*largura do slide*/height:300px  !important; /*Altura do slide*/
 background:  #fff url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDk6KAWzF6nJWb_4eF-5pAjdobzVkMetIsyB5nyQI14McEaO9PcCWqPiiWBjbZR-lpCpfogKTKVasMWcYsTU3aQe_EbPLQOtli6RgqlAwm404hlrVqIXys5BnDdG2qQ63FF2uCbneQ3_TG/s1600/w2bLoader.gif") no-repeat 50% 50%;
 margin: 20px auto 35px;
 border: 3px solid #000;/*Coloque borda se quiser*/ }
  #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                {padding: 5px;
 font-family: Arial,sans-serif;position:absolute; /*Fonte da legenda*/Font-size: 14px; /*Tamanho da fonte da legenda*/background:#000; /*Cor de fundo da legenda*/color:#fff; /*Cor do texto da legenda*/-ms-filter:"alpha(opacity=80)";filter:alpha(opacity=80);opacity:.8; width: 630px;/*Largura da legenda*/ z-index:8;}
  .nivo-caption p              {padding:2px;margin:0}
  .nivo-caption a              {display:inline!important}
  .nivo-html-caption           {display:none}
  .nivo-directionNav a         {position:absolute;top:45%;z-index:9;cursor:pointer;display:block;width:30px;height:30px;
 background: url("URL_IMG_SETA") no-repeat;text-indent:-9999px;border:0}
  .nivo-prevNav                {left:10px}
  .nivo-nextNav                {background-position:-30px 0!important;right:10px}
  .nivo-controlNav             {position:absolute;left:0;right:0;bottom:-35px;text-align:center}
  .nivo-controlNav a           {position:relative;z-index:9;cursor:pointer;display:inline-block;width:22px;height:22px;
 background:url("URL_IMG_BULLETS") no-repeat;text-indent:-9999px;border:0;margin-right:3px}
  .nivo-controlNav a.active    {font-weight:bold;background-position:0 -22px}
 /* ]]> */
 </style>
 <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
 <script src='http://static.tumblr.com/y66747w/9hlmdpcpa/nivoslider.js' type='text/javascript'/>
 <script type='text/javascript'>
 /* <![CDATA[ */
 jQuery(document).ready(function($) {
  $('#w2bNivoSlider').nivoSlider({
   effect           : 'random',
   slices           : 10,
   boxCols          : 8,
   boxRows          : 4,
   animSpeed        : 500,
   pauseTime        : 4000,
   startSlide       : 0,
   directionNav     : true,
   directionNavHide : true,
   controlNav       : true,
   keyboardNav      : false,
   pauseOnHover     : true,
   captionOpacity   : 0.8
  });
 });
 /* ]]> */
 </script>
2. Está destacado as partes editáveis para mais facilidade, agora vá em HTML/JavaScript e cole:
<div id="w2bSlideContainer">
 <div id="w2bNivoSlider">
 <a href="LINK_DO_SLIDE_1"><img src="URL_DA_IMAGEM_1" title="LEGENDA DA IMAGEM 1"/></a>
 <a href="LINK_DO_SLIDE_2"><img src="URL_DA_IMAGEM_2" title="LEGENDA DA IMAGEM 2"/></a>
 <a href="LINK_DO_SLIDE_3"><img src="URL_DA_IMAGEM_3" title="LEGENDA DA IMAGEM 3"/></a>
 <a href="LINK_DO_SLIDE_4"><img src="URL_DA_IMAGEM_4" title="LEGENDA DA IMAGEM 4"/></a>
 </div>
 </div>

Setas
 
 
 
Fonte: Cherry Bomb

12 comentários:

  1. Bem legal esse tuto, eu acho incrível esse efeito que o slide proporciona ao blog.
    Kiss
    With You

    ResponderExcluir
  2. Acho bem legal esse tutorial, mas não sou muito chegada em slide.

    Sério que você quer postar no meu blog?
    Você tem alguma rede social para eu entrar em contato com você ?
    e--mpire.blogspot.com

    ResponderExcluir
  3. Eu adoro esse slide *-*
    O legal é que com esse dá para mudar as cores das setinhas e tal *3*
    Dá para deixar bem do jeito que tu quiser \o/
    É bem simples de colocar no blog e fica tão lindo >33<
    Sem falar que as imagens passando são muito divertidas de olhar xD
    Adorei o tuto (:
    ~kissus

    ResponderExcluir
    Respostas
    1. uhun, o Nivo é um dos mais usados e simples na atualidade u_u kk -parei
      -kissus-

      Excluir
  4. Gosto do nivo, acho o mais fácil de colocar e personalizar, amei!

    tá rolando projeto fotográfico, participe > http://the-charming-place.blogspot.com.br/

    ResponderExcluir
  5. Adorei o tuto, amei o seu blog seguindo aqui >.<

    http://cupcake-of-lemon.blogspot.com.br/

    ResponderExcluir
  6. Yo Naka-Chan! Então, sobre o tutorial eu sinceramente amo o Nivo Slide, é sem contar que ele fica mega perfeito em qualquer blog! Mas fiquei com uma dúvida aqui, olhe : " mas só tem um problema, Não tem setinhas nem nada para clicar nos links, o jeito é esperar vir a imagem para poder clicar na novidade que você quer...", mais este Nivo Slider tem setinhas. Gomene qualquer coisa. Kisus.

    Kuusou World

    ResponderExcluir
    Respostas
    1. ahh, mas quando eu disse isso eu disse sobre as imagens! rs, porque tem alguns que funcionam a setinha com a imagem! rs
      -kissus-

      Excluir

- Requests tem de ser feito na minha Ask, mas não me importo de serem feitos pelos comentários.

- Não façam comentários merdosos, ex: Poha, lindo, vai te fuder, ou seja, os sem lógicas! Mas eu permitos gírias.

- Se quiser que eu retríbua é só pedir, deixando o link do seu blog!

- Aceito "seguindo, segue de volta?", não acho nada errado nisso!

- Eu leio e respondo todos os comentários possíveis!