Incluindo um slider nas suas postagens do Blogger
Autor: Murilo Ferraz | Publicado: 2013-07-13T14:09:00-03:00


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:
 &lt;script src="//code.jquery.com/jquery-latest.min.js"&gt;&lt;/script&gt;  
 &lt;script src="//unslider.com/unslider.min.js"&gt;&lt;/script&gt;  
 &lt;script type="text/javascript" src="http://yourjavascript.com/52113791313/myslider.js"&gt;&lt;/script&gt;  

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".
 &lt;div id="fotosSlide"/&gt;  

No fim das fotos, você deve colocar o fechamento da div, como a seguir:
 &lt;/div&gt;  

Depois disso, você deve incluir o JavaScript que cria o slider, colocando o seletor configurado acima.
 &lt;script type="text/javascript"&gt;  
   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  
 });  
 &lt;/script&gt;  

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.
















































  
   new mySlider({ 
   container:"#fotosSlide", // Seletor do conteiner de slides 
   includeArrows:true,      // Configura exibição das setas 
   maxHeight:400,           // 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 
 });