Você pode personalizar os títulos dos gadgets do blogger colocando
imagens de fundo, mudando as cores e formatação do texto do titulo do
gadget. Essa é uma mudança simples no código HTML do seu blog e
permitirá personalizar cada um dos gadgets do seu blog da maneira que
desejar.
Na maioria dos templates do Blogger o titulo dos gadgets da sidebar usam o estilo h2. Então entre na pagina editar HTML
e procure por h2 {...} o conteúdo das chaves varia conforme o template
por isso não temos como mostrar igual está no seu blog. Não apague o que
já existe neste código apenas adicione o trecho abaixo, deixando deste
jeito:
h2 {background-color: #6699FF;
background-repeat: no-repeat;
background-position: right top;
background-image: url(endereço da imagem);}
A linha background-color: #6699FF; é uma cor de fundo
caso você use uma imagem pequena ou queira apenas trocar a cor de fundo
do titulo do gadget, mas você pode apagar essa linha se não quiser usar
uma cor.
O restante do código é o posicionamento e a imagem de fundo.
Tenha cuidado para não apagar nada por engano e também usar o endereço
correto da imagem porque qualquer detalhe errado o código não vai
funcionar. Veja aqui alguns links úteis sobre isso:
Site para Fazer Imagens Online e Criar Banners com Efeitos
Hospedar Imagens no Blogger - Hospedagem Grátis
Imagem não aparece no Blog ou Site
Usando o código desta forma todos os títulos de gadgets ficarão com a mesma imagem de fundo, mas você pode personalizar cada gadget separadamente,
por exemplo, se quiser colocar uma imagem no titulo do gadget dos
marcadores do blog então não altere o estilo h2, mas crie um novo logo
abaixo dele com o nome #Label1 h2, desta forma:
#Label1 h2 {background-repeat: no-repeat;
background-position: right top;
background-image: url(endereço da imagem);}
sexta-feira, 28 de setembro de 2012
Posicionar imagem de fundo
O código para posicionar a imagem de fundo do seu site é:
background-repeat: no-repeat;
background-position: right top;
background-color: #6699FF;
background-image: url(fundofixo.jpg);
Esse código deve ser colocado na tag body{...} do seu html(página editar html). A linha background-repeat: no-repeat; faz que a imagem apareça somente uma vez.
background-position: right top; aqui escolhemos o lugar que a imagem aparecerá no lugar de right(direita) pode ser center(centro) ou left(esquerda). E no lugar de top(alto da página) você pode usar center(meio da página) ou bottom(embaixo da página)
As últimas duas linhas:
background-color: #6699FF;
background-image: url(fundofixo.jpg);
São a cor e a imagem de fundo as quais você colocará a seu critério, se precisar de ajuda para achar o código das cores clique aqui.
Outra coisa que pode ser adicionada a este código é: background-attachment: fixed;
para fazer a imagem ficar parada, ou seja, somente o conteúdo do seu site irá se mover assim a imagem ficará sempre visível, veja mais sobre fixar a imagem de fundo.
background-repeat: no-repeat;
background-position: right top;
background-color: #6699FF;
background-image: url(fundofixo.jpg);
Esse código deve ser colocado na tag body{...} do seu html(página editar html). A linha background-repeat: no-repeat; faz que a imagem apareça somente uma vez.
background-position: right top; aqui escolhemos o lugar que a imagem aparecerá no lugar de right(direita) pode ser center(centro) ou left(esquerda). E no lugar de top(alto da página) você pode usar center(meio da página) ou bottom(embaixo da página)
As últimas duas linhas:
background-color: #6699FF;
background-image: url(fundofixo.jpg);
São a cor e a imagem de fundo as quais você colocará a seu critério, se precisar de ajuda para achar o código das cores clique aqui.
Outra coisa que pode ser adicionada a este código é: background-attachment: fixed;
para fazer a imagem ficar parada, ou seja, somente o conteúdo do seu site irá se mover assim a imagem ficará sempre visível, veja mais sobre fixar a imagem de fundo.
Assinar:
Postagens (Atom)
