Tweet Template “Lembranças” – Blogger Templates

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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggdnR_5HAvwINuDX8smuWfp-YEj00aRIzkUfqG5x8CUH8mtizwWHlwxexekjwQ5zTsirFKCy5O3SuwTSBaDfgZkwqco9eZm4iuz2ER9b0Zi_eNeDs2cRRSJGcI9bc4BwrYRWSNzVa1Iv1V/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhN1ppE_x8F9AnTohDt6Xg05sHhxv31-sUx6CcDDsX3zcwJEClcAMQClYcjuoc1crI8q3GbD4w9EZsPeThCbLRD28W9l_tuz4idGDy6Wexegb5QHysjhF7esFfgMgjAKuEj_C8ZLcq4t5b2/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAOaT0wqXfUUdKjhYKwoRG3Wsy8rUo8ivIJh6zgeh3Rk5hSGN1FQPlojIoTcb77KVVlu-QZ3Vm3Ie-0ndcsefqoXZ4z_HR07kkv08SWCiq4i7ds94U3EqojNWRZ49mtKg1LUUW5PyrTpEG/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3lO0dpPvtxHkeKDWdtNYkjEG3tGMCHLoZzD6SUPcPCwTf3UTky58z0x9yM0K66aSX5i-QNSF6SUcPmbXO5ONCpkk7V7tkKwSXoffjcweiZd1P6ow9bOcvBxE5rRtD-z3qBc59swI1GvB6/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZhc90ceF7RzjXvQr2OXCj-TkCpxfg1H8wDPtOgCSCJiw32JecqiR9C975U73-jCIDJ6uC9e3b4bfieDWP7QtlMn5Dn3vEIXOFkJ7W9OprrkeG56O20aVGPBSFTSHytVEqobg53WHWkSO2/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZN0qYkW70p700YOFJcaSM8n5ExWAbNc06BawvkRDArh70EzhekuPSz51SQsZuco3riSUhTKIPxJBbdjGTvdaMJ3FHy8fgY0-ZyvEMuQsDlVdOGzIURQC6WuYrG71S4KhDqt1IWbEIxG3s/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 ♥

Leia mais...

Tweet 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 ♥

Leia mais...

Tweet Template “Cartão de Visitas “

Demo / Download

Um  modelo Wordpress adaptado por Rodney SANKINKA para o Blogger, perfeito para quem está  ligado as redes sociais mas não se liga em “blogar”.  O template apresenta três páginas, uma para apresentação de trabalhos, uma breve descrição e contato.

Eu achei interessante mas ainda não fiz testes com ele. Me pareceu ser bem simples e fácil de customizar caso queira, por exemplo, um background diferente e ícones de outros sites de relacionamentos.

Dá uma olhada na página do autor onde há instruções detalhadas para a instalação.

Leia mais...

Tweet Configurar a Data do Template “Em construção”

   Há poucos meses eu publiquei um template para ser usado enquanto seu site ou blog estiver em construção, você poderá ver AQUI► TEMPLATE EM AÇÃO e AQUI ►TUTORIAL, DOWMLOAD . Eu não sabia como configurar a data, contagem regressiva, para a inauguração (falha minha, desculpem), eu realmente entendo pouco (nada) de programação de scripts. Pesquisando e testando eu descobri onde fica o trecho dentro do código para configurar a ‘bendita’ data. É muito simples.

Faça login ► clique “Design” ►  “Editar HTML”

…

 

Procure pelo seguinte trecho:

<!-- jquery countdown-->
<script type='text/javascript'>
$(function () {
var austDay = new Date();
    austDay = new Date(austDay.getFullYear() + 2, 0, 0);
    $('#defaultCountdown').countdown({until: austDay, layout: '{dn} {dl}, {hn} {hl}, {mn} {ml}, and {sn} {sl}'});
    $('#year').text(austDay.getFullYear());
    });
</script>

SUBSTITUA PELO CÓDIGO ABAIXO:

<!-- jquery countdown-->
<script type='text/javascript'>
$(function () {
var austDay = new Date();
    austDay = new Date(ANO, MES,DIA);
    $(&#39;#defaultCountdown&#39;).countdown({until: austDay, layout: &#39;{dn} {dl}, {hn} {hl}, {mn} {ml}, and {sn} {sl}&#39;});
    $(&#39;#year&#39;).text(austDay.getFullYear());
    });
</script>

Coloque a data prevista para a inauguração, no espaço grifado em vermelho.

Veja como ficou a página que fiz para o Marcio Nunes

Prontinho! É só isso ☺

Beijo da Mama ♥

Leia mais...

Tweet Retro Vintage – Free Blogger Template

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.

Clique na imagem para ver a demonstração online

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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUZMEVyJIy2N15X3Xii_-mgA0jAi0W6Merkj8nuZnBBzSFwm6ncb3IZ63OZ0zoxaP49upbTx1WJ2oy-76nGm45nOAbzYmN3UE7-BKNr63-8TzoF-bSmSvTgyfrteJHgMCC3aTmI9HqAZOy/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjni7ZWZy1mxvjU1gVRa2GbMMkg7vmH1XshcAgDHJX5RmthZFzQOi7603CWudHuMJw1G4U4RVl2Jma-Qm9-6NrG5SNCKYHSDNkKJljOJ5N17pFCNDpPtRsB8sOQocqJqhMwsq0BD5PYi5nA/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUaZe6FYHGUL1Gwi7-YIauMR48FzhFVF6dh-OPKcpVUxmG3kbP2_KVfKi2JbpRh0LDl3V09irmxpRJ-41CPdie9p4DNylGi1Zla2hdH_st5Qr0mY8qjTSjfe_XLJIxOH4Mv84tAlpQEzJx/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 ♥

Leia mais...

Tweet Template “Anotações Online” – Free Blogger Templates

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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiD45vAL48Pfprbmw-FnQmBcEKU_9JKDGwvrteEwOwgb7vXtDDZrj2msj5yeR2fgFKv1-jygdXJ3XntR9vd5_59NaYp1PWJunNnwMksrarFj-dJ5Gh9MIzwsx8ARiy5QVSArjWAGQmm0mu/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw2n3atvabKwPH9gSEjrcL06BKyGJvHuvUA7iQEIB5YY_pSdH0mwporB7BYOZpTFo6eSj9mDtq92CBC9Ynd0OJ70Yoa8dPzfv-bZqmnay1NuWNzswugRaM9vhCfkyWXxKu8N_iR_Rffdng/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8OVuo1z3jn1c7leHHsRVTk1KywQsO0vMcNX8qWkvSd8gLr0CV9s7qrcajeKpzd09_QXKVkD7W9TBJsRHEf1pBw5yxt5usivBs6oTXC0MynjDv8bVS-_BtRmDIOX4wPNNb0jS8S63-QcYq/s320/facebook.png'/></a>
<a class='redes-sociales' href='http://PAGINA-YOUTUBE' target='_blank' title='YouTube'> <img alt='YouTube' border='0' border:0='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLtZ_BqddMwdmqEipmOQcQNJJwPIGq3FJ7dOemCxKFQ5RQYfszwtfR8mSINkZO6qL43CT8WXQiEVQJzXgnXGdb7CFbDW_9LkSO3Wj8FM6zPjk3ckbRwXQkd9yOVuKCwWZCSq2bH7bFOYjc/s320/youtube.png'/></a>
<a class='redes-sociales' href='FEED-NEWSLETTER-OU-EMAIL'> <img alt='YouTube' border='0' border:0='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZwH712pikcjW1TTT_FbKJMaYOA2prTD97CMU1Ya3ggYh43QC5pNqOXrDhjwSIq6O-f2609KPshQptuEfPD7HZ89ulHS37sMWVrGciKyb9_ElUBNzM_KtERUX6cNQd3uff4ljGhR7fvmtW/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 ♥

Leia mais...

Tweet Novo Template FREE - “A Abelha” Bzz Template

Um template simples mas caprichado e cheio de charme (modéstia a parte). Simples e funcional. Ideal para blog pessoal ou para um tema sobre saúde, alimentação natural, receitas…
Toda a estrutura recebeu as melhorias do Blogger, por exemplo “Artigos Relacionados” com imagens adaptado ao layout, para exibir até 5 artigos.

Disponibilizei o código XML para baixar direto e também uma pasta zipada com o documento e as imagens para que você hospede em seu próprio blog ou em um site de sua preferencia para sua garantia no caso de haver algum problema.

 

* DEMO ONLINE

* DOWNLOAD TEMPLATE

* DOWNLOAD PASTA ZIPADA (recomendo)

PROPRIEDADES:

• Duas colunas
• Posts resumidos (automático)
• Numero de comentários, plural e singular
• Ícones para Twitter e Feed (abelhinha)
• Artigos relacionados com imagens (personalizado)
• Links para enviar postagens para redes sociais ( Wiest Blogger)
• Blockquote personalizado
• Cores e fontes pré-definidas no CSS
• Fonte do Cabeçalho – Google Font Diretory

INSTRUÇÕES PARA CONFIGURAÇÃO:

Nome e descrição:
Faça login e clique em “Configurações” e  escreva no campo determinado.

Barra de Navegação do Blogger:
Normalmente retiro essa widget mas se você fizer questão de usar a Navebar do Blogger, faça login, clique em “Design” e “Editar HTML”. encontre o trecho abaido e apague-o:

#navbar-iframe {
display:none!important;
}

Editar menu exclusivo do template:

• Faça login, em seguida clique em “Design” e depois “Editar HTML
• Procure pelo trecho abaixo e edite onde está em vermelho

<ul id='menu'>
            <li><a Title='Home' expr:href='data:blog.homepageUrl' title='Home'><img alt='' height='42' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV5lqccoJQBurPVnUieNJiiJ_8FzwkGOOr4_ld1wWsBntSO7NajPkaaYf46j5LRQILtE1p7d7M9ACFJd9uMLv7S0TFPL-gvk79cDvTofqx52uAZqxj695NmsbXtPjDAMEUYq9meKlpGJ18/s400/home.jpg' width='64'/></a></li>
            <li><a href='mailto:SEU EMAIL' title='Contato'><img alt='' height='42' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2bq4GCeShyZ7dH8qSlLzWJcPsTRMxKQPo3AeZ68KUxgI_gHw_KQBmFtiyCnOOedcLoIScwNqlHx_u_QfYqilGv_HqcQ_-Cp2-kV_4oAGFhSKjkKz5M2psYByeA9gceobnL4clD0WpZMI5/s400/contato.jpg' width='93'/></a></li>
        <li><a href='SEU PERFIL' title='Quem sou'><img alt='' height='45' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2qLtylouAFRXJrBgnFLPNHpUqdBQVvm-p0rhKXZcNO6xyoPp4olbClNwiAhHF8GXuCtnYdnYnrZnlfzme0W40Wls99ZDMDBzRVFUJGv3AYMJiO2VXAMCkMtaXo59QN_8oebjA1IQF0k_W/s320/quem.jpg' width='102'/> </a></li>
<li>
<a href='http://twitter.com/USERNAME'><img height='100' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGysRBsLR2h1_ej76neajanlnRNbIwv-FqbylG3wd-aVDXLwoaAIU_F7KQbn6Mlm8Lfn9EuEFb9vus1ALCi9JqEkOuO-s4-8NnnHDVa07lbUd0pMSNfoAxmauYUmeNuoKGd7FTj14lY7Dk/s320/twestival+bird+7.png' title='By: TwitterButtons.com' width='119'/></a><br/>
</li>
</ul>

Se tiver alguma dúvida, não se acanhe, escreva no formulário de contato e eu dou uma força para a instalação.
Espero que gostem!

Beijo da Mama♥

Leia mais...

Tweet Template Para Quando Seu Blog Estiver Em Construção

Se você está construindo, modificando ou transferindo seu blog ou site e não deseja (óbvio) perder contato com seus leitores e ainda oferecer inscrição via email para que eles recebam  as notícias e novidades que publicará, este template vai te ajudar. É um template especial com um desenho bem bonito e funcional que oferece todas as informações para que seu leitores não “desistam” de você (rss). Instale em sua página enquanto o seu template definitivo não fica pronto.
Clique na imagem para ve-lo em ação:

…

DEMO / DOWNLOAD

INSTRUÇÕES PARA PERSONALIZAÇÃO

1 ►Para colocar o SEU logotipo ou banner (imagem ao lado esquerdo-superior),  encontre o seguinte trecho em seu HTML <div id='logo'>

Você verá o seguinte:

<div id='logo'>
            <a href='index.html'><img alt='logo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgskexVn5OQDJQpcWBZSf-FeTsm6qUBsnGiEjfWjXRwT5heDs04pKcnqFyUHpZA1Vbicx2cvypkaKfvDSbWbZ6xmQBfr399ZuP-K0yXOBmi5oes5Oz4V0pxnBtfFziCQEMAbP9hRDMvCy4/s1600/buttonp.jpg'/></a>
        </div><!--end logo—>

Edite substituindo o endereço da minha imagem pela sua. Deixe assim:

<div id='logo'>
            <a href='index.html'><img alt='logo' src=' ENDEREÇO-DO-SEU-LOGOTIPO '> </a>
        </div><!--end logo—>

Nota: NESTE tutorial você pode aprender a criar um logotipo ou banner

2 ► Seu email e ou formulário de contato: encontre o seguinte trecho em seu HTML

<div id='contact_details'>

<div id='contact_details'>
            <p><a href='mailto:SEU-EMAIL>SEU EMAIL</a> </p>
            <p><a href='ENDEREÇO-CONTATO>Informações via Formulário de Contato</a></p>
        </div><!--end contact details-->    

3 ► Para mudar o texto do box encontre o seguinte:

<div class='text'>
              <h2>Este Blog está em construção</h2>
              </div><!--end text-->

Substitua a frase grifada em vermelho.

4 ► Para editar os ícones da sua rede social, encontre o seguinte:

<div class='social'>
(código HTML)

<div class='social'> 
<a class='twitter' href=’SEU-ENDEREÇO’>
  <a class='flickr' href=’SEU-ENDEREÇO’>
  <a class='facebook' href='SEU-ENDEREÇO>
  <a class='youtube' href='SEU-ENDEREÇO’>
  <a class='yahoo' href='SEU-ENDEREÇO’>
</div>

Se quer substituir os ícones, encontre o seguinte trecho e edite o conteúdo.
(código CSS)

.social a {
display:block;
width:64px;  /* largura do ícone */
height:64px;  /* altura do ícone */
float:left;
margin-right:20px;
}
#slidertext ul li a.twitter {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIoDntqOFO0DtA_qD58m65xPeJeW-0ml99mrUur3hXoG9naei6MSy12Wg394rcfOcsdQz8iYeiPh0IOlfoORrOR-k6tI8gKAp7xi1GmXPxnIZyLfJUGVXMUdFZfroKLOPSkEWjptp48js/s320/twitter.png) no-repeat scroll 0 0;
}
#slidertext ul li a.flickr {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZvHp-DPWh1_otxLMeKw47YeKzMQsF5wM-68hjFDeoWUznvrmuBXTl2Li2OaMoFfYD_DfKSQ04YuXCwGU10mV4QzV3CaUwxG2_DOd2H7Pzvv_pfv3NKx5pEokv_KResa-2mYAJE3-gN4U/s320/flickr.png) no-repeat scroll 0 0;
}
#slidertext ul li a.facebook {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidEnzePh-FUmJ9wmfqxmHrqGh9dA1ZYViKXUDYHD_ONfmR-fcfK1G0SuOxYISe36qtrkg3m7is5ElRRvaXZhKzg-pcwTEVPwYJHD6KqSQolpx03aTcwX7X_aqhHYSXOYonLOmkGRK7ByY/s320/facebook.png) no-repeat scroll 0 0;
}
#slidertext ul li a.youtube {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVlNxyHHBwCoaCa78vHpekvBpYWIbLe9Ueso1n8rynMgTpxV6ur_3MnOKj-7EvpDW6OBGYDcZ54pDIM4K1vTn6SJfaaDVQstF680E4Lkjo4Ld3gtEXEGjSWwBS8YE_-gaJA5IRRwMt8lM/s320/youtube.png) no-repeat scroll 0 0;
}
#slidertext ul li a.yahoo {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikbfj20wJNkcevkLO5SJsGmhz7qg1Caq3eu9NzFqOUCBAiJho9R8Zvvwp-NnuGcJ3ILDJYBWgzY17ApDPjVXVVXIDWmeR2EiuRSTk1CXOnfJ16QNm3E6YDZ7Jj3w5iteucVqTmkIqW37I/s320/yahoo.png) no-repeat scroll 0 0;
}

Nota: Nessa área Você poderá retirar, substituir ou acrescentar ícones segundo as redes sociais das quais você participa, alterando tambem o código HTML .

5 ► Para oferecer informações por email através da assinatura  do seu Feed, é preciso ter o endereço do Feed. Porcure pelo seguinte trecho:

<h3>Digite seu email para receber as atualizações!</h3>
Logo abaixo dele virá o código do formulário.

<form action='http://feedburner.google.com/fb/a/mailverify' id='subscribeform' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=DicasParaBlogger&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<p>
<div id='email_input'><input id='email' name='email' onblur='if(this.value==&apos;&apos;){this.value=&apos;Enter Your E-mail&apos;};' onfocus='if(this.value==&apos;Enter Your E-mail&apos;){this.value=&apos;&apos;};' size='30' type='text' value='Enter Your E-mail'/>
<input name='uri' type='hidden' value='DicasParaBlogger'/>
<input name='loc' type='hidden' value='en_US'/>
<input id='submit_button' size='80' type='submit' value='Submit'/></div></p>
</form>

Substitua pelo seu endereço Feed.
Onde capturar o endereço no Feedburner




6 ► Por fim, para editar o texto com um resumo (da ópera) sobre o seu blog, procure pelo seguinte trecho e editde a gosto do freguês (como diria minha teacher Ariane)

<h3>Informções sobre o site</h3>

                                         <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi.</p>

Encontrei no site OUR TUTS e adaptei para o Blogger.
DEMO DO TEMPLATE ORIGINAL
DEMO DO TEMPLATE ADAPTADO POR MIM PARA O BLOGGER
Visite a página do Our Tuts para fazer o DOWNLOAD do documento original (imagens, scripts, XML, HTML, ect.)
Qualque dúvida, grita que eu acudo!
beijo da Mama ♥

Leia mais...

Tweet Template Classic Style – Com Galeria de Fotos “Fancy JQuery”

Vi esse modelo  para site e  descobri que estava à disposição para free download. Não resisti em converte-lo para o Blogger. Ficou maravilhoso (sem modéstia nenhuma) não só pela funcionalidade, mas pela beleza do design minimalista. Cores neutras e espaço suficiente para não ofuscar a beleza das fotos.
A galeria Fancy JQuery apresenta um efeito lindo na ampliação das fotos além de funcionar como um slidshow fantástico. As fotos que aparecem ampliadas, podem ter o tamanho que você quiser. Muito bom!!!
Criei 7 páginas estáticas personalizadas para os links, nas quais não aparecem a galeria, nem a sidebar, dando assim um visual de site mesmo.

Leia mais...

Tweet Laranja Rosa – Blogger Template

Eu amo os tons de laranja por isso tive muito prazer em desenvolver esse layout. É um desenho bem feminino que pode ser usado para um blog pessoal. Tem espaço discreto para publicidade (opcional). Sua visualização, com todos os detalhes de bordas e sombras é bem melhor no Firefox.

DEMO ► Veja o template

DOWNLOAD ► Pasta compactada com documento XML e imagens

DOWNLOAD ► Apenas o XML

........................................................................

Propriedades:

• Menu de navegação no header (Editável em Elemento de Página)
• Destaque para postagem mais recente
• Postagens separadas por blocos
• Sidebar com uma coluna
• Ícones sociais com efeito hover na sidebar
• Script para postagens resumidas com thumbnails
• Script para artigos relacionados
• Três colunas no rodapé
• Elementos de página no header e footer

 .................................................................................................

Estrutura do layout



Para mudar os ícones sociais, caso queira troca-los, clic na aba “Editar HTML” e procure pelo trecho abaixo e coloque o endereço da sua imagem no local indicado em vermelho.

#sectionmy .sectionmy2 h2.rss {
background:url('http://i9.photobucket.com/albums/a65/mamanunes/feedSub.png') no-repeat top left;
}
#sectionmy .sectionmy2 h2.email {
background:url('http://i9.photobucket.com/albums/a65/mamanunes/new-mail-sub.png') no-repeat top left;
}
#sectionmy .sectionmy2 h2.twitter {
background:url('http://i9.photobucket.com/albums/a65/mamanunes/_twitter.png') no-repeat top left;
}
#sectionmy .sectionmy2 h2.faceboock {
background:url(http://i9.photobucket.com/albums/a65/mamanunes/_facebook.png) no-repeat top left;
}

Para direcionar o link para sua página, procure em seu HTML o  trecho abaixo e faça as alterações.

<h2 class='subscription rss'><a href='SEU-URL-RSS-FEED'>Assine este Feed</a></h2>

<h2 class='subscription email'><a href=' SEU-URL-FEED-EMAIL-SUBSCRIPTION '>Receba novidades via EMAIL</a></h2>

<h2 class='subscription twitter'><a href='SEU-URL-TWITTER'>Siga-me no TWITTER</a></h2>

<h2 class='subscription faceboock'><a href='SEU-URL-TWITTER'>Siga-me no Faceboock</a></h2>

Se tiver algum problema para instalar, não se acanhe. Escreva pelo formulário de contato ou email e eu terei prazer em ajudar.

DEMO ► Veja o template

DOWNLOAD ► Pasta compactada com documento XML e imagens

DOWNLOAD ► Apenas o XML

Um abraço!

Leia mais...

Tweet Template Clean “Leão Branco”

DEMO / Download

Um template claro, bastante funcional e bem adequado a um blog pessoal.
Sobre o desenho do template "Simplex" de AskerAkbar ► BloggerThemes , fiz  modificações, inseridos espaço para imagem no header,  posicionamento das widgets da sidebar, inseri variáveis para que os títulos, cores e texto possam ser mudados ao gosto do freguês (como diz minha teacher Ariane). Também acrescentei algumas funcionalidades à barra de links (menu) que também foi totalmente modificada. Ou seja, um novo template

Leia mais...

Tweet Template Livre de Ariane Naranjo

Em  2007, quando migrei definitivamente para o Blogger, eu criava templates para Weblogger e ZipNet, não entendia “bulhufas” do novo formato. Tive muita sorte porque, o primeiro blog de ajuda para blogueiros que conheci foi o  Templates para Novo Blogger da querida Ariane Naranjo. Com ela aprendi (e aprendo) quase tudo o que sei.

Leia mais...

Tweet Template Dinâmico Para Blogspot !

Esse tutorial apresenta um hack que, depois de instalado, permite que o leitor escolha como quer ver seu blog. O tema escolhido será visto somente pelo leitor em particular , para o visitante. Para os outros usuários o template aparecerá no formato padrão . Ou seja, cada um poderá ver como quiser. Muito interessante. Para compreender mais rapidamente como funciona, veja ► TEMPLATE DINÂMICO

Todo o tutorial foi publicado pelo site BloggerStop para quem vão todos os créditos e agradecimento. Eu apenas testei, traduzi e adaptei alguns detalhes para que a gente possa compreender melhor.

Leia mais...

Tweet Template Page Flip Blue

Esse template tem um efeito interessante com script jQuery e CSS, o “Page Flip” instalado no canto superior direito da página, que dá um charme todo especial ao desenho além de chamar a atenção para a assinatura do Feed Newesletter.
Confira no Blog Demo.

Leia mais...

Tweet Template Love Cat’s Blue

Template Cute para meninas que gostam de gatos, gatinhos e gatões =)
Propriedades:

• Barra de links no topo do template
• Gadget fixo HTML/Javascript para textos, ícones, fotos ou vídeos.
• Hack “Leia mais…” Script custumizável. Tutorial aqui
• Sidebar dividida em 3 colunas
• Footer (rodapé) com 2 colunas

Leia mais...

Tweet Template Reflection desenhado por Ceboing Ipiet

Ceboing Ipiet é uma extraordinária designer da Indonésia que oferece em seu site, Ipetoon, templates lindos, profissionais e FREE pra Blogspot. Este que indico hoje é perfeito. Confira:
Blogger Template Reflection Profissional Blogger xml Template 2009

Leia mais...

Tweet Graciosos Templates e ótimos Tutoriais

O Templates e Backgrounds oferece lindos modelos para download, de fácil instalação, além de excelentes tutoriais para customização , imagens para header (imagem principal, topo), criação de backgrounds, dicas para trabalhar com Paint Shop Pro (que eu amo) e muito mais.
A artista chama-se Sonia Regina. Confira.

Leia mais...

Tweet Novo Layout ! Black Brown Theme

Fiquei encantada com a arte digital de Kazuhiko Nakamura e embarquei na "vibe" dele. Depois muita "transpiração" consegui desenhar e finalizar esse layout. Escuro, como eu gosto, porém com boa visualização e recursos. Fia duas versões, uma para mulheres outra para homens ( não necessariamente hehehe) Dá uma olhada.

Leia mais...

Tweet Belo Template - Red Dark Theme

Modéstia à parte, valeu o trabalho deste mês! Eu gostei (hehe). Inspirada nos temas Wordpress e nas criações de Jinsona me 'atrevi' a desenhar esse template com ampla área de postagem e mais:

Leia mais...

Tweet Template Flor Laranja

Para obter mais as informações sobre esse template e como instalá-lo, clique em "Demo" . Você será direcionado à pagina com imagens, tutorial, etc... Se gostou faça o download.

Leia mais...