19 dezembro 2012

Tutorial: Marcadores com efeito hover.

Hello ^^
A pedido da Vicky, vou ensinar deixar as tags iguais ao do blog:


Lembrando: Eu não me recordo de onde eu achei esse tutorial, creio que foi no Mundo Blogger.
Vamos lá?

Antes de tudo, siga esse passos:
Layout → Adicionar Gadgets → Marcadores
*Desculpem as tags, mas dá para enchegar. CLIQUE PARA AMPLIAR*
Salve. Em seguida vá em Editar HTML, e procure por: ]]></b:skin>
Cole antes de ]]></b:skin> o seguinte código:

.label-size span, .label-size a {
  color: #000000; /* cor dos marcadores em estado normal */
  padding:2px 5px; /* espaço entre os marcadores e as margens, não altere */
  margin:2px; /* espaço entre um marcador e outro, não altere */
  background: #EEEEEE; /* cor de fundo dos marcadores */
  display:inline-block; /* deixa os marcadores em caixinhas, não altere */
  font-size:10px; /* tamanho da fonte */
  border-radius:10px; /* bordas arredondadas */
  }

.label-size span, .label-size a:hover {
  background: #000000; /* cor de fundo dos marcadores em estado hover */
  color: #EEEEEE; /* cor dos marcadores em estado hover */
  }
Faça as alterações nescessárias no código, e salve.
Não modifique essas tags: padding:2px 5px; / margin:2px; / display:inline-block;
Gostaram do tutorial?
Ganhei da Dida >< Obrigada.
 NÃO ACEITO MAIS SELINHOS, NEM TAG.
Beijos

23 comentários:

Adriana Leandro disse...

Ótimo post. Valeu. Bjus!!!

galerafashion.blogspot.com.br

Simony disse...

Estou correndo um pouco de Tutoriais e me preocupando mais com as postagens,acho que pesa um pouco o Blog,seguindo,e agradeço se puder retribuir..obrigada bjs
http://simonebastos2007.blogspot.com.br/

my life is in books disse...

Que legal, adorei o tutorial.
http://minha-vida-em.blogspot.com.br/

Renata Morais disse...

Oi linda, estou aqui retribuindo a visita e estou seguindo o blog, http://cliquedemoda.blogspot.com.br/ beijinhos ;*

Letícia Carolina disse...

Fica um efeito maravilhoso, mas eu não gosto muito de marcadores, rs.

Garota Fashion

Bruna de Paula disse...

Que lindo que fica, vou usar um dia ainda rsrs
#Beijos, bruna.
http://garotaadalua.blogspot.com.br/

Sabrina Machado disse...

Adorei o tutorial, o resultado final fica muito fofo :)

Beijos,
www.blogmundodamoda.com/

Bruh Rocha disse...

Obg pela visita no meu bloog!
Oneteens

.:Taís:. disse...

Realmente deixa os marcadores muito mais bonitos! Beijos :3

Elisa Cardoso*-* disse...

Naads flor,que bvom que gostou dos selinhos que fiz pra você.Lembrando que vc ganhou 2 meses de divulgação no blog e uma semana de divulgação em meus posts ok?
Super legal esse menu,eu tenho um parceido,se eu nao me engano é igualzinho
Clica no meu nome e vai no meu perfil,bom Natal e um próspero Ano Novo.Deus te abençoe.

Nakashita Suzuko disse...

Adorei o tutorial *------*
http://souotomeecomorgullhoo.blogspot.com.br/

Dont Cry blog disse...

Adorei o efeito, pena que ainda não uso marcadores, mas esse tuto esta salvo nos meus favoritos de quando eu começar a usar. Seguindo, retribui?

Eii você madruga de noite? www.edontcry.blogspot.com

Nakashita Suzuko disse...

Prontuu, coloquei a imagem d afiliados no Blog ^^

Samira disse...

ótimo tuto, qria saber cm vc coloca essse quadrados com msg tipo menos relevantes, to seguinod pode ret5ribuir?
lamourmonage.blogspot.com

Jullya Enrique disse...

Adorei o post, o tutorial e perfeito
Segue lá ?

Anônimo disse...

Gostei muito, além disso eu acho que vc não deveria responder esse tipo de comentário acima do meu, olha isso, a gorota nem gostou.

Bibi Sousa // Bikoti Oficial disse...

owwn fica mto fofo, amei mesmo esse tipo de hover, aliais vou ver se fica legal no meu.
Bikoti.blogspot.com.br

Camila disse...

seguindo lindona! Amei seu blog, www.golden-mila.blogspot.com segue?

Dont Cry blog disse...

Esqueci de dizer que amei seu blog purple - roxo JB haha

Vamos passar um natal com o Bob? www.edontcry.blogspot.com

Esteffani Fontes disse...

Que blog mais cuuuuuuuute é o seu! *o*
eu já conhecia esse tuto, mas não conhecia seu blog rs

xoxo
@esteffanifontes - tt
Aos Dezesseis Anos - aosdezesseisanos.blogspot.com.br
Convido a você acompanhar meu blog sempre, e eu estarei sempre aqui rs
Tenha um bom dia!

Rafa e My disse...

Ótimo tuto parabéns!

Abçs
Mynda

Taay disse...

Otimo tutorial , vou tentar colocar :)
seguindo Ç: segue de volta ?
blog-moranguinha.blogspot.com.br

Celly Braga disse...

OIe amei teu blog viu? inclusive estou terminando de dar uns toques finais no meu template (sou novata na blogosfera) estava pensando se voçe se interessaria em tornar nossos blogs parceiros assim que terminar de cofificar o meu . obg :*
Celly ¬¬
mechacorderosa.blogspot.com
visita se quiser ...