sábado, 24 de julho de 2010

Caixa de notícias com imagem rolante em HTML

http://www.memoria-progressiva.pt/images/noticia_icon.jpgEste é outro código totalmente em HTML de uma caixa de notícia rolante, que 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
Roxo - URL da imagem
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:double #dcdcdc 3px">
      <tr>
        <td bgcolor="black" 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>
             <div style="border:3px double #888888; width:115px; height:90px; ">
                   <img src="URL DA IMAGEM"></div>
            <hr align="left" size="1" color="#000" width="98%">
            <font color="black">Texto da notícia</font>
            </td>
          </tr><br/>

        </center>
          </marquee>
        </td>

      </tr>
    </table>

Marcadores: ,

Como mostrar apenas os títulos das postagens na página inicial do blog

http://vidaordinaria.files.wordpress.com/2008/05/icon_notepad.jpgCaso queira deixar seu blog mais acessível para seus leitores, está é uma ótima opção,deixe apenas os títulos na página inicial do seu blog, assim , seu blog ficará mais parecido com um site profissional.

Vamos lá!

Faça o login no blogger, vá em "Design" - "Editar HTML".

Em seguida marque a caixinha  "Expandir modelos de widget".

Dê um 'CTRL + F' e procure por:

<b:include data='post' name='post'/>

Substitua essa parte por:

 <b:if cond='data:blog.pageType != "item"'>
         <a expr:href='data:post.url'>
         <li></li><data:post.title/></a><br/><br/>
     <b:else/>
         <b:include data='post' name='post'/>
     </b:if>  

Logo após, visualize, e se estiver tudo certo, Salve!

Marcadores: ,