AVISO:O Twitter tem novos Termos de Serviço e uma nova Política de Privacidade. Eles entrarão em vigor em 25 de maio de 2018. CUIDADO que é vírus no WhatsApp com "link do McDonald's", quem clicar pode clonar seu número e também não clicar no "link do esquilo" que trava o WhatsApp! Qualquer tipo de link estranho não cliquem que é vírus!.

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.


19 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
  8. olá amiga ! como você é muito inteligente com slide ! me ajude aí ! fazendo o favor ! olha coloquei um slide em meu blog, esse seu acima mas quando eu coloco meu mouse em cima da foto slide fica parando, como fazer para as fotos meche em qualquer situação sozinho, como fazer ?????

    ResponderExcluir
    Respostas
    1. Olá! Bom, eu entrei no seu blog, para mim as fotos estão se mexendo normal!!! Tenta limpar seu navegador, ou é porque sua internet é lento ou é porque seu computador tem muita coisa e pode pesar e demorar pra carregar! Porque para mim está normal suas fotos no slide! Qualquer coisa volte!

      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 ;*