Personalizando os marcadores do blog

Os marcadores do blog por ser uma espécie de guia ou menu principal(se quiser pode escolher quais itens aparecem: Opções dos marcadores do blogger) merecem uma formatação diferente para seus links, então vamos modificar o estilo dos marcadores do blog. Isso é semelhante a colocar barra de rolagem nos marcadores que já falamos anteriormente, alias você pode fazer as duas coisas ao mesmo tempo. Agora vamos mostrar como colocar uma imagem ou ícone ao lado dos marcadores, que na verdade é uma imagem de fundo, e formatar seu estilo, mudar o tipo de letra, cor e tamanho.

Entre na pagina editar HTML e clique para Expandir modelos de widgets, então procure os marcadores do seu blog, clique ctrl+F e digite o titulo que usa nos marcadores é o jeito mais fácil de achar, neste blog chama guia rápido.



Na linha <ul> acrescente guia rápido, é o nome que vamos usar para esse estilo, mas poderia ser qualquer outro, então fica assim: <ul class=’guiarapido’>. Depois vá até o inicio do código do blog e crie o estilo CSS guia rápido, coloque isso junto com os outros estilos (body, main, sidebar...) do seu blog.

.guiarapido a{background-image:url(http://img207.imageshack.us/img207/5918/marcador.gif);
background-repeat: no-repeat;
background-position: left center;
padding-left: 25px;padding-top: 2px;
padding-bottom: 2px;}


.guiarapido a:hover{font-style: italic;background-image:url(http://img18.imageshack.us/img18/7765/marcadorover.gif);background-repeat: no-repeat;
background-position: left center}

Os endereços são as imagens que ficaram ao lado dos marcadores, você precisará de duas assim uma somente aparece quando colocamos o mouse sobre um marcador. Para fixar a imagem do lado esquerdo e sem repetir usamos essas linhas:
background-repeat: no-repeat;
background-position: left center;

A parte final: padding-left: 25px;padding-top: 2px; padding-bottom: 2px; são as margens, o valor 25 é a distancia da margem esquerda (deve ser um pouco maior que a largura da imagem) e os valores 2px são em cima e embaixo, também é necessário ajustar conforme o tamanho de imagem que você usar.

Se quiser modificar o tipo, cor ou tamanho da letra basta colocar isso aqui nas duas partes do codigo:

font-family: "Comic Sans MS";
font-size: 14pt;
color: #0000FF;

E formatar como quiser seus marcadores, escolhendo o jeito que combine melhor com seu blog, dissemos para colocar nas duas partes do código (.guiarapido a / .guiarapido a:hover) porque assim poderá escolher cores diferentes, sugerimos não mudar o tamanho nem o tipo de letra pois isso faz ocupar espaços diferentes e o menu dos marcadores ficará “pulando” quando passar o mouse sobre ele, quero dizer subindo e descendo um pouco.

Veja também:
Código das Cores
Posicionar imagem de fundo
10 Programas Grátis para Editar Imagens
Related Posts with Thumbnails

Link desta Pagina

Compartilhe essa Página

181 comentários:

  1. adoro o seu blog! mais na minha opinião vc não foi muito claro neste tutorial de como colocar imagens (icones ou gifs) ao lado dos marcadores, porem como tenho certeza do seu proficionalismo e dedicação em ajudar os blogueiros com dificuldade sei que logo tentará esclarecer melhor sobre este tudoria.
    como sou extremamente sua admiradora ficarei no aguardo...bjs

    ResponderExcluir
  2. talvez tenha explicado coisas demais na mesma postagem, mas veja a parte que mais lhe interessou e tente fazer, na verdade colocar um gif ao lado do marcador é só uma imagem de fundo posicionada

    ResponderExcluir
  3. peguei um template onde os marcadores ficam no topo da postagem. eu gostaria de coloca-los no rodapé, vc poderia me ajudar??

    se quiser dar uma olhada, meu site eh o www.paguemenos.net

    obrigado!

    ResponderExcluir
  4. entre na pagina layout e tente arrastar o gadget dos marcadores para o lugar que desejar

    ResponderExcluir
  5. Pois é, não tem como fazer isso pelo layout, ta bloqueado, precisaria ser pelo codigo mesmo. Mas valeu aí!

    ResponderExcluir
  6. PagueMenos.netnão tem jeito de fazer pela pagina layout, tem que entrar no html do blog

    ResponderExcluir
  7. Muito boa essa dica! Parabéns pelas dicas!

    ResponderExcluir
  8. Essa dica não funciona só com marcadores, também funciona com links e outros!! Ótima dica

    ResponderExcluir
  9. Fabiano, eu nao consegui intender a parte "coloque isso junto com os outros estilos (body, main, sidebar...) do seu blog."

    poderia me esplicar melhor ?

    obrigado

    ResponderExcluir
  10. na pagina editar html tem varios estilos é para colocar esse junto com eles, ou seja perto de onde está body, main... mas respeita as chaves ou seja:
    body{...}
    main{...}
    não pode misturar as coisas

    ResponderExcluir
  11. Eu ja fiz no photoshop as imgs de todos meus marcadores estão prontos e gostaria de substituir as letras dos marcadores pelas as imagens, mas aew me parece q so para colocar um img ao lado neh ?
    E muito obrigado pela ajuda com minhas colunas ficou muito bom !!!
    Meu blog é www.jack-maconha.blogspot.com

    ResponderExcluir
  12. Jack
    tem que ser a mesma imagem em todos os marcadores, pelo código html não tem como colocar uma imagem para cada marcador.

    se quiser você usar uma imagem para cada marcador, mas precisa copiar os links dos marcadores e colocar nas imagens manualmente, funciona mas é trabalhoso.

    ResponderExcluir
  13. Olá Fabiano, no meu blog eu personalizei tudo certinho, no IE 6,7 e 8, pega certinho, mas no firefox a imagem fica em cima das letras dos marcadores, será que você poderia me ajudar?
    Obrigador.

    http://manualdodog.blogspot.com

    ResponderExcluir
  14. Victor H.

    coloque isso junto com o código

    text-indent: 20px;

    fazer funcionar corretamente em todos os navegadores é um problema, principalmente pois tem coisas que mudam com o tempo(param de funcionar)

    ResponderExcluir
  15. Cara, nao consegui fazer... na verdade, só queria mudar a fonte e a cor das letras, sem colocar imagem nem nada... poderia me ajudar? obrigado!! parabéns pelo blog!!

    ResponderExcluir
  16. para mudar só o tipo, cor e tamanho de letra veja essa postagem sobre formatar texto
    http://www.dicasparablogs.com.br/2009/04/como-formatar-o-texto-do-blog.html

    ResponderExcluir
  17. Gotaria de saber como faço pra colocar. Duas Abas é que no meu só tem propaganda de um lado do outro ta vazio http://images.orkut.com/orkut/photos/OgAAAIjVoKMJg4fhVrmt6RMmvLdiPACFLkUnOh0biq0gLJGHZEyma5XOYHIHYG-wioWHxSJboBnrB9YO402MP3MKLbUAm1T1UL6vJ4bN-EsoluaYQw-cSDPerVWN.jpg

    ResponderExcluir
  18. Brito
    veja sobre colocar 3 colunas no blog
    http://www.dicasparablogs.com.br/2007/12/blog-com-3-colunas.html

    e também larguras do blog
    http://www.dicasparablogs.com.br/2007/08/largura-do-blog.html

    ResponderExcluir
  19. Olá Fabiano, em primeiro lugar eu gostaria de dizer que sou um grande fã do seu blog e que varias dicas e tutoriais que você postou já foram de grande ajuda pra mim. Mas dessa vez eu não consegui fazer, eu não entendi muito bem como faz pra criar este estilo css e onde exatamente eu coloco o código, pode ser simples falta de atenção minha(ou burrice msm)(me perdoe se for!), mas eu gostaria q explicasse essa parte de uma maneira mais clara. Grato des de já, Um grande abraço!!

    ResponderExcluir
  20. os estilos CSS já estão criados no seu blog, é aquela parte do html que tem body{.... e todas as outras coisas que fazem a formatação do blog, é só colocar entre elas, minha sugestão é colocar logo depois que fechar as chaves do estilo body, assim fica fácil para achar depois se precisar modificar

    ResponderExcluir
  21. ah sim agora entendi! vou tentar fazer aki, qualquer dúvida te informo! brigadão!

    ResponderExcluir
  22. Este Site esta de parabens!!!
    Além os posts serem muito úteis a atenção às dúvidas é excelente.

    Pergunta - Quando eu adiciono class=’guiarapido’ na < ul > aparece uma mensagem de erro:
    Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente.
    Mensagem de erro em XML: Open quote is expected for attribute "{1}" associated with an element type "class".

    Sendo que está fechado < /ul >
    Fabiano, vc poderia me informar o que está acontecendo?

    Na verdade eu só quero mudar a cor da fonte da exibição dos marcadores.

    Fico grato pelos posts, e mais grato ainda se puder me ajudar.

    Vlw Fabiano!!!

    ResponderExcluir
  23. Stanley, você tem que colocar usando o sinal ' e não aspas, o xml do blog dá problemas com aspas no meio do código, e claro cuidado para não apagar outros sinais como < >

    ResponderExcluir
  24. Vlw Fabiano.
    Falta de atenção minha.
    Belo trabalho vc está fazendo, continue assim.
    Obrigadão pela a ajuda.

    ResponderExcluir
  25. Fabianooooooooooo Socorrooooooooooo
    Eu não consigo, e o pior é que tenho até mdeo de mexer no meu html porque eu já acabei com tudo uma vez. kkkkkkkk
    Me ajuda, eu sei que vc deixa tudo explicadinho, mas eu fiz o que vc mandou e aparece uma mensagem dizendo que não pode salvar porque tem erro.
    O que eu faço????
    Eu dei ctrl f como vc pediu, achei os marcadores, mudei para guia rapido, mas aparece que tem erro no class e no ul.
    tentei uma dez vezes no mínimo e não consegui.
    buááááaááá

    ResponderExcluir
  26. provavelmente você colocou alguma letra a mais ou faltando no código.

    ResponderExcluir
  27. Oii, eu tenho uma dúvida...eu ja consegui por os marcadores...mas eu gostaria de colocar outra lista de marcadores, cada lista, com um assunto...entende? Eu ja fui em Adicionar um Gadget, e adicionei um SEGUNDO MARCADOR...mas ambos, ficam com as mesmas listas, tem como mudar?

    desde ja agradeço...bjos

    ResponderExcluir
  28. Marcela

    só é possivel fazer uma lista de marcadores para o blog.

    ResponderExcluir
  29. Desculpa, mas tem um jeito sim...
    eu fikei fuçando aki e consegui...eh só selecionar pra qual lista vc quer q fike, onde tem as opções de titulo, exibição, classificação e etc...ai em exibir vc seleciona 'marcadores selecionados' e em baixo clique em editar...e seleciona quais vc qr no marcador...

    ResponderExcluir
  30. Marcela B. ♥

    fazia tempo que eu não entrava no gadget dos marcadores ainda não tinha visto essa opção.

    ResponderExcluir
  31. Oi...
    No meu não mudou nada...
    Acho que fiz alguma coisa errada...
    Sei la...
    Só sei que não deu!

    ResponderExcluir
  32. Como eu faço para centralizar o titulo das postagem...Tipo Assim: Todos Os titulos das Postagens centralizadas com uma imagem de fundo como no menu, uma imagem personalizada!
    Se tiver Como me explique como fazer...

    ResponderExcluir
  33. Jhonatan, veja aqui sobre o titulo das postagens
    http://www.dicasparablogs.com.br/2009/08/imagem-no-titulo-da-postagem.html

    ResponderExcluir
  34. Oii, eu tenho uma dúvida, e queria saber se vc poderia me ajudar...

    Sabe quando entramos em um blog, e lah exitem marcadores, e então clicamos em uma opção para ver, e em cima da postagem fica uma caixinha cinza escrito:

    ''Mostrando postagens com marcador (NOME DO MARCADOR). Mostrar todas as postagens.''

    Gostaria de saber como se tira essa caixinha q fica sobre a postagem, tem como?

    Desde Já agradeço.
    Bye

    ResponderExcluir
  35. Marcela B. ♥

    entre na pagina editar html e coloque isso:

    .status-msg-wrap{display: none;}

    ResponderExcluir
  36. Tentei várias vezes, mas não consegui. Tem uma parte do tutorial que não é muito clara e para iniciantes a coisa pega.
    Suas dicas são maravilhosas. Vê se consegue explicar melhor, pois queria muito aplicar no meu Blog.
    Abraços!!!

    ResponderExcluir
  37. EternoAprendiz, mas qual parte você não entendeu ou não conseguiu fazer?

    ResponderExcluir
  38. pow estou com uma duvida,meu blog é sebobo.blogspot.com, o menu superior onde tem inicio-matematica-portugues... nele eu queria colocar separado, tipo post de portugues no botão de portugues, post de matematica no de matematica etc...
    se puder dar essa luz eu agradeço =).

    ja ia esquecendo, seu blog é nota 10, continue assim.

    ResponderExcluir
  39. João
    veja aqui como transformar os links em botões
    http://www.dicasparablogs.com.br/2009/04/como-fazer-e-colocar-botoes-no-blog.html

    ResponderExcluir
  40. Ei fabiano, tipo os botões ja estão criados mas oque eu quero msm é q todos os posts de matematica abram quando eu clicar no botão de matematica, tipo como se o botão de matematica fosse um marcador.

    obrigado pela atenção.

    ResponderExcluir
  41. Bom dia! Fabiano mais uma vez parabens pelo seu blog segui o tutorial lendo com calma e deu tudo certo! Ta ótimo! Só que agora estou com uma dúvida extra... a imagem que eu fiz para ser o fundo do marcador ta um quadrado branco... quando eu editei ela pelo Firewroks eu salvei com o fundo transparente, mais ela foi com o quadrado branco... como eu faço pra deixar transparente?

    Dê uma olhada de como ficou os marcadores: www.blogsimsvicio.blogspot.com

    ResponderExcluir
  42. na hora de salvar usando o Fireworks tem que usar o formato gif e marcar fundo transparente

    ResponderExcluir
  43. Seu blog é o melhor blog que eu ja vi e vc ainda queria exclui o blog se vc excluise aonde eu ia achar grandes tutoriais para blogs vc é demais

    ResponderExcluir
  44. Oi ,gosto muito do seu blog , sempre me tira muitas dúvidas , alias que tenho uma não sei se é simples ou não me desculpa a ignorancia ,mas gostaria de saber como faz para colocar os marcadores embaixo de cada postagem em uma pagina que tenha muitas postagens juntas .
    ex:
    Postado por Fabiano Roberto às 15:37

    Marcadores: CSS, Template
    E o acesso a comentários .
    obrigada

    ResponderExcluir
  45. Olá, Fabiano!
    Seu blog tem me ajudado muito, sempre que tenho alguma dúvida apareço por aqui. Tenho visto em alguns blogs a palavra "novo" ao lado de um marcador do menu para chamar a atenção para posts novos. Você pode me ajudar como fazer isso? Obrigada.

    http://mensagensegifsdateka.blogspot.com

    ResponderExcluir
  46. Tô com um problema aqui e talvez vc possa me ajudar.

    Preciso criar a seguinte situação:

    Ao postar um conteúdo, eu preciso que ao adicionar o marcador "x", o layout do post apareça de um jeito, e ao postar sem esse marcador, o layout da psotagem apareça de outro jeito.

    Pra ser mais específico, eu inseri um código que adiciona a imagem do autor do post a cada postagem, só que eu queria remover essa imagem de determinadas postagens que criei (pra usá-las como páginas do blog, sem referência a quem postou).

    Já vi um blog com esse estilo. Nesse blog que vi, a postagem sem a tag aparece assim e a postagem com a tag aparece assim.


    Já procurei em tudo quanto é canto e não consigo uma solução pra isso!

    ResponderExcluir
  47. tente perguntar como ele fez, pois se retirar os código do html modifica todas as postagens, talvez os links sejam feitos manualmente

    ResponderExcluir
  48. Olá oia eu aqui outra vez, estou com problemas com os marcadores ate o momento não consegui fazer eles aparecerem nas postagem assim parecido com o seu (Postado por Fabiano Roberto às 15:37

    Marcadores: CSS, Template)
    nada aparece porque? vc pode me dá uma mãozinha? Agradeço desde de já.

    ResponderExcluir
  49. Josenildo
    entre na pagina layout e clique para editar as postagens do blog, lá vai achar essas coisas.

    ResponderExcluir
  50. Oi Fabiano tudo bem? Ja fiz isso varias vezes inclusive agora e nada feito, meu o que tá acontecendo? no outro blog que tenho para testes está perfeito e esse não to quase mudando o blog para o blog teste.
    Muito obrigado pela sua atenção.

    ResponderExcluir
  51. então deve ser erro no html que é complicado de corrigir.

    você já colocou os marcadores nas postagens, veja também as congurações sobre o formato da data...

    ResponderExcluir
  52. Ola Fabiano estou aqui outra vez tentei de tudo mesmo e nada feito, notei que na página layout editar postagem do blog na parte em que aparece Postado por ... eu tinha mudado para Adm agora ele não esta mudando mais travô no Adm eu escrevo outro nome salvo ele da alterações salvas com sucesso mais quando volto lá esta do mesmo jeito Adm, essa será a ultima vez que insisto nesse assunto ok se não tiver jeito vou mudar tudo para página teste.
    Obrigado mesmo pela sua atenção.

    ResponderExcluir
  53. Josenildo
    eu só lembro desta maneira que você falou entrar na pagina layout e clicar para editar a postagem.


    não sei como alterar isso diretamente pelo html do blog

    ResponderExcluir
  54. Fabiano!
    Velho tu não acredita consegui, e foi uma coisa bem simples e eu me matando e enchendo sua paciência,
    sabe essa parte (b:widget id='Blog1' locked='true' title='Postagens no blog' type='Blog') pois é so mudei o valor em Blog1 para Blog2 e deu certo.
    Cara muito obrigado mesmo. Mais uma vez vc foi muito atencioso.
    Até mais...

    ResponderExcluir
  55. Obrigada pelo tutorial!
    Consegui colocar no meu blog, claro, mts vezes me valendo das dúvidas alheias q foram respondidas aqui.
    Abraço e parabéns pelo bom trabalho!!!

    ResponderExcluir
  56. Não ta dando certo apereceo seguinte:

    Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente.
    Mensagem de erro em XML: Element type "data:title" must be followed by either attribute specifications, ">" or "/>".

    ResponderExcluir
  57. provavelmente faltou algo no código ou usou aspas em vez de ' no trecho que modificou.

    ResponderExcluir
  58. Como faço para criar um estilo Css guia rapido?

    ResponderExcluir
  59. Sávio
    é isso que mostramos no codigo, a parte:
    .guiarapido a{background-image:url(http://img207.imageshack.us/img207/5918/marcador.gif);
    background-repeat: no-.........

    isso é a formatação do menu, veja aqui como alterar o estilo do texto
    Como Formatar o Texto do Blog

    ResponderExcluir
  60. Queria saber exatamente oq esse tutorial faiz porque a imagen que esta la se eu coloca-la no meu blog vai ficar estranhão mi explica ae
    flws espero resposta

    ResponderExcluir
  61. Como faço para criar um estilo Css para modificar os marcadores do meu Blog ?
    Essa e minha pergunta e da pra mostrar onde que coloca o codigo CSS
    xau abraços

    ResponderExcluir
  62. Anônimo
    veja no tutorial onde falamos para criar o estilo .guiarapido junto com o trecho body{..} ou main do html e depois formatar como quiser os marcadores do seu blog

    ResponderExcluir
  63. Ótima dica!!
    Eu estava tentando fazer isso há muito tempo.

    ResponderExcluir
  64. Aee Fabiano Como eu faço para Retirar os espaços dos marcadores?
    espero resposta
    abraços fui

    ResponderExcluir
  65. no exemplo que mostramos do código você poderia diminuir o valor que está em padding-top e padding-bottom, isso são espaço acima e abaixo do link.

    pode também colocar margin:0px no código essa é uma margem externa

    Diferença entre margin e padding

    ResponderExcluir
  66. Quero que algum me ajuder, como dividir o marcadores por exemplo no meu blog quer dividi os filmes do ebooks como esta agora os maracado estão misturados, alguem pode me ajudar? por favor envie para o email jfjm19@yahoo.com.br

    ResponderExcluir
  67. veja neste link Opções dos marcadores do blogger

    lá mostra como fazer listas separadas com os marcadores, cada lista tem somente os marcadores que você escolher

    ResponderExcluir
  68. Olá eu sou blogueira iniciante mas já consegui tirar muitas dúvidas com vocês.Agora nesse post de como por a barra de rolagem e personalizar os marcadores ficou dificil entender, fiquei um tempão fazendo e deu errado porque não ficou claro pra quem não entende muito de html e css onde é que se coloca o código (por que não encontro onde começa o inicio do código do blog) tentei várias coisas mas isso dá errado.
    Um abraço

    ResponderExcluir
  69. Sol Fonseca
    veja neste link Personalizar gadgets do Blog, esse procedimento é o mesmo que falamos aqui, talvez lá esteja mais facil para entender

    ResponderExcluir
  70. Ha de tanto tenta consegui, travei um tempão na parte do ul pq tava dando erro ;x
    mais tentei até q consegui, vlw Fabiano :D

    ResponderExcluir
  71. da erro pq o exemplo fica ’ e o blog so reconhece ' entao basta trocar ’ por ' que da certo, aqui deu :D

    ResponderExcluir
  72. realmente os códigos do blogger são meio chatos na hora de aceitar os caracteres...

    já tinha notado isso mas nunca procurei saber o porquê, mas certamente tem a ver com a codificação dos caracteres.

    ResponderExcluir
  73. Fabiano, blz?
    então gostaria de saber, como eu posso mudar a posição em que os marcadores são exibidos na postagem? e o texto que mostra eles saca? tipo MArcadores: Filmes

    Como mudo esse "Marcadores"? qual é o codigo geral dos marcadores no blogger? preu achar aki no template e editar =]

    abraços.

    ResponderExcluir
  74. na pagina layout tem a opção de mudar algumas coisas de posição clicando para editar as postagens, mas dependendo de onde quer colocar só no html do blog, vou preparar um tutorial sobre isso, mas é um pouco complicado pois as tags podem variar um pouco

    ResponderExcluir
  75. Eu adorei funcionou bem, mas queria saber como eu tiro aquelas bolinhas que ficam do lado da imagem sabe? pesquisei e disseram que é só colocar isso no CSS list-style-type: none; mas nao consegui

    ResponderExcluir
  76. A garota do blog
    entre no seu html e crie um estilo li e ul assim:

    ul a{list-style-type: none;}
    li a{list-style-type: none;}

    deve resolver seu problema

    ResponderExcluir
  77. Eu, não consegui, como crio um estilo? sou pessima nisso, beijoos.

    ResponderExcluir
  78. qual o endereço do seu blog, vou olhar e depois coloco o código aqui para vc

    ResponderExcluir
  79. na pagina editar html depois de body{....}

    coloque isso aqui:
    #Label1 li {list-style-type:none;list-style-position: inside;}
    #Label1 ul {list-style-type:none;list-style-position: inside;}


    deve sumir com as bolinhas..

    ResponderExcluir
  80. ou eu sou muito ruim, ou então eu sou muito ruim, KKKK, sinceramente não consegui, tentei em todos os body possiveis e nada, se poder adicionar meu e-mail karolinne.fake@gmail.com dai te adiciono como administrador só para colocar para mim, se poder .

    ResponderExcluir
  81. envie o convite para nosso email e vou olhar seu código

    ResponderExcluir
  82. como fasso pra modificar os marcadores tipo aonde fica o nome ex: filmes,games, isso eu keria por foto ao inves da palavra tem como ? pq todas as foto eu ja tenho só keria sabe se da alguem ai pode me ajuda ou até mesmo o dono do site

    ResponderExcluir
  83. Mr.Patolino
    seria possivel fazer mas não automaticamente pelo blogger.

    você pode criar banners para cada marcador

    Como fazer um banner

    ResponderExcluir
  84. Queria deixar meu marcador em cima perto do titulo de uma postagem como faço isso? ja tentei ir em Design - editar postegens no blog - e tentei arrasta pra cima mais quando eu salvo ele fica la embaixo

    ResponderExcluir
  85. vou fazer um tutorial sobre mudar os marcadores de lugar... isso é feito na pagina editar html, mas precisa achar os códigos exatos

    ResponderExcluir
  86. Fabiano Roberto blz no aguardando anciosamente

    ResponderExcluir
  87. Eu já usei e fica muito bom, minha dificuldade era remover aquelas bolinhas que ficam do lado esquerdo quando se deixa o marcador como lista. Bom, minha duvida hoje é como colocar uma imagem ao lado direito apenas em uma categoria do marcador, sabe? se poder me ajudar agradeço, beijos

    ResponderExcluir
  88. A garota do blog
    se o blog já tiver a coluna do lado direito é só arrastar o gadget, senão precisa trocar o template ou escolher outra opção de layout na pagina designer do modelo

    ResponderExcluir
  89. Esse era meu medo, não tem :/ mas obrigada mesmo assim. beijoos sucesso. Quer dizer 4 mill visitas por dia, acho melhor eu desejar sucesso pramim né? KKKKK, bjs

    ResponderExcluir
  90. Cara... eu sei esse código nos marcadores, fico otimo, mas seguinte... quando eu clico em um deles (ex. tutorial), e abre a pagina da categoria, quando vou novamente na lista das categorias e vejo o TUTORIAL ele perde a formatação CSS... tem como eu ajeitar isso?

    ResponderExcluir
  91. para não ficar sem formatação quando entre na pagina do marcador crie um estilo para o texto normal, no caso do exemplo .guiarapido{.....}

    ResponderExcluir
  92. Fabiano ficou muito bom o tutorial deu certo aqui logo de primeira. Porém estou com o mesmo problema do alex. Tipo quando clico no marcador exemplo "videos" ai abre a pagina de videos, o marcador video fica sem o icone que eu coloquei, tipo igual a do seu blog aqui, favor como sou iniciante, pode explicar como fazer essa correção, para que quando clicar no marcador ele continue com o icone ao lado. Obrigado

    ResponderExcluir
  93. a questão é que na pagina do marcador ele não é um link

    ResponderExcluir
  94. Fabiano desculpe-me abusar de novo, mas ja procurei e não consegui resolver esse problema, como faço para mesmo clicando no marcador e abrindo a pagina o marcador não perça a forma de link

    ResponderExcluir
  95. se quiser pode ocultar o marcador visitado, com esse tutorial quando visitar a pagina do marcador ele não aparece no menu

    ResponderExcluir
  96. Obrigado Fabiano, consegui de boa fazer aqui, obrigado novamente, abraços.

    ResponderExcluir
  97. Isso ficou muito bom, mas precisava de mais dicas sobre isso, ficou algumas coisas que poderiam ser explicadas. Até dicas de imagens quem sabe. Mas ta muito bom! Obrigado!

    ResponderExcluir
  98. olá

    no meu blog não achei body{...}
    main{...}e o outro. tem que ir Designer do blog e no avançado para clica onde tem a opção Adicionar CSS personalizado?

    ResponderExcluir
  99. acho que todos os templates tem body{...

    os outros podem ser um pouco diferentes varia conforme o template

    ResponderExcluir
  100. esse blog é o melhor blog de ajuda mt bom,vcs estão de parabens eu visito ele diariamente

    ResponderExcluir
  101. Olá .
    Você poderia me ajudar.
    Estava postando deu, uma mensagem de erro e depois disto os marcadores ficaram invisíveis. Só aparecem clicando sobre eles, Na sidebar também.
    Não sei como resolver.
    Quer dar uma olhadinha? Ficarei muito grata.
    www.makeemodabighouse.blogspot.com

    ResponderExcluir
  102. os seus marcadores estão em forma de menu suspenso...

    veja aqui outro jeito de Personalizar gadgets do Blog

    mas para funcionar tem que ser os marcadores em forma de lista

    ResponderExcluir
  103. Dessa vez não entendi PN como mexer no codigo fonte, putz! meu blog tá com problemas no espaço marcadores, e gostaria, se vc pudesse dar uma ajudinha lá pra organizar, pq tá muito grande e quero resumir em videos, artigos, dicas , etc.

    ResponderExcluir
  104. Antes de mais nada brigadão pelo codigo a única coisa que faltou foi que as imágens não aparecem alguma dica pra mim??

    ResponderExcluir
  105. as imagens que estão no código são apenas exemplos... você pode hospedar e usar qualquer imagem neste código

    ResponderExcluir
  106. Ok fiz as imagens e hospedei as mesmas n photobucket, porem ainda continuam desaparecidas.

    Será algunm codigo dentro do html??

    ResponderExcluir
  107. Queria saber como fazer os marcadores ficarem assim igual a esse blog :http://ddtankvicio.blogspot.com/ nesse site ele meio que substituiu a lista pra barra e com a imagem por cima.

    ResponderExcluir
  108. RoXzInNnN
    você poderia trocar o menu por imagens... fazendo os links manualmente.. seria trabalhoso, mas poderia usar qualquer imagem...

    ou usar o código do menu horizontal para fazer os marcadores... tb manualmente

    ResponderExcluir
  109. Olá fabiano,saindo um pouco da reta de tutorial mais não muito, gostaria de saber se você não conhece alguma forma de dividir os marcadores em coluna,que não fosse aquela de aplicar o estilo css pegando o id dele é que essa forma não é aceita pelo meu modelo(Espetacular Ltda)eu uso os
    marcadores acima do post e provavelmente já tenha na faixa de uns 200 itens e preciso dividir de alguma forma,caso você saiba de algo
    eu agradeceria muito.

    ResponderExcluir
  110. Video Galeria X
    se tem muitos marcadores pode criar varios menus com marcadores.. não precisa mostrar todos juntos, veja aqui:
    Opções dos marcadores do blogger

    ResponderExcluir
  111. "Não foi possível salvar o modelo

    Corrija o erro abaixo e envie o seu modelo novamente.
    Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente.
    Mensagem de erro em XML: Open quote is expected for attribute "{1}" associated with an element type "class"."
    O que faço?

    ResponderExcluir
  112. esses erros podem ter varias causas...

    não use aspas no código use '

    veja se não faltou nenhum sinal: > < /

    ResponderExcluir
  113. Fabiano... Tem como personalizar dois marcadores neste estilo?
    Eu tentei e deu erro...
    Será que fiz algo errado?

    ResponderExcluir
  114. esse código alterar a lista completa dos marcadores do blog... não tem como fazer separado em apenas 2

    ResponderExcluir
  115. Eu quis dizer... Em 2 gadgets, ou seja, um na posição left e outro na right entendeu?

    ResponderExcluir
  116. para colocar uma coluna de cada lado tem que alterar o template, isso não tem nada a ver com esse post...

    mas se quiser formatação diferente é só ver o nome da id

    ResponderExcluir
  117. comecei agora...pena que não mostrar como fica. Não quero fazer sem saber como vai ficar. Aonde tem algum exemplo de como fica?

    ResponderExcluir
  118. entraremforma
    fica semelhante ao nosso menu com aquelas imagens ao lado

    ResponderExcluir
  119. No final do meu blog tenho algo assim: Subscrever....
    E eu queria tirar isso. Como faço?
    Tem aqui o link: http://piiecesofstoriies.blogspot.com/

    ResponderExcluir
  120. Izza Shocks
    isso é para as pessoas adiconarem no feed...

    para retirar tem que ser no html do blog, procure por div class='feed-links' o código deve estar logo depois dele

    mas cuidado para não gerar erros no seu código

    ResponderExcluir
  121. Não existe nenhum: class='feed-links' :/

    ResponderExcluir
  122. isso varia conforme o template, tente procurar #blog-pager

    ResponderExcluir
  123. Tem como exibir marcadores cruzados, ou seja, exibir postagens com mais de um marcador selecionado e/ou com alguns dos marcadores selecionados?

    ResponderExcluir
  124. OS ESPORTES
    não tem como mostra marcodores cruzados... só pode mostrar um por vez

    ResponderExcluir
  125. ola amigo preciso de ajuda como eu faço para aumenta a FONTE DO MARCADORES DO TEMPLATE ????

    ResponderExcluir
  126. Camila Lindinha veja aqui: Personalizar gadgets do Blog

    é só criar um estilo CSS com o nome #Label1 e formatar o texto. No link acima tem isso detalhado

    ResponderExcluir
  127. Nao sei o q fiz de errado, mas nao consegui personalizar os marcadores.
    Tem outra forma de fazer?!

    ResponderExcluir
  128. Percebi que quanto mais posts no mesmo marcador, o nome muda o tamanho da fonte.
    Pq será!?

    ResponderExcluir
  129. Utilizando outro código consegui fazer a alteração, porém quando o link esta ativado ele fica pequeno e nao funciona.
    Qual o codigo para os links ativados!?
    O codigo q utilizei é o deste site: http://digitalvitima.blogspot.com/2010/07/blogger-personalizar-os-marcadores.html
    Obrigada!

    ResponderExcluir
  130. Kelly
    achei bem interessante o código.

    mas é normal na pagina do marcador ele ficar diferente pois ele não é um link

    tente criar um estilo assim:

    label-size{....}

    coloque a formatação que desejar e faça o teste.

    ResponderExcluir
  131. fabiano.

    por favor me ajuda. Pelo q eu entendi, nessa sua postagem, vc ensinou como colocar o mesmo ícone em todos os marcadores. Não tem como colocar ícones diferentes em cada link??

    UM BEIJO, LUIZA P.

    ResponderExcluir
  132. até seria possivel fazer, mas precisa ser diretamente com html como se fossem links para qualquer outro site, por exemplo:

    < a href="http://www.dicasparablogs.com.br/p/lista-de-tutoriais.html" title="Dicas para Blogs" target="_blank" >< img style="float:left" src="http://1.bp.blogspot.com/_-v7nVhXnPEc/SmzwP5crumI/AAAAAAAAAUc/LRfITC6TwvM/s400/dicas2.jpg" border="0" / >dicas para blogs< / a >

    ResponderExcluir
  133. Rebelde_Luar esse código é para formatar os marcadores do blog, veja esse outro tutorial talvez ache mais fácil de usar: Personalizar gadgets do Blog

    e o resultado é o mesmo

    ResponderExcluir
  134. Fabiano... Estou criando uma galeria particular de fotos, imagens e todas as coisas supérfluas do PC e depois de dois dias consecutivos mexendo em códigos tirados de várias páginas do seu site fiz uma mistura de vários deles e o resultado foi esse:
    #Label2 a{text-indent:15px;
    letter-spacing: 1px;
    background-image: url(http://i901.photobucket.com/albums/ac217/amaratedoer/Fundodoslinks2-2.jpg);
    background-repeat: no-repeat;
    background-position: center 3px;
    padding-left: 25px;
    padding-right: 25px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-family: "Comic Sans MS";
    font-size: 12pt;
    color: #8B8989 ;
    }
    ...marcadores com imagem de fundo. Mas, ainda preciso de sua ajuda. Não consigo dar espaços verticais nos links (marcadores com espaço na vertical). As imagens ficam uma encima da outra. O que faço agora?

    ResponderExcluir
  135. pode colocar neste código mais isso aqui:

    display:block;

    e se quiser definir o mesmo tamanho para todos os marcadores então coloque
    height:29px;width:200px;

    ajuste os valores e apague toda aquela parte de padding que usou

    ResponderExcluir
  136. Ok... Deu certinho os ajustes. Agora preciso centralizar a fonte dentro da imagem. Sei que a parte text-indent:0px; Centraliza da left para center, porém não abaixa o suficiente. Tem como fazer isso?

    ResponderExcluir
  137. coloque padding-top:5px; e ajuste o valor

    ResponderExcluir
  138. Está exatamente como eu planejei Fabiano...
    Muito obrigado meu filho.
    Deus o abençoe sempre!!!

    ResponderExcluir
  139. Existe uma forma de trocar o TÍTULO de um marcador por alguma imagem? Em vez de trocar os marcadores, eu gostaria de trocar o TÍTULO, mas não encontro ele no HTML, isso é possível?

    ResponderExcluir
  140. já procurei sobre trocar o titulo do marcador por imagens mas não encontrei

    ResponderExcluir
  141. Olá Fabiano,
    seu blog me ajuda há muito tempo, fiz muitas modificações em meus blogs, sempre seguindo suas valiosas Dicas! Por isso pensei em pedir ajuda a você. Eu acho que é simples, mas não sei resolver rsrsr. Já tentei mexer no html mas nada mudou.
    É que no meu blog, o ícone B(do blogger) do Perfil está repetido várias vezes cobrindo o meu nome completamente. Não sei o que aconteceu.
    Se você puder me ajudar... Já lhe agradeço de qualquer forma. Meu blog:
    http://meusgraficosdepontocruz.blogspot.com.br/

    ResponderExcluir
  142. Adriana - Meus Graficos De Ponto Cruz
    aquele é um gadget padrão do blogger?

    ele tem uma imagem de fundo que é o simbolo do blogger

    < a class='profile-name-link' href='http://www.blogger.com/profile/16939353267543206089' rel='author' style='background-image: url(//www.blogger.com/img/logo-16.png);' >
    Adriana - Meus Graficos De Ponto Cruz
    < /a >

    precisa apagar isso:
    style='background-image: url(//www.blogger.com/img/logo-16.png);

    ResponderExcluir
  143. Oi Fabiano,
    que maravilha, fiz como você ensinou e deu tudo certo! Muito obrigada por sua disposição em nos ajudar. Que Deus o abençoe sempre.

    ResponderExcluir
  144. Olá gostaria de saber como faço para colocar uma imagem acima das noticias de cada marcador?
    Ex: http://www.mixtv.com.br/category/blogs/blogdocaco/ Só q no blogger

    ResponderExcluir
  145. Victor não podemos editar as urls do blogger desta forma

    ResponderExcluir
  146. Olá, Fabiano, gostaria de lhe fazer uma pergunta: existe algum hack para personalizar os marcadores individualmente? Por exemplo, eu faço uma postagem sobre cinema e o marcador que aparece no artigo (em cima ou embaixo da página) tem uma aparência particular, digamos que seja da cor vermelha. Em outra postagem, agora sobre música, o marcador apresenta cor azul (ou fundo azul), e assim por diante. Existe algum código para implementar isso no blogger?

    Abraços.

    ResponderExcluir
  147. Miguel não conheço nenhum código que faça isso mas vou pesquisar e se conseguir farei um tutorial falando do assunto.

    obrigado pela sugestão.

    ResponderExcluir
  148. Olá Fabiano,
    Seu blog tem me ajudando muito.
    Porém estou com um problema: eu faço esse procedimento para tentar alterar a configuração dos marcadores e no código do meu blog não encontro os títulos dos marcadores, já tentei de todas as formas mas não achei. Será que tem algo errado com a maneira que estou colocando os marcadores?
    Obrigada

    ResponderExcluir
  149. Aline o marcador é no estilo
    #Label1

    no html não tem mas você pode criar esse estilo, veja aqui um tutorial que está mais fácil de fazer do que esse.

    Personalizar gadgets do Blog

    ResponderExcluir
  150. Realmente não estou conseguindo....Eu não acho nenhum dos códigos indicados...Eu só queria mudar a letra do marcador.
    Obrigada

    ResponderExcluir
  151. tente criar o estilo

    #Label1{....} usando a fonte que desejar.

    veja no link que mostrei no comentário anterior

    ResponderExcluir
  152. Oi. Não sei como se chama mas gostaria que aparecesse o nome da postagem na lateral para que a pessoa possa clicar nela e entrar. Normalmente aparece a data da postagem mas queria o título também. Como faço? Abraços. César

    ResponderExcluir
  153. César Augusto Pereira para mostrar os titutlos das postagens no gadget marcadores escolha a opção hierarquia

    ResponderExcluir
  154. Fabiano no meu layout já tem algo como um círculo sinalizando cada marcador. Eu quero retira-los, como faço?

    ResponderExcluir
  155. Natália deve ter algum código deste tipo de mostramos com imagem de fundo usando o estilo Label1

    tente achar e apagar

    ResponderExcluir
  156. Fabiano me diz onde posso mudar o título dos gadget, pois estão todos em maiúsculo, aliás a parte: Postado por Natália, a palavra marcadores e os próprios linkes em marcadores estão todos em maiúsculo.

    ResponderExcluir
  157. Natalia

    o código que faz todas as letras ficarem maiúsculas é esse:

    text-transform:uppercase;


    então procure no seu html e apague.

    ResponderExcluir
  158. Esse código se repetiam cinco vezes. Tive que apagar todos, mas por fim deu certo. E para centralizar o título dos gadget, onde eu mexo?

    ResponderExcluir
  159. Natália tente colocar esse código no html do seu blog.

    h2 {text-align:center}

    se por acaso isso centralize o titulo dos posts também então coloque essa outra linha:

    .post h2 {text-align:left}



    ResponderExcluir
  160. Brigadim meu filho.
    Deus o abençoe sempre!

    ResponderExcluir
  161. querida será que vc tem um ttutorial de como modificar o tamanho e cor do cursor do mouse no blog???desde ja agradeço;

    ResponderExcluir
  162. Roseangela tem alguns códigos para colocar imagens no cursor do mouse, veja aqui: Trocar o cursor do mouse por uma imagem

    ResponderExcluir
  163. Não encontrei meus marcadores no meu HTML. O que faço????

    ResponderExcluir
    Respostas
    1. o código dos marcadores é label1, mas veja neste outro tutorial:
      Como Personalizar Marcadores do Blog

      lá está mais detalhado

      Excluir
    2. Ainda não encontrei meus marcadores!!!! O que faço?

      Excluir
    3. mas você já adicionou o gadget dos marcadores? esse código só aparece se o gadget já estiver instalado no seu blog

      Excluir
    4. Ops, não tinha adicionado kkk. Vou tentar agora. obrigado pela atenção!

      Adiantando o assunto eu adicionei o gadget agora e mesmo assim não apareceu no meu HTML e eu pesquisei pelo nome do marcador como você disse no tutorial. O que eu faço?

      Excluir
    5. Sim, antes que eu me esqueça esse tutorial é pra colocar um background diferente em cada marcador do blog, né?!
      Se não for, será que você poderia ensinar a fazer isso?

      Excluir
    6. esse tutorial é sobre personalizar o menu marcadores.

      não tenho tutorial sobre alterar a cor de fundo da pagina dos marcadores

      Excluir
    7. Será que poderia fazer um tutorial sobre isso? Ou me indique o site que tenha esse tutorial. Por favoor!

      Excluir
    8. vou pesquisar, mas acho que um código para trocar a cor conforme o marcador pode gerar erros principalmente se usar mais de um marcador no blog....

      mas vou tentar se achar algum jeito de fazer isso e que funcione bem vou fazer um post sobre o assunto.

      Excluir
    9. Quando souber e postar aqui no blog. Por favor me mande o link por esse comentário mesmo. Certo?
      :)
      Pesquise bastante eu to pesquisando isso faz tempo e eu não tô sabendo e outras pessoas também estão tentando isso.
      :)
      Boa Sorte!

      Excluir
  164. Esse lugar é maravilhoso. Poderia colocar a imagem de que é o tutorial, mas tem muita coisa aqui nesse lugarzinho, seu.

    ResponderExcluir