Galeria de imagens deslizantes para blogger

Olá amigos Mult-focos, neste post veremos como adicionar uma Galeria de imagens deslizantes para blogger.
Nesta galeria a imagem desliza para cima destacando seu titulo, descrição e um link para o restante do artigo.

Veja um demo clicando no botão abaixo ou em result no Box de códigos.


DEMO  

Como adicionar esta galeria no seu blog.

I - Vá ao painel do Blogger->Modelo->Editar HTML->use Ctrl+F e localize esta tag

]]></b:skin>

acima desta tag copie o código CSS do Box abaixo, visualize se estiver ok salve o modelo.

II – Copie o código JS do Box cole em um bloco de notas configure:

a- URL DA IMAGEM

b- Descrição Título

c- Descrição do texto

d- URL do link para o restante do artigo

III – Agora no painel do Blogger -> Layout->adicionar um gadget->HTML/javascript->na janela que abrir cole o código em conteúdo->salve.
Isto é tudo.

<div class="image-box-wrapper" id="image-box-wrapper">

    <!-- `.imagem start-box  -->
    <div class="image-box">
        <div class="image-container">
            <img src="URL DA IMAGEM" alt="" width="200" height="150">
        </div>
        <div class="image-details">
            <div class="details">
                <h4>Descrição Título</h4>
                <p>Descrição do texto ...</p>
                <p><a class="mais" href="URL">mais</a></p>
            </div>
        </div>
    </div>
<div class="image-box">
        <div class="image-container">
            <img src="URL DA IMAGEM" alt="" width="200" height="150">
        </div>
        <div class="image-details">
            <div class="details">
                <h4>Descrição Título</h4>
                <p>Descrição do texto ...</p>
                <p><a class="mais" href="URL">mais</a></p>
            </div>
        </div>
    </div>
<div class="image-box">
        <div class="image-container">
            <img src="URL DA IMAGEM" alt="" width="200" height="150">
        </div>
        <div class="image-details">
            <div class="details">
                <h4>Descrição Título</h4>
                <p>Descrição do texto ...</p>
                <p><a class="mais" href="URL">mais</a></p>
            </div>
        </div>
    </div>
<div class="image-box">
        <div class="image-container">
            <img src="URL DA IMAGEM" alt="" width="200" height="150">
        </div>
        <div class="image-details">
            <div class="details">
                <h4>Descrição Título</h4>
                <p>Descrição do texto ...</p>
                <p><a class="mais" href="URL">mais</a></p>
            </div>
        </div>
    </div>
<div class="image-box">
        <div class="image-container">
            <img src="URL DA IMAGEM" alt="" width="200" height="150">
        </div>
        <div class="image-details">
            <div class="details">
                <h4>Descrição Título</h4>
                <p>Descrição do texto ...</p>
                <p><a class="mais" href="URL">mais</a></p>
            </div>
        </div>
    </div>
<div class="image-box">
        <div class="image-container">
            <img src="URL DA IMAGEM" alt="" width="200" height="150">
        </div>
        <div class="image-details">
            <div class="details">
                <h4>Descrição Título</h4>
                <p>Descrição do texto ...</p>
                <p><a class="mais" href="URL">mais</a></p>
            </div>
        </div>
    </div>
    <!-- `.final box -imagem -->
    
    ...
    ...
    ...

    <div class="clear"></div>

</div>

See the Pen CgxLj by Mairink (@Oemes) on CodePen.

---

---