Navigation

Como instalar Slider 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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjN0mMZkd80P48gYFrSsGY4UlhmVjcJuuZxls2vGLet0DZDeuzBOIuhZn9aSRzgjYcdvsqxMKRnxRoNRRsiaAQ3L-SViOsmsHCiJOGUU2-8hTNM2VfG6ULwNMz8purVzwE5MfMB6g2qU5BK/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: 
Share
Share

Post A Comment:

0 comments: