3.8.13

Marcadores do blog personalizados


Oi gente, tudo bom?
Assim, eu resolvi que vou postar tutoriais quando a inspiração estiver á zero, e não ter outra coisa pra postar. Eu não quero que meu blog seja “mais um” que poste tutorial. Só resolvi que iria postar, pois eu gosto muito mesmo de mexer com códigos, e como sofro de falta de inspiração aguda, postar tutoriais quando estiver sem inspiração é uma boa.

Vocês perceberam que no começo da postagem eu sempre enrolo né? Agora vamos deixar de blá blá blá e vamos ao que interessa.



No painel do blogger vá em >> Layout >> Adicionar um gadget HTML/JavaScript e cole esse código:


<style>
#Label1 ul li{
float: left;
width: 49%;
}
.widget ul, .widget #ArchiveList ul.flat {
padding: 0;
list-style: none;
}
.widget ul li, .widget #ArchiveList ul.flat li {

padding: .35em 0;
text-indent: 0;
border-bottom: solid 1px #000000; /* cor e estilo da borda */

font-family: 'Carrois Gothic SC', sans-serif;
text-transform: uppercase;
text-align: center;

}
.widget ul li:hover {
background: #COREMHOVER /* cor do fundo ao passar o mouse */
}
</style>

Se quiser ficar com a fonte Carrois Gothic SC, cole o código abaixo ACIMA de </head> :
<link href='http://fonts.googleapis.com/css?family=Carrois+Gothic+SC' rel='stylesheet' type='text/css'/>

Update: Então gente, vi que tinha pessoas que estavam com problemas com o tutorial, então eu refiz e alterei um pouquinho o código. 
Se os marcadores ficarem de um lado da coluna, vão no modelo do layout e aumente a largura da coluna lateral (gadgets), que deve funcionar. 


Estão vendo a imagem acima? Para que os marcadores estejam personalizados, tem que ADICIONAR o gadget dos marcadores. E o gadget do HTML com o código fica separado, e não vai fazer diferença nenhuma no blog pois ele fica "invisível".


Depois das alterações eu refiz em um blog de testes, e ficou do jeito que mostra a imagem acima. A única diferença é que não adicionei a fonte personalizada. Aliás, os marcadores atuais do blog estão personalizados com esse tutorial.

Então é isso, algum problema com o código é só comentar. ^^


7 comentários:

  1. Amei seu blog e que tutorial perfeito! Muita gente não conhece a borda wavy e ela é tão perfect! Estou te seguindo! Gostaria de saber se você gostaria de fazer afiliação com o meu blog?

    http://aconteceudepoisdos14.blogspot.com.br/

    Parabéns pelo blog, muito divo!

    ResponderExcluir
  2. Que bom que gostou! É mesmo, essa bordinha é muito pouco conhecida, e eu confesso que até recentemente também não conhecia.
    Obrigada >.<!

    ResponderExcluir
  3. Eu fiz no meu mas ficou só com uma coluna e eu queria que ficasse com 2 igual na foto. Poderia me ajudar?

    bellatulee.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Olá, Luh!
      Vou tentar fazer o máximo possível para te ajudar!
      Então, eu usei o código pra ver qual o problema para o seu não dar certo, mas eu não entendi. Como você pode ver na barra lateral, o meu ficou normal.
      Repare nessa parte do código:
      "float: left;
      width: 49%;"
      Tem que ter cuidado para não excluir essa parte, pois é muito importante pro código. O "49%" faz com que cada marcador ocupe metade do gadget. Você pode tentar diminuir ou aumentar o valor, logo percebe-se que deve ter algo diferente no seu código.
      Tente rever o código, caso você tenha alterado algo.
      Enfim, qualquer coisa estou disposta a ajudar. (:

      Excluir
  4. Não deu , apenas ficou o nome e não apareceu os marcadores

    ResponderExcluir
    Respostas
    1. Oi, Ricky, já atualizei o post tentando resolver seu problema. Para que o código funcione, você tem que adicionar o gadget dos marcadores antes.

      Excluir
  5. Adorei a dica e to utilizando no meu blog.
    romeirese.blogspot.com.br

    ResponderExcluir

~ Moderação de comentários ativada ~