Template “Animal” – Blogger Templates

A beleza desse template está principalmente no modelo de slide show em formato acordeom, que desliza ao passar o mouse e revela o título e texto em efeito opacity. O nome, Animal, foi somente uma inspiração mas o modelo poderá ser usado para qualquer tema que inclua imagens, fotos, exposição de arte, etc. Os detalhes foram cuidadosamente caprichados como você poderá conferir no template instalado.

 

►Detalhes do modelo:

1. Menu com ícones para redes sociais no topo da página
2. Slideshow em estilo “Acordeom”
3. Resumo de postagens automático com imagens
4. * Posts relacionados com imagens
5. * Botão “Back to top” deslizante com JQuery
6. Área de comentários personalizada
7. Marcadores com bullets

DEMO 

LINK PARA DOWNLOAD DO DOCUMENTO XML

LINK PARA DOWNLOAD DE PASTA ZIPADA COM IMAGENS (RECOMENDO) 

*Posts relacionados com imagens:

Configurado para exibir 6 posts.

 

*Botão “Back to top”

Esse botão criado com script JQuery,  acompanha a página inteira e quando clicado, volta ao topo com  movimento suave.

 

 

 

INSTRUÇÕES PARA INSTALAÇÃO

Como editar o menu do topo do template

Faça login e clic na opção “Design”, depois clique em “Editar HTML”

Procure pelo seguinte trecho:

<!-- Menu Esquerda -->

<ul class='left'>
<li><a href='http://demo-animal.blogspot.com'>Home</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Serviços</a></li>
<li><a href='#'>Contato</a></li>
<li><a href='#'>Edit Link</a></li>
</ul>

<!-- Menu Direita -->
<ul class='right'>
<li><a href='SEU-ENDEREÇO-FEED'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg43ahB6gsd7cVVoI25oWoe17Gg8bOhv45pa5Fys-skKbhaqv3zcxnRefI8ydMk855EGAqoO7wA0rN0JEXTLzUAdDPMu-7sD5LSuna6foazW7TBT1qcoxqAxihIn1SCLZ6xPwpjB41zAEc/s1600/feed.png'/>
</a></li>
<li><a href='SEU-ENDEREÇO-TWITTER'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjboorCjiBzLXoHEMzEySsOit5B2ud6ui3G822FtJfSxndyllHpNKBZWLWK13hkxTIRGK2lQ7_apF8vUEf7Tbwe0ksspqixxDXk6aMHmKcEfDRz3KFEneJXAFib63hewnTatJdlavqckNo/s1600/twitter.png'/>
</a></li>
<li><a href='SEU-ENDEREÇO-FACEBOOK'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP0SWGGPynAc35caRPAvcQIkU-sAT7RnItdEJW_lO7lerRulCuXus5ZMBY53kGqt6BonyRoVvvZHifSaqGfG4AL75DeqgRgWNE9R2FaYMTSQk-efTZRZaKkyMBoL_17Zpe-TZVcqp091s/s1600/facebook.png'/>
</a></li>
<li><a href='mailto:SEU-EMAIL'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsLDPl5fZ9zmQNNbooowx2kISVhUr6sLY6DobKGLW2Ub4RjvOubqIdIzsE6js1ZoN1N-3qaPgYzyDPyRd45ylGkh-ltpjlX_RuzCKSYhz9eJfPtSyVhvBtr9up4VfqNn4JrzVy28TVwS0/s1600/email.png'/>
</a></li>
</ul>
</div>
<div id='clear-both'> </div>

Edite os links, por exemplo:

<li><a href='#'>

Onde há o sinal # escreva o endereço para onde deseja direcionar o link.

Como instalar e configurar o Slide Show:

Código HTML do slide

<div id='slidearea'>

<ul class='kwicks'>
<li class='kwik'>

        <a href='URL-LINK-IMAGEM’>
                <img alt="" class="slidimg" src="ENDEREÇO-DA-SUA-IMAGEM" style="width: 750px; height: 250px;" />
        </a>

<div class='kwikmet rounded'>
        <h2><a href='URL-LINK-TEXTO' rel='bookmark' title='texto'>Título da Imagem ou Post</a></h2>

        <p>Texto, nome da foto ou resumo do post desejado.</p>

</div>
</li>
    <li class='kwik'>

     <a href='URL-LINK-IMAGEM’>
                <img alt="" class="slidimg" src="ENDEREÇO-DA-SUA-IMAGEM" style="width: 750px; height: 250px;" />

        </a>
<div class='kwikmet rounded'>
        <h2><a href='URL-LINK-TEXTO' rel='bookmark' title='texto'>Titulo da imagem ou post</a></h2>
        <p>Texto, nome da foto ou resumo do post desejado.</p>

</div>
</li>
    <li class='kwik'>

      <a href='URL-LINK-IMAGEM’>

                <img alt="" class="slidimg" src="ENDEREÇO-DA-SUA-IMAGEM" style="width: 750px; height: 250px;" />
        </a>
<div class='kwikmet rounded'>
        <h2><a href='URL-LINK-TEXTO' rel='bookmark' title='texto'>Test with enclosures</a></h2>
        <p>Texto, nome da foto ou resumo do post desejado.</p>

</div>
</li>
    <li class='kwik'>

          <a href='URL-LINK-IMAGEM’>
                <img alt="" class="slidimg" src="ENDEREÇO-DA-SUA-IMAGEM" style="width: 750px; height: 250px;" />
        </a>
<div class='kwikmet rounded'>
        <h2><a href='URL-LINK-TEXTO' rel='bookmark' title='texto'>Título da imagem ou post</a></h2>
       <p>Texto, nome da foto ou resumo do post desejado.</p>

</div>

</li>
    <li class='kwik'>

     <a href='URL-LINK-IMAGEM’>
                <img alt="" class="slidimg" src="ENDEREÇO-DA-SUA-IMAGEM" style="width: 750px; height: 250px;" />
        </a>
<div class='kwikmet rounded'>
        <h2><a href='URL-LINK-TEXTO' rel='bookmark' title='texto'>Título da imagem ou post</a></h2>
        <p>Texto, nome da foto ou resumo do post desejado.</p>

</div>
</li>
    </ul>

<div class='clear'/> 
</div></div>

Copie o código acima, cole em um bloco de notas para fazer as alterações necessárias.

As imagens do slide deverão ter 750px de largura (widht)  por 250px de altura (eight).

Depois que tiver configurados todos os links e imagens, vá em sua página “Design” clique em ”Adicionar um gadget”

Copie todo o código já editado e cole dentro de um elemento HTML/JAVASCRIPT e SALVE.

 

É isso crianças! Espero que gostem.

Beijo da Mama ♥