Marcadores em forma de letreiro digital

Em vez de colocar uma os marcadores do blog em forma de menu que tal mostrar como um letreiro digital (texto deslizando pela tela do computador)? Parece bem legal e o melhor muito fácil de fazer.

O primeiro passo é adicionar normalmente os marcadores (pagina layout, adicionar gadget, marcadores) no seu blog em forma de menu normal (lista), coloque um título qualquer neste gadget, salve e entre na pagina editar html. Antes de começar sugerimos fazer um backup do seu template, assim não correrá o risco de danificar o seu template.

Agora clique para expandir o modelo e procure pelo título que colocou nos seus marcadores, em nosso exemplo está com o nome Menu por assuntos. Veja abaixo como é o código original dos marcadores, note que o titulo do marcador aparece na primeira linha:

<b:widget id='Label1' locked='false' title='Menu por assuntos' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<span dir='ltr'/>
</li>
</b:loop>
</ul>

<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Agora troque o trecho em negrito por esse aqui:

<marquee onmouseout='this.start()' onmouseover='this.stop()' scrollamount='1' scrolldelay='1'>
<b:loop values='data:labels' var='label'>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<span dir='ltr'/>
</b:loop></marquee>

Clique para visualizar seu blog e se aparecer corretamente salve as alterações. Para melhorar a visualização dos marcadores sugerimos acrescentar um espaço entre as palavras, para fazer isso é muito simples, veja na primeira linha do código dos marcadores:

<b:widget id='Label1' locked='false' title='Menu por assuntos' type='Label'>

A parte id='Label1' identifica e torna possível formatar esse gadget separadamente, veja o que está escrito na id do seu blog, então ainda na pagina editar html encontre:

]]></b:skin>
</head>

E coloque o código abaixo antes dessas linhas.

#Label1 a{padding:10px}

Lembre-se a parte Label1 é apenas um exemplo precisa usar como aparecer no seu blog. Assim teremos um espaço separando as palavras e se quiser pode usar esse mesmo estilo para dar uma formatação especial nos links dos seus marcadores. Se quiserem vejam aqui como modificar o código do letreiro digital, ele controla a direção e velocidade que o texto desliza pela sua pagina. Veja em nosso blog Dicas de Sites e Interessantes os marcadores deslizando pela pagina.

24 comentários :

  1. Eu deixei o link de vocês la no meu blog passa lá pra ver:
    www.dicamusic.blogspot.com
    sempre vejo as dicas de voces estou procurando por um contador de visitas vocês sabem onde eu acho?

    ResponderExcluir
  2. aqui tem varios contadores de visitas

    http://www.dicasparablogs.com.br/2009/02/usando-melhor-os-contadores-de-visitas.html

    ResponderExcluir
  3. edilene - amor

    o exemplo está no link

    http://dicasdesitesuteis.blogspot.com

    veja na coluna ao lado das postagens logo no inicio as palavras passando são os marcadores

    ResponderExcluir
  4. Ae Fabiano Roberto, é que eu to editando um template (emanoel-testes.blogspot.com) e quero saber como eu puxo as colunas mais para a esquerda, que tá muito curta!!! se puder ajudar ai ;)

    ResponderExcluir
  5. Interessando o assunto !

    Eu fiz 2 marcadores em meu blog, um normal e outro em forma de letreiro digital .

    Eu copiei no HTML o codigo do marcador e colei o codigo de novo so que com o marcador, ficou legal !

    Valeu

    ResponderExcluir
  6. €MΔŇØ€Ł 3D
    veja aqui como alterar os espaços entre as colunas
    http://www.dicasparablogs.com.br/2009/12/espaco-entre-as-colunas-do-blog.html

    ResponderExcluir
  7. muito brigado pela dica, continuem com o ótimo trabalho, afinal um blog não é so uma diversão é trabalho serio para muitos, inclusive para vocês.

    http://cervejanocerebro.blogspot.com/
    Obrigado

    ResponderExcluir
  8. muito bom, vcs ajudam bastante

    precisando de alguma coisa tamos aew

    www.baixatudoporaki.co.cc

    ResponderExcluir
  9. olá amigo...cara tow prescisando de ajuda meu blog tem um frame do google e não sai de jeito nenhum como eu tiro ele?? me ajuda ai tow prescisando da uma olhada ai pra vc ve
    http://variedad-net.blogspot.com/
    obrigado

    ResponderExcluir
  10. tarson
    frame do google? não sei do que está falando, quer dizer os anuncios? se baixou o template e já veio com eles não posso dizer como retirar pois foi uma escolha de quem criou o template.

    ResponderExcluir
  11. mais uma vez tive problemas: não achei os códigos a serem modificados. "/

    será que vou ter que colocar um layout padrão e modificar tudo o que eu tinha modificado de novo?

    ResponderExcluir
  12. eu colei html e deu erro na hora de visualizar e salvar

    ResponderExcluir
  13. igor
    cuidado nos detalhes, qualquer letra faltando ou sobrando faz dar erro, sempre é assim.

    ResponderExcluir
  14. OLA GOSTEI MT DA DICA, MAIS NÃO TEM COMO EFEITO FICAR NA VERTICAL?
    BJUS

    ResponderExcluir
  15. é possivel colocar na posição vertical, no trecho scrollamount='1' adicione direction='up'

    ResponderExcluir
  16. Você tem me ajudado muitíssimo... com suas dicas e ensinamentos...

    esse site0blog é mesmo d +

    Parabéns

    ResponderExcluir
  17. Bruno
    primeiro precisa adicionar os marcadores pela pagina layout, depois fazer as alterações no código na pagina editar html(precisa clicar para expandir o modelo)

    ResponderExcluir
  18. eai fabiano descupa eu pf eu estava descrontrolado entao me descupa e eu gostei das suas postagem até mais nao ponhe esse comentario no comentario em falar nisso como fais isso de aprovar os comentarios

    ResponderExcluir
  19. a lista dos meus seguidores sumiu do meu blog!!!
    tanto quanto eu muitas pessoas não estaõ conseguindo ver tbm!!!! o que eu faço?

    ResponderExcluir
  20. GOTIKANGEL
    varias pessoas estão reclamando dos seguidores do blog.. .talvez o gadget esteja com algum defeito temporario

    ResponderExcluir
  21. fabiano tenho uma pergunta tem como eu ta modificando a cor desses links dos marcadores

    ResponderExcluir
  22. no trecho

    #Label1 a{padding:10px}

    você pode colocar a cor, assim:

    #Label1 a{padding:10px;color:#000;}

    e se quiser pode escolher a cor para quando o mouse estiver sobre o mouse usando esse código:

    #Label1 a:hover{padding:10px;color:#ffc}

    veja aqui o Código das Cores

    .

    ResponderExcluir