Tutorial - Slider lateral para banners ou publicidade no blog

Douglas Volkart quarta-feira, fevereiro 11, 2015 , Nenhum comentário
Algumas pessoas tem me pedido para fazer um tutorial de como inserir um slider lateral para blogger que fique passando as imagens de promoções ou mesmo uma publicidade. Separei aqui um código bem simples e que deve suprir essa necessidade de quase todos os blogueiros. O slider que vou mostrar como montar é semelhante ao do lado, ele fica passando em ordem as imagens com um efeito de pagina de livro sendo virada. Caso queiram ver ele em funcionamento podem dar uma olhada no blog da minha namorada http://www.vicio-de-leitura.com/ que lá esta ele instalado.

Para começar devemos adicionar um widget na lateral do blog onde você deseja que apareça o slider, o widget deve ser do tipo HTML.
Após inserir vamos copiar o código abaixo e colar no corpo do widget que adicionamos.


<style>

#slide_lista ul, li{
 display: block;
}
 
#publicidade{
 margin: auto;
 padding: 10px;
 width: 250px;
 height: 300px;
 overflow: hidden;
 border: 1px solid #fff;
 border-radius: 5px;
 background: rgba( 255 , 255 , 255 , .5 );
 position: relative;
}
 
#box-1, #box-2, #box-3, #box-4{
 width: 250px;
 height: 250px;
}
#pub_pager{
text-align:center;
}
#pub_pager a{
padding: 5px;
margin: 3px;
background: grey;
font-size: 8px;
color: white;
}

</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://yourjavascript.com/151407432/jquery-cycle-all.js"></script>

<script type="text/javascript">

 $( document ).ready( function(){

  $( "#publicidade ul" ).cycle({ 
      fx: "shuffle",
   //exemplo: shuffle, zoom, curtainX, turnDown. scrollHorz
      pager: "#pub_pager"
   });
 } );

</script>

<div id="publicidade">
 <ul id='slide_lista'>
  <li id="box-1"> aqui dentro voce vai colocar o codigo da sua imagem </li>
  <li id="box-2"> aqui dentro voce vai colocar o codigo da sua imagem </li>
  <li id="box-3"> aqui dentro voce vai colocar o codigo da sua imagem </li>

 </ul>
 <div id="pub_pager"></div>
</div>


Notem que destaquei onde vocês devem colar o código da sua imagem ou link para que apareça no slider. Caso seja necessário mais de 3 sliders, deve-se adicionar linhas iguais as que estão no código e seguir a sequencia numérica que ele apresenta. "<li id="box-4.>".

Espero que ajude! qualquer dúvida podem deixar nos comentarios. ;)

Nenhum comentário :

Postar um comentário

Assinar: Postar comentários ( Atom )

Subscribe