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

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3ivPK6SXCynD36ckLNWTe114-CUhxdp7HsB-Z6I6oDLIABb4_BUXRKFfmEyCB8pxtkyKXUjWr_CKfGw9JTZvEYsURvRPFUnj4iMd_g1w3iYakpF7htru8Ync0ETpQZUaOhjMd7cCd18R7/w300-h200-no/Olhar+humano.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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzPnt1-w_PBkfFhaHdAGBno7-JDZPfE1r5vANxGarki0PoAtt3f-R6gs3N11tUaraPUcInrv_kUD7hBODHV_SvjWiqcnM6hJujHSyKzngVY4oVzPf1C-UNUz2N9hgIxyuYUOFwNfcHHZi9/w300-h200-no/Cuidar+da+natureza.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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhd2FUeTvTmZqOb9w94u0jNmwIpT2qRSff2doX8pA4aL5-9LrqrNzZt_OJb-21lpT8dDsQ80rFmC6hJhlZ2inBdU4H639Jlr8lU9higSpYU-Uqk7_N28bv1fUBBmL5SIhQm3AOCZX52hJj1/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.

---

---