Como personalizar os títulos dos gadgets

Para personalizar os títulos dos gadgets deve-se mexer no HTML do template, mais especificamente no CSS. O seletor referente aos títulos dos gadgets da sidebar é .sidebar h2.

Tudo o que você acrescentar a este seletor será aplicado apenas aos títulos dos gadgets da SIDEBAR. Se você adicionar gadgets no rodapé ou acima dos posts, o título dos gadgets não ficará como os da sidebar. Para você conseguir o mesmo efeito da sidebar no rodapé e acima dos posts você deverá acrescentar um seletor referente à eles e com as mesmas propridades de sidebar h2. Chega de teoria e vamos a prática.

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

 

Como colocar background nos títulos dos gadgets da sidebar

Background pode ser uma cor, uma imagem ou as duas coisas.

Para adicionar uma cor – background: #ffffff;

No exemplo acima utilizei o código hexadecimal da cor branca. Pode também estabelecer a cor com o código RGB, que seria background: rgb(255,235,0); com o nome da cor, ficando background: black; e ainda transparente, background: transparent;.

 

Para adicionar uma imagem – background: url(http://4.bp.blogspot.com/_ZN3Y7aFcHII/TDNJHvB6ZOI/AAAAAAAAC2o/6wb5kmjuPmQ/s400/blogger.png);

Você deve determinar a posição em que a imagem deve aparecer no template. Veja um exemplo:

background: #ffffff url(http://4.bp.blogspot.com/_ZN3Y7aFcHII/TDNJHvB6ZOI/AAAAAAAAC2o/6wb5kmjuPmQ/s400/blogger.png) no-repeat top right;

No-repeat significa que a imagem não deve se repetir, ela aparecerá apenas uma vez. Há também o repeat-x, que garante que a imagem se repita infinitamente na horizontal; o repeat-y que garante que a imagem se repita infinitamente na vertical e o repeat que faz com que a imagem se repita tanto na horizontal, quanto na vertical. Não colocar o valor referente a posição da imagem gera o mesmo efeito de repeat, ou seja, a imagem se repete tanto na vertical, quanto na horizontal.

Se sua imagem for grande e você não quer que ela fique se repetindo, e sim fixa no plano de fundo, você deve adicionar o valor fixed no lugar de repeat. Veja:

background: url(http://imagens.kboing.com.br/papeldeparede/1492xp.jpg) fixed;

 

Nota: Ao adicionar uma imagem como background você deve fazer upload dela para um servidor, depois inserir o link direto entre os parenteses, olhe o exemplo acima. Um servidor recomendado por mim é o Imageshack.us.

 

Para adicionar as duas coisas – background: #ffffff url(http://4.bp.blogspot.com/_ZN3Y7aFcHII/TDNJHvB6ZOI/AAAAAAAAC2o/6wb5kmjuPmQ/s400/blogger.png) no-repeat;

Para adicionar tanto cor, quanto imagem você deve seguir a ordem: primeiro a cor e depois a  imagem. Não é possível adicionar duas imagens em um mesmo seletor, a não ser que você crie uma nova DIV, mas isso são outros quinhentos. As mesmas regras da cor e da imagem especificadas acima são válidas também quando se determina cor e imagem em um mesmo background.

 

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;

}

 

Como colocar borda nos títulos dos gadgets da sidebar

Bordas são muito usadas para enfeitar um template de uma maneira fácil. Existem 8 tipos de borda que podem ser usadas em CSS. Veja quais são elas:

Você pode colocar borda tanto no elemento inteiro, quanto especificar apenas alguns lados. Para colocar borda no elemento inteiro faça o seguinte:

border: 1px dotted #000000;

Para colocar borda em apenas alguns lados, você deve especificar em qual a borda deve aparecer. Veja:

border-top: borda no topo

border-right: borda à direita

border-bottom: borda na base

border-left: borda à esquerda

A regrinha é: primeiro determina-se a grossura da borda em pixels, depois vem o nome do tipo da borda e por último, a cor da borda. Lembre-se que você não precisa usar necessáriamente o código hexadecimal, existem ainda o código RGB e apenas o nome da cor. Exemplo:

border-top: 2px solid pink;

border-right: 2p solid green;

border-bottom: 2px dashed #000000;

border-left: 2px dotted rgb(255,235,0);

 

Como mudar a fonte dos titulos dos gadgets da sidebar

Mudar a fonte de qualquer parte do template é uma coisa complicada porque não é toda e qualquer fonte que pode ser usada nos templates. Isso ocorre porque para o visitante que acessar seu blog conseguir visualizar a fonte, ele a deve ter instalada no computador. Isso provavelmente acontecerá se você determinar uma fonte muito diferente, com certeza não serão todos os visitantes que terão a fonte instalada no computador. Por isso, a maioria dos web designers preferem usar fontes bem simples, mas com a garantia de que todos terão essa fonte no computador.

As fontes que você pode optar por usar são:

• Arial
• Georgia
• Trebuchet MS
• Courier
• Times New Roman
• Verdana

Veja como você pode determinar uma fonte diferente no seletor sidebar h2:

font-family: Verdana;

 

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.

 

Outros ajustes

Há alguns ajustes que talvez deverão ser feitos dependo da personalização que você der nos títulos dos gadgets do seu blog. Tamanho da fonte, espaçamento do texto e margem podem ser de extrema importância. Vamos ver como podemos utilizá-los:

 

.sidebar h2 {

font-size: 75%;

padding: 10px;

margin: 5px;

}

 

No exemplo acima você pode ver como é possível usar as propriedades font-size (tamanho da fonte), padding (espaçamento do texto) e margin (margem). Em font-size o ideal é especificar o tamanho da fonte em porcentagem, porém você ainda pode determinar esse valor em pixels, entre outros. Se a fonte estiver muito grande você coloca uma porcentagem menor que 100, caso contrário, se a fonte estiver muito pequena, você coloca um valor maior que 100. Isto no caso de porcentagem.

O valor de padding é o espaço que ficará entre o texto e a borda. Nisso não há segredo, apenas especifique um valor em pixels. Margin é quase a mesma coisa, porém ele refere-se ao espaço que ficará entre um elemento e outro. Por exemplo, no caso dos títulos dos gadgets, o valor de margin aplicado no seletor .sidebar h2 deverá ser o espaço entre os títulos e a borda da coluna e o corpo do gadget.

Pesquisas que levaram a este artigo:

• mudar fonte nos gadgets