Coin Slider: Um Slider com vários Efeitos
Autor: Big Bizarros | Publicado: 2013-05-22T16:29:00-07:00




O&nbsp;Coin Slider&nbsp;é um&nbsp;slideshow de fotos&nbsp;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.

Com este slide e estas animações você, presado leitor do&nbsp;Rascunhos Blogger,&nbsp; pode fazer uma boa apresentação dos seus artigos, utilizando imagens com hiperligações para os seus artigos.

Para além de ter variadas animações, este slide pode ter hiperligações, descrições das imagens e possui um sistema de navegação com os botões&nbsp;Anterior&nbsp;e&nbsp;Seguinte&nbsp;e com outros botões abaixo.



Para adicionar o script deste slide ao seu blog, deve iniciar sessão no&nbsp;Blogger, depois dirija-se à aba&nbsp;Design (1)&nbsp;e ao separador&nbsp;Editar HTML (2).



Depois, procure pela tag abaixo:


&lt;/head&gt;


Acima dela, cole o código a seguir:


&lt;script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'/&gt;&nbsp;&lt;script src='http://rascunhosblogger.webs.com/Scripts/coin-slider.min.js' type='text/javascript'/&gt;&nbsp;&lt;script&gt;$(document).ready(function() {&nbsp;$(&amp;#39;#CoinSlider&amp;#39;).coinslider({&nbsp;delay: 3000,&nbsp;hoverPause: false,&nbsp;navigation: true,&nbsp;width: 565,&nbsp;height: 290,&nbsp;});&nbsp;});&nbsp;&lt;/script&gt;


Abaixo ficam algumas informações para que possa personalizar o seu slide:

delay: 3000&nbsp;-&nbsp; tempo em milésimos de segundo em que uma imagem será exibida.

hoverPause: false&nbsp;– controlo de pausa que aparecerá ao passar o cursor sobre a imagem. Para que seja ativado, substitua&nbsp;false&nbsp;por&nbsp;true.

navigation: true&nbsp;- são os botões&nbsp;Anterior&nbsp;e&nbsp;Seguinte&nbsp;que aparecem ao passar o cursor do rato. Para que sejam desativados, substitua&nbsp;true&nbsp;por&nbsp;false.

width: 565&nbsp;– comprimento do slide.

height: 290&nbsp;-&nbsp; 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).

Agora procure pela linha abaixo:


]]&gt;&lt;/b:skin&gt;


Antes dela cole os seguintes estilos:


.coin-slider { overflow: hidden; zoom: 1; position: relative; }&nbsp;.coin-slider a{ text-decoration: none; outline: none; border: none; }&nbsp;.cs-buttons { font-size: 0px; padding: 10px; float: left; }&nbsp;.cs-buttons a { margin-left: 5px; height: 10px; width: 10px; float: left; border: 1px solid #B8C4CF; color: #B8C4CF; text-indent: -1000px; }&nbsp;.cs-active { background-color: #B8C4CF; color: #FFFFFF; }&nbsp;.cs-title {&nbsp;width: 545px; padding: 10px; background-color: #000000; color: #FFFFFF; }&nbsp;.cs-prev,&nbsp;.cs-next { background-color: #000000; color: #FFFFFF; padding: 0px 10px;}


Clique em&nbsp;Pré-Visualizar&nbsp;ou&nbsp;Visualizar, de acordo com o seu idioma. Se tudo estiver no seu devido lugar clique em&nbsp;Guardar Modelo&nbsp;ou&nbsp;Salvar Modelo.

Agora vamos adicionar a estrutura do slide, para isso dirija-se ao separador&nbsp;Elementos de Página, ainda na aba&nbsp;Design.

Escolha a parte do blog em que quer adicionar o slide, e clique em&nbsp;Adicionar uma miniaplicaçãoou&nbsp;Adicionar um gadget.

Será aberta uma nova janela, escolha o gadget&nbsp;HTML/JavaScript. A janela será atualizada.



Neste widget cole o código destacado abaixo:


&lt;center&gt;&lt;div id="CoinSlider"&gt;&nbsp;&lt;a href="LINK_IMAGEM_1"&gt;&nbsp;&lt;img src="URL_IMAGEM_1"/&gt;&nbsp;&lt;span&gt;DESCRIÇÃO_IMAGEM_1&lt;/span&gt;&lt;/a&gt;&nbsp;&lt;a href="LINK_IMAGEM_2"&gt;&nbsp;&lt;img src="URL_IMAGEM_2"/&gt;&nbsp;&lt;span&gt;DESCRIÇÃO_IMAGEM_2&lt;/span&gt;&lt;/a&gt;&nbsp;&lt;a href="LINK_IMAGEM_3"&gt;&nbsp;&lt;img src="URL_IMAGEM_3"/&gt;&nbsp;&lt;span&gt;DESCRIÇÃO_IMAGEM_3&lt;/span&gt;&lt;/a&gt;&nbsp;&lt;/div&gt;&lt;/center&gt;





Fonte&nbsp;http://empreendedoresblogger.blogspot.com.br/2012/01/coin-slider-um-slider-cm-varios-efeitos.html