12.11.12

Nivo Slider

Yoo~~
Trouxe um tutorial de colocar o nivo slider no blog de vocês.
Ficará tipo esse:
Créditos:Cherry Bomb, Things to Help You e Kawaii World

Vamos Aprender ?
Vá no seu HTML e procure por </head> acima desse código cole:
<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/AVvXsEgOmZoMRU6bu2RaE4oNmXoq9t_zhTUcs3rc2GDkPtP5P6condQHhKWWneKbXi5NDrOvU_CEcLFqggGiuDuEu9KZT8VLu54ZQApvST1NKmPqqnoX2FtdT5H7yQq6fB00x0B0qqHaK9FvObIC/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://bloggerblogwidgets.googlecode.com/svn/trunk/jquery.nivo.slider.pack.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>

Destaquei algumas coisas importantes em Negrito para ajudar
vocês na hora de editar o código.
Depois Vá no seu Layout>>Adicione um Gadget>>HTML/Javascript
e cole esse código:
<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>

Edite e coloque onde você quer que fique o Slide.

Setas:
Bolinhas:

11 comentários:

  1. Que slide lindo mano! Adorei, adorei, adorei! *---*
    Vou usá-lo com certeza, favoritadíssimo!
    Amor, passa na minha última postagem e dá a tua opinião sobre o sorteio que eu quero fazer? obrigada desde já!
    Beeeijos

    myacidblackcherry.blogspot.com

    ResponderExcluir
  2. Amo esse nivo slide o resultado é lindo, amo ele, é perfeitoo *--*

    Cliquesnocapricho.blogspot.com

    Por favor, pode votar no meu blog aqui :
    http://wehearthtml.blogspot.com.br/ (o segundo da enquete) !!

    ResponderExcluir
  3. Ótimo tuto! Em quase todo blog que eu entro, eu vejo.
    Não coloquei no meu primeiro lay pois tinha pouquíssimas postagens.
    Mas no meu próximo irei usar, sem dúvidas!

    ResponderExcluir
  4. Amei o tutorial!!! já coloquei slider no meu blog só que depois eu tirei!!

    acomplicadaeperfeiitinha.blogspot.com
    participa da brincadeirinha!!!

    ResponderExcluir
  5. Oi flor! ótimo tutorial!
    Já coloquei o Sunday HTML nos afiliados. Quando vc colocar o meu blog, me avisa?
    :D Beijos!

    garotapetulante.blogspot.com.br

    ResponderExcluir
  6. Fica divo *--* Acho que vou usar no proximo layout (:

    Beijos !
    Cherry Of Shine ( no perfil )

    ResponderExcluir
  7. Amei o slider, muito divo *-* Sempre uso algum nos meus lays!

    chovendodiamantes.blogspot.com

    ResponderExcluir
  8. Amei! Linda, te indiquei com o blog de melhor layout.

    garotaestranha-oficial.blogspot.com.br/2012/11/blogs-com-melhor-layout.html?showComment=1352933441613#c6094141581425819926

    ResponderExcluir
  9. Super lindo *u*
    Amor ja te botei na minha elite faz tempo, vc e a ultima imagem, so estou esperando vc me colocar na sua XD\
    BVBeijos

    gostinhoporsuicidio.blogspot.com

    ResponderExcluir
  10. Ohhh God!
    Eu já disse q o layout do seu blog é
    p-e-r-f-e-i-t-o ? *33*
    Sériio mesmo, amei!!

    ~ xoxo :**

    myshineforever.blogspot.com

    ResponderExcluir

Antes de comentar siga essas regrinhas:
- Aceito segue,segue de volta
- Quando Pedir alguma coisa especifique
- Retribuo todos os comentários
- Pedidos de Afiliação só na Página de Afiliações
- Não use palavras ofensivas
- Não me peça para Divulgar porque não aceito Divulgações