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 {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;.
text-decoration:underline;
color: $(link.hover.color);
}
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 {Prontinho! É só salvar e ver se deu tudo certo. Caso alguma coisa dê errado, me falem! Espero que tenham gostado. Beijos.
text-decoration:none;
color: $(link.hover.color);
font-weight: bold;
}
40 comentários:
Nossa ameeei! Dani, você é demais!
Precisamos de Postadoras!
http://advancedhtml.tk/
Queeee lindo esse tutorial, no meu próximo layout quem sabe eu não coloque no meu *-* http://fofuranaotempreco.blogspot.com.br/
Achei muito legal o tutorial Dani! :D
Beijos, Paula
sweetmakeups2.blogspot.com
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/
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
adorei o efeito! espero que sempre visite meu blog, amei seu blog http://breathingfor--you.blogspot.com
Saudades ♥
Ótimo tutorial, eu adoro links com efeito hover.
http://i-teenbr.net.tc
Amei o tutorial.
Também amei seu blog, ele é lindo!
É claro que eu estou seguindo.
Bjss
mundorosaachock.blogspot.com
Que tudo esse tutorial, amei <3 É super útil.. O blog ta lindíssimo ^^
Beeijos, beeijos :* http://sweetsuor.blogspot.com.br/
Nossa estava super curiosa pra saber sobre esse efeito! Adorei.
Desculpe a demora pra responder, estava sem internet.
rosaschiclete.blogspot.com
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
Muito boa a dica! Obrigadaaa
Hihi beijos
http://depoisquecrescemos.blogspot.com.br/
ó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/
Oi!! Queria saber se você aceita parceria!! Aceita?? Pode responder la no blog?? ^^!!
Um abraço!!
--> Dicas Blogspot
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
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/
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
Ual, é super fácil!
Sorteio no Garota Dilema.
http://garotadilemablog.blogspot.com.br/
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
Caramba, estava a procura desse tutorial, fica muito fofo *-* vou por lá no GDOS. Bacana viu?
Obrigada pela visita,
Garota do olhar sincero
u-U tuto perfeito , flor linda seguindo aqui... ,se tiver um tempo passa lá : teenhere.blogspot.com
Vou colocar no meu blog AGORA!
crystalbow.tk
Adorei o tuto, Dani! Muito fácil *-*
Beijo <3
Delírios de Garota
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
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
Ameei o tutu,muito legal
http://blogcinderelaurbanabr.blogspot.com.br/
ootimo tuto (: mto legal .
http://mini-fofoquinhas.blogspot.com.br/
Ooi estou seguindo o blog *--*
Muito lindo !
Bjs
http://melhoresmeninas.blogspot.com.br/
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
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/
Dani, você voltou? Eeeeeeeba, achei que você tinha saído de vez!
Ótimo tutorial!
Obrigado por seguir de volta.
Beijos ;*
senhorita-insana.blogspot.com
Ah fica mt mais fofo! eu já conhecia esse tuto! amei
BEIJOS................. ianapaulinhaaaa.blogspot.com.br
O tutorial é fácil e o resultado é fofíssimo ^^
http://blog-sweetpoison.blogspot.com/
Que tutorial maravilhoso, já vi em muitos blogs, mas nunca tão bem explicado. Vou fazer o tutorial.
Fernanda,
meianoiteequinze.tk
boa dica de hover!!
Beijos, Nikka
COLLIDED SOUL
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/
Adorei o tuto, ajudou a me inspirar. Mas não copiei kkk Ficou assim:
font-weight: bold
word-spacing:7px;
text-decoration: line-through;
ameii
Postar um comentário