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.

Leia Mais