Blogger: Personalizando os marcadores ou categorias | Follow your dreams
Blogosfera

Blogger: Personalizando os marcadores ou categorias

Olá dreamers,

Que tal personalizar os marcadores do seu blog? É super simples e fica muito fofo! Nesse post eu trouxe três modelos pra vocês escolherem e em breve posto outros, ok?! :)

Vamos começar?

  • 1 – Escolha um dos três modelos e copie o código abaixo dele.
MODELO 1

/* Categorias */
.categorias {
width: 260px;
padding: 0px 10px 0px 10px;
margin: 0;
font-size: 14px;
font-family: ‘Arial Narrow’, sans-serif;
text-align:center;
text-transform: uppercase;
background: #f2ccfd;
}
.categorias ul {
list-style: none;
margin: 0px 0px 0px 0px;
padding: 0;
text-align:center;
background: #f2ccfd;
}
.categorias li {
border-bottom: 2px solid #fff;
margin: 0;
background: #f2ccfd;
text-align:center;
}
.categorias li a {
display: block;
padding: 0px 5px 0px 5px;
background-color: transparent;
color: #828282;
text-decoration: none;
margin-bottom:-4px;
margin-top:-4px;
text-align:center;
}
.categorias li a:hover {
background-color:none;
color: #fff;
text-align:center;
}
.categorias li a:visited {
color: #828282;
text-align:center;
}
.categorias a{
background-position: left center;
padding-left: 25px;padding-top: 2px;
padding-bottom: 2px;
border-bottom:0px solid #dfdfdf;
text-align:center;
text-align:center;
}

 

MODELO 2

/* Categorias */
.categorias {
width: 260px;
padding: 0px 10px 0px 10px;
margin: 0;
font-size: 15px;
font-family: ‘Century Gothic’, sans-serif;
text-align:center;
color:#fac0ca;
text-transform: uppercase;
}
.categorias ul {
list-style: none;
margin: 0px 0px 0px 0px;
padding: 0;
color:#fac0ca;
text-align:center;
}
.categorias li {
border-bottom: 1px solid #ececec;
margin: 0;
color:#fac0ca;
text-align:center;
}
.categorias li a {
display: block;
padding: 0px 5px 0px 5px;
background-color: transparent;
color: #828282;
text-decoration: none;
margin-bottom:-4px;
margin-top:-4px;
text-align:center;
}
.categorias li a:hover {
background-color:none;
color: #fac0ca;
text-align:center;
}
.categorias li a:visited {
color: #828282;
text-align:center;
}
.categorias a{
background-position: left center;
padding-left: 25px;padding-top: 2px;
padding-bottom: 2px;
border-bottom:0px solid #dfdfdf;
text-align:center;
text-align:center;
}

 

MODELO 3

/* Categorias */
.categorias {
width: 260px;
padding: 0px 10px 0px 10px;
margin: 0;
font-size: 15px;
font-family: ‘Georgia’, sans-serif;
text-align:center;
color:#fac0ca;
}
.categorias ul {
list-style: none;
margin: 0px 0px 0px 0px;
padding: 0;
color:#fac0ca;
text-align:center;
}
.categorias li {
border-bottom: 2px solid #ffdbe1;
border-top: 2px solid #ffdbe1;
margin: 0;
color:#fac0ca;
text-align:center;
}
.categorias li a {
display: block;
padding: 0px 5px 0px 5px;
background-color: transparent;
color: #828282;
text-decoration: none;
margin-bottom:-4px;
margin-top:-4px;
text-align:center;
}
.categorias li a:hover {
background-color:none;
color: #fac0ca;
text-align:center;
}
.categorias li a:visited {
color: #828282;
text-align:center;
}
.categorias a{
background-position: left center;
padding-left: 25px;padding-top: 2px;
padding-bottom: 2px;
border-bottom:0px solid #dfdfdf;
text-align:center;
text-align:center;
}

 

Observação: O trecho em vermelho é a largura dos marcadores. Modifique se necessário para ajustar ao seu template.

 

  • 2 – Vá no painel do blogger > Modelo > Editar HTML. Pesquise (Ctrl + F) por:

]]></b:skin>

ACIMA desse trecho, cole o código referente ao modelo copiado.

Atenção: No novo modelo do blogger você só deve abrir a barra de pesquisa (Ctrl + F) após clicar dentro da caixa de códigos, caso contrário a sua pesquisa não apresentará resultados. A caixa de pesquisa deve aparecer assim:

  • 3 – Agora, ainda no HTML do template pesquise por:

label1

 

Ao encontrar o trecho, clique na setinha preta ao lado esquerdo para expandir o widget.

Depois clique na setinha que aparecerá abaixo, para continuar expandindo.
Ao visualizar o trecho destacado abaixo:

 

Substitua-o por:
<ul class=’categorias’>
  • 4 – Visualize e se estiver tudo ok, salve.

 

Espero que tenham gostado do tutorial. Me avisem se deu certo e qualquer dúvida deixem um comentário aqui no post, como sempre, farei o possível para ajudar. ♥

Tags : Blogger

129 Comentários

  1. Acho muito legal que você dê dicas de como melhorar o layout e ajude com o código aqui no seu blog já que muita gente tem dificuldades em mexer com isso (eu inclusa, hehe).
    Também queria agradecer seu comentário e o link pra reclamar os direitos autorais do blogger. Felizmente a pessoa acabou entrando em contato comigo e eu espero que ela retire a imagem ou use alguma outra que não seja meu logo e coloque os créditos. Mas é bom ter o link caso precise um dia!
    bjs!!

  2. Se tem uma coisa nessa vida que eu nunca vou entender é o HTML, meu Deus, que coisa mais difícil, super admiro quem sabe tuuudo. Adorei os marcadores, as vezes a gente “abusa” o layout e nada melhor que dar uma mudadinha né? Beijinhos…

  3. Oi, estou usando o lay que você disponibilizou e eu não estou conseguindo colocar o código certinho. Já coloquei tudo o que foi pedido e mesmo assim não vai :(

  4. Oi Karoline eu fiz tudo mas dar erro “Erro ao analisar XML, linha 2300, coluna 18: Open quote is expected for attribute “class” associated with an element type “ul”.”,porque acontece isso?. Esperando pela resposta.

      1. O meu acontece a mesma coisa. Substitui exatamente por e da erro, aparece a seguinte mensagem: Não foi possível carregar a visualização do modelo: Erro ao analisar XML, linha 1275, coluna 18: Open quote is expected for attribute “class” associated with an element type “ul”

        1. Elisa, às vezes quando um código é copiado, as aspas saem como acento, você tem que apagar os dois acentos ´ e substituir por aspas assim ‘
          Depois é só salvar.
          Bjs

  5. Olá, boa noite!

    Espero que você possa me ajudar, fiz tudo conforme mostra o tutorial, mas quando clico para visualizar, nada muda, já tentei de várias formas e nada acontece, quero muito mudar os meus Marcadores, mas não estou conseguindo. Tem outro tutorial seu que segui tudo ao pé da letra e deu certo, mas esse não, não sei onde eu possa estar errando, colei o código acima deste trecho ]]>, depois substitui o

      como pedido, mas nada acontece, os marcadores continuam os mesmos, você ou alguém que tenha conseguido poderia me ajudar? Obrigado desde já.
  6. Olá, boa noite!

    Espero que você possa me ajudar, fiz tudo conforme mostra o tutorial, mas quando clico para visualizar, nada muda, já tentei de várias formas e nada acontece, quero muito mudar os meus Marcadores, mas não estou conseguindo. Tem outro tutorial seu que segui tudo ao pé da letra e deu certo, mas esse não, não sei onde eu possa estar errando, colei o código acima deste trecho ]]></b:skin>, depois substitui o <ul> como pedido, mas nada acontece, os marcadores continuam os mesmos, você ou alguém que tenha conseguido poderia me ajudar? Obrigado desde já.

  7. Olá, boa noite!

    Espero que você possa me ajudar, fiz tudo conforme mostra o tutorial, mas quando clico para visualizar, nada muda, já tentei de várias formas e nada acontece, quero muito mudar os meus Marcadores, mas não estou conseguindo. Tem outro tutorial seu que segui tudo ao pé da letra e deu certo, mas esse não, não sei onde eu possa estar errando, colei o código acima deste trecho ]]>, depois substitui o

      como pedido, mas nada acontece, os marcadores continuam os mesmos, você ou alguém que tenha conseguido poderia me ajudar? Obrigado desde já.
  8. O meu tbm não mudou, Karol ….. fiz como vc mostrou no passo-a-passo, tenho o "label1", mas na hora de visualizar, nada acontece …. antes disso eu fiz a alteração do separador para expandir o post, e este deu certo.

  9. Olá, boa noite!

    Espero que você possa me ajudar, fiz tudo conforme mostra o tutorial, mas quando clico para visualizar, nada muda, já tentei de várias formas e nada acontece, quero muito mudar os meus Marcadores, mas não estou conseguindo. Tem outro tutorial seu que segui tudo ao pé da letra e deu certo, mas esse não, não sei onde eu possa estar errando, colei o código acima deste trecho ]]>, depois substitui o

      como pedido, mas nada acontece, os marcadores continuam os mesmos, você ou alguém que tenha conseguido poderia me ajudar? Obrigado desde já.
  10. Meninas, às vezes quando você copia o ul class='categorias' o navegador substitui as aspas por acentos e fica assim ´categorias´. Se for o caso, vocês tem que trocar para aspas assim 'categorias'

  11. Olá, boa noite!

    Espero que você possa me ajudar, fiz tudo conforme mostra o tutorial, mas quando clico para visualizar, nada muda, já tentei de várias formas e nada acontece, quero muito mudar os meus Marcadores, mas não estou conseguindo. Tem outro tutorial seu que segui tudo ao pé da letra e deu certo, mas esse não, não sei onde eu possa estar errando, colei o código acima deste trecho ]]>, depois substitui o

      como pedido, mas nada acontece, os marcadores continuam os mesmos, você ou alguém que tenha conseguido poderia me ajudar? Obrigado desde já.
  12. Olá, boa noite!

    Espero que você possa me ajudar, fiz tudo conforme mostra o tutorial, mas quando clico para visualizar, nada muda, já tentei de várias formas e nada acontece, quero muito mudar os meus Marcadores, mas não estou conseguindo. Tem outro tutorial seu que segui tudo ao pé da letra e deu certo, mas esse não, não sei onde eu possa estar errando, colei o código acima deste trecho ]]>, depois substitui o

      como pedido, mas nada acontece, os marcadores continuam os mesmos, você ou alguém que tenha conseguido poderia me ajudar? Obrigado desde já.
  13. Oi Lindona! Ameeeeei seu Blg, ele é muuito Lindo ! #Apaixonada <3
    Eu queria te pedir um Tutorial para Blog, que eu estou precisando muito. Eu gostaria que vc nos ensinasse a colocar um contador de vistas no Blogger. E adoraria se os estilos fossem feitos por vc, pois vc arrasa Menina! (Poderia criar uns bem fofinhos). Rs =)
    Ah só lembrando eu tinha comentado lá no seu blog que eu não estava conseguindo colocar os ícones de redes sociais, mais tentei,tentei e consegui. E eu amei, usei o estilo de coração.
    Bjss Gatona :D

  14. Olá, boa noite!

    Espero que você possa me ajudar, fiz tudo conforme mostra o tutorial, mas quando clico para visualizar, nada muda, já tentei de várias formas e nada acontece, quero muito mudar os meus Marcadores, mas não estou conseguindo. Tem outro tutorial seu que segui tudo ao pé da letra e deu certo, mas esse não, não sei onde eu possa estar errando, colei o código acima deste trecho ]]>, depois substitui o

      como pedido, mas nada acontece, os marcadores continuam os mesmos, você ou alguém que tenha conseguido poderia me ajudar? Obrigado desde já.
  15. Olá, boa noite!

    Espero que você possa me ajudar, fiz tudo conforme mostra o tutorial, mas quando clico para visualizar, nada muda, já tentei de várias formas e nada acontece, quero muito mudar os meus Marcadores, mas não estou conseguindo. Tem outro tutorial seu que segui tudo ao pé da letra e deu certo, mas esse não, não sei onde eu possa estar errando, colei o código acima deste trecho ]]>, depois substitui o

      como pedido, mas nada acontece, os marcadores continuam os mesmos, você ou alguém que tenha conseguido poderia me ajudar? Obrigado desde já.
  16. Olá, boa noite!

    Espero que você possa me ajudar, fiz tudo conforme mostra o tutorial, mas quando clico para visualizar, nada muda, já tentei de várias formas e nada acontece, quero muito mudar os meus Marcadores, mas não estou conseguindo. Tem outro tutorial seu que segui tudo ao pé da letra e deu certo, mas esse não, não sei onde eu possa estar errando, colei o código acima deste trecho ]]>, depois substitui o

      como pedido, mas nada acontece, os marcadores continuam os mesmos, você ou alguém que tenha conseguido poderia me ajudar? Obrigado desde já.
  17. Olá, boa noite!

    Espero que você possa me ajudar, fiz tudo conforme mostra o tutorial, mas quando clico para visualizar, nada muda, já tentei de várias formas e nada acontece, quero muito mudar os meus Marcadores, mas não estou conseguindo. Tem outro tutorial seu que segui tudo ao pé da letra e deu certo, mas esse não, não sei onde eu possa estar errando, colei o código acima deste trecho ]]>, depois substitui o

      como pedido, mas nada acontece, os marcadores continuam os mesmos, você ou alguém que tenha conseguido poderia me ajudar? Obrigado desde já.
  18. O meu não deu certo :
    toda hora aparece "ERROR" e eu nunca consigo achar " label1 "
    são muitos lindos e tal…
    mas o tutorial não me ajudou em nada :

    1. Janine, se você não tiver o widget de marcadores adicionados isso não vai funcionar, você não vai encontrar o “label1″ mesmo..

  19. Karol, como vc fez pra personalizar suas categorias do jeito novo? Eu achei super fofo com esses desenhos *O* Amo seu trabalho <3

    1. Oi Gabriela, obrigada! <3
      As novas categorias eu fiz imagem por imagem, depois linkei uma por uma. É bem simples de fazer, dá certo no Blogger ou WordPress. Vou anotar na minha listinha de próximos tutoriais pra publicar aqui no blog. :)

      Um beijo!

  20. Janine, você precisa adicionar o widget de marcadores do Blogger antes de começar esse tutorial, ele é um modificador desse widget, logo, só vai dar certo se o widget já existir. Se conseguir me avisa, tá?! :*

  21. Ola!

    Coloquei o tema 1, deu super certo, mas infelizmente ao clicar no marcadr, exe. Natal (que tem uma foto no meu blog, que ainda esta em construção) ele não direciona para lá! Como posso arrumar?

  22. Oi Karoline Vendramini!
    Espero que possa me ajudar. Eu estou querendo trocar os marcadores do meu blog por imagens, como tem no seu, a parte das categorias.
    Sabe qual código posso usar para isso?

    Obrigada desde já! :)

  23. Amei esse tutorial tive problemas no inicio mas depois fiz novamente com calma e consegui. Teu blog e maravilhoso estou arrumando meu blog novo e tudo daqui! Parabéns.

  24. Oi!!
    Amo seus tutoriais e sempre dão certo pra mim, mas esse não esta dando.
    Primeiro não estava achando o label1, daí eu vi que tinha que baixar o gadget de marcadores primeiro, então eu baixei, achei o código, substituí, salvei, mas não apareceu na página. Aliás, o gadget de marcadores sumiu :/
    não faço ideia de qual problema possa ser (até verifiquei se as aspas estavam certas e estavam).

    Se puder me ajudar agradeço :)

    1. Oi Alice, você já tem o gadget de marcadores adicionado no seu blog? Se não tiver, não vai encontrar ele no código mesmo. Precisa ser adicionado antes dessa etapa.
      Ah, é “label1″, ok?! Se não funcionar tente “label2″.

      Bjs

    1. Oi Bianca, ainda não fiz esse tutorial para WP, mas analisei seu CSS e acho que posso te ajudar.
      A parte que deve ser personalizada no seu tema é essa:

      /*listas sidebar (para arquivos, blogroll, lista categorias etc) */
      .itemSidebar ul {margin: 0; padding: 0; list-style: none;}
      .itemSidebar ul li {width: 49%; display: inline-block;}
      .itemSidebar ul li:before {content: “»”; padding: 0 5px 0 0; color: #999; font-size: .9em}

      Então é só você fazer uma troca, por exemplo, a personalização que fica dentro do “ul” do meu tutorial (.categorias ul) você coloca dentro do seu “ul” (.itemSidebar ul), e assim por diante com os outros itens.
      Fazendo isso você está adaptando o meu tutorial para o seu tema. :)

      Bjs

  25. Amei! Utilizei o modelo 2, mas a parte “categoria” não ficou igual… mas não tem problema, o importante é que eu consegui mudar!! :) Vou dar mais uma olhada em outras dicas e aplicar no meu blog.

    Beijão flor <3

  26. Oii queria saber se voce tem algum tutorial ensinando a colocar essas imagens, esses icones, como marcadores! somo é no seu blog! Fica muito lindo!
    :)

  27. Oi princesa… deu super certo… Mas teria como colocar os nomes tipo: um do lado do outro formando 2 coluninhas?
    (PS.: semana passada segui seu tuto de categorias personalizadas, baixei as imagens e tudo, ficou tão lindo… mas no dia seguinte as imagens não aparecem no blog, o link tá ok, mas as imagens nada… Daí resolvi trocar para esse modelinho de Categorias, mas acho mais bonito personalizados :( )

  28. Gostei muito das dicas incluindo o modelo 3 mais nao consegui fazer no meu blog por favor se puder me ajudar e responder ficarei muitissimamente grata.
    Deus lhe abençõe

Deixe uma resposta