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.

42 comentários:

Giu Rezende 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/

Sweet MakeUp 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/

Paloma Morais 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

Paty Albuquerque - Morangow disse...

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

Isabela Silva disse...

Saudades ♥

It Teen Blog disse...

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

Camila Rosado 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/

Rafaela Thomé disse...

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

David - Garoto Nerd 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 Guerra 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

Ana! 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/

Leeh 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

Garota Dilema disse...

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

Momo, why? 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

StephanieVieira disse...

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

vitoria disse...

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

♪ Fefe disse...

Vou colocar no meu blog AGORA!
crystalbow.tk

Isabela Godoy - Delírios de Garota 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

David - Garoto Nerd disse...

Oi, tudo bom, tenho uma promoção valendo os livros TORMENTA e O céu esta em todo lugar >3

Participe;
http://garotoonerd.blogspot.com.br/2012/05/promocao-tormenta-o-ceu-esta-em-todo.html

Emme Lee 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/

Laurinha (SF) disse...

Hoy flower, adorei seu blog e ja estou seguindo !!
Visite o Sweet Flower, e nos ajude a conseguir 500 seguidores ;) Podemos contar com vc?

Beijos :)
http://sweet-flower-laura.blogspot.com.br/

Alice Guedon disse...

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

@GaaabiOliveiraa disse...

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

World Girl-Oficial disse...

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



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

Chassy Cher disse...

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

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

Meia Noite e Quinze disse...

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

Fernanda,
meianoiteequinze.tk

Nikka Piress disse...

boa dica de hover!!



Beijos, Nikka

COLLIDED SOUL

Milleny 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/

Jooana 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;

Caroliina Pereira disse...

ameii