Marcadores pesonalizados em duas colunas

29 de dez. de 2012

By: Melina Souza
Como me pediram (oi Paty!) pra ensinar a fazer os marcadores que estou usando nesse lay, cá estou eu pra postar o tutorial!

O resultado será esse:


1º passo
Abra seu gadget de marcadores (se ainda não tem adicione) e deixe ele da seguinte forma:

2º passo
Abra seu HTML e procure (ctrl+f) por ]]></b:skin> e acima dele cole:

/* Marcadores personalizados - goimagines.blogspot.com */
#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 */
}
Visualize e se estiver tudo certo salve! É isso, beijos! :3

98 comentários:

  1. foi vc que fez o desenho do cabeçalho ? que programas você usou ? QUE DIVO O NEW LAAAY CARA *-*

    ResponderExcluir
    Respostas
    1. fui sim :3 foi feito a mão e pintado no PS. Mt obrigado!

      Excluir
  2. Nossa super fácil e ficou muito lindo Anny, obrigado por nos ensinar. Beijos

    ResponderExcluir
  3. Wow, adorei. É super fácil e útil.
    Assim as tags não ocupam tanto espaço no blog. haha
    E é super lindo *u*
    Não lembro se já comentei sobre o novo lay: ficou lindo! ^.^

    eu-cotidiano (perfil)

    ResponderExcluir
  4. Mais é uma linda mesmo, exatamente o que eu estava precisando! ♥

    ResponderExcluir
  5. Ameei muito facil *-* Awwn sua linda obg ameei ! Estava querendo muito este tuto *-*
    https://bolhaarrozada.blogspot.com/

    ResponderExcluir
  6. Muito bom ;)
    Queremos agora que você faça o Tutorial dos títulos dos Gadgets !

    ResponderExcluir
  7. o meu não quer ficar em duas colunas, fica tipo lista mesmo, porque?

    ResponderExcluir
    Respostas
    1. Sem querer me meter, mas talvez seja o modelo que esla esteja usando. Beijos.

      http://returningtodarkness.blogspot.com.br/

      Excluir
    2. Jéssica, tenta mexer no valor de width, pode ser porque o tamanho da sua coluna e maior ou menor que o ideal pra 45% :)

      Excluir
    3. Qual é o modelo Original? porque o meu também não deu certo, vou tentar mudar de modelo qual eu uso ?

      Excluir
  8. Super adorei e já estou usando :) Obrigada por compartilhar!!

    Beijos mil ♥

    Blog Uze & Abuze | Facebook | YouTube | Twitter

    ResponderExcluir
  9. ow vc leu minha mente,haha eu ai perguntar cm vc fez;x

    ResponderExcluir
  10. adorei fica lindo
    amei tb o seu lay me faz um assim bonitinho

    http://especial-dreams.blogspot.pt/
    http://o-meu-ladooculto.blogspot.pt/

    ResponderExcluir
  11. Anny, vim aqui pra te perguntar uma coisinha... Eu uso o Photofiltre, mas quando salvo, a qualidade da imagem diminue muuito. Isso é bem chato :/ Em que programa você faz as montagens para os posts do GI?
    Beijos,
    Mai <3

    ResponderExcluir
    Respostas
    1. eu faço no PhotoFiltre e a qualidade não diminui *o* Você salva em que extensão? Eu salvo sempre em png, pois em jpg piora um pouco a qualidade.

      Excluir
  12. Esse tuto fica o máximo! E olhando os comentários... vc q fez o desenho do cabeçalho né, ficou mt perfeito gente *-------* Amei!!
    Bjs,

    http://dedicada1.blogspot.com.br/

    ResponderExcluir
  13. Oii amei esse tutorial, tentei usar ele nas minhas páginas de testes, mas infelizmente não ficou as duas colunas, deve porque estou usando o modelo minima do blogger.

    ResponderExcluir
    Respostas
    1. tenta mexer no valor de width, pode ser porque o tamanho da sua coluna e maior ou menor que o ideal pra 45% :)

      Excluir
  14. Amei o novo layout , ensina a colocar os comentarios igual ao seu!
    beijão

    ResponderExcluir
  15. amei o tutorial *---* fica lindo ahahah seu blog ajuda muito ^^ bjjs

    http://cloud-land2.blogspot.com.br/

    ResponderExcluir
  16. Oi linda adoro o seu blog, amei esse tutorial.
    Queria que você fizesse um tutorial de como por balão de comentário igual ao seu?
    Posta por favor , já rodei um monte de blogs e todos os tutoriais que teste num funciona!
    bjus

    ResponderExcluir
    Respostas
    1. Também gostaria que fizesse *-*

      Excluir
  17. Seguindo oseu blog, design perfeito! Passando para desejar-lhe um feliz 2013 repleto de conquistas e muitas realizações para ti ^^

    Beijos
    http://therevolucaonerd.blogspot.com.br

    ResponderExcluir
    Respostas
    1. awn, muito obrigado, igualmente pra você! :3

      Excluir
  18. Feliz ano novo.
    Rebeldia em V ~ Blog

    ResponderExcluir
  19. Obrigada Anny <3
    É bem fácil mesmo! Sem falar que fica mais organizado né

    Bjs

    ResponderExcluir
  20. Lindooooooooo *u* O Blog Ta Perfeito Anny Parabéns ♥
    http://the-dream-perfect.blogspot.com.br

    ResponderExcluir
  21. Oi Anny, amei esse tuto, mas eu tentei fazer e só ficou a listinha normal, não ficou igual ao seu resultado, sabe? Ele não ficou em duas colunas :(
    http://sweet-gio.blogspot.com.br

    ResponderExcluir
    Respostas
    1. O meu também :((

      Excluir
    2. O meu tambem não deu certo ficou normal! http://fantasticpandas.blogspot.com.br/

      Excluir
    3. Oi, gente!
      Vocês tentaram mudar o valor do width?
      O meu também não tava dando certo, dai fiz isso e consegui.
      Abs

      Excluir
  22. Olá! Adorei o tutorial!! Não ficou muito legal no meu layout, mas fica super lindo!!
    O blog está muito lindo!! Dá muita inveja... Posso pedir um tutorial? Tem como ensinar como personalizar o título dos gadgets dessa maneira daqui do blog? Se você já ensinou, tem como dar o link??

    Grata desde já, Carol.

    ResponderExcluir
  23. Oi Anny, ótimo tutorial, deu certo no meu, mas eu queria que ele ficasse mais pra esquerda e não pra direita!
    Acessa lá!

    rascunhosdecaneta.blogspot.com

    ResponderExcluir
  24. Anny consigo fazer o 1º passo, mas o segundo não!.. Você pode fazer mais detalhado?

    ResponderExcluir
    Respostas
    1. Mais detalhado que isso não tem, porque é bem simples, não tem segredo. Tenta de novo! É só colar aquele código acima de ]]>

      Excluir
    2. Este comentário foi removido pelo autor.

      Excluir
  25. Não funcionou no meu :(((

    ResponderExcluir
  26. Funcionou perfeitamente no meu blog, mas depois de um tempo, do nada, desconfigurou tudo ;/
    Se quiser ver como esta : http://alicemarquues.blogspot.com.br/

    ResponderExcluir
  27. Oii Anny...
    Muito bem feito o tutorial, achei lindo, mas infelizmente no meu blog ñ funcionou :(, Bjs!!!

    http://encantosdalinda.blogspot.com.br/

    ResponderExcluir
  28. Este comentário foi removido pelo autor.

    ResponderExcluir
  29. Nuss demais e é super simples de fazer brigadão ;)

    http://garotamoderninhaa.blogspot.com/

    ResponderExcluir
  30. Já tentei mudar meus marcadores, mas nunca deu certo =/
    Ficam aqueles pontilhaos em baixo de casa marcador =[

    http://www.quasemquere.blogspot.com.br/

    ResponderExcluir
  31. valeu! super facil e fica lindo. bjs

    ResponderExcluir
  32. O meu não fica de jeito nenhum, já tentei várias vezes. Sabe o porquê? Eu uso o modelo travel. Sabe me dizer se eu tenho que separar os gadgets primeiro?

    http://meublogderetalhos.blogspot.com.br/

    ResponderExcluir
  33. O meu não tinha dado certo.
    Aí coloquei em cima de "/* Main", que é onde editei a imagem do título das gadgets e deu certo \o/

    ResponderExcluir
  34. deeu TUDINHO CERTO! eu queria deixá-lo centralizado dai eu coloquei o código text-align: center; abaixo do TAMANHO DA FONTE e deu certo, coloca esse código ai para as pessoas deixarem o titulo centralizado que fica mais bonito! Beijooos seu blog é perfeiito
    teens-antenadas.blogspot.com
    Marie

    ResponderExcluir
  35. Você não te, noção de quanto tempo eu tento !
    Já tava ficando sem paciência ...
    Dai mudei o layout pra viagem e PRONTO kkk
    Me ajudou muito , ficou bem do jeito que eu queria.
    MUUUUUUUUUUUUUUITO obrigada querida ^^
    Beijos.
    http://humorlimao.blogspot.com.br/

    ResponderExcluir
  36. MUITO OBRIGADA!
    Você sempre me ajuda muito. Parabéns pelo trabalho.
    Beijo.

    http://alecriimdourado.blogspot.com.br/

    ResponderExcluir
  37. Adorei! Muito obrigada!
    Beijos.

    http://vivianpitanca.blogspot.com.br/

    ResponderExcluir
  38. Como eu adc um gadget de marcadores? Eu nao estou achando...

    ResponderExcluir
  39. Adorei o tutorial. Deu super certo no meu blog. Muito obrigada. Seu blog é LINDO demais!

    http://aculpaedoscupcakes.blogspot.com.br/

    ResponderExcluir
  40. Adorei o tutorial,eu já havia usado em uns dos meus designs,mas dessa vez não pegou! Talvez seja o modelo que estou usando,que é o Espetacular Ltda! :) Beijinhos ♥

    wwww.modaestupidas.blogspot.com

    ResponderExcluir
  41. Como seleciona os marcadores?, é que o seu tem 12 de 92, e eu clico em editar e não seleciona.

    Kiss Cecilia

    ResponderExcluir
  42. Eu fiz tudo direitinho mas não pegou :/

    ResponderExcluir
    Respostas
    1. Amr na primeira vez que eu fiz deu certo, ai eu mexi em alguma coisa nos código e sumiu, ai eu peguei o código e colei ACIMA do " /* Main " .. tenta ai ver se dá !

      seteprimavera.blogspot.com.br

      Excluir
  43. Já havia tentado várias vezes mas nunca pegava, decidi colocar o codigo no Design de Modelo, CSS e deu certo! Ficou muito lindo! Ótimos tutoriais aqui, que realmente funcionam, basta você fazer da maneira certa.
    http://galeriacliche.blogspot.com/

    ResponderExcluir
  44. Ameiiiii estava procurando de mais isso e agora encontrei ^^

    já esta no meu blog Obrigadinhooo
    Mafia das empolgadas

    ResponderExcluir
  45. Tive que mudar a poscentagem para 30% e ai funcionou direitinho. Otimo tutorial!!!! Beijooos

    ResponderExcluir
  46. LIndo o tutorial, eu já tinha conseguido uma vez, ai sumiu quando mudei o tema, ai tentei colocar de novo e não ia, mudei os marcadores, a largura, tudo, mas foi só mudar o tema novamente que deu certinho

    ResponderExcluir
  47. O meu ficou uma linha cinza entre eles :(

    http://taatafurtado.blogspot.com

    ResponderExcluir
  48. Olá Anny, eu não estou conseguindo alterar o número de marcadores.

    ResponderExcluir
  49. Poxinha o meu esta ficando em uma coluna só ;/
    -> Magia Teen

    ResponderExcluir
  50. hey!! olha eu tô tentando mudar no meu blog e não consigo achar o código que tem que ser procurado :( é de algum modelo especifico??? kisses

    ResponderExcluir
  51. Oi, Any!

    Então, passei aqui para dizer que adorei o tutorial e utilizei no meu blog. A maioria deles me ajudaram muito e deram vida ao meu layout atual. Por isso digo obrigada e os devidos créditos estão presentes lá. Se quiser conferir: adoravelsasarete.blogspot.com.br

    Beijos!

    ResponderExcluir
  52. não estou conseguindo me ajude por favor

    ResponderExcluir
  53. Como faz para mudar a cor da borda?Obrigada ^-^

    ResponderExcluir
  54. Oii, então eu queria saber como eu faço para borda ocupar a linha inteira se se separar da outra ao lado

    ResponderExcluir
  55. Ajudou muito, obrigada e parabéns pelo blog (:


    www.infancia90e2000.blogspot.pt

    ResponderExcluir
  56. nao consigo achar o " ]]> " no meu :c

    ResponderExcluir
  57. Norsa muito obrigada ajudou bastante. show

    ResponderExcluir
  58. não estou achando o ]]>
    na nova versão do google
    todosporai.blogspot.com.br

    ResponderExcluir
  59. Oi, eu fiz no meu só que ele não fica centralizado como na foto.Poderia me ajudar por favor?
    Beijos <3

    Bella Tulee | Fan Page

    ResponderExcluir
  60. Como assim /* Marcadores personalizados - goimagines.blogspot.com */

    ResponderExcluir
  61. Tem como colocar mais de uma lista de marcadores personalizada como essa que você ensinou?

    ResponderExcluir
  62. Oii, Anny S.!
    Sou nova no "mundo" dos blogs. E sigo suaas instruções e não consigo obter o resultado após colar o código q vc disponibiliza. Vou em modelos - html - ctrl + f escrevo skin no menu de busca, localizo-o no código e colo acimaa.. e só aparece o código acima do templete.. :(

    ResponderExcluir
  63. Amei ele! Muito fácil e simples ^-^
    Beijos

    ResponderExcluir
    Respostas
    1. Lucy, help aqui por favor, o meu não tá achando :(

      Excluir
  64. O meu nao ficou dentro desse quadradinho...

    ResponderExcluir
  65. Amei ele!Sou ova no mundo de blogs,você pode me falar onde você achou o código pro lugar onde fica o código?Onde noo cantinho fica em azul ?
    ^.^ Achei lindo!

    ResponderExcluir
  66. oi, não estou achando esse código "]]>" no meu html

    ResponderExcluir
  67. Adorei!
    Tive que diminuir o percentual de 45% pra 37% pra ficar as duas colunas direitinho no meu layout, mas adorei, ficou lindo!

    Beijos
    www.biancaschultz.com.br

    ResponderExcluir
  68. Adoreiii!
    Tentei vários e nunca tinha conseguido mudar...
    ;)
    obrigada pela dica
    http://coracaodealfinetes.blogspot.com.br/

    ResponderExcluir
  69. No meu Blog também não estava ficando em duas colunas. Diminí a porcentagem pra 40% e funcionou. :)
    A cor ficou ótima pro meu. Estava imensa a lista. Hahaha.
    Obrigada, lindona!

    http://deleigaadiva.blogspot.com.br

    ResponderExcluir
  70. O meu não esta dando não consigo achar o html no meu
    http://julyannnasilva.blogspot.com.br/

    ResponderExcluir
  71. Muito Obrigada! Ficou lindo no meu blog :) Já dei os créditos no sidebar

    www.plataformadevidro.blogspot.com.br

    ResponderExcluir

- Comentários do tipo "seguindo, segue de volta" "lindo o blog, seguindo, retribui?" Serão ignorados se não tiverem uma opinião sobre o post em si.
- Não aceitamos mais selinhos e tags, sorry!
- Leia a página "FAQ" e outras páginas internas antes de perguntar qualquer coisa.
- Sua opinião é sempre bem vinda. Mas seja educado!

© Go Imagine - 2014. Todos os direitos reservados.