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
Mostrando postagens com marcador Backgrounds. Mostrar todas as postagens
Mostrando postagens com marcador Backgrounds. Mostrar todas as postagens

16.10.10

imageAntes de apresentar os cindo geradores que eu mais gosto, vou fazer uma pequena introdução para que você entenda como se aplica uma imagem com repetição para um background.
Depois de gerar a imagem desejada, faça o download e hospede em um site de sua preferência ou no próprio Blogger (recomendo) através do box de postagens como já publiquei aqui, para pegar o endereço (URL) da imagem. É mais garantido.
Se você usa os modelos baseados no Mínima Blogger, procure em sua página “Editar HTML” o seguinte trecho (pode estar um pouco diferente em seu template, mas é na seção “body” - “background…”
body {
background-color: $bgcolor; }
Substitua a o trecho em vermelho, deixando assim:
background: url(ENDEREÇO-DA-IMAGEM) repeat;
Caso você esteja usando um template do “Novo Designer do Modelo”, leia ESTE tutorial.

Lembrando as definições CSS para repetição de imagens.  É assim que funciona:
repeat; imagem repete por todo fundo
repeat-y; imagem repete na vertical
repeat-x; imagem repete na horizontal
no-repeat; imagem não repete

Pronto! Agora vamos conhecer os geradores online, gratuitos para você criar seu background exclusivo.

Stripe Generator 2.0
Stripe Generator 2.0 permite criar fundos de repetição de listras. Basta escolher o tamanho e o espaçamento, cores, direção das listras, sombra e estilo de fundo (sólido ou dois tipos de gradientes). Você pode visualizar o seu fundo em tela cheia antes de baixar. Depois é só fazer o download da imagem gerada.

image

Tartan Maker
Esse gerador permite criar fundo xadrez parecido com textura de tecido. Muito interessante mesmo! Basta escolher as cores e usar as barras deslizantes para determinar o tamanho, a direção e efeito do xadrez. A medida que você vai criando, pode ver o efeito em tela cheia clicando na opção “Go fulscreen” na área do “Preview”

image


PIXELKNETs
Este gerador permite que você crie fundos pontilhado, com variação de tamanhos e cores, em degradê ou não. Você pode brincar a vontade. Tudo que você tem a fazer é colocar as cores no ponto, escolher cores de fundo junto com a altura do padrão e ele faz o resto. Há também um botão de "random", que pode criar algumas combinações de cores.
image
Como salvar a imagem gerada por ele:

No Firefox: Clique com o botão direito do mouse sobre a imagem, depois clique na opção "Exibir imagem de fundo". Clique novamente com o botão direito do mouse sobre a imagem e salve.

No Internet Explorer:  Clique com o botão direito do mouse sobre a imagem e depois clique na oção "Salvar imagem como...". Salve (rs)

No Chrome eu so aprendi de um jeito. Se alguem souber de outro, me avise.
Clique sobre a página com a imagem gerada e depois na opção "Exibir código fonte da página"
Ao abrir a página com todos os códigos, procure pelo trecho:
<div id="imagepreload">
<img src="dotted_bg.phpdc1=0339B0&dc2=0339B0&bc1=110472&bc2=110472&h=700" alt="" width="1" height="1"/>
</div>
 Clique sobre o texto que estiver em destaque azul  e abrirá a página com a imagem a ser salva.


Stripemania
Parecido com Stripe Generator 2.0 O Stripemania é um gerador de imagem de fundo listrado. Escolha a largura da faixa e espaçamento, direção das listras e as cores, e gerar um padrão de repetição de distribuição.
image
BgPatterns
BgPatterns é possivelmente o mais conhecido e poderoso (rs) criador de patterns online. Você pode escolher entre uma variedade de formas e personalizar o tamanho, rotação, posicionamento, cor, textura, e muito mais. Excelente!

image

Divirtam-se!
Beijo da Mama ♥
Leia mais...

2.8.10

blogger-logo Parece que o Blogger está fazendo mais mudanças para facilitar a vida daqueles que gostam de ter suas páginas personalizadas. Disponível por enquanto apenas através do Blogger in Draft, a novidade (muito legal) oferece um botão que permite que coloquemos a imagem de fundo (background) que quisermos, fazendo upload direto dos nossos arquivos.
imageVocê precisa fazer o login, e clicar na opção “Design”, depois “Designer do Modelo” e depois “Plano de fundo”.      
Clicando na setinha ao lado da janela “Nenhum”, abrira outra  janela com o botão “Selecionar arquivo”.Veja as imagens:
image
image
As imagens podem ser no formato JPEG, GIF e PNG.
Para usar uma imagem única, sem repetição que cubra todo o fundo do template, o ideal é o tamanho de 1800x1600 pixels.
Para que o blog não fique pesado (demorado para abrir)  tente fazer upload de imagens com menos de 200KB.
Ainda temos outras opções para imagens de fundo.
image
1 – Clicando em alinhamento você define o sistema gráfico.
2 - Clicando nessa setinha você define a repetição da imagem de fundo para o caso de usar imagens  como por exemplo essa abaixo: stripe_1cf7393dba0f2dd674fac84780dbfa81 Você deverá selecionar a opção “Bloco” para que ela cubra todo o fundo.
Para quem já conhece um pouco de CSS será mais fácil entender; as opções coincidem com as propriedades CSS:  no-repeat (imagem não repete), repeat (imagem repete inteira), repeat- x (imagem repete horizontalmente)e repeat- y (imagem repete verticalmente).
3 – Por fim, temos a opção de manter o fundo estático ou rolando com a página. Essa opção é ótima para quem quer modelos de background com desenhos fixos como por exemplo esse abaixo:
OBS: Você pode encontrar modelos variados, excelentes no blog CONTEMPLATES.
(Clic na imagem para ver em tamanho original)
image
Fonte: Blogger in Draft
Muito bom não é?
Beijo da Mama♥
Leia mais...

5.3.10

image Mude o background, sua imagem de fundo da página principal do Twitter com as criações do  Tweety got Back . O site tem vários modelos, lindos, divididos por categorias. A gente pode escolher e clicar numa das miniaturas e ver como ficará a página com o back instalado e depois, com um só clic, aplica-la em nossa página. Muito simples.  Visitando o blog podemos assistir um vídeo bem interessante sobre o trabalho e a criatividade desse pessoal especial.

Leia mais...

4.8.09

image  Umas boa ideia para criar backgrounds exclusivos.  Repper é um criador de texturas online que transforma imagens em texturas, a partir de trechos selecionados. Você pode fazer upload de qualquer imagem/foto, escolher a área que quer para o efeito e ir arrastando e redimensionando com o mouse até que fique do seu agrado mouse. Em seguida, salvar a sua textura e fazer o download para o seu computador.
Leia mais...

1.8.09

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

20.3.09

Para facilitar o trabalho de quem quer ter um back degradee no layout, criei alguns, hospedei no Tinypic e estão prontos para aplicar. É só copiar o código ao lado da cor, depois, dentro do documento HTML, procurar o techo que define o "background" e substituir pelo código copiado.





Leia mais...

16.2.09

Se você quer fazer uma mudança em seu template, vou dar aqui está algumas sugestões bem simples. Background é o plano de fundo do blog (template) e pode ter a cor, desenho ou textura que você quiser. Então vamos aprender a fazer isso, lembrando que nos baseamos no código do modelo "Minima"co Blogger.

IMPORTANTE: Antes de fazer qualquer alteração em seu template, faça um backup (uma cópia) do atual para não perder tudo em caso de acidente.
Acesse a página do Blogger,
Faça login, clique em "Layout"
clique em "Editar HTML"


Leia mais...