Big Slide CSS3 para Blogger

Big Slide CSS3 para Blogger
Olá e bem-vindo ao Mult-focos. Neste post veremos um big Slide CSS3 para Blogger, simples, leve ao mesmo tempo imponente e de fácil adição em seu blog.

Demonstração

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

  •  Estão todas no código, copie o código em um bloco de notas proceda às alterações e adicione seu widget. 
OBS: Você pode incluir mais imagens, no entanto saiba que ficará mais pesada sua página.

Isto é tudo.

<div class="main">
  <div class="portfolio">
    <section class="portfolio_items">
      <figure class="portfolio_item">
        <img src="https://lh3.googleusercontent.com/-VsQHvEo1iZI/VBIMP_HiQ3I/AAAAAAAAG_c/hHtPZXxPNL0/w600-h200-no/A%2Bbeleza%2Bda%2Bnatureza%2Bna%2Blente%2Bdo%2Bfot%C3%B3grafo%2Bbrasileiro%2BMarcelo%2BKrauses%2B5.jpg" alt="" /> 
      </figure> 

      <figure class="portfolio_item">
        <img src="https://lh5.googleusercontent.com/-KvdG8_FUQ4Q/VBILouEtBZI/AAAAAAAAG-s/TzD7YrqARzw/w600-h200-no/A%2Bbeleza%2Bda%2Bnatureza%2Bna%2Blente%2Bdo%2Bfot%C3%B3grafo%2Bbrasileiro%2BMarcelo%2BKrauses%2B%2B3.jpg" alt="" /> 
      </figure>

      <figure class="portfolio_item">
        <img src="https://lh6.googleusercontent.com/-5uWRWOmqZnw/VBIJ5oRYvdI/AAAAAAAAG9Y/mf8q6HVWEko/w600-h200-no/A%2Bbeleza%2Bda-natureza%2Bna%2Blente%2Bdo%2Bfot%C3%B3grafo%2Bbrasileiro%2BMarcelo%2BKrauses%2B%2B1.jpg" alt="" /> 
      </figure>

      <figure class="portfolio_item">
        <img src="https://lh6.googleusercontent.com/-QNTSdzquEJg/VBIL2UiNO-I/AAAAAAAAG_E/PBLA6SrMAWQ/w600-h200-no/A%2Bbeleza%2Bda%2Bnatureza%2Bna%2Blente%2Bdo%2Bfot%C3%B3grafo%2Bbrasileiro%2BMarcelo%2BKrauses%2B%2B4.jpg" alt="" /> 
      </figure>

      <figure class="portfolio_item">
        <img src="https://lh6.googleusercontent.com/-Lkl-7G9I5Zk/VBIK2yVhJuI/AAAAAAAAG-A/4Xgl3UxV4I0/w600-h200-no/A%2Bbeleza%2Bda-natureza%2Bna%2Blente%2Bdo%2Bfot%C3%B3grafo%2Bbrasileiro%2BMarcelo%2BKrauses%2B2.jpg" alt="" />
        <figcaption>
          Fim da Galeria.
        </figcaption> 
      </figure>

      
    </section>
  </div>
</div>

See the Pen Big Slide CSS3 para Blogger 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