Personalize os títulos dos gadgets

A maioria dos blogueiros edita uma imagem para cada título de gadget, embora fazendo assim você tenha a vantagem de colocar qualquer fonte e usar uma infinidade de efeitos, imagino que isso dê muito trabalho. Preguiçosa do jeito que sou, uso no MN uma imagem base, que aparece toda vez que eu crio um gadget, bem mais fácil, né? 


Pensando nisso, resolvi criar esse tutorial pra vocês, vamos lá: 

1. Vá em Design, Editar HTML, dê Ctrl+F e procure por:

]]></b:skin>

e ANTES dele cole:

.sidebar h2 {
text-align:center;
background-image: url("URL DA SUA IMAGEM") no-repeat;
width: 180px;
height: 30px; }
Obs.: Altere os códigos destacados de vermelho de acordo com sua imagem. 

2. Edite uma imagem;
Você vai precisar editar uma imagem de acordo com a largura da sua coluna, recomendo que ela seja uns 20px menor (se ela for de 200px, a imagem deve ser de 180px), editei algumas de tamanho 180x30 para que vocês possam usar:

 

 


E por último uma base também de 180x30 para que vocês mesmos possam editar:


Lembrando que pelo designer do modelo dá pra usar fontes diferentes e lindas! Além de ajustar a cor e o tamanho. Dúvidas?

 Detalhe:  se você deixa os títulos dos seus gadgets em branco, lembre-se de deixar ao menos um com algum título antes de testar esse tutorial. 

79 comentários:

Sobre Meus Livros disse...

Andreza, adorei seu post *-*
E eu queria saber uma coisa, bem rapidinha, sabe quando você posta uma frase com um fundo atras? então, pode me explicar?
Isso deve ser suuuuuuuper prático, mas eu tô perdida DD:
Tipo onde tem os códigos, com fundo xadrez :D
Se puder me ajudar agradeço :D

Alias, se não for só uma imagem já com a frase nem me responda, SHUAHSU.

Elcimar Reis disse...

(kkk) Eu também sou bem preguiçoso a ponto de criar uma imagem para cada título de Gadget, então eu coloquei um fundo colorido, adorei o tutorial,mas prefiro o fundo colorido porque não poluiu o blog! :)

http://acessopermitidoblog.blogspot.com/

Larissa « disse...

Obrigada Andressa, estava procurando imagens legais para colocar no título dos gadgets;

Carla Godolphim disse...

Adorei o tutorial! Muito útil!
Beijos!

http://meumundoecolorido.blogspot.com/

Louca Mistura disse...

Esse turorial é bem mais fácil mesmo, dá muito trabalho fazer uma foto por uma, e se depois você quer fazer um novo gadget e não lembrar a base, a cor, letra e tamanho acaba ficando feio :D
Beijos
blogloucamistura.blogspot.com

Amanda Costa disse...

Olá...
Seguindo!
Segue??? http://mmineira.blogspot.com

Participe do concurso que tá rolando lá no blog!

bj

Emily Caroline disse...

Muito útil esse post!
O MN é demais.

Beijao.
www.placefame.tk

Viih Rëggina disse...

Oii, uma duvidas na parte de fazer menu eu não conseguir entender nada! Podia fazer novamente o tutorial!?

Bruna ^^ disse...

Eu já havia visto tutoriais bem parecidos, mas esse é muito mais fácil!
O MN é muuito bom!
Está de parabéns!
Bjks

http://falaseriogarota-blog.blogspot.com

Roberta :3 disse...

Ótimo post!!!
Acho bem legal colocar assim os títulos ^^
beijus...
http://reinokawaii.blogspot.com

Gaabi.. disse...

Eu aamooo o MN.
É perfeitoo *o*
Parabéns pelos seus 1.096 seguidores flor.
Beijos :*
http://busygirls-blog.blogspot.com

Fernanda Floyd disse...

Uaal, me ajudou em!
Heey flor, têm uma coisinha que queria te pedir... poderia fazer o tutorial de como colocar essa imagem por trás das postagens e junto com a barra lateral? haa, por favor por favor!! seria muito bom aprender isso, brigada desde já!

beijos,
www.fearlessworld-blog.blogspot.com

Rafah - Rááh - Sah disse...

Oie linda selinho pra vc aqui http://4.bp.blogspot.com/-Cc-PTKvR7t4/TiYAKqp6jEI/AAAAAAAAATU/hsF69T-coKQ/s1600/scrapeenet_20110719185828GAhY.gif
Espero ganhar um de vc tbm !!! Bjs ...Rááh Pequetuxa

Me traduza ~~ (OFFICIAL) disse...

Oi florzinha
Já sigo faz um tempão, sempre peço que você visite meu blog você nunca nem da uma passada ;/

Por favor da uma passada la!
Se você gostar segui já tenho 274 seguidores pretendo chegar nos 300! acc parceria?

Anônimo disse...

Vota no Ser Menina no concurso que tá havendo no TrECHY tEEN?

Please! é só entrar nesse link:
http://s2meh.blogspot.com/p/parcerias.html
e votar em Ser Menina!

Beijos
http://sermenina-blog.blogspot.com

Unknown disse...

Adorei seu blog
Visite e siag meu blog
http://www.paularopkevigano.blogspot.com

Larissa « disse...

Eu personalizei o amarelo, colori ele pra cinza http://shessmart.blogspot.com/

W.C. disse...

NÃO TO CONSEGUINDO FAZER ISSO AI!! EU FAÇO DÁ TUDO CERTO AMIS SÓ QUE AS IMAGENS NÃO QUEREM APARECER NOS GADGETS!! ME AJUDEM, ALGUÉM AI POR FAVOR!!!!!!!!!

Mikhaela disse...

Adorei aqui e estou seguindo! Retribui? Adorei essa dica *o* Vou postar lá no blog e colocar seus devidos créditos (: Deixa? #hihi

http://just-teens-forever.blogspot.com/

Beijinhos com sabor de fruta :*

Doce Lar disse...

Oiie adorei o blog super interessante !
E aproveitei para seguir,me ajuda? me segue tb ?

beijos

The Girls disse...

:D Que tutu perfeito ! Parabéns
http://heellogirls.blogspot.com/

Arianny disse...

Amei o post, eu não sabia fazer isso, e faço um de cada vez, demora ¬¬' kkk, mas está de parabéns!
Novo post no Charm of Pink, comenta?
bjs
charmofpink.blogspot.com

Unknown disse...

O tutorial ta demais, que bom que gostou do NOVO visual, AGRADEÇO! Falando aqui sobre a enquete do Attitude Included, não está funcionando mais, aconteceu o msm erro que tinha acontecido com você.. E agora oque ela vai fazer? Perdemos nosso votos.. :(

http://www.2for-you.com

Mary Jane disse...

Andreza, posso pedir dois tutoriais?

- Como eu coloco as imagens das redes sociais que nem tem embaixo do seu perfil no blog ali em cima?

- Como eu crio um código pro selinho do meu blog?

Se você puder ensinar, vou ficar imensamente grata *---*
Estou adorando o blog, está me ajudando bastante!

Beijoo ;*

Bruna Pena disse...

Gostei do tutorial *-*

Ah! Gostaria de saber se aceita parceria com meu blog: coiiisasdegarotas.blogspot.com

Camila Diógenes disse...

Lous amei seu blog!
Seguindo! Retribui? Aceita parceria?
daring-girls-mila.blogspot.com

Carolina Ribeiro disse...

Flor, adorei seu blog. Sabe aquele tutorial de colocar dois bg? então eu fiz, mais acho que na hora lá que vc disse que era pra apagar eu devo ter apagado o código da cor da fonte e agora fica sempre preto, já fui em designer de modelo mais não muda em nada, Você poderia me ajudar???

bjuss
www.garotascomplicada.com

Elizabeth Passos disse...

Muito bom o post! Vou tentar fazer no meu blog!
Mas, só passei aqui pra falar da postagem nova "UMA LIÇÃO DE VIDA EM CRISTO" no elizabethpassos.blogspot.com

Mil, Bjks
Att, Eliz =^.^=

Luana Soares disse...

Amei seu blog! É o máximo! Já estou seguindo!

ehdemulherzinha.blogspot.com

Anônimo disse...

Oii amor õ/
Tô com novo blog ,
Visita comenta e segue ?
http://www.garotatimida-blog.blogspot.com/

Beijos !

Jéssica Natasha Cazal disse...

Incrível seu blog. Tantas dicas boas *-*
Passei a seguir ^^
Beijooos

http://pudimengorda.blogspot.com/

Samy Nobre disse...

Amei o blog, super fofo *-*
Tô seguindo.. segue tbm?
Beijinhos ♥

http://blush-corderosa.blogspot.com

Natália Nery ⋆ disse...

adoro teu blog, pego várias dicas daqui *-* Apesar de não tem conseguido fazer esses tutorial. :/ Mas fica tranquila, que seus créditos sempre estão lá. Beijos, nat! http://powerfulgirls-blog.blogspot.com/

Mia Sodré disse...

Oi!
Depois de ler todo o seu blog (sim, eu li ele todo) coloquei o seu mini banner lá nas minhas recomendações, no meu blog. Passei só para avisar.
PS.: O seu layout está muito lindo.
Bjo! (:

http://miasodre.blogspot.com/

Hallana disse...

Oi, concordo com a Mia, o layout está lindo.
Adorei o post e tenho uma dica pro próximo tutorial...
Posta um tutorial mostrando como faz para colocar uma agenda no blog, com os compromissos e tal *-*. Acho tão bonito e não sei fazer ):.

Desde já obrigada.
Beijos.

webcalcinha.blogspot.com

kevin simpson disse...

Oi Andreza, amei o tutorial *--* ta perfect, flor preciso muito mesmo que você mim ajude, voc~e fez á algun tempo um torial de menu com imagen e rollover, eu amei super o tutorial eu o procurava a anosss, porém nunca havia encontrado, e agora que eu encontrei e fiz no meu blog não funciono )= eu fiz tudo certo, o menu ficou, mais quando passo o mouse não acontece nada, eu queria muito que você mim ajudasse, caso vc mim ajude eu farei um post de agradecimento e divulgação do menina nerd no meu blog, por favoooo mim ajuda ;-( to desesperada. Ps: o menu ta no meu blog de testes, só vo por no oficial quando ele tiver funcionando, mim ajuda que eu ficarei muito agradecida bjs, se quiser te dou ate meu template pra vc ver

dribs disse...

Super útil.. Tá de parabens linda <3
VISITA? :3
http://pinkpimenta.blogspot.com

Anônimo disse...

andreza seu cabeçalho do mn sumiu

isah disse...
Este comentário foi removido pelo autor.
isah disse...

Oi!! Eu faço tudo direito,o texto muda de posição e a imagem não aparece,eu pensei que tinha algo de errado com a que eu formatei,mas testei com uma sua e também não deu certo, o que eu faço?

http://loveatrevidinha.blogspot.com/

Yasmin Meira - [GAROTA DESCOLADA] disse...

Adorei o tutorial, super útil! Estava procurando algo assim, vou tentar fazer! Beijos, comentá lá no GD?
http://garotadedescolada.tk
twitter: @blogcoolgirl

Como um refúgio disse...

Amor te enviei um e-mail pelo formulário de contat, ver lá ? *-* bj

Anônimo disse...

haha, bem mais fácil, né?

Promoção rolando no Chuva de Morangos:
PROMOÇÃO 15 DIAS DE DESTAQUE

Louca Mistura disse...

Huhsaushaushausahsuahsa, ook, muuuuuuuuuuuuuuuuitíssímo obrigado por seguir o LM, *-*

beeijos
blogloucamistura.blogspot.com

Luuh Fernanda disse...

OIEEE segue la meu blog, ja seguii o seu segue lá o meu

www.dicasluh.blogspot.com

Gislaine disse...

uaa sabe, seus tutoriais são incrivéis, mais sabe eu tambem gostava dos seus posts adicionais como sites enfim as coisinhas que você costumava postar, mais confesso que eu gosto mesmo é dos goodies.

Bjos, http://republicacliche.blogspot.com/

Lola Khouri disse...

Tem selinho de qualidade pra você lá no blog =) Espero que goste =*

http://paperheartlola.blogspot.com/2011/07/selo-que-qualidade.html

Débora Speck disse...

adoorei o tutoo! Tudo de boom haha
vc poderia fazer um tuto de como tirar o espaço do cabeçalho e da navbar? Ou seja, eu tiro a navbar do meu blog, mais queria tirar aquele espaço ;/ não sei se vc me entendeu!
bjjs


www.donamoda-carolldebora.blogspot.com

Yara *-* disse...

Oii amore *u*
Seus tutoriais sempre me ajudam HOHO '

Visita e segue ?
http://ladysmart-blog.blogspot.com/

Attitude Included disse...

Falamos do seu blog no novo post do TAI ☺ Espero que goste! Beijos,
theattitudeincluded.blogspot.com

Alexia disse...

Andreza, você pode fazer um post falando sobre programas de afiliados confiáveis para blog ?

Beijos ;*

Mari P.M disse...

visitem meu blog? http://cherry-chanttily.blogspot.com/

dribs disse...

super útil...

segue? seguindo...
http://pinkpimenta.blogspot.com

Jefferson Reis disse...

Eu vou tentar. Obrigado Menina Nerd,
você é uma linda.

Jefferson Reis disse...

Não funcionou em meu Blog.
A imagem não aparece :o
rsrsrsrs Ai meu pai!

Carol disse...

ola adorei o tuto viu seu blog me ajuda mt
! shuauhshua participa dosorteio do meu blog
? Eu quero a paleta de 88 cores matte que a @docedemeninas e a @LojaYseMakeup esta sorteando. RT e concorra http://migre.me/5oyum '' bjus

Mundo Polêmico disse...

adooooooooooorei o blog de verdade ,mesmo to seguindo achei legal os direitos e deveres nerds ,outros me chamam de nerd,acho legal a musica dos semi novos ,muita coisa ali é verdade

xxxxxxxxxxxxxxxxxxxxxxxx disse...

Flor, eu não consegui fazer no meu...
eu não entendi a parte "De colar URL'
eu tentei usar um desses que vc fez...
mas nao deu certo..:/
pode me ajudar??
bjs
http://www.style-and-cia.blogspot.com/

Elizabeth Passos disse...
Este comentário foi removido pelo autor.
Elizabeth Passos disse...

Eu tentei e não conseguir:( achei o inicio!
Mas, não consigo colocar a imagem! Eu tô tentando essa amarelinha aí em cima, mas nada!:( Vc pode da uma ajudinha miguinha?
Bjks do elizabethpassos.blogspot.com

Andreza disse...

@Ana Paula Pojo e @Elizabeth - Pra pegar a url da imagem, é só clicar com o lado direito do mouse e clicar em "Copiar URL da imagem", aí você cola lá no código. (:

Ah, e não se esqueçam de colocar um títulos em um dos gadgets!

Elizabeth Passos disse...

Fiz isso miga mas naum deu certo:(

Unknown disse...

No meu blog não dei :(

Mari Brandani :3 disse...

Eu fiz tudo bonitinho aí quando eu fui visualizar não tinha mudado nada D: Ajuda? www.aquieholugar.blogspot.com

TRodrigues disse...

fiz iguaalzinhoo comoo mandaa mas as imagenss nao apareceem
http://perfeitinha-blog.blogspot.com/

Larissa Rosato xD disse...

Eu amoo o blog.. É tudo muito lindo . Parabéns !!
Maas então eu fiz tudo direitinhoo e naum aparece..

Seguindoo segue e volta
Beijinhos
http://glamourinfinity.blogspot.com

Naiara disse...

Nao Consegui! =(

Docinho . disse...

Adorei!
Mas eu não consegui T.T #trágico.
Eu queria tanto que funcionasse :/

fooreveraloone.blogspot.com

Anônimo disse...

Ai eu não consegui fazer, eu tento tento tento mas não dá certo ¬¬ o que será que deu errado ?!

help me , pleease?!

http://blog-da-lolica.blogspot.com

Tsu-chan disse...

No meu não deu certoo! T.T Ajuda?? Bjs

s2mclara.blogspot.com

Anônimo disse...

Tentei mais não deu certo!!!

Muryel Oliveira disse...

Oie amo seus Tutorias mas este deu um probleminha! ele centralizou legal os titulos mas a imagem não apareceu T.T
http://murysdiary.blogspot.com/
ó da uma olhada^^ mas mesmo assim obrigada pelos tutoriais e tudo mais ^^ Beijooos

Karols disse...

visitem http://karolsgirls.blogspot.com/ e comentem
quem seguir eu sigo de volta !!

Luana de Caux disse...

Este tutorial esta com um probleminha! Não esta dando certo! Eu consegui modificar até funcionar, mais foi difícil!
Beijinho, Luana

Ana Paula disse...

Não tô conseguindo não flor!A imagem não aparece!Ajuda?

www.i-canmore.blogspot.com

Thaty disse...

meninaa ta de parabéns heim, amei seu blog, estou começando agora, e achei o tudo o que eu queria aqui...além de ser super diferente, amei;)

Ella disse...

já tentei milhões de vezes fazer esse tuto e não consegui :(

Anônimo disse...

Eu não estou conseguindo :( Ajuda aii alguem

Victor Siqueira disse...

Oi linda. Seu blog stá perefito *-* Dá uma passadinha no meu. Aceita parceria?

http://jumpslash.blogspot.com/