Slider: "Coin Slider", um slider com vários efeitos

Uma das melhores formas de entretenimento visual dos sites/blogs atualmente é o Slider, pra quem não sabe, é aquele 'destaque', onde várias imagens deslizam umas sobres as outras.


Com este slide você pode dar destaque suas postagens, com uma boa apresentação dos seus artigos, utilizando imagens com transições super legais. Além de ter variadas animações, este Slider contém  descrições das imagens e possui um sistema de navegação com os botões Anterior e Seguinte.

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

Depois, procure pela tag abaixo:

</head>

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>

---

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

delay: 3000 -  tempo em milésimos de segundo em que uma imagem será exibida, (neste caso 3000, corresponde a 3 segundos)
hoverPause: false – controle 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).

---

Agora procure pela linha abaixo:

]]></b:skin>


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

Salve desde então, e vamos a parte do HTML;

---

Escolha a parte do blog em que queira adicionar o Slider.

Se desejar colocar o Slider em um gadget, escolha o Gadget HTML/JavaScript. Neste Gadget cole o código destacado abaixo, e faça as substituições desejadas:

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

 O que acharam do Tutorial? Você pode conferir como fica, em "Destaques", na nossa página inicial.

Esta postagem foi muito trabalhosa para ser codificada, então a reprodução e plágio estão extensamente proibidas. Códificação: Empire 69 e Rascunhos Blogger.