Image Map

Personalize os títulos dos gadgets

|
Tumblr_lvsvkwsez81qg38ico1_500_large
Maior parte dos blogueiros, edita uma imagem para cada título de gadget, que apesar de dar muito trabalho te dá a vantagem de poder usar qualquer fonte e vários efeitos. Vamos ensinar como fazer para colocar uma imagem base, que aparecerá toda vez que você criar um gadget.
Vou passar para vocês três códigos diferentes que vocês mesmos podem personalizar.
1- Você deverá escolher qual deles você quer usar. Opções:


Ficará assim.
.sidebar h2 {
text-align: center;
background-color: #ccc; ---/*cor de fundo */
width: 265px;
height: 15px;
font-size:13px; ---/* tamanho da fonte */
text-shadow:0 1px 1px #fff;
border-bottom: 3px solid #DEC4F4; ---/* cor da linha */
A, A:link: #000000;text-decoration:none;
-moz-border-radius: 10px; /* Para Firefox */-webkit-border-radius: 10px; /*Para Safari e Chrome */border-radius: 10px; /* Para Opera 10.5+*/ }
 Se você não quer o efeito redondo, retire a parte em rosa.
 Ficará assim.
.sidebar h2 {
text-align: center;
background-color: #ffffff; ---/*cor de fundo */
width: 265px;
height: 15px;
font-size:12px; ---/* tamanho da fonte */
text-shadow:0 1px 1px #c9c9c9;
A, A:link: #000000;text-decoration:none;
border-bottom: 1px dashed #ff79c1;
border-top: 1px solid #ffffff; } 
Ficará assim.
.sidebar h2 {
text-align: left;
background-color: #F1F1F1; ---/*cor de fundo */
width: 265px;
height: 10px;
font-size:15px; ---/* tamanho da fonte */
font-color:#707070; ---/* cor da fonte */
text-shadow:0 1px 1px #c9c9c9;
A, A:link: #000000; 
text-decoration:none;
border-top: 1px solid #ffffff;
border-bottom: 3px double #b779ff; }
2- Após ter escolhido, vá até Design, Editar HTML, e cole o código escolhido ANTES de: 
]]></b:skin>
No próprio código dos títulos, tem uma explicação de como personalizar.
Espero que vocês tenham gostado. Dúvidas? Manda aqui. Beijos
Ps: Eu aprendi a personalizar os títulos dos Gadgets graças ao Extras Place Fame.
Espero que vocês tenham gostado, beijos.

21 comentários:

Bruna Mascarenhas          disse...

Amei,Amei,Amei
Super me ajudou, ;*

Bells disse...

segui o meu blog flor? http://cantinhofeminino-bellarg.blogspot.com/
amei o seu !!!

Lygia Benevides ; disse...

me ajudou mt , obrigada !'

Anônimo disse...

Muito bom! Usei lá no blog.

Anônimo disse...

Usei lá no meu blog!

Anônimo disse...

não estou conseguindo fazer!!! ME AJUDEM!

http://linkmyfashion.blogspot.com

! Lili ! disse...

Legal.
Adorei o blog, é muito interessante.
Sguindo, segue tbm:

http://blogmuitofofodaaline.blogspot.com

Bjocassss.

Gabriella Rendeiro disse...

adoro esse tuto :3

Lary Yah disse...

Obg pelo tutorial, eu sei e creditei! Está na página About!

http://the-lovers-world.blogspot.com/

Debee disse...

Obrigada, acabei de usar *-*

Júh ;D disse...

eu consegui tbm de outra forma: colocando o codigo no CSS!

Maria Eduarda // Blog Mundo Teen disse...

onde vaai pra colocar isso :S

Paty Santos disse...

Deu super certo e ficou lindo!
Thanks! =)

Vocaloid&UTAU disse...

Aonde eu colo esse código? .-.

Rita ♥ disse...

Flore, que blog diwo *-*, já to seguindo!
Ah, eu usei, mas só funcionou abaixo de /* Widgets
----------------------------------------------- */
Mesmo assim, são lindooos ><
Beijos, ladybugs.tk

Hannah Jullie disse...

Amei Amei ! Segue o meu ? Já estou seguindo ;*

revolutionstartshere-oficial.blogspot.com.br

Moni ❥ ~ disse...

Muito obrigada!! Estou usando! <3

ISOKA MONSTER HIGH disse...

Usei em todos meus blogs, belo tutorial !

Anônimo disse...

Estou usando também, ficou lindo no meu lay. :)

x disse...

Usando ><

Believe Girl disse...

Estou usando, beijoss.
believe-girl.blogspot.com