Coin Slider: Um Slide de Imagens com Múltiplos Efeitos

Coin Slider é um slideshow de fotos feito à base de jQuery que se destaca de todos os outros slides por possuir efeitos que são utilizados para fazer as transições de imagem para imagem, tornando-as mais dinâmicas. VEJA EXEMPLO ABAIXO..



1. Para adicionar o script deste slide ao seu blog, Click em Design > Editar HTML.
2. Depois, procure pela tag abaixo:
</head>
3. Acima dela, cole o código a seguir:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'/> <script src='http://rascunhosblogger.webs.com/Scripts/coin-slider.min.js' type='text/javascript'/> <script>$(document).ready(function() { $(&#39;#CoinSlider&#39;).coinslider({ delay: 3000, hoverPause: false, navigation: true, width: 565, height: 290, }); }); 
</script> 
Para personalizar, configure conforme as dicas abaixo.
delay: 3000 -  tempo em milésimos de segundo em que uma imagem será exibida.
hoverPause: false – controlo de pausa que aparecerá ao passar o cursor sobre a imagem. Para que seja ativado, substitua false por true.
navigation: true - são os botões Anterior e Seguinte que aparecem ao passar o cursor do rato. Para que sejam desativados, substitua true por false.
width: 565 – comprimento do slide.
height: 290 -  altura do slide.
Se alterar o comprimento do slide, também deve alterar o comprimento da área da descrição na parte destacada onde se encontram os estilos (código destacado a vermelho no passo seguinte).
4. Agora procure pela linha abaixo:      
]]></b:skin>
5. Antes dela cole os seguintes estilos:
.coin-slider { overflow: hidden; zoom: 1; position: relative; } .coin-slider a{ text-decoration: none; outline: none; border: none; } .cs-buttons { font-size: 0px; padding: 10px; float: left; } .cs-buttons a { margin-left: 5px; height: 10px; width: 10px; float: left; border: 1px solid #B8C4CF; color: #B8C4CF; text-indent: -1000px; } .cs-active { background-color: #B8C4CF; color: #FFFFFF; } .cs-title { width: 545px; padding: 10px; background-color: #000000; color: #FFFFFF; } .cs-prev, 
.cs-next { background-color: #000000; color: #FFFFFF; padding: 0px 10px;}
Clique em Visualizar. Se tudo estiver no seu devido lugar clique em Salvar Modelo.
6. Agora vamos adicionar a estrutura do slide, para isso dirija-se ao separador Elementos de Página, ainda na aba Design.
7. Escolha a parte do blog em que quer adicionar o slide, e clique em Adicionar uma miniaplicaçãoou Adicionar um gadget.
8. Será aberta uma nova janela, escolha o gadget HTML/JavaScript. A janela será atualizada.
9. Neste widget cole o código destacado abaixo:
<center><div id="CoinSlider"> 
<a href="LINK_IMAGEM_1"> 
<img src="URL_IMAGEM_1"/> 
<span>DESCRIÇÃO_IMAGEM_1</span></a> 
<a href="LINK_IMAGEM_2"> 
<img src="URL_IMAGEM_2"/> 
<span>DESCRIÇÃO_IMAGEM_2</span></a> 
<a href="LINK_IMAGEM_3"> 
<img src="URL_IMAGEM_3"/> 
<span>DESCRIÇÃO_IMAGEM_3</span></a> 
</div></center>
Faça as alterações como indicado:
Faça as alterações como indicado:
LINK_IMAGEM_X – Aqui você deve inserir o endereço da hiperligação
URL_IMAGEM_X - Cole aqui o URL da imagem.
DESCRIÇÃO_IMAGEM_X - Faça a descrição da imagem ou do conteúdo a destacar.
Se quiser adicionar mais imagens, só terá de adicionar o código destacado no campo abaixo as vezes que forem precisas, antes do último </div>:
<a href="LINK_IMAGEM_4"> 
<img src="URL_IMAGEM_4"/> 
<span>DESCRIÇÃO_IMAGEM_4</span></a>


Pronto esse foi mais um tutorial, espero que goste e comente. GRATO 

2 comentários:

  1. Já to pensando em fazer *oh*
    Boa dica!

    www.theatrevidos.blogspot.com

    ResponderExcluir
  2. como trocar o anterior e seguinte por aquelas setas ?? Como faço me ajuda ??

    cottoncandy-official.blogspot.com

    ResponderExcluir