Slide show CSS para Blogger

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://lh6.googleusercontent.com/-GTPrPLdGY5c/U9RjENyyQaI/AAAAAAAAFx8/bV6yLMaJmw0/w400-h200-no/O%2B%C3%81rtico.jpg"></div>
   <div><img src="https://lh6.googleusercontent.com/-9MwbNOnUeuI/U9RjLHDguDI/AAAAAAAAFyE/lbA8vC4md2w/w400-h200-no/A%2Bant%C3%A1rtica.jpg"></div>
   <div><img src="https://lh3.googleusercontent.com/-Kqm9HTxjq5k/U9RjWGUtbnI/AAAAAAAAFyU/Lt9SnDWvX1g/w400-h200-no/Micron%C3%A9sia%2Be%2BPolin%C3%A9sia.jpg"></div>
   <div><img src="https://lh6.googleusercontent.com/-ip761EpEfBU/U9RjemqMzMI/AAAAAAAAFyk/LNzn26Ii53Q/w400-h200-no/Madag%C3%A1scar.jpg"></div>
   <div><img src="https://lh6.googleusercontent.com/-hH4XLpEUiE8/U9RjaZF3S8I/AAAAAAAAFyc/xBfmyvxl5Ow/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.


Postado por Mairink Oemes

0 comentários:

Postar um comentário

Todos comentários são lidos e moderados previamente.
São publicados apenas aqueles que respeitarem as regras abaixo:
-Ter relação com o assunto do post.
-Não conter propagandas de outro site ou blog.
-Não incluir links no conteúdo do comentário.
-Se quiser deixar sua URL, comente usando a opção OpenID;
Obrigado(a) por comentar!

free website hit counter