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.

Veja mais Dicas e Tutoriais: > Códigos > Personalizar