O 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.
Com este slide e estas animações você, presado leitor do Rascunhos Blogger, 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 Anterior e Seguinte e com outros botões abaixo.
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() {
$('#CoinSlider').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.
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).
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;}
Clique em Pré-Visualizar ou Visualizar, de acordo com o seu idioma. Se tudo estiver no seu devido lugar clique em Guardar Modelo ou Salvar Modelo.
Agora vamos adicionar a estrutura do slide, para isso dirija-se ao separador Elementos de Página, ainda na aba Design.
Escolha a parte do blog em que quer adicionar o slide, e clique em Adicionar uma miniaplicaçãoou Adicionar um gadget.
Será aberta uma nova janela, escolha o gadget HTML/JavaScript. A janela será atualizada.
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>
0 comentários:
Postar um comentário