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: