-->

3 de junho de 2016

Como instalar slide no blog


   Olá, pessoal!

   A dica dessa semana eu estava querendo há tempo para colocar no meu blog, porém nunca encontrava uma que funcionasse legal. No meio das minhas mudanças em layout comecei a busca pelo tal slide e encontrei esse. Ele não é automático, mas funciona bem legal e roda direto. 

  Se você quiser ver como fica esse slide é só clicar nesse link que é do meu blog de testes. 

   Agora vamos ao passo a passo:

1) Acesse seu blog, vá em MODELO no menu lateral e depois em EDITAR HTML. Clique dentro da caixa de códigos e dê CTRL+F e dentro da caixa de pesquisa escreva </head> . Cole abaixo de </head> o código a seguir:

<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)Agora, dentro da caixa de pesquisa, digite ]]></b:skin> e acima dele coloque o cógigo:
/* SLIDE
---------------------------------------------- */
#w2bSlideContainer { /*Ajuste as posição do slide*/
position: relative;
display: block; 
top:0px; 
left:0px; 
right:0px;
}
 #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: 10px; 
margin-top: 260px;
font-weight: bold;
text-align: center;
position:absolute; 
font-family: Arial,sans-serif;/*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: 620px;/*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_DA_IMAGEM_DAS_SETAS_DE_DIREÇAO") 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_DAS_BOLINHAS_DE_NAVEGACAO") no-repeat;
text-indent:-9999px;
border:0;
margin-right:3px
}
 .nivo-controlNav a.active {
font-weight:bold;
background-position:0 -22px
}

As partes em negrito e cor diferentes devem ser substituídas pelo link dos respectivos.

3) Agora, vá em Layout e adicione gadget HTML/Javascript, cole nele o código substituindo as partes em negrito: 

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

    Algumas dicas de ícones para usar, é importante que vocês salvem a imagem e hospedem em algum lugar antes de colocar no blog de vocês e de lá copiem o link:





CRÉDITOS fonte dos códigos compartilhados: 

Espero que tenham curtido essa dica e semana que vem tem mais.
Dá um Like compartilhem e sigam o SCC e também os blog desse cantinho. 


Curta minha fanpage!    Me siga no g+!    Me siga no Instagram    Me siga no Twitter!



12 comentários:

  1. Uauuuuuuuuuuuuuuuu! A muito tempo tbm quis instalar slide em meu blog,mas acabei desistindo por não ter encontrado um que eu gostasse.
    Obrigadão pela dica. Bjsss

    ResponderExcluir
    Respostas
    1. Olá, Célia. Fico feliz que tenhas gostado da dica. Bjs

      Excluir
  2. Oi!!!
    Super dica :)
    Sempre quis colocar no meu blog e agora vou conseguir ;)
    Acho super legal blogs com slide.
    Bjo

    ResponderExcluir
    Respostas
    1. Olá, Joana. Que bom que gostastes da dica. Fica legal que dá pra escolher o que queres marcar. Bjs

      Excluir
  3. Arrasoou no post vou compartilhar para as amigas ver otimo bjos

    ResponderExcluir
  4. Arrasou amiga ! Dica muito legal ,bjs.

    ResponderExcluir
  5. Eu vou tentar fazer Ana, pelo que eu vi é simples e bel leve de se rodar. Muito bom! É tendo tempinho e indo lá mudar rsrsr. bjocas!

    ResponderExcluir
  6. Uau super dica...vou tentar ver se consigo colocar...bjus!!!

    ResponderExcluir
  7. Ótima dica, no começo do meu blog eu sofri para acertar esses códigos e por um slide rsrs agora já estou treinada, o post ficou bem explicadinho, acho que ngm terá dificuldade! bjos

    ResponderExcluir
  8. Gostei desse slide, era o que eu procurava por muito tempo. Voce explicou muito bem. Agora vou tentar por no meu blog beijos,

    ResponderExcluir
  9. ah que bacana, adorei a dica, só quem mexe com blog sabe a sofrencia que é encontrar os codigos para o que queremos ne...
    Bjao linda :*
    http://festadasunhas.blogspot.com.br/

    ResponderExcluir

© RM Desing - 2016 | Todos os direitos reservados.
Desenvolvimento por: Renata Massa | Tema Base: Butlariz.
imagem-logo