Hey! Venho trazer uma das maneiras mais fáceis de personalizar o titulo dos gadgets (Que são os titulos que ficam na barra lateal), Você precisa apenas saber algumas coisinhas que eu vou ensinar. Um exemplo esse titulo esta no meu blog (para ver clique aqui). E o melhor: Não precisa ficar editando nada em nenhum programa.Tirei um print para mostrar como que fica:


Vá em design - editar HTML, aperte ctrl + F e procure por  Headings, abaixo dele vai esta escrito mais ou menos assim:

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

Você apaga este código acima e cola este no lugar:

h2 { 
font-family: comic sans ms; *// Nome da fonte\\*
font-weight: comic sans ms; *// Nome da fonte\\*
font-size: 16px; *// Tamanho da fonte//*
text-align: center; *//Onde o titulo vai esta alinhado\\*
color: #fff; *// Cor em HTML do titulo\\*
text-shadow: 0px 0px 3px #6a6a6a; *//Sombra do titulo\\*
background-image: url(https://lh4.googleusercontent.com/-jBGvgMoTpek/Tpbimpx_34I/AAAAAAAAEgo/eOfkfy_CDdc/s198/fponti.png); *//Imagem de fundo\\*
border: 1px solid #e8e8e8;*//Borda\\*
margin: 1px; *//Margem\\*
padding: 2px; *//Tamanho do fundo\\*
}

Explicação:
Agora você pode mudar como quiser e conseguir vários efeitos diferentes.
font-family: Recomendo as fontes "Angelina" "Caviar dreams" " Hand writing Mutlu" e "Luna bar". Você tem que colocar o nome da fonte direitinho, caso contrario ela não vai aparecer.
font-size: Tamanho da fonte como já disse. Ela varia de fonte, umas com o 20 ficam pequenas outras não.
text-align: Aqui você muda a posição da fonte. Lembrando que right é direita, left é esqueda e center é centralizado.
color: Cor da fonte em HTML. Mas Erica como vou saber os códigos? É só clicar aqui e ver *-*
text-shadow: É a sombra da fonte, você pode mudar onde esta em "0" e conseguir varias sombras diferentes.
background-image: Se você quiser um fundo é só colocar o url da imagem ali.
border: É a borda que vai ficar em volta do titulo. Ela pode ser solid que é a borda solida, dotted que é pontilhada e dashed que é tracejada. Você tambem pode escolher onde a borda vai ficar:
border-top é em cima
border-bottom é em baixo.
border-left é do lado esquerdo.
border-right é do lado direito.
Se você quiser a borda a cima é só trocar "border" por "border-top", por exemplo.
Para ficar igual da foto, eu personalizei assim:

h2 { 
font-family: Hand writing Mutlu;
font-weight: Hand writing Mutlu;
font-size: 20px; 
text-align: right; 
color: #CD0000; 
text-shadow: 0px 0px 3px #CD0000;
}

Lembrando se você não quiser determinado efeito é só apagar. No código acima por exemplo, eu apaguei o fundo e borda.
Dúvidas? É só comentar *-*
Bezôôs, 
Erica Judd






5 coments:

Camilla Demézio disse... Reponder {}

Super legal a dica,da um ar mais profissional ao blog!!Bom Feriado!!

http://meumundomudando.blogspot.com/

Roberta :3 disse... Reponder {}

Adorei!!!:c
beijinhus<3

http://reinokawaii.blogspot.com

Duda ❤ disse... Reponder {}

Seu blog é muuito perfeito! Tá de parabéns mesmo! Continua assim! :c
Seguindo aqui, pode seguir de volta?
Beijos
Duda
www.fashiondudaah.blogspot.com

Evelyn VR disse... Reponder {}

@Camilla Demézio, @Roberta :3 e @Duda ❤ obrigada pelos comentários :s

Ruthi *-* disse... Reponder {}

Blog perfeiito :) Tutos demais ! Só me inrritei um pouquinho porque nao tem cursor ' Nossa, foi uma dificuldade rsrs k'
Bj
http://beijo-de-cereja.blogspot.com/

Postar um comentário

:a   :b  :c  :d  :e :f  :g  :h  :i  :j  :k  :l  :m  :n  :o  :p  :q  :r  :s  :t  :u

Comentar não dói!