Image Map

4.6.13

Tutorial: Marcadores Personalizados


Bom Dia, pessoal! Como vocês estão? Descupem por ficar esses dias sem postar, é que está esta semana está bem corrida pra mim. Faz tempo que eu não posto nenhum tutorial aqui né? ahaha. Então como não sabia que tutorial postar, resolvi fazer o de como personalizar os marcadores igual o daqui do blog. >> Créditos <<. Então é algo bem simples e se vocês querem aprender a fazer, é só continuar lendo!



Primeiro vocês precisam deixar a lista em Cloud. Assim:


Depois, vocês vão até o seu HTML, clicam dentro da caixa que tem todos os códigos e dão um Ctrl F. Depois, você vai procurar por: ]]></b:skin>. Acima dele você vai colar: 

/*------------- Start label by www.dicasblogger.org -------------*/
.label-size{
margin:0;
padding:0;
position:relative;
}
.label-size a{
float:left;
height:24px;
line-height:24px;
position:relative;
font-size:12px;
margin-bottom: 9px;
margin-left:20px;
padding:0 10px 0 12px;
background:#f78bae;
color:#fff;
text-decoration:none;
-moz-border-radius-bottomright:4px;
-webkit-border-bottom-right-radius:4px;
border-bottom-right-radius:4px;
-moz-border-radius-topright:4px;
-webkit-border-top-right-radius:4px;
border-top-right-radius:4px;
}
.label-size a:before{
content:"";
float:left;
position:absolute;
top:0;
left:-12px;
width:0;
height:0;
border-color:transparent #f78bae transparent transparent;
border-style:solid;
border-width:12px 12px 12px 0;
}
.label-size a:after{
content:"";
position:absolute;
top:10px;
left:0;
float:left;
width:4px;
height:4px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
background:#fff;
-moz-box-shadow:-1px -1px 2px #bc5d7a;
-webkit-box-shadow:-1px -1px 2px #bc5d7a;
box-shadow:-1px -1px 2px #004977;

}
.label-size a:hover{background:#d67b7b;}
.label-size a:hover:before{border-color:transparent #555 transparent transparent;}
/*------------- End of label by www.dicasblogger.org -------------*/

Todos os códigos destacados são os das cores, então, é só vocês alterarem o #códigodacor

Beijokas :*

29 comentários:

  1. Acho que não vou mexer em nada! Adorei o tuto Ingrid :)
    alem-doceu.blogspot.com

    ResponderExcluir
  2. Fica tão lindo ♥ Vou usar, u__u'

    Beijos,

    Juu-Chan do Nescau com Nutella.

    ResponderExcluir
    Respostas
    1. Também acho hahaha, mas sou suspeita pra falar porque uso aqui :p Beijos, Juu :*

      Excluir
  3. Adorei o tutorial!

    Você recebeu um selinho :D http://henriquemontoya.blogspot.com/2013/06/selinho-liebster-award.html

    ResponderExcluir
    Respostas
    1. Obrigada, Rennan! O selinho eu não vou repassar porque tá tudo bem corrido e não tenho tempo nem de postar direito, às vezes. Mas mesmo assim obrigada pelo selinho! Adorei :)

      Excluir
  4. Oi flor, tem uma tag para você lá no meu blog *-*
    ->http://trufa-de-menta.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Oi, Gabi! Obrigada pela tag, só que nem vou repassar infelizmente, por conta do tempo. Mas obrigada e beijokas :*

      Excluir
  5. Que fofo que fica *--* Adorei.
    Um beijo
    http//bombasticmusics.blogspot.com

    ResponderExcluir
  6. Adorei o tutorial, fica lindo!!!
    teen-girl-fashion.blogspot.com

    ResponderExcluir
  7. Adorei o tuto,coloquei no meu blog beijos,amo seus tutoriais.
    http://samyshelda456.blogspot.com.br/

    ResponderExcluir
  8. adorei o tuto,coloquei no meu blog amo os seus tutoriais,beijos
    http://samyshelda456.blogspot.com.br/

    ResponderExcluir
  9. Ótimo tuto, Ingrid! Acho que não vou mexer em nada!!!

    ResponderExcluir
  10. Este comentário foi removido pelo autor.

    ResponderExcluir
  11. Ajuda A Divulga Por Favor?

    http://menina-sensivel.blogspot.com.br/

    ResponderExcluir
  12. no meu não apareceu
    Sera que fiz algo errado?
    SE der da uma olhada pra mim flor vou agradecer muito!
    Estou tentando mudar meu layout mas não aparece as coisas la não sei pq!
    http://loveandei.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Nossa, não sei o que deve ser. Tenta achar no seu código fonte se algum código não tá fechado.

      Excluir