Como colocar slide com links para blog?

Como colocar esse slide divo que eu uso no meu blog. O nome dele é Nivo e vários sites profissionais usam ele. O que eu acho mais legal no Nivo é os diferentes efeitos de transição que ele tem (15 no total). Mas chega de enrolar, vamos ao tão esperado tutorial.


Clique em "Ler mais..."


Veja abaixo o resultado ficará assim:

1º Passo:
Coloque esse código abaixo clique na Opção no seu blog "Modelo" e depois clique "Editar HTML"


E procure a tag " "
Depois você cole esse código abaixo.!

Código:


<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("http://4.bp.blogspot.com/-TBMTXcO0VxM/T7dSfCUe9dI/AAAAAAAABgY/dmbkzgOPQI0/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º Passo:
Os Slides:
Agora para o slide aparecer, basta colar o código abaixo em um "Gadget" de HTML/Javascript ou onde quiser que o slide apareça:

Código:




SETAS:

           

BOLINHAS:

     

Obs: As partes que estão em negrito você irá precisar alterar para ficar mais fácil de encontrar. No fim do post tem algumas imagens de setas e das bolinhas de navegação para vocês usarem. Depois de fazer as alterações, visualize se está tudo ok e depois salve.


17 comentários:

  1. como se faz para por as setas no html

    ResponderExcluir
    Respostas
    1. Oi Hugo!
      Então, escolhe uma das setas que você gostou e copia o link da seta e depois coloque no código onde está escrito "URL_IMG_SETA" que está em negrito as bolinhas é a mesma coisa só que coloque onde está escrito "URL_IMG_BULLETS" entendeu? Qualquer coisa volte aqui ok? ;)

      Excluir
  2. aline no meu fica o link do meu blog e mais o link que eu coloquei por que isto acontece?

    ResponderExcluir
    Respostas
    1. Olá Gustavo...Então, sabe onde está escrito "LINK_DO_SLIDE_1" este é para você colocar link do sua postagem e outro que está escrito "URL_DA_IMAGEM_1" é pra colocar o link da sua imagem para que apareça no slide!

      Mas, tem um detalhe você tem que colocar aquele último código onde aparece no começo "div..." você deve colocar esse código no "Gadget" de HTML/Javascript ok?

      Excluir
  3. como eu faço pra colocar os posts recentes rodar?

    ResponderExcluir
    Respostas
    1. Olá Vanessa! Então, para colocar o slide com as postagens recentes automática acesse nesse site clicando > AQUI. Volte sempre!

      Excluir
  4. Muito o brigada flor.. já sou sua seguidora!

    ResponderExcluir
    Respostas
    1. de nada flor!! Obrigada por seguir meu blog! =D

      Excluir
  5. Muito legal Aline. Informação útil que ajuda a muita gente. Parabéns. Gostei muito. Sucesso ao blog sempre... e muito obrigado!

    ResponderExcluir
    Respostas
    1. Obrigada pelo elogio "Big Dotados" fico feliz! Obrigada mesmo! Volte Sempre!!!

      Excluir
  6. Oi Aline. Eu coloco o primeiro código onde? Em que parte?

    ResponderExcluir
    Respostas
    1. Oi Elaine! Então o primeiro código você coloca no "Modelo" e clique a opção "Editar HTML" e depois que clicar você procura a tag /head> e cole abaixo dele... entendeu? E depois você cola a 2º parte do código no Layout ok? Prontinho! Espero que tenha entendido a explicação! :-bd Volte até logo!

      Excluir
  7. Qual deve ser a dimensão da imagem para que o slide funcione corretamente? E como alterar a frase de cada slide?

    ResponderExcluir
    Respostas
    1. O tamanho da imagem largura: 640px e altura: 300px
      ok? Volte sempre! Obrigada pela sua visita!

      Excluir
:) :( ;) :D :-/ :P :-O X(
:7 B-) :-S :(( :)) :| :-B ~X(
L-) (:| =D7 @-) :-w 7:P \m/ :-q :-bd

Antes de comentar leia:

• Muito obrigada por estar comentando
• Retribuo a todos portanto deixe sua Url (exemplo: <*a *href*= "___"*>Nome do Blog ou Site<*/a*>) <- Sem os * (asteriscos)
• Proibido Palavrões e Xingamentos será banido comentário!
NÃO aceito mais Divulgação no Facebook!
• Aceito Parceria aqui no Blog
• Se for copiar e colar no seu blog me avise e coloque o meu devido créditos
-> Obrigada ;*