Blog da Miih: julho 2011

25 de jul. de 2011

Alguns Backgrounds feitos por mim

Como colocar sombra no texto dos títulos dos gadgets da sidebar....

Como colocar sombra no texto dos títulos dos gadgets da sidebar

Não são todos os navegadores que conseguem interpretar o código de sombreamento de letras. Mas você pode usá-lo sem problemas. Para sombrear os títulos dos gadgets você deve determinar desta maneira:

text-shadow: 1px 1px 1px #000000;

Os dois primeiros valores referem-se á posição da sombra. Você pode colocar números positivos e negativos. O terceiro valor determina o grau da esfumação da sombra. É possível marcar 0 para qualquer um dos três valores, obtendo-se um efeito diferenciado. Por último, determina-se a cor.

Como trocar a cor dos títulos dos gadgets da sidebar.......

Como trocar a cor dos títulos dos gadgets da sidebar

Para trocar a cor da fonte dos títulos dos gadgets, basta adicionar a propriedade color ou modificá-la, caso já exista. Você pode especificar a cor com o código hexadecimal, com o código RGB ou com apenas o nome da cor. Veja:

.sidebar h2 {

color: #0263a7;

}

Personalizando os títulos dos Gadgets....

Acesse o Painel do Blogger e vá e Design > Editar HTML. Tecle CTRL+F e encontre o seletor .sidebar h2. Se você não conseguir encontrar esse trecho no seu template é porque ele não existe. Você deverá acrescentá-lo. Para fazer isso encontre o seletor chamado .sidebar e logo depois deste trecho cole o seguinte:

.sidebar h2 {

}

Agora que todo mundo já tem o seletor referente aos títulos dos gadgets da sidebar, vamos ver como podemos personalizá-lo. Você poderá adicionar as seguintes propriedades:

Background – plano de fundo

Color – cor da fonte

Border – borda

Font-family – família da fonte

Text-shadow – sombra no texto

24 de jul. de 2011

como colocar plano de fundo no gadget....

Vá em Design>Editar HTML>ctrl f e na barra de pesquisa cole essa tag /* Headings
Mais a baixo você vai achar uma tag parecida (ou igual) a essa

.footer-inner .widget h2,
.sidebar .widget h2 {
padding-bottom: .5em;

}
Na minha está assim,mais a sua pode estar mais abaixo ou mais acima

Antes de fechar a chave } coloque o seguinte código

background-image: url(URL DA SUA IMAGEM);
background-position: center;
font-size: 11px;
text-align: center;

Deverá ficar assim :

O verde você vai colocar o URL da sua imagem e o vermelho o tamanho dos títulos (não dá para mudar o tamanho do título no design do modelo , somente aqui , lá você só vai trocar a fonte e a cor

No final o meu ficou assim