8 de dez de 2013

Tutorial: Marcadores Personalizados

Oii meus amores!! Hoje eu vim trazer um tutorial ensinando a fazer os marcadores igual do blog. Esse tutorial não é de autoria minha, e sim da Anny S. do blog Go Imagine. O resultado vai ser esse:


Então vamos para o tutorial.


Vá no painel do Blogger, clique em Layout e abra seu gadget dos marcadores e deixe ela da seguinte forma:


Vá em Modelo, clique em Editar HTML, clique em CTRL+F e pesquise por ]]></b:skin> logo ACIMA dessa tag cole:

/* Marcadores personalizados */ 
#Label1 ul li{ 

float: left;

width: 45%;

font-family: 'Dosis', sans-serif; /* fonte, se preferir troque */

text-transform: uppercase; /* letras em maiúsculo, se não quiser apague a linha */

font-size: 16px; /*tamanho da fonte*/

background: #fff; /*fundo*/

border-bottom: 2px solid #ccc; /* borda de baixo do marcador */

margin: 5px;

font-weight: normal;

list-style-type:none;

}

#Label1 ul li:hover{ 

background: #EAEAEA; /*fundo hover*/

border-bottom: 2px solid #FF51A8; /* borda de baixo do marcador hover */

}

Visualize e se estiver tudo certo, salve!

10 comentários:

  1. Que tuto perfeito, o resultado é muito divo, talvez eu use no próximo lay aw *u*

    htmlandresources.blogspot.com

    ResponderExcluir
    Respostas
    1. Fica lindo mesmo e se vc usar no seu lay, vai ficar mais lindo ainda ;)

      Excluir
  2. Linduuu! <3

    http://ichigowagashi.blogspot.com.br/

    ResponderExcluir
  3. eu n consegui :( pode explicar com faz denovo

    ResponderExcluir
  4. é a segunda vez q eu tento mais n da ;(

    ResponderExcluir
  5. Muito Lindo e perfeito estou usando muito obrigada!
    http://guriatecontei.blogspot.com.br/

    ResponderExcluir
  6. eu não consegui :/

    http://leiturasagaz.blogspot.com.br/

    ResponderExcluir