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

6.4.10

image
 ATENÇÃO! Em 31/07/2010 o Blogger lançou um novo recurso para o Designer do Modelo (Background). Leia AQUI para informações detalhadas. Este post será mantido como documento de arquivo. Obrigada!


Existem milhares de templates prontos para download na rede e mais alguns tantos oferecidos pelo Blogger. No entanto, queremos ter um layout único, com nossa impressão digital (rs) e nem sempre temos dinheiro disponível para pagar um designer. Porém, com um pouco de paciência e boa vontade, conseguimos mudar o aspecto da nossa com sucesso. Com o novo “Designer de Páginas” do Blogger, essa tarefa ficou ainda mais fácil e prazerosa. Vamos aprender a mudar alguns detalhes que fazem toda a diferença em um template, começando pelo background.


Se você ainda não sabe sobre esse recurso do Blogger, leia ESTE tutorial.

Para esse exemplo, usei o modelo Awesome.Inc

image

Escolhi o estilo de layout com uma coluna lateral esquerda

image

E o estilo de footer com uma coluna horizontal

image
Podemos colocar uma imagem de fundo (background) de várias maneiras, mas aqui vou ensinar duas, bem fáceis de entender.
No primeiro exemplo, escolhi uma imagem bem grande, com 1600 px de largura por 1.200 px de altura. Ela toma todo o fundo do template. #Dica: Você pode usar um wallpaper.

Primeiro exemplo. Veja DEMO.

Escolha a imagem que quer como back e hospede no próprio Blogger ou em seu site de preferência, tipo Photobucket ou Tinypic.

Faça login no Blogger in Draft crie um blog para testes, escolha um modelo “Mínima” do Blogger e crie um ou dois posts com imagens, e faça um comentário.

Depois clique em “Layout” e “Designer do Modelo” e escolha o modelo que eu indiquei e cliqu em “Aplicar modelo

Escolha o estilo do layout e do rodapé clicando sempre em Adicionar Modelo.
Agora clique na aba “Editar HTML” e localize o código que será alterado.
Use as teclas Ctr+F e encontre o seguinte trecho:
<Variable name="body.background" description="Body Background" type="background"
       color="$(body.background.color)"
       default="$(color) none repeat scroll top left" value="$(color) none repeat scroll top left"/>
Substitua tudo pelo seguinte:
<Variable name="body.background" description="Body Background" type="background"
color="$(body.background.color)" default="#111111 url(http://themes.googleusercontent.com/image?id=1OACCYOE0-eoTRTfsBuX1NMN9nz599ufI1Jh0CggPFA_sK80AGkIr8pLtYRpNUKPmwtEa) repeat-x fixed top center" value="#111111 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOZEu_9zzhYEs5k1Kx2I0U-LEg0N9dow8t_H94QyKnOTzH_xxXRcjub_OvhpOiaF3YYJNYXu5ud7JeXeh05ke3XLSWqdBdKs-jQ_ztoW1a3pFsjenbSu80cONY5_vEs3VGunbTc6xNJLQx/s1600/fullscreen.jpg) repeat-x fixed top center"/>
O trecho em vermelho é o endereço da imagem que você hospedou.
O trecho em azul, determina ajusta a posição da imagem.

Segundo exemplo. Clique  na imagem abaixo para ampliar

BackDemoDes.Blogger

Aqui a imagem usada é pequena e se repete para dar o efeito desejado. A vantagem é que facilitará a abertura da página. Veja o tamanho da imagem : 80px X 80 px:

blgr067

Para esse modo, vamos mudar pouca coisa veja:
<Variable name="body.background" description="Body Background" type="background"
color="$(body.background.color)" default="#111111 url(http://themes.googleusercontent.com/image?id=1OACCYOE0-eoTRTfsBuX1NMN9nz599ufI1Jh0CggPFA_sK80AGkIr8pLtYRpNUKPmwtEa) repeat-x fixed top center" value="#111111 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-AaOmtQKG2F-qbTW_3C6OQEklH9xrXZVuqDqJHQHx8SNcJ8_MwFAO88E2K6X6XmJ__9-o9WTuovq5j-bv-6Mew5zIUXepTYmnFu03uVpeoqUb6DoZ336-n2fGol6gVKYrP0rjvJia5Lgf/s1600/blgr067.gif) repeat fixed top center"/>
O trecho em vermelho é o endereço da imagem.Veja que o trecho em azul muda um pouquinho e é isso que faz toda a diferença.
Depois de fazer as mudanças, volte ao Designer do modelo e ajuste as cores do título, texto, bordas etc., para que fique tudo bem bonito.


Dica: Crie backgrounds com texturas esclusivas lendo ESTE post.

Vou deixar algumas imagens de “lambuja” para vocês mas o ideal é fazer uma busca por patterns e backgounds no Google. Salve com o botão direito do mouse.
............................................................................................................
  patt_49c1c2ca36d0d   pattern8-pattern-7a    Carpet0012_2_S  blue1..............................................................................................................

Se quiser, leia um tutorial em inglês: Blogger Stop.net

É isso crianças! Qualquer coisa, grita que eu acudo!
Beijo da Mama

29 comentários

Unknown

Muito Interessante! Mas já ouvi alguém se queixando de que deixa o blogue um cadito pesadote... só ouvi, não confirmo!

Lá em cima, é um coração ou são duas impressões digitais?

;)

Grande Abraço.

MamaNunes

Alezandri

Nem tando. Com a segunda opção não pesa nada.

abraços

Anônimo

As imagens que o Blogger disponibiliza são enormes e deixa o Layout muito pesado,tenho obersavado isso em muitos blogs que utilizam os templates do do Blogger. É preferivel usar uma pequena e repiti-la. Mas o a dica tá ótima.
Abraços!

A. Lucky

Tarde Mama! Não consegui colocar um backgroud, tô me batendo pra colocar. =\
Você pode me dar uma força?
Se eu passar o meu email, vc me retorna que eu passo o login, pode ser?
Tks!

A. Lucky

email: financeiro@cooperlog.com.br
Tks! =D

Anônimo

Fiz maravilhas no meu "bloguito" com tuas espetaculares dicas. Quase tive um ataque para ajustar os layouts; ao ver receber tua no meu mail tua postagem, fui lá e pimba na chulipa: na mosca!

Mais uma vez obrigado "Santa Mamamunes"! Voce é mais uma "salvadora"!

Sucesso para todos nós!

Anônimo

Opsss....."faiô"! - onde está escrito "ao ver receber tua no meu mail tua postagem,", (kkkkkk) - leia-se "ao receber no meu mail mais uma postagem tua"...!!!
E olha que hoje nem é sexta, hein! - Santo Deus! -

MamaNunes

Padaquipadali Obrigada por me fazer rir logo de manhã!
que bom que o tutorial te ajudou. :D

abraços

verônica

olá mama! adorei esse post :)
já sigo seu blog faz tempo e tem realmente digas muito boas ..
no meu blog tenho um montão .. mas estou tento um problema ..
eu criei um template como você fez aqui, depois eu fui tentar meter as "tags" nos posts, mas não dá .. eu activo lá, fica tudo direitinho, eu vou ver no blog e não aparece .. mama, quê que eu faço? :s

Game Cover

uma coisa... meu template é totalmente personalizado pelo novo editor do blogger, posso aplicar a dica mesmo assim?

MamaNunes

th3m@d0xt3r

Pode sim. É só seguir o tutorial.=)

themadoxter

Mama, pelamordedeus, segui a dica, troquei o fundo usando uma imagem 1600x1200, antes editei-a no photoscape, "enxuguei-a" no fotosizer, deixei-a bem "levinha", mas quando aplico o link da imagem no html parece que dá um zoom na imagem, cortando-a pela metade. Como faço pra resolver isso e fazer com que no background a imagem apareca em sua totalidade?
Ps.: Meu blog é de conteúdo ilegal, eu sei disso, mas 80% do que aprendi foi daqui deste site, gostaria muito de ser ajudado nessa dúvida. Grande site Mama, espero que nunca acabe.

Dorival Pinheiro

Realmente é muito facil, não deu nenhum trabalho pois a explicação está muito clara. Com a 2ª opção fica super leve. Obrigado pela dica.

Deborah Martin Salaroli

Mama mia
Me ajuda. Não consegui colocar outro fundo no meu blog. Sou meio xereta no PC, na linguagem HTML, mas desta vez dancei. TAlvez por que meu blog não segue aqueles modelos convencionais do blogger. Se vc pudesse me ajudar, mandaria uma de minha delícias pra vc.
Venha me conhecer e HELP ME!!!
www.delicias1001.blogspot.com
marsala@uol.com.br

Ruby

Mama, olá, obrigada pelo tuto, tava atrás e vim no lugar certo, mas so funciona com esse código completo, quando vou colocar uma imagem hospeada pra servir de background à minha escolha, não vai. O que tá acontecendo? Fiz no meu blog de testes, tentei de todas as maneiras com outras imagens, mas so entra esse código com o seu background azul.

Ruby

Aliás essa éra a imagem que queria de fundo
http://img695.imageshack.us/i/background63.jpg/

Altair Santos

Olá, muito boa a dica, gostei

Só uma coisinha, o meu blog ficou com divisão entre as imagens em vez de ficar contínuo. Segui os passos certinho. As imagens tem que ser quadrados mesmo ou pode ser retângulos? Usei um retângulo.

MamaNunes

@Tairo Santos

Não deveria dar esse problema.... Se puder envie a imagem por email pra eu dar uma olhada.

beijo da Mama

MamaNunes

@Ruby
Oi Ruby
Esse tipo de imagem que vc quer usar só funciona para backgrounds fixos. Repare que ela tem o tamanho total da tela do computador.
Tente substituir o seguinte código:

repeat-x fixed top center

Pelo seguinte:
no-repeat

Espero qeu funcione.

Ruby

MamaNunes, essa parte tem que ficar? http://themes.googleusercontent.com/image?id=1OACCYOE0-eoTRTfsBuX1NMN9nz599ufI1Jh0CggPFA_sK80AGkIr8pLtYRpNUKPmwtEa

Ou pode retirar? Substitui pelo endereço da img também? Desculpa tanta pergunta, mas é que não funciona.

MamaNunes

@Ruby
Oi Ruby

url(ENDEREÇO DA SUA IMAGEM) no-repeat

Léria

Oiiiiiiie!
To prescisando de auda com meu blog D:
to fikando loka aqui,faz dias que tento mudar o plano de fundo dele e nao consigo.. nao ocnsigo e jeito nem um mexer nesses codigos do HMTL D:
alguem me auuuujda???

meu msn é nanatiello@hotmail.com
mt obds desde ja :*

Anônimo

oi querida,
preciso criar um blog, vou fazer uma conta no blogger, mas sei mexer em nadinha, vc nao conhece alguem que cobre baratinho pra fazer um design simples pra mim e ja deixar tudo prontinho, só pra eu postar?
Muito obrigada.
(michellys_84@hotmail.com)
PS: nem consegui postar sem ser anonimo de tão avoada que sou...rsrsss

Grazi Lotti

Olá Mama! Conheci seu espaço há pouco tempo e utilizei várias dicas, parabéns! Mas eu tenho uma pergunta, sabe aqueles backgrounds cheios de frescuras que a gente acha na internet, que normalmente só funcionam com o Template Minima que o blogger tinha? Então, esses tipos de backgrounds eu não consigo colocar, será que tem jeito?! XD Obrigada!

Só pra não te duvidas, o background que eu estou falando são esses aqui:
http://delightfuldots.blogspot.com/search/label/3%20Column

Anônimo

:( eu n estou conseguindo ):

leocaliban

consegui de certa forma, mas o problema maior surgiu... independente do tamanho da imagem que eu tento usar, de todo modo elas ficam pequenas e se repetem até preencher a tela... não consigo colocar uma foto que preencha o espaço. o que devo fazer?

drika lixto

ei nao encontro esse codigo de geito nenhum para substituir pode meajudae

Unknown

boa noite como faco pra personalizar o meu blogger , lei tudo que vc postou mais nao conseguir fazer as alteracoes. nao conseguir personalizar as abbas

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.