15 de jul. de 2011

Marcadores em forma de botões no Blogger

Dê a seus marcadores aparência de botões como o exemplo. Seve para o modelo antigo e também para o novo modelo.  A primeira coisa a fazer é deixar os marcadores como o exemplo abaixo.





Agora vá até o HTML de seu blog, copie o código abaixo e o coloque acima de:


]]></b:skin>

Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo.







/*Label------------------------------------------------------------------------------------------------*/
#Label1 {
border: 2px solid #ccc;
}
#Label1 h2 {
text-shadow: 1px 1px 1px #fff;
background: #ccc;
text-align: center;
font-size: 16px;
padding: 8px 0;
}

#Label1 li {
background: #eee;
margin: 0 0 0 1px;
}

#Label1 li a:link {
text-shadow: 1px 1px 1px #fff;
background: #ccc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw7YotpIWRG_W-zGzMVQC8OZkzGXIJY159K4eoSTNhRuesgYJxUC3yDkvEXZIZdAfFbuM5GQfLeD4gGx5BAw_IhigF2r-xPLMpa5ekHCptIsZOsjvJUqEl9O523AcrzYC2d5CSy57l5kY/s1600/tag.png) no-repeat;
display: block; border-bottom:1px dashed #000;padding:4px 0 4px 16px;color: #000;line-height:1.15em;
}
#Label1 li a:hover, #Label1 li a:active {
background: #eee url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiC1gfEODjDU8DuVHknrkdDGmsNfl52LgTcVE8akrLAB9glDba61frS_Bm7Q7cRdFgkO3oda_GN5caakxIIrXBI7PhRJC1FOMJYUotyFaj_wYmyDCTIukJHLFuFVkQ4mN6-qUi1EFJo18/s1600/cost.png) no-repeat; display: block; line-height:1.15em;
padding:4px 0 4px 16px
}
 #Label1 li a:visited {
 background: #fff ;
display: block; color: #cc0000; padding:4px 0 4px 16px
}
#Label1 ul{list-style:none;padding:1px 0px;
}


Faça as modificações de acordo com seu layout

Vermelho---------------cor do botão
Verde------------------cor do botão ao passar o mouse
Azul-------------------troque ai pelo endereço das imagens de sua preferência
Laranja---------------cor que fica  letra depois de clicada
Roxo-----------------cor que fica o botão depois de clicado

Abaixo algumas imagens de marcadores. Salve em seu pc e depois hospede-as, inserindo o endereço nos locais e cor azul no código.


2 comentários:

  1. uma delicia seu blog,mais uma vez me ensinando categoricamente como trabalhar,obrigado

    ResponderExcluir
  2. PARABÉNS! PROCUREI MT UM BLOG Q ME AJUDASSE E ESSE FOI UM DOS ÚNICOS Q REALMENTE ENSINOU O TUTORIAL PERFEITAMENTE!

    ResponderExcluir

A legislação brasileira prevê a possibilidade de se responsabilizar o blogueiro pelo conteúdo do blog, inclusive quanto a comentários; portanto, o autor deste blog reserva a si o direito de não publicar comentários que firam a lei, a ética ou quaisquer outros princípios da boa convivência. Não serão aceitos comentários anônimos ou que envolvam crimes de calúnia, ofensa, falsidade ideológica, multiplicidade de nomes para um mesmo IP ou invasão de privacidade pessoal / familiar a qualquer pessoa. Comentários sobre assuntos que não são tratados aqui também poderão ser suprimidos, bem como comentários com links. Este é um espaço público e coletivo e merece ser mantido limpo para o bem-estar de todos nós.


Copyright © Templates e Acessórios |
Design by Elke di Barros | Tecnologia do Blogger
    Twitter Facebook Google + YouTube