Galeria de Imagens, com efeito, resumo e link leia mais

Galeria de Imagens
Olá e bem-vindo ao Mult-focos. Neste post veremos como adicionar uma galeria de Imagens, com efeito, resumo e link leia mais, no seu blog.
Veja um demo clicando no botão abaixo ou em Result no Box de códigos.

DEMO

Como adicionar em 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 cole o código CSS 
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ção
  • No código JS consta orientações para configurar a galeria
Isto é tudo.

<link href='http://fonts.googleapis.com/css?family=Raleway:400,700|Merriweather' rel='stylesheet' type='text/css'>

<div id="all">
<div class="view view-second">  
  <img src="https://lh4.googleusercontent.com/-x27hrzMHyqs/VEjsKaYsvXI/AAAAAAAAHrs/4x-6JgoOzJU/w300-h200-no/Olhar%2Bhumano.jpg" />  
     <div class="mask">  
     <h2>Olhar humano</h2>  
     <p>O olho humano é o órgão responsável pela visão no ser humano. 
       </p>  
         <a href="URL DO POST" class="info">Leia mais</a>  
     </div>  
</div>  


<div class="view view-second">
  <img src="https://lh3.googleusercontent.com/-ay4P7JXZv7A/VEjqUFcM5iI/AAAAAAAAHqc/xyRbOQXD3uc/w300-h200-no/Cuidar%2Bda%2Bnatureza.jpg" />
    <div class="mask"></div>
    <div class="content">
        <h2>Cuidar da natureza</h2>
        <p>A natureza é o único livro que oferece um conteúdo valioso em todas as suas folhas.</p>
        <a href="URL DO POST" class="info">Leia mais</a>
    </div>
</div>


<div class="view view-tenth">  
     <img src="https://lh6.googleusercontent.com/-LkAAXglhUgk/VEjpadmeVqI/AAAAAAAAHqI/rFLIGP0Uvg0/w300-h200-no/Azores.jpg" />  
     <div class="mask">  
     <h2>Açores</h2>  
     <p>Os Açores, oficialmente designados por Região Autónoma dos Açores, são um arquipélago transcontinental e um território autónomo da República Portuguesa...</p>  
         <a href="URL DO POST" class="info">Leia mais</a>  
     </div>  
</div>  
  </div>
See the Pen Imagens com efeito resumo e link leia mais by Mairink (@Oemes) on CodePen.


Postado por Mairink Oemes

2 comentários:

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