14 janeiro, 2014

Personalize os títulos dos gadgets


Oi pessoal, bom estou trazendo aqui para você outro tutorial maravilhoso. Que tal personalizar os gadgets?.Esse tutorial é super fácil vamos lá!.


Primeiramente acesse o a aba Modelo do seu blog, e em seguida Editar HTML. Dentro da caixa do do código tecle Ctrl+F ou F3 e na barra de pesquisa que abrir procure por:

h2 {


Se você nunca personalizou esta parte estará assim:

 h2 {
font: $(widget.title.font);
color: $(widget.title.text.color);
}

Agora vamos personalizar:


Centralizando o título :

Antes de fechar a } insira este código:


text-align: center; 

Colocar uma cor de fundo:

Antes de fechar a } insira este código:


background: #000;  /*color de fundo*/

Onde está de rosa modifique o código pela cor que deseja. Tabela de cores Aqui.

Arredondando as bordas do fundo:

Antes de fechar } insira este código:

background: #000;
 -moz-border-radius: 3px;
-webkit-border-radius:3px;
-goog-ms-border-radius: 3px;
border-radius:3px;

O 3px é o angulo de arredondamento. Quanto maior fica mais arredondado fica. Se for deixar mais redondo terá que modificar os quatro 3px, para dar certo.

Colocando imagem ao invés de cor:



Antes de fechar } insira este código:


background: transparent url(ENDEREÇO DE SUA IMAGEM) center no-repeat 
height: 50px; /*altura da imagem*/
width: 200px;  /*largura da imagem*/

Você pode colocar faixas, basta saber o tamanho dela e hospeda-la para obter o url da imagem.

Faixas:

















 Espero que tenham gostado qualquer dúvida deixe nos comentários. Beijinho até a próxima.










7 comentários :

  1. Adorei o post, florzinha! =)
    Beijos,

    Rafaela Barbosa BLOG

    ResponderExcluir
  2. gostei da dica

    obg: vc foi indicada pra resp a tag no meu blog
    http://caprixoteen.blogspot.com/

    ResponderExcluir
  3. Este comentário foi removido pelo autor.

    ResponderExcluir
  4. Ótima ajuda...muito obrigada mesmo, todos os tutoriais estão ótimos e me ajudaram a criar o meu
    Já to até seguindo

    Meu blog é esse: www.eletriclifee.blogspot.com

    ResponderExcluir


- Aceito críticas, mas sem xingamentos;
-Aceito parcerias
- Deixe o endereço do seu blog para que eu possa retribuir;
- Se seguir o blog eu retribuo.
- Volte sempre!