Ainda na “onda” dos slide shows charmosos, criei este template pensando em quem gostaria de registrar e compartilhar imagens e fotos de momentos inesquecíveis. Claro que o título “Lembranças” e o tema sugerido é só uma idéia porque, com criatividade, você poderá usar esse modelo para o que quiser. Veja  que graça o template instalado.

 

 DEMO

DOWNLOAD DO TEMPLATE

DOWNLOAD DA PASTA ZIPADA COM IMAGENS (RECOMENDO)

Descrição do modelo:

1. Menu com ícones para redes sociais no topo
2. Slide show deslizante com imagens auto-ajustáveis e link de direcionamento
3. Resumo automático de postagens
4. Caixa de pesquisa personalizada
5. Botão “Voltar ao Topo” que acompanha toda a página
6. Área de comentários personalizada
7. Ícones nos marcadores do rodapé das postagens
8. Ícone (bullets) nos marcadores da sidebar
9. Fonte do cabeçalho, “Philosopher” do Google Directory

Área de comentários

Como editar o menu do topo do template:

Faça o login e escolha a opção Design, depois “Editar HTML”

Procure pelo seguinte trecho

<ul class='left'>
<li><a href='#'>Home</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Fotos</a></li>
<li><a href='#'>Vídeos</a></li>
<li><a href='#'>Roteiros</a></li>
<li><a href='#'>Editar link</a></li>
<li><a href='#'>Editar link</a></li>
</ul>

Escreva nos espaços com o sinal “#” a URL da página para onde quer direcionar o link. Edite a área em negrito escrevendo o nome que queira dar aos seus links.

Como editar o slide show

Procure pelo trecho abaixo:

<!-- Slide-1 Code Start -->
<li>
<div class='mytext'>
<a href='ENDEREÇO-DO-LINK'>
<img alt='' src='http://2.bp.blogspot.com/_VM_eeGPD1Ms/TMgnkBVS1II/AAAAAAAAALU/8mNo83P1iJk/s1600/viagens-baratas.jpg'/>
</a>
<div class='inpost'>
<p>NOME DA FOTO OU TEXTO </p>
</div>
</div>
</li>
<!-- Slide-1 Code End -->

<!-- Slide-2 Code Start -->
<li>
<div class='mytext'>
<a href='ENDEREÇO-DO-LINK'>
<img alt='' src='http://3.bp.blogspot.com/_VM_eeGPD1Ms/TMgpfqGAYZI/AAAAAAAAALc/MLIp0gEtJds/s1600/lua-de-mel-480x309.jpg'/>
</a>
<div class='inpost'>
<p>NOME DA FOTO OU TEXTO</p>
</div>
</div>
</li>
<!-- Slide-2 Code End -->

<!-- Slide-3 Code Start -->
<li>
<div class='mytext'>
<a href='ENDEREÇO-DO-LINK'>
<img alt='' src='http://4.bp.blogspot.com/_VM_eeGPD1Ms/TMgnjmMFFDI/AAAAAAAAALQ/deY02CuX1XA/s1600/lua-de-mel.jpg'/>
</a>
<div class='inpost'>
<p>NOME DA FOTO OU TEXTO</p>
</div>
</div>
</li>
<!-- Slide-3 Code End -->

<!-- Slide-4 Code Start -->
<li>
<div class='mytext'>
<a href='ENDEREÇO-DO-LINK'>
<img alt='' src='http://2.bp.blogspot.com/_VM_eeGPD1Ms/TMgnknBiEVI/AAAAAAAAALY/PQ0H2DjZi7w/s1600/viagens-tailandia.jpg'/>
</a>
<div class='inpost'>
<p>NOME DA FOTO OU TEXTO</p>
</div>
</div>
</li>
<!-- Slide-4 Code End -->

<!-- Slide-5 Code Start -->
<li>
<div class='mytext'>
<a href='ENDEREÇO-DO-LINK'>
<img alt='' src='http://1.bp.blogspot.com/_VM_eeGPD1Ms/TMgvAKQNo6I/AAAAAAAAALo/Ppyt8unm8mM/s1600/familia.jpg'/>
</a>
<div class='inpost'>
<p>NOME DA FOTO OU TEXTO</p>
</div>
</div>
</li>
<!-- Slide-5 Code End -->

<!-- Slide-6 Code Start -->
<li>
<div class='mytext'>
<a href='ENDEREÇO-DO-LINK'>
<img alt='' src='http://4.bp.blogspot.com/_VM_eeGPD1Ms/TMgu_COkj_I/AAAAAAAAALk/uwSyQTj2Uvw/s1600/104729.jpg'/>
</a>
<div class='inpost'>
<p>NOME DA FOTO OU TEXTO</p>
</div>
</div>
</li>
<!-- Slide-6 Code End -->

 

Edite colocando o endereço de direcionamento do link, na área grifada em verde.

O que está grifado em vermelho, é o endereço da imagem que deseja exibir. Apenas certifique-se de que elas não tenham menos de 400px de largura.

Em negrito, a descrição, texto ou título da imagem

Caixa de pesquisa

Para instalar a caixa de busca, vá em sua oção “Design” e clic em “Adicionar um Gadget”. Escolha um elemento “HTML/JavaScript” e cole dentro dele o seguinte código:

<form action='/search' class='right' id='searchthis' method='get'>

<input class="input-text" id="searchBox" name="q" onblur="if(this.value==&quot;&quot;)this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value=&quot;&quot;;" type="text" value="Pesquisar..." vinput="" />
<input class="searchbutton" id="submit-button" type="submit" value=" ►" /></form>

Prontinho!

Espero que gostem. Qualquer problema na instalação, grita que eu acudo.

Beijo da Mama ♥

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='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.

 

É isso crianças! Espero que gostem.

Beijo da Mama ♥

Um template charmoso para blogueiras ousadas!
Jô Angel me dizia outro dia que ama vintage e me inspirou a criar um template com o tema. Pesquisei e encontrei pinups maravilhosas de Gil Elvgren e não resisti a tentação. Estou pensando em fazer uma série. Adorei a brincadeira!
Usei como base um tema Wordpress convertido para Blogger.





DEMO
DOWNLOAD XML
DOWNLOAD PASTA ZIPADA (recomendo)

Propriedades:
Duas colunas
Barra de navegação
Gadget para subscrição (Rss/Feeds/Twitter)
Ícones de compartilhamento redes sociais (ativado)
Blockquote personalizado
Botão “Voltar ao topo” com efeito deslizante - JQuery
Melhor visualização nos navegadores: Firefox, Chrome, Ópera e Safari
Instruções para edição do gadget para subscrições

Faça login, clique em “Design” e  clique em “Adicionar um Gadget” e escolha a opção “HTML/JavaScript” – cole dentro dele o seguinte código:

<!-- Email suscribe -->
    <div style="border: 1px solid #ccc;padding:5px;">
    Receber publicações vía email
    <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Teu-FeedBurner-Feed'’, 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input type="text" name="email" /><input type="hidden" value="Teu-FeedBurner-Feed" name="uri" /><input type="hidden" name="loc" value="es_ES" /><input type="submit" value="Subscrever" /></form>
    <div style="padding-left:10px;">
    <p><a href="http://feeds.feedburner.com/Teu-FeedBurner-Feed " target="_blank" title="Subscribe nuestras entradas"><img style="float:left; margin-right:5px; width:20px; height:20px;" src="http://4.bp.blogspot.com/_y7IGkRf9Tjc/TBuUtFXSmtI/AAAAAAAAAIc/d_xrKhfqho4/s400/rss.png" /></a></p>
    <p><a href="http://feeds.feedburner.com/Teu-FeedBurner-Feed " target="_blank" title="Subscrever-se">Increver-se RSS Feed</a></p>
    <p><a href="Url-de-tu-pagina-de-Facebook" target="_blank" title="Facebook"><img style="float:left; margin-right:5px; width:20px; height:20px;" src="http://2.bp.blogspot.com/_y7IGkRf9Tjc/TBuUxNaMxxI/AAAAAAAAAIk/YfPrObt6vdE/s1600/facebook.png" /></a></p>
    <p><a href="Url-da-tu-pagina-no-Facebook" target="_blank" title="Facebook time">Siga-me no Facebook</a></p>
    <p><a href=http://twitter.com/USERNAME target="_blank" title="Twitter"><img style="float:left; margin-right:5px; width:20px; height:20px;" src="http://1.bp.blogspot.com/_y7IGkRf9Tjc/TBuU1wVw2aI/AAAAAAAAAIs/sCPJ69n07Ms/s1600/twitter.png" /></a></p>
    <p><a href=http://twitter.com/USERNAME target="_blank" title="Twitter time">Siga-me no Twitter</a></p>
    </div></div>
    <!-- /Email suscribe -->

Escreva os seus endereços Feed/Rss e twitter username nos trechos grifados em vermelho.
Editar a barra de navegação

Faça Login ►Design ► “Editar HTML” e encontre o seguinte trecho:

<ulo class.='tabNavigation'>
<li><a href='ENDEREÇO-DO-BLOG’>Home</a></li>
<li><a href='LINK DA PÁGINA SOBRE O BLOG'>Sobre o blog</a></li>
<li><a href='LINK DA PÁGINA DE CONTATO'>Contato</a></li>
</ul>

Escreva os endereços correspondentes no espado grifado em vermelho.
Para instalar o gadget  “Postagens Recentes” como está no modelo, siga os passos como nas imagens abaixo.

  
  


Créditos:
O gadget de subscrição foi criado por Rosa Torre do ESCAPARATE DE ROSA, onde ela apresenta três modelos diferentes que você poderá  escolher e substituir caso queira.
Imagem:  Pinup de Gil Elvgren editada por mim em Photofilte Studio
Base/Inspiração ► Blogger templates Templates Block
Caso tenham algum problema com instalação, enviem mensagem pelo formulário de contato.

Beijo da Mama ♥

Design elegante, cores suaves, background com textura de madeira e um bom trabalho de edição de imagem sugerindo papel de carta personalizado. Muito bom para blog pessoal, textos, poesias, etc…
Recomendo o download da pasta zipada que contem todos as imagens utilizadas no layout.
Clic na imagem para demonstração online.

Template Anotações Online – DEMO
Documento XML – DOWNLOAD
Pasta zipada (recomendo) - DOWNLOAD

Propriedades:

1. Duas colunas
2. Resumo automático com imagens
3. Lista de posts relacionados abaixo das postagens
4. Barra de navegação com informações para os links
5. Ícones para feed e redes sociais
6. Ícones exclusivos nos marcadores
7. Blog pager (navegação) personalizado

INSTRUÇÕES PARA INSTALAÇÃO:
Faça download da pasta zipada (recomendo) e descompacte numa pasta em seu PC . Lá você vai encontrar as imagens e o documento XML, ou faça download somente do XML
Faça login → Clique na aba Design → Clique em Editar HTML → Clique em Selecionar arquivo →Clique em Fazer upload → Salve o template
MENU (Linkbar)
Procure dentro da sua pagina “Editar HTML” o seguinte trecho:

<!-- Linkbar início -->
<ul id='blue'>
        <li class='current'><a expr:href='data:blog.homepageUrl' rel='tag'>Home<span>Página inicial</span></a></li>
        <li><a href='ENDEREÇO' title=''>Sobre o blog<span>Texto correspondente</span></a></li>
        <li><a href='ENDEREÇO' title=''>Portfolio<span>Texto correspondente</span></a></li>
        <li><a href='ENDEREÇO' title=''>Link<span>Texto correspondente</span></a></li>
        <li><a href='ENDEREÇO' title=''>Contato<span>Deixe seu recado </span></a></li>
    </ul>
<!-- Linkbar fim -->

Edite os trechos coloridos: Endereço do link, nome do link e texto que vai aparecer ao clicar.
ÍCONES E LINKS PARA REDES SOCIAIS
Procure dentro da sua pagina “Editar HTML” o seguinte trecho:
Coloque os endereços nos locais indicados.

<div id='redes-sociales'>
<a class='redes-sociales' href='http://SEU-ENDEREÇO-FEED' rel='alternate' target='_blank' title='Suscribirse' type='application/rss+xml'><img alt='rss' border='0' border:0='' src='http://2.bp.blogspot.com/_aWhy4ZWNovE/TGHEZp3wTYI/AAAAAAAAArc/dHdubszLfVw/s320/rss.png'/></a>
<a class='redes-sociales' href='http://twitter.com/USERNAME' target='_blank' title='Twitter'> <img alt='en Twitter' border='0' border:0='' src='http://3.bp.blogspot.com/_aWhy4ZWNovE/TGHEjU8WEmI/AAAAAAAAArk/VfASZ-ZHvG0/s320/twitter.png'/></a>
<a class='redes-sociales' href='http://SEU-PERFIL-FACEBOOK' target='_blank' title='Facebook'> <img alt='en Facebook' border='0' border:0='' src='http://4.bp.blogspot.com/_aWhy4ZWNovE/TGHEpM0wrQI/AAAAAAAAArs/J4c9ZQwY_Xo/s320/facebook.png'/></a>
<a class='redes-sociales' href='http://PAGINA-YOUTUBE' target='_blank' title='YouTube'> <img alt='YouTube' border='0' border:0='' src='http://2.bp.blogspot.com/_aWhy4ZWNovE/TGHE_Jbm8YI/AAAAAAAAAr8/llfEUWb8LFo/s320/youtube.png'/></a>
<a class='redes-sociales' href='FEED-NEWSLETTER-OU-EMAIL'> <img alt='YouTube' border='0' border:0='' src='http://1.bp.blogspot.com/_aWhy4ZWNovE/TGHFDwzyKII/AAAAAAAAAsE/VfsbHqJ9DJ4/s320/email.png'/></a>
</div>

Template Anotações Online – DEMO
Documento XML – DOWNLOAD
Pasta zipada (recomendo) - DOWNLOAD

Qualquer problema, grita que eu acudo.
Beijo da Mama ♥