quinta-feira, 15 de julho de 2010

Caixa de notícias rolante em HTML

Este é um código totalmente em HTML.Ele gera uma caixa de notícias que rola pra cima, e quando o cursor fica sobre ele, a animação de rolagem fica mais lenta.

Você pode modificar as seguintes partes.

Azul - cor da borda
Vermelho - cor da caixa
Laranja - Título da caixa
Em negrito - Título da notícia
Em itálico - Texto da Notícia

Para adicionar uma nova notícia , copie a parte destacada de verde e cole abaixo dela mesma.


<table border="0" cellpadding="0"  cellspacing="1" style="border:solid blue 1px">
      <tr>
        <td bgcolor="red" height="18" style="color:#FFFFFF"><center><b>Notícias</b></center></td>
      </tr>
      <tr>
        <td>
          <marquee id="scroller" scrollamount="3" direction="up" onMouseOver="scroller.scrollAmount='1';scroller.style.cursor='default'" onMouseOut="scroller.scrollAmount='3'" style="width:125px; height:200px">
        <center>

        <table border="0" cellpadding="0"  cellspacing="1" width="125">
          <tr>
            <td height="18" class="title">
            <font color="black">Novidades</font><br>
            <hr align="left" size="1" color="#000" width="98%">
            <font color="black">Texto da notícia</font>
            </td>
          </tr><br/>
        </table>
           
        </center>
          </marquee>
        </td>

      </tr>
    </table>


Veja como vai ficar.

Notícias






Novidades


Texto da notícia



Marcadores: ,

10 Comentários:

Às 24 de julho de 2010 16:12 , Blogger André Conceição disse...

tem como colocar na noticia tb uma imagem

 
Às 24 de julho de 2010 16:55 , Blogger Códigos Blogger disse...

@André - Sim, tem como, irei fazer uma nova caixa de notícias com imagem em breve.Aguarde...
Abraços

 
Às 24 de setembro de 2010 13:28 , Blogger estorvo disse...

AMIGO COLOCA AI DUAS COISAS, COMO COLOCAR LINK NO BOTÃO DE DOWNLOAD, E EXPLICA COMO COLOCAR OS BANNERS AI COMO O SEUS PARCEIROPS AO LADO

 
Às 26 de setembro de 2010 18:02 , Blogger Leonardo Paiva disse...

Ola, saberia informar se ja saiu esse post com a imagem + resumo noticia.

Parabens pelo site,
Excelente.

 
Às 26 de setembro de 2010 19:26 , Blogger Leonardo Paiva - Clínica Holistetic disse...

Tem como a notícia ficar linkada a um URL (no caso de uma Postagem que ja tenha feito).

NO aguardo.
Obrigado

 
Às 26 de setembro de 2010 22:37 , Blogger Códigos Blogger disse...

@Leonardo - temos um post com noticia e imagem no lnk abaixo.

http://www.cblogger.tk/2010/07/caixa-de-noticias-com-image-rolante-em.html

Para adicionar link, coloque
<a href="LINK">Título, palavra ou texto</a>

depois copie esse código acima e cole em algum lugar da area verde.

 
Às 13 de abril de 2011 21:20 , Blogger Espoti disse...

cOLEGA, COMO FÇO PRA TIRAR A ROLAGEM DAS LETRAS...

 
Às 13 de abril de 2011 23:02 , Blogger Códigos Blogger disse...

@Espoti Substitua a parte

<marquee id="scroller" atée ...height:200px">

por

<div style="width:125px; height:200px">

Depois troque </marquee> por </div>

 
Às 8 de dezembro de 2011 00:27 , Blogger OEW disse...

tem como colocar os textos passando da direita para esquerda aos invez de para cima???

 
Às 16 de outubro de 2014 08:11 , Blogger Pedro Py disse...

Tinha que ser automatico

 

Postar um comentário

Se você gostou deste artigo deixe um comentário!

Duvidas ou sugestões comentem aqui! =D
*Não insultar autor ou leitores da postagens
*Não pedir parceria por comentários
*Não publicar spam ou similar.

Assinar Postar comentários [Atom]

Links para esta postagem:

Criar um link

<< Página inicial