28 de ago de 2012

Personalizando o título dos Gadgets com efeito Hover

Oi pessoal! Hoje vou ensinar a personalizar o título dos Gadgets com efeito Hover. Para quem não sabe, hover é o efeito que muda quando passa o mouse.
Lembrando que esse tutorial não serve para faixinhas, pois elas ficam desconfiguradas. Caso você use outro tipo de personalização, fica muito legal mudar a cor do fundo ou da letra.

1- Vá no HTML do seu blog, aperte CTRL+F e procure por:
 h2 {
Vai estar mais ou menos assim:
/* Headings
----------------------------*/
h2 {
 font: $ (widget.title.font);
 color: $(widget.title.text.color);
}

2- Substitua o trecho acima por:

.sidebar h2 {
font-family: 'Sofia', cursive; /*Tipo de fonte*/
font-size: 26px; /*Tamanho da fonte*/
color: #000; /*Cor da fonte*/
background: url(http://img843.imageshack.us/img843/200/sidebar2222.png) no-repeat center; /*imagem de fundo*/
height: 46px; /*Altura da imagem*/
width: 180px; /*Largura da imagem*/
text-align: center; /*Alinhamento do texto*/
}
.sidebar h2:hover {
font-family: 'Sofia', cursive; /*Tipo de fonte quando passa o mouse */
/font-size: 28px; /*Tamanho da fonte quando passa o mouse*/
color: #000; /*Cor da fonte quando passa o mouse*/
background: url(http://img843.imageshack.us/img843/200/sidebar2222.png) no-repeat center; /*imagem de fundo quando passa o mouse*/
height: 46px; /*Altura da imagem*/
width: 180px; /*Largura da imagem*/
text-align: center; /*Alinhamento do texto*/
}

3- Instalando a fonte:
-Procure por </head> e acima disso, cole o seguinte código:
<link href='http://fonts.googleapis.com/css?family=Sofia' rel='stylesheet' type='text/css'/>
Se quiser, substitua o trecho  http://img843.imageshack.us/img843/200/sidebar2222.png  por uma imagem personalizada. Não esqueça de ajustar as medidas da sua imagem.

- Se quiser uma cor, troque essa parte:
background: url( http://img843.imageshack.us/img843/200/sidebar2222.png) no-repeat center;
height: 46px; /*Altura da imagem*/
width: 180px; /*Largura da imagem*/
Por esta:
background: #000000; /*Cor de fundo*/

-Se quiser, troque a imagem do efeito hover por uma igual, só que com a cor diferente, vai ficar lindo!

Um comentário:

  1. Obrigada, a muito tempo estava procurando um tutorial e amei esse

    ResponderExcluir

Seja educado, não use palavras ofensivas ou de baixo calão;
Comente algo relacionado ao post, para outros assuntos use a ask;
Obrigada e volte sempre!