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:
- Menu com ícones para redes sociais no topo da página
- Slideshow em estilo “Acordeom”
- Resumo de postagens automático com imagens
- * Posts relacionados com imagens
- * Botão “Back to top” deslizante com JQuery
- Área de comentários personalizada
- Marcadores com bullets
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/AVvXsEgtAHXwfP6VhoGR8HMd7Nh8D0TV6gD19ybrv9SscH7zmm8dknaud_s5op0hbv7J3dBrDTs11ZDS9NjzmdB0tkTIL3XeJhiupFCX-Mr7o8sY4NDuteD3u7KPYLAlSVOReBnDY0skVsZph9I/s1600/feed.png'/>
</a></li>
<li><a href='SEU-ENDEREÇO-TWITTER'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiam9M3NOHsJz5A651ZywPdygzaFpF48ijBXH_x_teSn4tu1j0NXgOS7hBbN5k8B84QtzSwTgLS2RSUxoTHlr_Lws3ZXs_ZrQVl0jEKFXuqdELDJvVbZ-C0hTrc3XfC6MBFtUnXwwocoX8/s1600/twitter.png'/>
</a></li>
<li><a href='SEU-ENDEREÇO-FACEBOOK'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0Jc_7CU43Tenp2L3e9ftbtuhsrqwNlxhq0edwPaLYoNMmORXws7pYwvOs_qBC17N3XNJjXj7HhxUkNu3gG-9K18ejtI-VKFW9CjRAlEhZykusJvMXzmQV7yn2iIYcfC3YefXlM_haVSA/s1600/facebook.png'/>
</a></li>
<li><a href='mailto:SEU-EMAIL'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKCZ8cnR9j9GUp_Fbqw8Ywb3W3x_DtQobnjW11LbqLrbr6-migriKRHA_7npdO00gZbClFwXQbCHuz4lEATvs4WXNArD2bpS_eECP4DwRxsf8Ma4JbnDA_NMTD9DLx7blwxyqS4HoI5Gs/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 ♥
Muito bom! Parabéns e obrigado por compartilhar.
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)
Sou o Junior do comentário anterior. Esqueci de perguntar se há meio de inserir e destacar a data das postagens.
Obrigado.
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
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
Olá,
Em adição a minha última postagem, observei também que a "classe kwikmet rounded" também n existe no código XML.
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
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
Fiz exatamente como você instruiu, mas os slides não ficam bons... Por favor me ajude
http://meucadafalso.blogspot.com/
Cibele
Se você seguiu corretamente todos os passos, com atenção, não tem como não funcionar, mas posso dar uma olhada...
Qual a diferença entre "URL-LINK-IMAGEM" e "ENDEREÇO-DA-SUA-IMAGEM" ?
MAMA EU SEGUI TUDO CERTINHO, MAS AS IMAGENS NAO APARECEM. QUE PENA, AMEI O LAY.
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