13 de mai. de 2012

Hover dos links em negrito

Tumblr_m3tosiqpf21qmevz7o1_500_large

Primeiramente, feliz dia das mães! Essas pessoas que fazem grande parte da nossa vida! Bom, já viram que o hover dos links aqui do blog ficam em negrito? Eu acho bem fofo e é uma forma de destacar os links. Pra quem não sabe o que é hover, é o efeito que dá quando você coloca o mouse em cima. Foi a Paloma que pediu esse tutorial. Ah, e tem uma novidade! A Brenna me pediu pra fazer um layout free. Eu vou tentar fazer, mas nada está certo ainda, ok? Se ficar bom, eu posto pra vocês! Enfim, vamos pro tutorial agora?


Primeiro, salve uma cópia do seu template. Vá no seu HTML e procure por: a:hover {
Você vai achar várias partes assim. Mas vamos usar a primeira, certo? Ela vai estar desse jeito:
a:hover {
  text-decoration:underline;
  color: $(link.hover.color);
}
Primeiro, você muda o text-decoration:underline; para text-decoration:none;. Porque com underline, seus links vão ficar com aquele sublinhado feio em baixo, e com none, vai ficar sem nada. A color, que seria a cor do hover, você pode mudar no designer do modelo ou no próprio HTML. É só colocar, por exemplo, color: #000000;.
Depois te ter feito as alterações, vamos colocar o negrito. Antes de fechar a chave }, abaixo do color, você coloca em baixo: font-weight: bold;
Ficando desse jeito:

a:hover {
  text-decoration:none;
  color: $(link.hover.color);
font-weight: bold;
}
Prontinho! É só salvar e ver se deu tudo certo. Caso alguma coisa dê errado, me falem! Espero que tenham gostado. Beijos.

40 comentários:

Nina disse...

Nossa ameeei! Dani, você é demais!

Precisamos de Postadoras!
http://advancedhtml.tk/

Bianca Marchezi :) disse...

Queeee lindo esse tutorial, no meu próximo layout quem sabe eu não coloque no meu *-* http://fofuranaotempreco.blogspot.com.br/

Paula disse...

Achei muito legal o tutorial Dani! :D
Beijos, Paula
sweetmakeups2.blogspot.com

Alex Monteiro disse...

Já estou usando lá no Blog, fazia tempo que procurava um Tutorial que tirasse aquele tracinho debaixo dos Links...
Passando também pra dizer que o OTF está no Space Blog #3, confere?
Feliz dia das Mães ta Dani? Bjão!
http://cantinhocomtudo.blogspot.com.br/

Anônimo disse...

Esse efeito é super bonito, e dá um toque especial do blog, já vou usa-lo. Emfim, você arrasou no post, obrigada! Dani, usei alguns tutoriais daqui do OTF, mas eu já coloquei os créditos, ta bom? Estão todos na barra lateral.
momamoraes.blogspot.com

Giulia disse...

adorei o efeito! espero que sempre visite meu blog, amei seu blog http://breathingfor--you.blogspot.com

Bella disse...

Saudades ♥

Gislaine Dias | Blog disse...

Ótimo tutorial, eu adoro links com efeito hover.
http://i-teenbr.net.tc

Camila disse...

Amei o tutorial.
Também amei seu blog, ele é lindo!
É claro que eu estou seguindo.

Bjss
mundorosaachock.blogspot.com

Manu' disse...

Que tudo esse tutorial, amei <3 É super útil.. O blog ta lindíssimo ^^


Beeijos, beeijos :* http://sweetsuor.blogspot.com.br/

Anônimo disse...

Nossa estava super curiosa pra saber sobre esse efeito! Adorei.
Desculpe a demora pra responder, estava sem internet.
rosaschiclete.blogspot.com

David Costa disse...

opaaa rs, gostei do tutorial eu ja tinha visto esse efeito no negrito em outros blogs mais não sabia como colocar rs (: vlw

http://garotoonerd.blogspot.com.br

Nadine disse...

Muito boa a dica! Obrigadaaa

Hihi beijos
http://depoisquecrescemos.blogspot.com.br/

Raquel disse...

ótimo o tuto ^^ acabei de conhecer aqui e amei tudo, muito lindo, parabéns *-*
estou seguindo (: amor, se não for incomodar, poderia dar uma passada lá no blog, e se gostar, claro, seguir ? me ajudaria muito :) obg desde já .
beijos .
http://ilovedinossaurs.blogspot.com.br/

Nicolas disse...

Oi!! Queria saber se você aceita parceria!! Aceita?? Pode responder la no blog?? ^^!!
Um abraço!!

--> Dicas Blogspot

Anne Gattini disse...

Amei o tuto, suuuuper útil, pena que pra mim HTML é que nem falar grego :P Faça mesmo o layout free *---*

Beijos
Anne
meninasantenadas.tk

Monique Premazzi disse...

Realmente fica muito melhor quando da uma destacada nos links :) Adorei o tutorial, mesmo que eu passe longe de tudo que se diz respeito a HTML KKKKKK

Amei o blog, vim aqui indicada pelo Cantinho com Tudo *-*

Beijos,
Monique <3
http://www.secretsofalittlegirl.com/

Letícia Carolina disse...

Nossa, eu acho super lindo esses efeitos <3 tenha uma ótima terça-feira, eu tô te esperando lá no meu bloguito tá? beijos.



garota-fashiion.tk

Anônimo disse...

Ual, é super fácil!
Sorteio no Garota Dilema.
http://garotadilemablog.blogspot.com.br/

Maria disse...

Muito legal *w* Adorei~
Hey, sabe como faz para o hover dos links ficar em tachado? (eu tentei com esse código, mas não deu .n.)

Beijo ♥
thestarsthief.blogspot.com

Stephanie Vieira disse...

Caramba, estava a procura desse tutorial, fica muito fofo *-* vou por lá no GDOS. Bacana viu?
Obrigada pela visita,
Garota do olhar sincero

www.teenhere.com.br \VitóriaLeticia disse...

u-U tuto perfeito , flor linda seguindo aqui... ,se tiver um tempo passa lá : teenhere.blogspot.com

Anônimo disse...

Vou colocar no meu blog AGORA!
crystalbow.tk

Isabela Godoy disse...

Adorei o tuto, Dani! Muito fácil *-*

Beijo <3
Delírios de Garota

Juliana {Antes de Mudar} disse...

Daniiiiiii! Que saudades que eu tava de visitar o OTF.. Você é demais. Sempre me ajudando com esses tutoriais. Parabéns pelo blog, que está impecável, como sempre.

Beijos, Jú

antesdemudar.blogspot.com

Luly disse...

Oh, sinto muito por sua internet! Tomara que volte logo. Adorei essa tutorial, fica muito melhor do que com aquele sublinhado em baixo dos links. Obrigada por comentar no meu blog, lindinha... Beijos, the-zombie-attack.tk

Andressa Pereira disse...

Ameei o tutu,muito legal

http://blogcinderelaurbanabr.blogspot.com.br/

Absolute Dream disse...

ootimo tuto (: mto legal .

http://mini-fofoquinhas.blogspot.com.br/

Camila ❀ disse...

Ooi estou seguindo o blog *--*
Muito lindo !
Bjs

http://melhoresmeninas.blogspot.com.br/

Daiana Araújo disse...

Ola meu bem,tudo bem?Espero que sim!
Olha eu adoooorei o seu cantinho e estarei sempre aqui para te visitar .
Hehehehe já estou te seguindo!!!!
Olha o meu cantinho e me segue e curti tbm...
http://daianaaraujoo.blogspot.com.br
Beeeeeeeeeeeeeeeijo

Larissa Pontes disse...

Floooooor você voltou! Você nem deve lembrar de mim, mas eu exclui meu antigo blog, o Do You Like Style a voltei com outro agora! pode dar uma olhadinha lá e se gostar seguir? Ficaria muito agradecida <3 Beijos
http://londonhit.blogspot.com/

Alice Guedon disse...

Dani, você voltou? Eeeeeeeba, achei que você tinha saído de vez!

. gaabii oliveira disse...

Ótimo tutorial!
Obrigado por seguir de volta.
Beijos ;*
senhorita-insana.blogspot.com

Anônimo disse...

Ah fica mt mais fofo! eu já conhecia esse tuto! amei



BEIJOS................. ianapaulinhaaaa.blogspot.com.br

Mrs. California disse...

O tutorial é fácil e o resultado é fofíssimo ^^

http://blog-sweetpoison.blogspot.com/

Fernanda Zucolotto disse...

Que tutorial maravilhoso, já vi em muitos blogs, mas nunca tão bem explicado. Vou fazer o tutorial.

Fernanda,
meianoiteequinze.tk

Anônimo disse...

boa dica de hover!!



Beijos, Nikka

COLLIDED SOUL

Milleny {SI} disse...

Nooooosssa , que blog lindoo , tutoriaaaal incrivel , sem contar no layout , flooor , irei visitar aqui sempre que der viu . Kiis .

Seguindo ... visita se não for nenhum encomodo ?

http://blogsweetimagination.blogspot.com.br/

teste disse...

Adorei o tuto, ajudou a me inspirar. Mas não copiei kkk Ficou assim:

font-weight: bold
word-spacing:7px;
text-decoration: line-through;

Unknown disse...

ameii