13 de nov. de 2013

Personalizar os Marcadores da sidebar

Olá amiguinhas(os), como vocês estão? Eu estou bem, graças a Deus.
Trouxe para vocês mais um tutorial de personalização pelo html do blog,
para vocês deixarem os marcadores de seu blog mais fofos.
Os créditos vão para Reino Kawaii kawaii-world


Primeiro adicione ao seu blog o gadget dos marcadores


Depois vá ao html de seu blog, aperte ao mesmo tempo as teclas ctrl f  e procure por  ]]></b:skin>,
Quando encontrar coloque o código que desejar acima desta tag ou procure por: .sidebar .widget {
apague todo o código, desde  .sidebar .widget { e coloque o código de um dos modelos.

Modelo I

.widget ul, .widget #ArchiveList ul.flat {
list-style: none;
padding: 5px;
}
.widget ul li, .widget #ArchiveList ul.flat li {
background-color: #f4f4f4;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
padding: 5px;
margin: 2px;
border-bottom: solid 1px #e3e1e2;
text-align: center;
-webkit-transition-duration: .50s;
}
.widget ul li:hover {
background: #ffcad4;
border-bottom: solid 1px #fcb0be;
-webkit-transition-duration: .50s;
}

Modelo II
.widget ul, .widget #ArchiveList ul.flat {
list-style: none;
padding: 5px;
}
.widget ul li, .widget #ArchiveList ul.flat li {
text-align: center;
border-bottom: dotted 1px #d5d5d5;
-webkit-transition-duration: .50s;
}
.widget ul li:hover {
background: #f4f2f4;
-webkit-transition-duration: .50s;
}

Modelo III

#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; /*tam. 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 */
}

Modelo IV
Para este modelo você deve configurar o gadeget de marcadores 
como o modelo abaixo:
.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:#0089e0;
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 #0089e0 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 #004977;
-webkit-box-shadow:-1px -1px 2px #004977;
box-shadow:-1px -1px 2px #004977;
}
.label-size a:hover{background:#555;}
.label-size a:hover:before{border-color:transparent #555 transparent transparent;
}
Modelo V
.sidebar ul li { list-style: none; margin: 0; padding: 0; border-bottom:1px solid #fee; padding: 0 0 4px 12px; background: url("http://3.bp.blogspot.com/-edd6RlHEe_s/TnO4PIymJzI/AAAAAAAABv8/XLoXHiXnQyE/s1600/mini-153.gif") no-repeat 0 2px; }

38 comentários :

  1. Muito bom o tutorial, seguindo seu blog ><

    We Heart HTML - wehearthtml.blogspot.com
    Luving - youluving.blogspot.com

    ResponderExcluir
  2. Otimo tutorial ! Adorei os modelos =D , Estou seguindo seu blog se puder ajudar segue o meu tbm ...
    www.pumpcolor.com.br Espero que goste. Kiss

    ResponderExcluir
    Respostas
    1. Lavínia, obrigada pela visita. Fico feliz que tenha gostado do tutorial.
      Já estou te seguindo.

      Excluir
  3. Olá Claudiane!

    Amei os modelos, e aderi no meu Blog que ainda não está no ar o modelo III. Porém gostaria muito de centralizar pois a coluna ficou ao lado esquerdo. E também gostaria muito de mudar a cor da fonte usada tanto no normal quanto no hover. Como faço?
    Muito obrigada!

    Débora Ramos

    ResponderExcluir
    Respostas
    1. Débora, desculpe a demora.
      Vamos ao modelo:
      #Label1 ul li{
      float: left;- centralize mudando aqui para center
      width: 45%;-centralize mudando aqui
      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; /*tam. 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 */
      }

      A cor da fonte é só colocar abaixo de
      #Label1 ul li{
      font-color:# cor da fonte
      #Label1 ul li:hover{
      font-color:# cor da fonte no estado hover.

      Excluir
  4. meu não fica quando eu salvo fica do mesmo jeito que estava antes :(

    ResponderExcluir
    Respostas
    1. Bruna, procure por:
      .sidebar widget{
      apague todo o código que encontrar até }
      coloque o código personalizado.
      Não esquecendo de deixar a parte que separa a sidebar (se sua sidebar for separada).

      Excluir
  5. Que liiiindos esses estilos estou usando!! São perfeitos!

    thy-smile.blogspot.com

    ResponderExcluir
    Respostas
    1. Mrs. Luu', fico feliz que tenha gostado e mais ainda por estar usando.

      Excluir
  6. Show de bola, encaixou perfeitamente no meu marcador. valeu gatinha

    ResponderExcluir
  7. Aiin' ficou muito fofo no meu muiiiiitoooooo Obrigada♥ vlw

    ResponderExcluir
  8. gostei vor experimentar para ver como fica no meu :) bigado

    ResponderExcluir
  9. Eu não acho o código ]]> no meu HTML, tem como me dar uma ajudinha? Obs: Amei seu blog é perfeito ♥

    ResponderExcluir
    Respostas
    1. Anônimo, dentro do html de seu blog, dê um clique com
      o botão direito do mouse para abrir a caixinha de pesquisa.
      Quanto a caixinha estiver aberta digite o código que você
      será redirecionado a ele.

      Excluir
  10. Também não consegui!! Eu abro a caixinha e não encontra o código! Me ajudem por favor!

    ResponderExcluir
    Respostas
    1. Pro Equilibre, todo layout tem essa tag.
      Clique com o botão direito do mouse dentro do html,
      digite no seu teclado ao mesmo tempo CTRL F, vai
      aparecer a caixinha de busca. Copie e cole o código
      dentro da caixinha e dê enter.

      Excluir
  11. Estou usando o modelo II, muito obrigada !

    ResponderExcluir
  12. fui colocar o primeiro codigo e não foi o marcador que ficou com esse efeito foi o menu de páginas não sei o que aconteceu mais eu adorei! ^^ kkkkkk

    ResponderExcluir
    Respostas
    1. Gisele, também não sei o que você fez, mas fico feliz que tenha
      gostado do resultado kkkkkk.

      Excluir
  13. Adorei o tutorial, me ajudou muito, obrigada *-*
    http://www.leticiakoliveira.com/

    ResponderExcluir
  14. Oi, eu tava dando uma olhada nos menus, e me interessei pelo terceiro, mas eu queria mudar a cor das letras. Procurei procurei procurei alguma linha de código de cor, mas não tem a da letra =/ Tem como mudar? Agradeço a atenção. =]

    ResponderExcluir
    Respostas
    1. Olá Juca, procure por:
      color:#fff;
      troque por:
      font-color:# aqui vc coloca a cor

      Excluir
  15. Muitíiiiiiissmo obrigada. Me ajudou muito mesmo.
    Estou usando o segundo modelo *-*

    ResponderExcluir
  16. Gostei muito do blog, parabéns *u*
    adorei os modelos, só que eu tentei mudar a cor normal e hover e não consegui de jeito nenhum, já coloquei esse o código para mudar a cor
    #Label1 ul li{
    font-color:# cor da fonte
    #Label1 ul li:hover{
    font-color:# cor da fonte no estado hover.

    e é como se eu não tivesse colocado, muito estranho :/

    Bjbj <3

    ResponderExcluir
    Respostas
    1. Mayara, alguns desses modelos a cor do texto fica a mesma
      dos links do blog.

      Excluir
  17. otímo tuto ,vou editar o meu de uma confirida aqui; http://ipjcca.blogspot.com

    ResponderExcluir
  18. Oi, adorei o tutorial!
    Fiquei muito feliz que deu certo no meu blog.
    Estou usando o Modelo III, pra quem quiser ver como fica.
    Beijos :D

    Blog Quero Ir

    ResponderExcluir

Qualquer dúvida pergunte que
responderei com prazer.
Só peço que seu comentário
seja relacionado à postagem.

© Princess Tutoriais- Agradece sua visita
2014. Todos os direitos reservados
Pedidos? dúvidas? nos comentários ou na Ask.
imagem-logo