Tutorial: Marcadores Personalizados no Post Footer


Olá meus gostosos ♡ ou não

Como estão?Eu estou de bem, esses dias não postei pois meu notebook está repleto de vírus percebi que o anti-vírus estava desativado e ele bugou tudo, o Chrome estava aparecendo aquelas propagandas de vírus até nos meus blogs.Até na Google estava aparecendo, então tive que desinstalar o Google Chrome  e iria baixar ele de novo mas acabei baixando o Opera pois já usei ele uma vez e ele é um ótimo navegador.

Descobri que sou viciada em HTML pois fiz uns dois layouts só hoje e não sei o que fazer com eles, eles vão pra minha coleção de layouts que tenho mas não uso e também não dou pra ninguém pois eu prefiro fazer pras pessoas que me pedem do que pegar um deles.
Hoje trouxe um tutorial que é esse "menuzinho" no post footer, não sei se tem um nome certo pra isso pois eu já tinha procurado esse tutorial mas só achei ele hoje por acaso no The Moon Reverse, então crédito à ele.
Mas vamos lá?
E assim vai ficar os marcadores igual aos meus.
1. No seu HTML procure por ]]></b:skin>, achou?Então acima disso cole:

@font-face { font-family: "silkscreen"; src: url('http://static.tumblr.com/0xqvkot/7jqmgsn0m/pf_arma_five.ttf'); } 
markers { 
background:#ffb9bf; 
box-shadow: inset 0px 0px 4px #ff9aa2, 2px 2px 0px #f5f5f5; 
color: #fff; 
font-family:silkscreen; 
text-shadow: 1px 1px 0px #ff8d96; 
font-size: 8px; padding-top: 4px; /* Acolchoamento do topo */ 
padding-bottom: 4px; /* Acolchoamento do fundo */ 
padding-right:5px; /* Acolchoamento da direita */ 
padding-left: 5px; /* Acolchoamento da esquerda */ 
-webkit-border-radius: 2px; /* Google e Safari */ 
-moz-border-radius: 2px; /* Mozilla e Firefox */ 
border-radius: 2px; /* Alcance da borda */ 
-moz-transition: all 0.5s ease-out; 
-webkit-transition: all 0.5s ease-out; 
-o-transition: all 0.5s ease-out; 
-ms-transition: all 0.5s ease-out; 
transition: all 0.5s ease-out; 
markers:hover { 
background:#c2d6da; /* Fundo Hover */ 
box-shadow: inset 0px 0px 4px #b2cbd0, 2px 2px 0px #f5f5f5; /* Sombra hover */ 
text-shadow: 1px 1px 0px #a2c1c7; /* Sombra do texto em hover */ 
}
2. Ele está em rosa e o hover está em azul edite se quiser como eu fiz, mas agora procure por <data:label.name/>, apague isso e no lugar cole:
<markers><data:label.name/></markers>
Visualize, está tudo certinho?Ok!

6 comentários:

  1. Eu não conhecia o tuto, gostei muito, e acho que irei usar *u*

    htmlandresources.blogspot.com

    ResponderExcluir
    Respostas
    1. Obrigada :)
      Usa sim amor, fica muito fofo.

      Excluir
  2. Eu uso um Layout Do seu Blog , Mais o ]]> Não quer apareçer :/

    http://www.odiariodeumgarotoo.com/

    ResponderExcluir
  3. Muito bonito isso!! Adorei mas eu realmente de layouts não percebo quase nadinha,kkkk. Beijinhos fofinhos e até breve!!

    ResponderExcluir
    Respostas
    1. Eu percebo cada detalhe, sei lá amo layouts, HTML e tal.
      Obrigada!

      Excluir
  4. Obrigada por este tutorial, ele é muito lindo e bom, eu vou usar ele em um tutorial, com os créditos, lógico. Se importa?

    Visite o blog | Etc For Me ♥

    ResponderExcluir

Por favor leia as regras antes de comentar:

- Sem spam!
- Sempre que puder deixe o link do seu blog, assim posso retribuir a visita.
- Não aceito "Segue de volta?", eu só sigo se gostar do blog.
- Vou responder como você perguntar, se insultar eu vou retribuir.
- Aceito críticas construtivas, opiniões desnecessárias serão recebidas como devem.
Leu tudinho?Então deixe seu comentário =]