Slide show CSS para Blogger

Olá e bem-vindo ao Mult-focos. Estamos trazendo neste post um slide show CSS para Blogger. Este slide show suporta cinco imagens e você pode variar o tamanho das imagens conforme sua necessidade.

Veja outros modelos de slides clicando AQUI

Veja um demo clicando no botão abaixo

DEMO
Como adicionar no seu blog

•  Copie o código CSS do Box de códigos 
• Vá ao painel do Blogger->modelo->editar HTML->use Ctrl+F e localize:]]></b:skin>
• Acima desta tag copie e cole o código CSS do box de códigos abaixo.

Próximo passo

•  Ir para o painel do blogger->layout 
•  Clique em Adicionar um Gadget. 
•  Na janela Adicionar um gadget->HTML/JavaScript. 
•  Copie o código JS abaixo e cole-o dentro da caixa de conteúdo. 
•  Salvar o gadget. 
• Arraste o gadget e reposicione-o onde você quer mostrá-lo. 
•  Clique no botão Salve (canto superior direito). 

Configurações

•  Bem você pode mudar o tamanho da imagem usada 400x200 pixels para o tamanho que lhe atender, porém mude também no código CSS onde está escrito: //Mude a largura// e //Mude a altura//. 

 Isto é tudo.

<div id="page-wrap">
<div id="banner">
   <div><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc-WDixgU_LQOlUk61u-Zf4IqHYOhudyWOqmPbzkKcV4RxrM8k7PUY_GTHVHT10jVqh5RgTm0apAqnt7LIPaqlKFUyF4fULDvjn4O6BWM1qAYrS4L_lO9Q_xyyQfxYkq7pLh6VaO6gxbbn/w400-h200-no/O+%C3%81rtico.jpg"></div>
   <div><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRhfngTcYS6A0qyPu3SxnB5MmqIkdNfwMpQBwDnleh6lPb3FOCRsr7lSXU499YBi4hJpwQQdOrC6pj1WWyGZgQEFot8ntKy-V12JMlryhzwdcFGxgEI3RDLTpv5dzaaKQnxUxLt3PB5p0K/w400-h200-no/A+ant%C3%A1rtica.jpg"></div>
   <div><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDc2-1_-5oVUna4UDkKIeHwZmlcH1suaWa87t1Pa3QUavBMj9J5FPwF0O2URwfu7CogBaXsD8A6eFcs_SkkE8PdFw2Y4fl8_fvfPLKuxr6MSzHwE3GZUOZ_XwoJB9foPtXLUhaCr0Euh2M/w400-h200-no/Micron%C3%A9sia+e+Polin%C3%A9sia.jpg"></div>
   <div><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHwgZN9kHo2X4y2Fzmc6qlDP2TYxztt_WJ9G1sdlk3x3qBEX-uRkUGHG8aCpER7l8w_n1Wznc_VO_Nwp6DrFTD-XcokIXTwizXLw2nLQRK_DYO7Ls5Ws7T3IHiQYioRTrQhCUGGTu1OVBh/w400-h200-no/Madag%C3%A1scar.jpg"></div>
   <div><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNLkZW7LN02TmJipvqP2FdYMecugX8cVOMiXbW3Tf2c_QMK96W3RiEm3hb5jnzw2hNonK0Nb05GMKtQO5j2r_qQ4MsVtG9QlrNSLeuSGqdFOzxxrTNSsmwmjmdnn4RjpF-fMUYJFuvD0Vy/w400-h200-no/Borneo.jpg"></div>
</div>
</div>
<span style="font-size: 80%; float:right;">Adquira este <a href="http://mult-focos.blogspot.com/2014/11/slide-show-css-para-blogger.html" target="_blank">widget</a></span>

See the Pen Slide show para Blogger CSS by Mairink (@Oemes) on CodePen.

---

---