9 de março de 2012

29

Como colocar ícone ao lado de cada marcador do Blog



Vocês já devem ter visto  alguns blog que tem o Gadget Marcadores personalizados com pequenos ícones, vou ensinar a vocês a personalizar o seu próprio marcador do blog.


Então pessoal isso é uma maneira simples de colocar, vou explicar passo a passo
 1° Logue a conta do seu Blog vá em Modelo > e Clique em Editar HTML
Clique na imagem e veja o exemplo abaixo:
Quando você clicar em Editar HTML vai abrir uma nova janela, então clique no botão Prosseguir
Clique na imagem e veja o exemplo abaixo:
E Marque a opção Expandir Modelo de Widgets 
Clique na imagem e veja o exemplo abaixo:



Depois de ter marcado a opção Expandir Modelos de Windgets, você vai usar a tecla de atalho:  Ctrl + F e, Busque pelo nome que você colocou no Título do seu Marcador.
 Agora, um pouquinho abaixo do Título do seu Marcador, localize essa parte do código:

<b:if cond='data:blog.url == data:label.url'>

A seguir acrescente este segundo código, a cima dele:

<img src='URL DO MINE GIF' style='border:0px;'/>  

Vai ficar assim:

<img src='URL DO MINE GIF' style='border:0px;'/>  
<b:if cond='data:blog.url == data:label.url'>

 Coloque agora, a URL da imagem (ícone) na parte destacado em azulURL DO MINE GIF

Depois Clique em visualizar e veja como ficou:
Exemplo: ícone antes do marcador

Outro Exemplo <<
Agora observe: o ícone apenas aparecerá no Marcador que você buscou pelo título.
Se você tem outro marcador e quer adicionar icones nele também, terá que fazer as mesma alterações que fizemos agora.  

Ícone depois do marcador:
Se você quiser colocar o ícone depois do marcado, faça a seguinte alteração mostrada no Exemplo abaixo:


Primeiro você vai buscar pelo Título do seu Marcador, e mais abaixo você encontrará esse pequeno Tag:
 </li>

Agora  acima dele você vai colocar esse código:
<img src='URL DO MINE GIF' style='border:0px;'/>  

E tem que ficar assim:


<img src='URL DO MINE GIF' style='border:0px;'/>  
      </li>
E pronto, agora é só visualizar e depois Salvar.

Observações: 
Como eu tinha falado anteriormente, se você tem mais de 1 Gadget Marcador no seu blog, e quer adicionar os pequenos ícones em todos eles, você terá que buscar pelo título dos determinados Gadgets e fazer o mesmo processo que fizemos logo acima.

Desse modo você poderá utilizar diferentes ícones pra cada Gadget Marcador do seu Blog.

Veja os meus Marcadores que personalizei utilizando esse código






29 comentários:

  1. Da para colocar um ícone para cada marcador?

    ResponderExcluir
    Respostas
    1. O lá Tekillah!
      eu refiz o Tutorial em questão a sua pergunta:
      como colocar em todos os marcadores?
      Leia as instruções novamente no tutorial
      Obrigado

      Excluir
  2. Bom dia! Não sei por que comigo não esta dando certo ,eu não encontro esse nome acima que vc manda procurar quando dou ctrl+f o resultado da pesquisa é zero,será que pode me ajudar melhor? Meu email é flaviacris78@hotmail.com , muito obrigada!

    ResponderExcluir
    Respostas
    1. Oi Flávia Cristina!
      Bom! Primeiramente você terá que estar usando um Modelo simples do Blog,e na hora que for procurar o código, antes você tem que expandir...
      Eu refiz o tutorial explicando com mais detalhes.
      Veja que eu mesmo uso este tipo de configuração no HTML, e não apresentou erros.
      Obrigado, mais dúvidas Comentem...

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

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

      Excluir
    4. Cara faz un tutorial sobre como colocar icones diferentes nos marcadores no mesmo gadget

      Excluir
  3. tipow isso e so de blog mais vou mandar uma de MU quem sabe vc podera mim ajudar o que fazer quando o MU não quizer entrar ?

    ResponderExcluir
  4. Olá Pedro! Boa noite! Obrigada pelo carinho por me responder tão prontamente...na verdade sou novata ainda nessa onda de blog,mas mesmo dando cabeçadas tive que fazer um por necessidade de minha profissão,mas com isso algumas coisas me deixam com dúvidas por exemplo vc falou que teria que ser um blog de modelo simples,como faço pra saber se o meu é simples ou não? No mais estou fazendo exatamente como vc falou ,estou seguindo passo a passo ,cliquei em Expandir Modelos de Windgets,enfim fiz tudo ,e no momento em que aperto para visualizar ,antes de salvar modelo a mensagem que aparece é a 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: The value of attribute "src" associated with an element type "null" must not contain the '<' character."

    E com isso a etapa não é finalizada,será que vc consegue descobrir o que esta acontecendo? Enfim,não sei se ajuda mas caso precise o endereço de meu blog é: artebyflavia.blogspot.com
    Um abraço e muito obrigada!

    ResponderExcluir
  5. Oi Pedro,ufa! Nem acredito que consegui,descobri o que eu estava fazendo de errado ,ao invés de eu copiar apenas a url do mini gif ,eu estava copiando o endereço da imagem no formato HTML ,ou seja não ia nunca ,mas agora tudo resolvido um enorme beijo e já sou membra de seu blog que é um show ,adorei! Bye!

    ResponderExcluir
  6. Aew foi o único que deu certinho... Muito obrigado mesmo =D to felizzzzzzzzz

    ResponderExcluir
  7. Oi Kelven, desculpe a demora pra responder, é que minha vida tem estado uma verdadeira loucura com minhas encomendas. Olha ontem passei a noite quebrando a cabeça, li e reli tudo o que vc me escreveu e de tanto tentar acabei a certando! Rs...finalmente consegui! Não tenho nem como te agradecer por toda atenção e carinho, mais uma vez seu Blog e suas dicas dão um verdadeiro show! Estou montando um espaço em meu Blog para indicar outros Blogs que eu ache legal e com certeza o seu estará entre eles, obrigada pela ajuda mais uma vez! Forte abraço!!

    ResponderExcluir
  8. muito bom seu artigo, continue assim, comigo deu tudo certo e não tive problema algum. obrigado!

    ResponderExcluir
  9. oi boa tarde tmb não consegui será que poderia me ajudar a minha não aparece nada quando etnro em html não te a opção proseguir simplesmente aparece Reverter modelos de widget para o padrão plisss meajuda tmb queria colocar essas opçoes de marcdores na parte de cima do meu blog em horizontal como faço isso

    ResponderExcluir
    Respostas
    1. Acontece a mesma coisa com o meu blog. Nele não estas opções.

      Excluir
  10. por favor temho um blog políticacoroataense e quero colocar menu,até agora não conseguir já li muito na internet,ate agora não deu certo
    entre em contato:alvesgilson12@hotmail.com

    ResponderExcluir
  11. olá depois que mudou essa plataforma html do blogeer não to conseguindo achar mais nada

    ResponderExcluir
  12. Bom dia, eu estou adorando seu Blog, ele ensina muito bem, mas nesse post não estou conseguindo seguir as instruções, você comentou que só da para mudar na opção de Modelos Simples, mas eu escolhi um de Marca Dágua, tem como eu colocar os icones em cada marcador com esse modelo?Como? Obrigada Kah

    ResponderExcluir
  13. olá,
    Por favor me ajude eu sou nova no blog e não sei quase NADA...

    ResponderExcluir
  14. Ola! Fiz e deu super certo!! Ficou uma graça !! Obrigada!!

    ResponderExcluir
  15. Cara , qual é o link do seu marcador que usou como exemplo?

    ResponderExcluir
  16. Quando clico em editar html o que aparece é um código, não encontro a palavra PROSSEGUIR

    ResponderExcluir
  17. Vei fiz download de um template ae fico estranho com o desenho que eu coloquei como e tiro os icones agora ?

    ResponderExcluir
  18. Cara eu queria e saber como colocar un icone diferente em cada marcador

    ResponderExcluir
  19. Não estou achando meu o tírulo do meu marcador no HTML

    ResponderExcluir
  20. Gostaria de saber como colocar o icone acima do marcador e não ao lado.Obrigada!

    ResponderExcluir

Observe:
Faça seu comentário dentro do assunto tratado na postagem.
Não pode divulgar endereço de Sites ou Blog.
Comentário que conterem divulgação serão moderados, somente serão aceitos links caso necessite de informar alguma fonte.


Copyright © - Todos os Direitos Reservados: Várias Dicas para Blogs |
Design by Kelven Pedro | Tecnologia do Blogger - É Proibido a copia do conteúdo deste blog sem autorização
    Twitter Facebook