Template “Animal” – Blogger Templates
Autor: MamaNunes | Publicado: 2010-10-26T11:23:00-02:00

 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.  &#160;  ►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         DEMO&#160;  LINK PARA DOWNLOAD DO DOCUMENTO XML  LINK PARA DOWNLOAD DE PASTA ZIPADA COM IMAGENS (RECOMENDO)&#160;        *Posts relacionados com imagens:  Configurado para exibir 6 posts.    &#160;  *Botão “Back to top”  Esse botão criado com script JQuery,&#160; acompanha a página inteira e quando clicado, volta ao topo com&#160; movimento suave.     &#160;  &#160;  &#160;  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:       &lt;!-- Menu Esquerda --&gt;     &lt;ul class='left'&gt;     &lt;li&gt;&lt;a href='http://demo-animal.blogspot.com'&gt;Home&lt;/a&gt;&lt;/li&gt;      &lt;li&gt;&lt;a href='#'&gt;About&lt;/a&gt;&lt;/li&gt;      &lt;li&gt;&lt;a href='#'&gt;Serviços&lt;/a&gt;&lt;/li&gt;      &lt;li&gt;&lt;a href='#'&gt;Contato&lt;/a&gt;&lt;/li&gt;      &lt;li&gt;&lt;a href='#'&gt;Edit Link&lt;/a&gt;&lt;/li&gt;      &lt;/ul&gt;     &lt;!-- Menu Direita --&gt;     &lt;ul class='right'&gt;      &lt;li&gt;&lt;a href='SEU-ENDEREÇO-FEED'&gt;&lt;img src='http://1.bp.blogspot.com/_EZ21y4Bj4F0/TMa22efQK5I/AAAAAAAAApI/8oKiW9qWh7k/s1600/feed.png'/&gt;      &lt;/a&gt;&lt;/li&gt;      &lt;li&gt;&lt;a href='SEU-ENDEREÇO-TWITTER'&gt;&lt;img src='http://2.bp.blogspot.com/_EZ21y4Bj4F0/TMa22zhyqKI/AAAAAAAAApM/ATYqYsmpUnU/s1600/twitter.png'/&gt;      &lt;/a&gt;&lt;/li&gt;      &lt;li&gt;&lt;a href='SEU-ENDEREÇO-FACEBOOK'&gt;&lt;img src='http://2.bp.blogspot.com/_EZ21y4Bj4F0/TMa22HgZC1I/AAAAAAAAApE/j1qXJmjDRWA/s1600/facebook.png'/&gt;      &lt;/a&gt;&lt;/li&gt;      &lt;li&gt;&lt;a href='mailto:SEU-EMAIL'&gt;&lt;img src='http://1.bp.blogspot.com/_EZ21y4Bj4F0/TMa21VvIHfI/AAAAAAAAApA/EVP8xc3pRx8/s1600/email.png'/&gt;      &lt;/a&gt;&lt;/li&gt;      &lt;/ul&gt;      &lt;/div&gt;      &lt;div id='clear-both'&gt; &lt;/div&gt;   Edite os links, por exemplo:  &lt;li&gt;&lt;a href='#'&gt;  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     &lt;div id='slidearea'&gt;     &lt;ul class='kwicks'&gt;     &lt;li class='kwik'&gt;     &#160;&#160;&#160;&#160;&#160;&#160;&#160; &lt;a href='URL-LINK-IMAGEM’&gt;      &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; &lt;img alt=&quot;&quot; class=&quot;slidimg&quot; src=&quot;ENDEREÇO-DA-SUA-IMAGEM&quot; style=&quot;width: 750px; height: 250px;&quot; /&gt;      &#160;&#160;&#160;&#160;&#160;&#160;&#160; &lt;/a&gt;     &lt;div class='kwikmet rounded'&gt;     &#160;&#160;&#160;&#160;&#160;&#160;&#160; &lt;h2&gt;&lt;a href='URL-LINK-TEXTO' rel='bookmark' title='texto'&gt;Título da Imagem ou Post&lt;/a&gt;&lt;/h2&gt;     &#160;&#160;&#160;&#160;&#160;&#160;&#160; &lt;p&gt;Texto, nome da foto ou resumo do post desejado.&lt;/p&gt;     &lt;/div&gt;     &lt;/li&gt;      &#160;&#160;&#160; &lt;li class='kwik'&gt;     &#160;&#160;&#160;&#160; &lt;a href='URL-LINK-IMAGEM’&gt;      &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; &lt;img alt=&quot;&quot; class=&quot;slidimg&quot; src=&quot;ENDEREÇO-DA-SUA-IMAGEM&quot; style=&quot;width: 750px; height: 250px;&quot; /&gt;     &#160;&#160;&#160;&#160;&#160;&#160;&#160; &lt;/a&gt;     &lt;div class='kwikmet rounded'&gt;      &#160;&#160;&#160;&#160;&#160;&#160;&#160; &lt;h2&gt;&lt;a href='URL-LINK-TEXTO' rel='bookmark' title='texto'&gt;Titulo da imagem ou post&lt;/a&gt;&lt;/h2&gt;      &#160;&#160;&#160;&#160;&#160;&#160;&#160; &lt;p&gt;Texto, nome da foto ou resumo do post desejado.&lt;/p&gt;     &lt;/div&gt;     &lt;/li&gt;      &#160;&#160;&#160; &lt;li class='kwik'&gt;     &#160;&#160;&#160;&#160;&#160; &lt;a href='URL-LINK-IMAGEM’&gt;    &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; &lt;img alt=&quot;&quot; class=&quot;slidimg&quot; src=&quot;ENDEREÇO-DA-SUA-IMAGEM&quot; style=&quot;width: 750px; height: 250px;&quot; /&gt;      &#160;&#160;&#160;&#160;&#160;&#160;&#160; &lt;/a&gt;      &lt;div class='kwikmet rounded'&gt;      &#160;&#160;&#160;&#160;&#160;&#160;&#160; &lt;h2&gt;&lt;a href='URL-LINK-TEXTO' rel='bookmark' title='texto'&gt;Test with enclosures&lt;/a&gt;&lt;/h2&gt;      &#160;&#160;&#160;&#160;&#160;&#160;&#160; &lt;p&gt;Texto, nome da foto ou resumo do post desejado.&lt;/p&gt;     &lt;/div&gt;     &lt;/li&gt;      &#160;&#160;&#160; &lt;li class='kwik'&gt;     &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; &lt;a href='URL-LINK-IMAGEM’&gt;      &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; &lt;img alt=&quot;&quot; class=&quot;slidimg&quot; src=&quot;ENDEREÇO-DA-SUA-IMAGEM&quot; style=&quot;width: 750px; height: 250px;&quot; /&gt;      &#160;&#160;&#160;&#160;&#160;&#160;&#160; &lt;/a&gt;      &lt;div class='kwikmet rounded'&gt;      &#160;&#160;&#160;&#160;&#160;&#160;&#160; &lt;h2&gt;&lt;a href='URL-LINK-TEXTO' rel='bookmark' title='texto'&gt;Título da imagem ou post&lt;/a&gt;&lt;/h2&gt;      &#160;&#160;&#160;&#160;&#160;&#160; &lt;p&gt;Texto, nome da foto ou resumo do post desejado.&lt;/p&gt;     &lt;/div&gt;    &lt;/li&gt;     &#160;&#160;&#160; &lt;li class='kwik'&gt;     &#160;&#160;&#160;&#160; &lt;a href='URL-LINK-IMAGEM’&gt;      &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; &lt;img alt=&quot;&quot; class=&quot;slidimg&quot; src=&quot;ENDEREÇO-DA-SUA-IMAGEM&quot; style=&quot;width: 750px; height: 250px;&quot; /&gt;      &#160;&#160;&#160;&#160;&#160;&#160;&#160; &lt;/a&gt;      &lt;div class='kwikmet rounded'&gt;      &#160;&#160;&#160;&#160;&#160;&#160;&#160; &lt;h2&gt;&lt;a href='URL-LINK-TEXTO' rel='bookmark' title='texto'&gt;Título da imagem ou post&lt;/a&gt;&lt;/h2&gt;      &#160;&#160;&#160;&#160;&#160;&#160;&#160; &lt;p&gt;Texto, nome da foto ou resumo do post desejado.&lt;/p&gt;     &lt;/div&gt;     &lt;/li&gt;      &#160;&#160;&#160; &lt;/ul&gt;     &lt;div class='clear'/&gt;&#160; &lt;/div&gt;&lt;/div&gt;      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)&#160; 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.  &#160;    É isso crianças! Espero que gostem.  Beijo da Mama ♥