Sobre o Blog

MamanunesO Dicas e Templates Mamanunes nasceu da minha necessidade de registrar as descobertas que faço enquanto aprendo a desenhar templates para a plataforma Blogger. Compartilho aqui alguns truques, templates e informações que considero úteis para blogueiros e curiosos. Entre e fique a vontade.

Info

20.5.10

image
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:
OurTuts

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='http://4.bp.blogspot.com/_DCJ4PAWLOdE/S_UzFFR0hsI/AAAAAAAAEc0/eDtjiw00oEM/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(http://3.bp.blogspot.com/_DCJ4PAWLOdE/S_UN0ZIS8RI/AAAAAAAAEb8/Sj-z5kl5dxM/s320/twitter.png) no-repeat scroll 0 0;
}
#slidertext ul li a.flickr {
background:url(http://3.bp.blogspot.com/_DCJ4PAWLOdE/S_UNmJy33-I/AAAAAAAAEa8/GQwdtQX08k8/s320/flickr.png) no-repeat scroll 0 0;
}
#slidertext ul li a.facebook {
background:url(http://3.bp.blogspot.com/_DCJ4PAWLOdE/S_UNkt6peKI/AAAAAAAAEa0/q2-E8pU31ow/s320/facebook.png) no-repeat scroll 0 0;
}
#slidertext ul li a.youtube {
background:url(http://1.bp.blogspot.com/_DCJ4PAWLOdE/S_UN3tULZrI/AAAAAAAAEcM/-2xbBNYnCeI/s320/youtube.png) no-repeat scroll 0 0;
}
#slidertext ul li a.yahoo {
background:url(http://1.bp.blogspot.com/_DCJ4PAWLOdE/S_UN1qqDdAI/AAAAAAAAEcE/wYCT1VnyWaI/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
image



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 ♥

17 comentários

Caca

Nossa!
Muito obrigada!
Eu tava mesmo precisando disso!

TOP BLOG ws

Olá.
Venho por meio deste convidar-te a participar do 'Top Blog da Semana' do site 'TOP BLOG ws'.
PRÊMIO: Espaço de publicidade em um blog de qualidade. Cadastre seu blog e concorra.
http://videosincriveis.ws/topblog

Um grande abraço!

Max Martins

Excelente!
Volta e meia estou mexendo no HTML e bagunçando.
Como você sabe, a gente nunca está satisfeito com o layout.
Ainda não aprendi a modificá-lo como quero, mas quando estiver entendendo melhor, com certeza vou copiar esse template.

Obrigado pela dica.

Abraços

MamaNunes

Caca Obrigada e se precisar de ajuda, não se acanhe.

TOP BLOGS ws
Jam me inscreví =)

Max
Essa coisa de CSS, HTML é viciante hehe!

Hamilton

Faltou dizer como editar o tempo estimado fora do ar...

MamaNunes

Hamilton
Boa! Eu deixei o countdown no modo default porque não entendo bulhufas de adapatção de script, mas se você quer tentar veja no site do criador:

http://keith-wood.name/countdown.html

Lá tem todas as opções de modelos e configurações.
Vai fundo!!!

beijo da Mama♥

Anderson Renan

Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente.
Mensagem de erro em XML: The element type "img" must be terminated by the matching end-tag "".

MamaNunes

@Anderson Renan
Oi Anderson!
Não me pergunte por que, mas o Blogger as vezes tem essas "gracinhas", então faça seguinte:

Repare que no trecho abaixo tem uma tag img coloque o fechamento </img> no final do endereço, deixando assim:

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

Isso vai resolver o problema!

Boa sorte ♥

Anderson Batata

Otimo template, mas no caso em si sao 5 redes sociais, quando tiramos duas e deixamos somente 3, como fazemos para centralizar na pagina a imagens das 3 redes somentes.

www.andersonbatata.blogspot.com

obrigado.

MamaNunes

@Anderson Batata
Oi Anderson

Encontre o código " .social

Modifique modifique a seção CSS
Onde está "float: left;"
escreva:
float: center;

Deixe assim:

.social a {
display:block;
width:64px; /* largura do ícone */
height:64px; /* altura do ícone */
float:center;
margin-right:20px;

Espero que consiga.
beijo da Mama♥

Administrador

@MamaNunes


jajajajaja

George

Ainda não tá dando certo ajeitar o relígio, já estiurei a cabeça!

Lukas

Excelente Mama!

Taisa Adams

Parabéns pelo trabalho!

DasDivas

Dei uma alterada no template e tal, quem quiser conferir: http://www.dasdivas.com

Dúvidas: adasdivas@gmail.com

Anônimo

Eu baixei o contagem regressiva, e configurei quase todos os campos, menos a linguagem. Voce pode me ajudar para trocar a linguagem de ingles pelo portugues-BR. Tentei várias coisas que estão no site do autor, mas não consegui. Aqui está o site do autor http://keith-wood.name/countdown.html. Lá existem vários códigos para fazermos as alterações.
Obrigado pela ajuda,
Carlos

Anônimo

If some one wishes to be updated with most up-to-date technologies then
he must be pay a visit this site and be up to date every day.


Feel free to visit my web site; online stopwatch with sound.

Postar um comentário

Caso queira informações mais detalhadas, ou encomendar um template personalizado, use o Formulário de Contato ou meu Email. Responderei o mais breve possível.
Obrigada.