Desenvolvi uma maneira de criar um slider das suas fotos em uma postagem do blogspot, utilizando o
Unslider. Só não consegui desativar o slider do blogspot de quando você clica na foto do post.
Mesmo tendo desenvolvido o script especialmente para o Blogger, ele pode ser utilizado em qualquer site, desde que carregadas as dependências e o estilo especificados no post.
Para colocar o slider, primeiramente você deve incluir três scripts. Para isso, você deve acessar o layout do seu site e incluir um gadget do tipo "HTML/JavaScript". Nesse gadget, você deve incluir o seguinte código:
<script src="//code.jquery.com/jquery-latest.min.js"></script>
<script src="//unslider.com/unslider.min.js"></script>
<script type="text/javascript" src="http://yourjavascript.com/52113791313/myslider.js"></script>
Esse código inclui o JavaScript do
JQuery, o JavaScript do Unslider e o JavaScript que eu criei para auxiliar a implantação do slider.
Depois disso, você deve incluir o CSS do Slider no seu modelo. Parte desse CSS foi baseado no disponibilizado por Winston Wolf no site
cssdeck. Para isso, vá na configuração de modelo, Personalizar, Avançado, Adicionar CSS e inclua o seguinte código CSS (você pode alterar esse CSS de acordo com o estilo que quiser, essa é apenas uma sujestão inicial):
.dots {
position: absolute;
left: 0;
right: 0;
bottom: 20px;
}
ol.dots {
margin-left: auto; margin-right: auto;
}
.dots li {
display: inline-block;
width: 10px;
height: 10px;
margin: 0 4px;
text-indent: -999em;
border: 2px solid #000;
border-radius: 6px;
cursor: pointer;
opacity: .4;
-webkit-transition: background .5s, opacity .5s;
-moz-transition: background .5s, opacity .5s;
transition: background .5s, opacity .5s;
}
.dots li.active {
background: #000;
opacity: 1;
}
.next,
.prev {
color: #333;
display: inline-block;
font: normal bold 4em Arial,sans-serif;
overflow: hidden;
position: relative;
text-decoration: none;
width: auto;
opacity: .4;
}
.next,
.prev { padding: 0.7em 1.5em }
.next { text-align: right }
.next:before,
.next:after,
.prev:before,
.prev:after {
background: #333;
-moz-border-radius: 0.25em;
-webkit-border-radius: 0.25em;
border-radius: 0.25em;
content: "";
display: block;
height: 0.5em;
position: absolute;
right: 0;
top: 50%;
width: 1em;
}
.prev:before,
.prev:after { left: 0 }
.next:before,
.prev:before {
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.next:after,
.prev:after {
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.prev:after,
.next:before { margin-top: -.36em }
.next:hover,
.next:focus,
.prev:hover,
.prev:focus { color: #c00 }
.next:hover:before,
.next:hover:after,
.next:focus:before,
.next:focus:after,
.prev:hover:before,
.prev:hover:after,
.prev:focus:before,
.prev:focus:after { background: #c00 }
.prev {
float:left;
position:absolute;
left:0;
bottom:50%;
}
.next {
float:right;
position:absolute;
right:0;
bottom:50%;
}
Pronto. Seu blog está pronto para receber o slider. Agora, você vai criar seu post normalmente, inserindo em sequência as fotos que você quer que sejam incluídas no slider.
Depois de inserir as fotos, você deve mudar para o modo de edição HTML para colocar o código que possibilitará o slider. Você deve identificar o bloco HTML correspondente às fotos que você acabou de inserir.
Antes da primeira foto, você deve incluir uma div com algum seletor, que será utilizado para identificar o slider. Aqui, colocaremos uma div com o id "fotosSlide".
<div id="fotosSlide"/>
No fim das fotos, você deve colocar o fechamento da div, como a seguir:
</div>
Depois disso, você deve incluir o JavaScript que cria o slider, colocando o seletor configurado acima.
<script type="text/javascript">
new mySlider({
container:"#fotosSlide", // Seletor do conteiner de slides
includeArrows:true, // Configura exibição das setas
maxHeight:600, // Configura altura máxima do slider
speed: 500, // Configura velocidade de transição de slides em milissegundos
delay: 3000, // Configura tempo de permanencia em cada slide em milissegundos
complete: function() {}, // Função executada depois de completar o slide
keys: true, // Habilita uso de teclas para passar slide
dots: true, // Habilita navegação nos slides exibindo pontos embaixo deles
fluid: false, // Habilita design responsivo. Pode quebrar layouts não responsivos
});
</script>
Pronto. Você tem um slider. Lembre-se apenas de manter as fotos dentro das divs especificadas. Veja abaixo um exemplo do slider funcionando. Você pode manter mais de um slider na página, desde que o seletor deles seja diferente.
