4 de jul. de 2012

Personalize o link dos comentários

Tumblr_lquu5pfazt1qjbmw1o1_500_large
Ganhaaaaaaamos! Nem acredito. Melhor time do mundo. <3

Vocês devem ter notado que o link dos comentários aqui do blog, é personalizado. O tutorial é fácil, mas é muito importante que você preste atenção. Você pode colocar uma cor, um background... O que quiser. Afinal, quando se mexe com HTML, é possível fazer várias coisas diferentes. Vou ensinar como colocar o jeito normal e um jeito hover. Vocês escolhem qual vão querer usar, ou se vão querer os dois. Vamos aprender?


Primeiro, vá no HTML e procure por: .post-footer {
Logo depois desse código, vai ter outras coisas escritas e uma } no final, certo? Deve estar mais ou menos assim. Logo depois que FECHAR a chave, adicione esse código:
.comment-link {
background: #000; /* cor do fundo */
color: #fff; /* cor da fonte */
padding: 1px; /* espaço entre a margem e o texto, não mexa */
}
Se quiser o efeito hover, depois das chaves do PRIMEIRO CÓDIGO, é só colocar outro: .comment-link:hover { E então você personaliza como quiser.
Seus links normais já devem estar personalizados de um jeito. Esse vai ser o estado hover normal, que você não precisa personalizar, se não quiser. Mas e se além desse efeito, você quiser colocar outro background ou/e mudar a cor do texto? É simples.
.comment-link:hover {
background: #fff; /* cor do fundo hover */
color: #000; /* cor da fonte hover */
padding: 1px; /* espaço entre a margem e o texto hover, não mexa */
}
Ficaria tudo, mais ou menos assim:
.post-footer {
margin: .5em 0;
line-height: 1.6;
}
.comment-link {
background: #000; /* cor do fundo */
color: #fff; /* cor da fonte */
padding: 1px; /* espaço entre a margem e o texto */
}
.comment-link:hover {
background: #fff; /* cor do fundo hover */
color: #000; /* cor da fonte hover */
padding: 1px; /* espaço entre a margem e o texto hover, não mexa */
}
Você pode também personalizar o hover do texto usando o negrito, itálico, riscado, sublinhado, sombra no texto e o background com imagem. São só algumas sugestões. Para personalizar o estilo da fonte, já postei esse tutorial, que você pode fazer o mesmo processo.
Para backgrounds com imagem, coloque: background: url("URL_DA_SUA_IMAGEM"); /* troque pela URL sem tirar as aspas */
E para sombra no texto, coloque antes de fechar a chave: text-shadow: 1px 1px 10px #000; /*mude o código do jeito que preferir, recomendo apenas que mexa no 10px e na cor */


NÃO ESQUEÇA DE SEMPRE COLOCAR UMA } NA LINHA DE BAIXO, DEPOIS DO CÓDIGO!

Bom, o tutorial de hoje foi esse. Espero que tenham gostado. Dúvidas? Se ficou alguma coisa confusa, é só me falar que eu arrumo tudo e tento explicar de uma maneira melhor. Um beijo enorme da Dani!

49 comentários:

Samara Paes disse...

Adorei o tutorial Dani, você entende mesmo de HTML. Bom, eu A-M-E-I C-O-M-P-L-E-T-A-M-E-N-T-E! Ficou perfeito, eu só não gostei muito das cores. Posso escolher as cores dos desenhos? Ah, pode ser os mesmos desenhos, pois estão lindos *-* Eu vou pensar numas cores aqui e já te falo. http://chassy-bomb.blogspot.com.br/

Ana Clara disse...

Quanto tempo que não visitava seu blog amor! D:
Mais continua lindo, como sempre! *-*

Tem post novo lá no PB! Dá uma passadinha lá? *o* http://porckybunny.blogspot.com.br/

Vitória Acedo disse...

Oi,Amei o blog.!
http://vitoriaacedo.blogspot.com.br/

Vitória Acedo disse...

Oi,Amei o blog.!
http://vitoriaacedo.blogspot.com.br/

Vitória Acedo disse...

Oi,Amei o blog.!
http://vitoriaacedo.blogspot.com.br/

Postadoras disse...

Bom eu amei o tuto! eu nem torço para ninguém hauhsuah
Bom gostaria de te pedir um favor, vota em mim no duelo de blogs daqui >> http://www.cereja-com-morango.blogspot.com.br/ << Obrigada!
Beijos
diariosamigas.blogspot.com.br

Rukia disse...

Oi flor, adorei o tutorial, é super útil

www.i--love--y.blogspot.com

XOXO, Beijinhoos

Laura • disse...

Adorei o tuto. Vou usar!
Beijos.
imastoryne.blogspot.com

Manu Sampaio disse...

Ah, sei desse efeito, realmente dá um novo ar no blog, ótimo tutorial!

Beijos, Garota de All Star

Juliana St disse...

Oi. Gostei dos teus posts. Seu blog é muito
bem construído, e você escreve com criatividade.
Parabéns pelo blog. Beijos.

http://juliana-editions.blogspot.com

Bibi Sousa disse...

(: adorei o tuto, aqui esta muuitooo fofo *-*
www.Bikoti.blogspot.com.br

Bibi Sousa disse...

vamoos ganhar *O* e nois bate ai gata o/
www.Bikoti.blogspot.com.br

Anônimo disse...

Amei o tutorial, demais, ah agora que to comentando ele já ganhou kkkkk
http://themudancas.tk/

Ingrid Sakamoto dos Santos disse...

Adorei o tutorial flor, muito legal! CORINGÃO GANHOU FIA! TIMÃOOO ÊO ! É NÓS! SOU LOUCA POR TI CORINTHIANS! XD Obrigada por votar em mim no The Lovers!

www.ingridsakamotodossantos.tk

amy disse...

Curti o tuto :3 (Corinthians é nós ganhamo manola u-u) haha
http://ventos-deoutono.blogspot.com.br/

Eduardo Felipe disse...

Nossa, o tuto é super legal.
MUITO CRIATIVO MESMO.
http://construtordepensamentos.blogspot.com.br

Samara Paes disse...

Dani, eu quero o cabeçalho todo montado já, entendeu? Vou deixar o link de um pattern lá do ColourLovers, lá tem as cores que eu quero no cabeçalho: http://www.colourlovers.com/pattern/1679615/h_u_n_g_r_y

Debee disse...

Aqui tá lindo demais *u* De novo *u* ~Adorei!
HAHA eu vi o jogo ontem. Minha amiga é flamenguista e tinha apostado que se o Corinthians ganhasse, ela virava corintiana! Enfim. uahuah ~não tenho time :(~
Adorei o tutorial! Quando quiser fazer algum layout ou algo do tipo, provavelmente virei aqui. Favoritei!
Beijos,
Just Debee

Debee disse...

Ah, flor! Eu queria saber se você tem algum tutorial ensinando como fazer esse menu hover no cabeçalho. Gostaria de aprender!
Obrigada!
Beijo,
Just Debee

Anônimo disse...

Eu uso ele de vez em quando :)
www.CrystalBow.blogspot.com

Unknown disse...

Adorei o tutorial, e realmente, você entende de HTML hein. Bjos!
garotaretro.blogspot.com

Ana Clara disse...

O conteúdo do seu blog é super bom e eu adorei tudo aqui e segui. Se puder, me segue de volta? Obrigada. :D

Xoxo :*
http://porckybunny.blogspot.com.br/

Camila disse...

Adorei o tutorial!
Fica muito fofo!

Mundorosaachock.tk
Beijos

Bella disse...

Aaaaaaaa, não acredito que você é corinthiana :( kkk sou são paulina \o/ obrigada amiga *--*

http://oficial-sweetgirl.blogspot.com.br/

- Luka ♥ disse...

Amei o tutorial linda!
Vou usar com certeza, eu adoro quando os links ficam com efeitos x3
És mestra d eHTML hein? u-u

Fico feliz que tenha gostado do meu blog. Volte sempre lá xD

Kisses <3
http://paradise--days.blogspot.com.br/

Newsdayoff disse...

Nossa, amei o tuto, super legal e muito útil


http://newsdayoff.blogspot.com.br/

Luly disse...

Ah, Dani, fico feliz que você tenha me entendido. E também que não tenha me tirado da equipe, sabe que eu adoro ajudar você aqui. Parabéns pelo timão, o Corinthians mereceu mesmo. Um beijo. O meu dia é amanhã sim (:

Paula disse...

Parabéns pelo Corinthians, jogaram bem rs. Adorei o tutorial, parece complicado mas não é não, simples *-*

Beijos, Paula
sweetmakeups2.blogspot.com

Saladadefrutasbr (saladadefrutasbr.blogspot.com) disse...

Dani amiga, eu não tô entrando na net de noite, porque tô usando o pc do meu irmão, e ele usa a noite, mais daqui a alguns dias eu vou ganhar meu computador talvez! E agente conversa mtão

http://saladadefrutasbr.blogspot.com.br

Saladadefrutasbr (saladadefrutasbr.blogspot.com) disse...

Dani amiga, eu não tô entrando na net de noite, porque tô usando o pc do meu irmão, e ele usa a noite, mais daqui a alguns dias eu vou ganhar meu computador talvez! E agente conversa mtão

http://saladadefrutasbr.blogspot.com.br

Débora Morais disse...

Parabéns Corinthiana ^^
ótimo tuto, eu estou preparando mais desenhos, depois eu posto ^^
beijão
spaziodm.com

Lary Yah disse...

Não conhecia esse tuto haha, no proximo lay vou usar, amei >.<

Beeeeijos
#Nhaaac >>>http://the-lovers-official.blogspot.com/

Isabela Godoy disse...

Adorei o tutorial Dani, salvei nos favoritos pra usar no próximo lay. P.S: que foto feia ali no início hein? hahaha brincks!

Beijos
www.deliriosdegarota.com

eJhonas disse...

Muito bom o tutorial, o blog é muito bom :DD
Poderia dar uma passadinha no meu? www.ejhonas.com

Anônimo disse...

Adorei o tutorial, muito bom. Vai ser muito util, vou usar no proximo lay que eu fizer LÇKELÇKELÇE õ/
http://www.senhoritaliberdade.com

Unknown disse...

Adorei o tutorial, é sempre muito útil tutoriais dos comentários, mas lá no blog nem fiz nada, deixei do jeito que estava mesmo, rs.

Beijos,
garota-unbroken.blogspot.com

Francelle Machado disse...

Muuito bom o tutorial! Aliás, eu adooro os tutoriais daqui...são sempre muuito bem explicados e de fácil entendimento! \Õ/

Beeijo
www.blogmymemories.com

Anônimo disse...

Ameii o tuto =] ,Acho que é a primeira vez que visito aqui,Aqui é lindoo demais *u* o design e o conteúdo são incríveis *o*

Aceita Afiliação??Se aceita me avise lá para te colocar e me coloque aqui

#Bezoos~~> perfeitosmile.blogspot.com

Queen OF World disse...

Ótimo tutorial,não sou corinthiana mais eu pulei que nem uma doida ontem quando ele ganhou kk'

beijos obrigada pelo coment lá no blog :)

ilovemecarol.blogspot.com/

Anna Carollyne Oliveira disse...

Dani e seus efeitos, haha <3
Depois, vou testar no meu blog Extra. Quero ver como que fica.

Dani, você poderia postar como fez pra por essa sombra na palavra itálica? Se não for incômodo, claro.

Beijos,
http://world-cutest.blogspot.com.br

Priscila Leite disse...

Oi flor!
Adorei o tutorial, super bem explicadinho! Me ajuda numa coisinha?
Como faço para colocar a parte que fica acima do comentário do tipo:
- Não brigue, não xingue e não fale palavrões....
Se puder me responde via e-mail:
aliadosdabeleza@gmail.com

Adorei o blog e vou estar sempre por aqui, você é muito talentosa!
Já estou te seguindo, adoraria se me seguisse também!

http://aliadosdabeleza.blogspot.com.br/

Beijoss ♥.♥

Carol Oliveira disse...

Depois que li o tutorial vim olhar o efeito hover nos links dos comentários daqui, e fica mesmo uma graça! Salvei esse tutorial aqui e vou usar no próximo lay.
Não parece difícil, ao menos eu entendi tudinho. Só personalizar as cores e pronto :)

Seus tutoriais salvando os n00bs sempre, Dani HAUEHUEAHAUHEAUEAHU <3

Beijo,
muggle-world.blogspot.com

. gaabii oliveira disse...

É nóis corinthiana! <33
O tutorial é muito perfeito. Vou usar, e creditar.
Beijos ;*
http://senhoritainsana.net.tc

Nadine disse...

Demais o Corinthians ali! hihihihihi GANHAMOS POHAAA! Ainda não acredito!
Parabéns pelo blog,

beijos

http://www.depoisquecrescemos.com/

Maria Eduarda Santos disse...

Ameii o post e o blog!!Ja estou seguindo!!

se poder porfavor segue:
www.blogteenguide.blogspot.com

Anônimo disse...

Whether you are searching for specialty styling products or
specific Loreal hair products, you
are sure to find what you need. Before you go for them, try
products at Keranique for hair care. Generally, these products are more expensive than their watered-down counterparts, but you can find
a few affordable pure silicone hair products (see below).

Anônimo disse...

Therefore, if you wanted to specifically look for CNN News, it
is right there in its own directory on the front webpage.

If you are a reader of local language newspapers it might get
difficult for you to find your desired language newspaper any where else.
Newspaper production is known to be the most lucrative and respected industry in the modern age.
Newspaper companies should be seeking to have subscribers to their service where breaking news
can be emailed and send to blackberries and cell-phones.
A writer in San Francisco can read a story in New York
at 3:00 AM (EST) and have it ready to go in his own paper for the
Midnight (PST) deadline.

Also visit my web page :: click here

Anônimo disse...

Since the program is based on a real time world, users would not only be able to choose the weather
of their choice but also the scenery. Even recommended system specs had difficulties coping
with the games demands on first launch when flying
over the more substantial town locations. You must, however, practice
auto-rotations at the flying field with the help of an instructor.
Initially, it took a little while to go through the manuals and understand how it works,
but once that was done, it was a breeze. It features its own unique
economy in which players can buy and sell things they make and so on, several real world companies are actually getting into the game to offer services, such
as H&R Block.

Take a look at my homepage: simulator

Anônimo disse...

This can be flight simulator version FS2002, FS2004 or the latest
version of Flight Simulator, FSX. These originally were quartz crystals from the River Rhine in a region noted for gem-cutting, particularly the town of Idar-Oberstein.
At this time, and in a good location, the leader
should set up a few anchors and belay the second climber
so he can climb up and hand off the equipment he has been recovering.
Flight - Simulator flight simulation features
highly detailed time of day modeling and can track the current computer clock time in order to correctly place the sun, moon, stars, etc.
Usually, would need to follow the entire startup sequence to start any of the airplanes,
but FSP also has the auto start feature, to make it easier for newbie’s.