28 fevereiro 2012

Personalizando "Leia Mais" (com uma pitada de fofura..e efeito hover)

Agora vcs pensam : deixe-me adivinhar: efeito hover?
Eu respondo: Hmm.. talvez \o/


Hi meus cogumelos recheados com geleia! Como prometido, vou trazer um tutorial muito divertido, pu melhor.. fantastic. É  de personalizar o leia mais. Mas com uma pitada de fofura e efeito hover!  Vai ficar desse jeito aqui: Clica!!


Como sempre, vamos no Design > Editar HTML > Ctrl+F (ou  na nova interface: Modelo >; Editar HTML > Prosseguir >; Ctrl+F) E procure por: b:skin 
Quando achar coloque acima o seguinte código:



.jump-link{
background-color: #ff6464; /* cor do fundo */
padding-left: 2px; /* espaçamento esquerda */
padding-right: 2px; /* espaçamento direita */
padding-bottom: 5px; /* espaçamento embaixo */
padding-top: 5px; /* espaçamento emcima */
font-size: 10pt; /* tamanho da fonte */
color: #000000; /* cor da fonte */
text-align: center; /* alinhamento do texto */
width: 80px; /* largura do fundo */
opacity: 0.7; /* opacidade */
-webkit-transition-duration: 1.00s; /* duração da volta do hover */float: left; /* left (esquerdo) ou right (direito) */ }.jump-link:hover{background-color: #ff6464; /* cor do fundo com o mouse em cima */
padding-left: 2px; /* espaçamento esquerda */
padding-right: 2px; /* espaçamento direita */
padding-bottom: 5px; /* espaçamento embaixo */
padding-top: 5px; /* espaçamento em cima */
color: #000000; /* cor da fonte */
width: 100px; ?largura do fundo com  o mouse em cima */
opacity: 1.0; /* opacidade */
-webkit-transition-duration: 1.00s; /* duração do hover */
text-decoration: none; /* sem sublinhado, negrito, itálico ou tachado */
}


As instruções estão no código, lembrando que a largura do fundo depende do tamanho do seu texto.
Ex: Se for " Para mais informações,clique aqui" você coloca a largura para que dê o texto inteiro, se for "Leia Mais" vau ser ,obviamente, menor né?

Então fofinhos, acho que posto amanhã, senão, só sexta, o que vocês acham de Brushes, a IIII parte de ilustrações e mais do Pusheen pode ser?? Quem quiser comenta, quero ver pelo menos mais de 5 comentários ai!!!

Beijõesss

14 comentários:

Jéssica disse...

Oii querida,adorei o blog,já estou seguindo.Aceita parceria?
Visita o meu blog e se gostar segue?Agradeço desde já.Bjos , Bjos .

http://falaserioblogs2.blogspot.com/
@Blog_FalaSerio

Anônimo disse...

Fica lindo esse leia mais, o efeito hover é perfeito. Ótimo tutorial.
http://plumasepaets.blogspot.com/

JubiracyCarlos disse...

oi, quero afiliação com o blog, diz o o tamanho do banner que assim que eu ver eu mando, o tamanho do banner pra colocar no meu blog é 260x46, acessa meu blog www.atualizadus.blogspot.com

a e mande o banner pra esse e-mail: jubiracy_juba@hotmail.com

Sabrina Cardoso disse...

Ameei o teu bloguito!! *-*
Aceita parceria??
Beeijoouuxx ~~> mycandyspace.blogspot.com

Sabrina Cardoso disse...

Parceria, mas aproveitando... Posso me afiliar contigo também??

Sabrina Cardoso disse...

Floor, como é que você colocou aquele gadget que tem as pessoas que acabaram de comentar??

Sabrina Cardoso disse...

Prontinho, já te linkei como parceira e como afiliada!!
Beeijoouxx...

ChocoTea disse...

Ah, blog fofo é sempre muito amor ~ :3
Apesar de eu ser 'véia' no mundo da blogosfera, sou meio atrasada a essas epidemias de lays, outro hora htmls diferentes ~ Mas sempre é bom aprender mais né?!

É isso man ~ Adios!

http://avidadealguemanormal.blogspot.com/

Laura • disse...

Aceita afiliação?
s2imagine.blogspot.com

Laura • disse...
Este comentário foi removido pelo autor.
Cherry disse...

Amei Amei o blog *-*
Ja to seguindo aqui haha
da uma passadinha la no meu? se gostar segue la!!
bejnhos linda!!

Isabel Gusmão disse...

Adorei o tutorialzinho :D

www.caprichando.com

The Secret M disse...

aah adorei haha, que lindo.

http://thebuttonfashion.blogspot.com/

Descompliquei disse...

muito bom o tutorial !
adorei seu blog.

www.teenlist.blogspot.com