Subscribe
Technorati
Delicious
Youtube
Heart

image 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

image

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.

image 

*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.

image

 

 

 

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='http://1.bp.blogspot.com/_EZ21y4Bj4F0/TMa22efQK5I/AAAAAAAAApI/8oKiW9qWh7k/s1600/feed.png'/>
</a></li>
<li><a href='SEU-ENDEREÇO-TWITTER'><img src='http://2.bp.blogspot.com/_EZ21y4Bj4F0/TMa22zhyqKI/AAAAAAAAApM/ATYqYsmpUnU/s1600/twitter.png'/>
</a></li>
<li><a href='SEU-ENDEREÇO-FACEBOOK'><img src='http://2.bp.blogspot.com/_EZ21y4Bj4F0/TMa22HgZC1I/AAAAAAAAApE/j1qXJmjDRWA/s1600/facebook.png'/>
</a></li>
<li><a href='mailto:SEU-EMAIL'><img src='http://1.bp.blogspot.com/_EZ21y4Bj4F0/TMa21VvIHfI/AAAAAAAAApA/EVP8xc3pRx8/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.

 

image

É isso crianças! Espero que gostem.

Beijo da Mama ♥

13 comentários

JRosa

Muito bom! Parabéns e obrigado por compartilhar.

Junnior

Olá. Parabéns pelo seu bom gosto e dedicação aos templates. Eu adorei o template acima e estou muito afim de usá-lo.
Estou testando no meu blog de testes e deu certo. Só a parte do "slide-show" é que não estou conseguindo. Primeiro, fiz as alterações dos links como recomendado, segui a orientação de incluir pelo HTML/JAVAscrpt, salvei, mas não apareceram os slides (apenas um espaço enorme de fundo cinza com os títulos e descrições escritos um em cima do outro). Tentei com o seu código sem alterar nada e ficou do mesmo jeito.
O que será?
Aguardo seu retorno. Obrigado pela atenção.
Junior
(jrjrjunnior@gmail.com)

Junnior

Sou o Junior do comentário anterior. Esqueci de perguntar se há meio de inserir e destacar a data das postagens.
Obrigado.

elvis

olha instalei esse template animal em um blog que estou desenvolvendo com videos do youtube e outros midias mais os videos so aparecem depois de clicar no leia mais mesmo sem eu adicionar essa função na postagem.
sera que pode me ajudar?
http://ycetube.blogspot.com

Vanusa Schwanck

Boa tarde!
Parabéns pela qualidade e relevância dos seus assuntos. Estou tentando instalar o slide show e encontrei o mesmo problema relatado pelo Júnior. Observei também que a "classe kwik" não existe no XML do template, e sim a "classe kwikmet". Quando copio para o GADGET HTML essa parte do código é excluída automaticamente do código, talvez seja o a causa??
Será que pode me ajudar?
joel.batista@gmail.com

Vanusa Schwanck

Olá,
Em adição a minha última postagem, observei também que a "classe kwikmet rounded" também n existe no código XML.

Almir Napoleão

pra resolver o problema entrei no codigo fonte da pagina demo do template e copiei toda a area que atribui-se ao slide depois colei lá do html/javascript e dai e só alterar as imagens e tal
espero ter ajudado valew

Universidade de Voo Livre da Cidade do Rio de Janeiro

Olá Mama Nunes, parabéns pelos templates. Geniais ! Preciso te fazer uma pergunta. Desculpe minha falta de conhecimento. Qual a diferença entre "URL-LINK-IMAGEM" e "ENDEREÇO-DA-SUA-IMAGEM" ? Muito obrigado.
Abraço, Antonio Sardenberg

Cibele S.E.

Fiz exatamente como você instruiu, mas os slides não ficam bons... Por favor me ajude
http://meucadafalso.blogspot.com/

MamaNunes

Cibele
Se você seguiu corretamente todos os passos, com atenção, não tem como não funcionar, mas posso dar uma olhada...

Yuki-chan

Qual a diferença entre "URL-LINK-IMAGEM" e "ENDEREÇO-DA-SUA-IMAGEM" ?

CarlaFanpire

MAMA EU SEGUI TUDO CERTINHO, MAS AS IMAGENS NAO APARECEM. QUE PENA, AMEI O LAY.

Nathy Bueno

mama... eu me apaixonei pelo lay!!! Mas as imagens não aparecem no slide!! Por favor me ajude!!!

Obrigada!

beijos

nathybueno@hotmail.com
www.twilightmoms.com.br

Deixe seu cometário, opinião ou recado.
Eu retorno o mais breve possível.