Como inserir caixas coloridas em seu blogspot


Neste breve artigo vou te mostrar como você pode usar tabelas para criar caixas incríveis para o seu blog e destacar algumas informações dentro do seu conteúdo.

➔ Modelo de caixa Um:


Seu Título Aqui
A descrição que você deseja 
Acrescentar: Texto, telefones, e-mail, etc..

Código HTML da Caixa Um:


<table bgcolor="#165480" border="0" cellpadding="3" cellspacing="1" style="width: 300px;">
<tbody>
<tr>
   <td bgcolor="#5FA6D7"><span style="font-family: &quot;verdana&quot; , &quot;arial&quot; , &quot;helvetica&quot;;"><b>Seu Título Aqui</b></span></td>
</tr>
<tr>
    <td bgcolor="#ffffcc"><span style="font-family: &quot;verdana&quot; , &quot;arial&quot; , &quot;helvetica&quot;;">
   A descrição que você deseja&nbsp;</span><br />
<span style="font-family: &quot;verdana&quot; , &quot;arial&quot; , &quot;helvetica&quot;;">Acrescentar: Texto, telefones, e-mail, etc..</span></td>
</tr>
</tbody></table>
<br />

-------------------------------------------------------------------

➔ Modelo de caixa Dois:


Uma chamada em destaque:
+ Opção um com Nº
+ Opção dois com texto
+ O que você quiser destacar
+ Última opção

Código HTML da Caixa Dois:


<table bgcolor="#80A93E" border="0" cellpadding="3" cellspacing="1" style="width: 400px;">
<tbody>
<tr>
   <td bgcolor="#B7F259"><span style="font-family: &quot;verdana&quot; , &quot;arial&quot; , &quot;helvetica&quot;; font-size: large;"><b>Uma chamada em destaque:</b></span></td>
</tr>
<tr>
   <td bgcolor="#F5ECB9"><table align="center" border="0" cellpadding="1" cellspacing="1" style="width: 95%px;">
<tbody>
<tr>
   <td valign="top"><span style="color: #990000; font-family: &quot;verdana&quot; , &quot;arial&quot; , &quot;helvetica&quot;; font-size: large;">+</span></td>
   <td><span style="color: #990000; font-family: &quot;verdana&quot; , &quot;arial&quot; , &quot;helvetica&quot;; font-size: large;">

Opção um com Nº</span></td>
   </tr>
<tr>
      <td valign="top"><span style="color: #990000; font-family: &quot;verdana&quot; , &quot;arial&quot; , &quot;helvetica&quot;; font-size: large;">+</span></td>
   <td><span style="color: #990000; font-family: &quot;verdana&quot; , &quot;arial&quot; , &quot;helvetica&quot;; font-size: large;">
Opção dois com texto</span></td>
   </tr>
<tr>
      <td valign="top"><span style="color: #990000; font-family: &quot;verdana&quot; , &quot;arial&quot; , &quot;helvetica&quot;; font-size: large;">+</span></td>
      <td><span style="color: #990000; font-family: &quot;verdana&quot; , &quot;arial&quot; , &quot;helvetica&quot;; font-size: large;">
O que você quiser destacar</span></td>
   </tr>
<tr>
      <td valign="top"><span style="color: #990000; font-family: &quot;verdana&quot; , &quot;arial&quot; , &quot;helvetica&quot;; font-size: large;">+</span></td>
      <td><span style="color: #990000; font-family: &quot;verdana&quot; , &quot;arial&quot; , &quot;helvetica&quot;; font-size: large;">
Última opção
      </span></td>
   </tr>
</tbody></table>
</td>
</tr>
</tbody></table>
<br />

----------------------------------------------------------

Tabela de cores HTML online:


 https://www.htmlcsscolor.com

 https://www.color-hex.com


Compartilhe:

Fale conosco:

Nome

E-mail *

Mensagem *