Image Map

Personalizar a área dos comentários - Entenda!

|
 Hoje vou ensinar pra vocês duas coisas: tirar aquele fundo cinza dos seus comentários e trocar o 'postar um comentário' por uma imagem. Mas como eu sei que muuuitos de vocês já sabem como fazer isso, vou postar também algumas imagens para vocês substituírem. Vamos lá?

Retire aquele fundo cinza da área dos seus comentários 
Quando você está personalizando seu layout pela primeira vez (sem usar nenhuma base né), você se depara com aquele fundo cinza matando com seus comentários haha. Vou ensinar como você vai fazer pra mudar a cor desse fundo.
1- Vá até Design, Editar HTML, aperte CTRL+F (ou F3) e procure por: #comments
Você irá achar algo parecido com isso:

#comments {
 background: #cccccc; none repeat scroll top center;
padding: 20px;
}

Para mudar a cor do fundo: É só você trocar o  #cccccc pelo código da cor que você quer.
Troque o ''postar um comentário'' por uma imagem
Vocês já devem ter percebido que pra comentar lá no Attitude Included, tem uma imagem escrito '' Comente '':
Vamos ensinar hoje como fazer para colocar essa imagem e disponibilizar algumas dessas imagens para vocês.
1- Vá até Configurações > Comentários > Posição do formulário de comentários e marque a opção: Postagem abaixo incorporada.
2- Vá até Design, Editar HTML, Expandir modelos de Widgets, aperte CTRL+F (ou F3) e procure por:
<h4 id='comment-post-message'><data:postCommentMsg/></h4>
Troque a parte destacada em lilás por:


<img src="URL DA IMAGEM"/>

E na parte destacada em lilás, coloque a url da sua imagem. Prontinho!
Algumas imagens para vocês substituírem, por favor NÃO retirem os nossos créditos ok?




OBSERVAÇÃO: As duas ultimas imagens tem fundo branco, mas as outras têm o fundo transparente.
Espero que vocês tenham gostado do tutoriais e das imagens! 

54 comentários:

Unknown disse...

Ameei o blog estou seguindo! segue o meu ?

http://teensfashionblog.blogspot.com

Nova postagem no blog, escolha uma famosa que vc não gosta muito para ser a eliminada da semana. Bjs!

Larissa Borges disse...

amei seu blog *o* se puder retribuir a visita ficarei grata , a e estamos procurando afiliados, quem quiser, é so falar por comentário ou cbox ! :)

http://aoalcancedamoda.blogspot.com/

Sandri disse...

Tem tag para vc, lá no Sorriso de Garota!

http://www.sorrisodegarota.com/

Marcinha disse...

ain bom demais, só que eu já aprendi esse, agora acho q vou usar uma das imagens, mas sabe, será que seria possível fazer um post ensinando como arredondas as bordas da área dos comentários? Eu não consegui entender um q vi uma vez no menina nerd e o do mundo blogger é muito estranho, eu não entendo nenhum tutorial de lá rsrs.
Beijos
TDiaryofteens.net.tc

Ingrid Ramires disse...

Amei a dica ^^
http://blogdaingridzinha.blogspot.com/

Juliana Borges disse...

amei as imagens que vc fez *-*
bjs
http://s2juuh.blogspot.com/

Anônimo disse...

Adoreii, as imagens são tudo de bom *-* Bjinhus

http://dreamsofagirl-blog.blogspot.com

Fernanda Zucolotto disse...

Olá Anna, amei os tutoriais e as imagens, super lindas e elaboradas, amei!
Você poderia deixar uma leitora feliz? Haha.
Gostaria de saber qual é o nome da fonte que você usou na última imagem... muito obrigada e aguardo a sua resposta.

Tem post novo!
Beijos ;3
meianoiteequinze.blogspot.com

Luciana Gomes disse...

Obrigada, lindona!
Q 2012 seja pra vc um ano de muitas conquistas!
Bjinhos.

www.voudeblog.com

Anônimo disse...

Amei tudinho aqui seguindo,pode retribuir?
www.fofocasda-web.blogspot.com
Ah está rolando um concurso lá no blog vai ficar de fora?

Camila disse...

Ameeeeeei a dica!!! muito bom mesmo e super personalizado!

beijos e feliz 2012

http://vernasunhas.blogspot.com
@vernasunhas

Bia disse...

Oi da uma passadinha no meu blog e commenta o post novo?Creio q vc vai gostar,hahahihihoho
bejão,adoro aki,sucesso!
http://blog-da-byaa.blogspot.com

Dani Ribeiro disse...

Ótimo tutorial! Uso em meu blog! Adorei as imagens que você fez, todas delicadas e bem feitas =) Ah, obrigada por me colocar nos afiliados!

Beijos, onthefame.blogspot.com

Chiquissimas // Oficial disse...

aii como sempre você arrazando nesses tutos né.
Adooooooooro! s2
Beijos
Chiquissimas.blogspot.com

Red Lisptick disse...

aaaaawn que lindo os desenhos *-* qualquer dia eu crio coragem pra mexer no meu html e colocar eles lá rs sempre que vou mexer no meu html eu sempre estrago alguma coisa,incrivel isso haha

xoxo;* @ItsLooh

www.furadateen2.blogspot.com

Anônimo disse...

muito bom esse tutu!!
passa lá no meu blog?

demiselenablog-oficial.blogspot.com

Anônimo disse...

Flor, vou mudar o url lá do blog, dia 30 de dezembro vou aparecer aqui e avisar qual vai ser o link mesmo!

Beijos,
@sabrina_amo
http://linkmyfashion.blogspot.com

Fabio Correa Imoveis disse...

Adorei! E já estou usando!:D

Flor,aceita afiliação?*-*

http://meianoite-br.blogspot.com

TRodrigues disse...

Nossa amei o tutorial eu uso sempre ele , tem post novo no meu blog , se não for te incomodar vote em um blog da sua escolha , um voto faz mta diferença e o seu ajudaria muito .
http://perfeitinha-blog.blogspot.com/

Brenda Palma disse...

Olá! Esses tutorias são ótimos! Já está participando do sorteio do blog? Se não vai lá e participa ok!
Feliz 2o12!

Beijos
@tudodmenina
http://tudodmenina.blogspot.com/p/sorteios.html

Cecilia disse...

aaaaah tava louca pra saber como fazia isso *O*

http://himi-tsu.blogspot.com

Emily disse...

Que fofo. ♥-♥
Adorei as imagens!

Luana de Caux disse...

Já conhecia esse tutorial, muito lindas as plaquinhas,
Beijinhos, obrigada pela visita!!!

Crazy Teens disse...

adoreeeeeeei o tutorial, me ajudou muuuito *-*
amei aqui, seguindo ;)

2bgs ;*
- crazyteens-blog.blogspot.com

Rebeca disse...

usei esse tutorial ^^

Anônimo disse...

http://yesteens2.blogspot.com/

Linda visita?

ADOREI O TUTO + n deu certo
(eu so burrinha ne?)

Amanda disse...

muito boas as dicas!!Gosteei!!=)
Qdo puder e quiser passa lá no meu blog tbm e diz o q achou,se gostar me segue,ta bom?!

http://poquimdemim.blogspot.com/

demi is our queen, bitches. disse...

Oi :) eu não retirei os créditos da sua imagem,mas como o fundo de postagem do meu blog é preto não apareceu o link do seu blog.

Debee disse...

Usei *-*

May Braga disse...

oi

Moniely disse...

Eu não consegui! Fiz parte a parte! ME AJUDA! não consegui fazer nada que você disse!

Sthephany Lopes disse...

Amor, oi, tentei, porém não consegui ue a imagem aparecesse, pq? :S

Mariana disse...

Nao consegui ):
To seguindo, segue de volta?
www.bonequinharosachoque.blogspot.com

Unknown disse...

eu queeria saber como tira o numero de comentarios que aparece encima de comente . Agradeço se fizer um tuto

Adriele disse...

oi seu blog é lindo segue o meu ou vamos fazer parceria estou precisando please !!!

poke-nerd.blogspot.com.br

Adriele disse...

usei alguns dos seus tutos obg bjs

BLOGS // Vaah disse...

Que fofis amei o post !

http://cafe-vermelho.blogspot.com

Nathalia disse...

Bem diferente, coloquei lá, se quiser visite:
meu-finalfeliz.blogspot.com.br

Giullya Rosa. ♥ disse...

Eu usei *---*

eJhonas disse...

Parabéns pela postagem..
www.ejhonas.com

Vicky ♡ disse...

amei. usei! specialthingsforyou.blogspot.com

Carol disse...

Oi ameii a dica e o resultado! http://mundinhodasmenina.blogspot.com.br/
Useii o tutorial e as imagens

Anônimo disse...

Oi amore...Amei o seu blog e segui não teria como deixar de seguir seu blog é perfeitamente perfeito..
Segue o meu?
www.cupcake-coloridos2.blogspot.com
Bjkas e espero que goste do meu blog.
PS: Divulgue o meu blog q eu jé estou falando para todo mundo do seu..bjkas

Esther disse...

OOOOOOOOOOOOOOOOO meu não vai ..

Anônimo disse...

Não paareceeu esse negocio qe voc falou nn flor ,#comments {
background: #cccccc; none repeat scroll top center;
padding: 20px;
} pelo menos eu nun conseguir :// buubú

Anônimo disse...

Poxa , qe meeerd a, só comigo qe nun aparece ? ' ://

Carol disse...

Oie, só queria avisar que eu encontreii esssa mesma postagem no blog:
http://senhorita-perfeitiinha.blogspot.com.br/2012/07/personalizar-area-dos-comentarios.html
Não encontreii os créditos do seu blog na postagem, então estou te avisando.
Bjão
(http://mundinhodasmenina.blogspot.com.br/)

Carol disse...

Usei *---*

Anônimo disse...

Não consegui colocar no meu, a imagem não aparece :(

ємilly B. disse...

#Usei! Super útil!

Anônimo disse...

ooi, Gostaria de te convidar a dar uma passadinha no meu blog, e se puder se inscreva e me ajude a divulgar .. pqe nós blogueiras sabemos o quanto é difícil no começo né !Desejo muito sucesso pra você, beeijos http://neessarochamakeup.blogspot.com.br/

Unknown disse...

Olá!
Usei muito facil, :)

candycharm2012.blogspot.com.br

Anônimo disse...

amei. fiz.bjoooo
http://www.criativaearteira.blogspot.com.br/

Anônimo disse...

obg deu certo amei.