15/06/2015

Nivo Slider para Blogger!



Me perguntaram no chat sobre um estilo de slide, então por isso resolvi postar um slide bem comum na Blogosfera, o Nivo slider. Ele e bem adaptável e tem um script mais leve que alguns outros com a mesma finalidade, além de ter 15 efeitos de transições diferentes.

O modelo que estou falando e esse aqui (PREVIEW). Para colocar em seu blog/site siga os seguintes passos:

1. Acesse seu blog; clique em Modelo no menu lateral; e por fim clique em EDITAR HTML. Aperte Ctrl+F e na caixinha que aparecer cloque </head>, quando encontrar cole o código abaixo acima da tag encontrada:

<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. Antes de salvar, busque ]]></b:skin> e acima dele coloque o seguinte código:

/* 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, são para serem alteradas. Abaixo deixarei algumas imagens de setas e das bolinhas de navegação para vocês utilizarem. Depois de alterar a seu gosto, já pode SALVAR O MODELO!

3.Para que o slide apareça no seu blog, cole o código abaixo em um gadget de HTML/Javascript, copie:

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

Você deve substituir LINK_DO_SLIDE_1: pelo seu link; URL_DA_IMAGEM_1: pelo o link de sua imagem; e LEGENDA DA IMAGEM 3: pela sua legenda. Já pode salvar. Se quiser que ele apareça somente na pagina inicial ou em outras, confira esse tutorial. Agora algumas setas e bolinhas:

         
     

Espero que tenham gostado e comentem com suas opiniões ou duvidas, peçam tutoriais.

2 comentários:

LEIA ANTES DE COMENTAR

• Você pode comentar usando apenas seu Nome e Url. Não aceitamos anônimos, selecione a opção no menu suspenso "comentar como".

• Alguns comentários podem não ser aceitos, dependendo do cunho da mensagem. Seja gentil na blogosfera.

Obrigado por comentar. Sua visita e opinião são importantes. Volte sempre!

DESIGN E PROGRAMAÇÃO POR JOÃO VITOR M.A. • ALL RIGHTS RESERVED TO DESIGN MANIA • TECNOLOGIA BLOGGER