Follow Us @soratemplates

sábado, 18 de agosto de 2012

Modelos de Postagem(3): Tables Kawaii

Olá! Antes de dar início ao conteúdo do post de hoje, quero agradecer demais a Camila Angelina, do blog Cantinho da Caps, que, na 1ª edição de sua revista mensal, indicou o Reino Kawaii como um dos destaques do mês! Isso me deixou muito feliz! Recomendo conhecer o blog dela e claro, ler sua revista que por sinal, está perfeita! E o melhor é que a Camila é super gentil com todos <3
Bom, vamos ao post! Dando sequencia ao que se pode fazer com modelos de postagem, vamos brincar um pouco com as tables em HTML. Com elas podemos formar caixinhas de textos, modelinhos para perfil (como o que deixei para vcs no fim da postagem anterior) e até mesmo usar como blockquote kawaii ^-^ Se você ainda não as conhece bem, vou tentar descrever com minhas palavras o que pude entender...
As tables, representadas em HTML por <table>, são divididas em linhas com a tag <tr> e podem conter dados inseridos nessas linhas com a tag <td>; esses dados incluem textos, imagens, links, formulários, outras tables...e também pode ser aplicado estilos para o que se insere dentro delas. Outras tags que podem possuir são: bordas (<table border="1">), título/cabeçalho centralizado em negrito (<th>), legenda (<caption>), colunas (<colgroup>), atributos para colunas (<col />), conteúdo do cabeçalho (<thead>), conteúdo do "corpo", ou seja, a parte em que se escreve, add imagens...(<tbody>), rodapé (<tfoot>), entre outras coisas. E elas podem ficar super cute! Para vocês terem um idéia...

Isso aqui é uma table
Esses modelos de tables que vou mostrar para vocês foram encontrados em alguns sites japoneses que visitei, os quais credito na Mini FAQ, onde aprendi a usá-las. É legal então que você tenha algumas imagens salvas para usar como background ou borda ok? E caso queira usá-las sempre, lembre-se: vá em Configurações-Postagens e Comentários-Modelos de Postagem e cole o código da table.
Modelo1: Table com uma imagem como background

TEXTO TEXTO TEXTO
É o caso do exemplo acima e do menu que uso atualmente com as páginas do blog, lá no cabeçalho. Código:
<table width="256" height="220" border="0" cellspacing="0" cellpadding="0" background="URL DA IMAGEM">
<tr><td height="46px"> </td></tr>
<tr>
<td height="2" valign="top" align="center">
<div id="1" style="position:relative; width:182px; height:104px; z-index:1; visibility: visible; overflow: auto;">
<font face="arial" size="1" color="pink">
<center>
TEXTO TEXTO TEXTO
</center>
</div>
</td></tr>
</table>
As áreas que sublinhei são as básicas para receber personalizações e se referem aos tamanhos de imagens, altura, largura, estilo da fonte, tamanho da fonte, cor da fonte, tamanho da área do texto...De acordo com a imagem que você usar, altere cada valor.
Imagens para você usar (as 10 últimas imagens podem ser ampliadas e são molduras para mensagens que uso no Android com o Emoji Mail :):
Modelo2: Table formada com mais de uma imagem

texto texto texto

A outra maneira de construir uma table kawaii é juntando imagens para formá-la. Nesse caso, o ideal é que suas imagens não tenham bordas porque senão as imagens da table ganharão bordas também.
Código:
<table cellpadding="0" cellspacing="0">
<tbody>
<tr><td>
<img src="URL DA IMAGEM1" width="69" height="41" border="0"></td><td background="URL DA IMAGEM2"></td><td><img src="URL DA IMAGEM3" width="70" height="41" border="0"></td></tr><tr><td background="URL DA IMAGEM4"></td><td bgcolor="#ffffff" width="210" height="108" align="center">

texto texto texto


</td><td background="URL DA IMAGEM5"></td></tr><tr><td>
<img src="URL DA IMAGEM6" width="69" height="41" border="0"></td>
<td background="URL DA IMAGEM7"></td>
<td><img src="URL DA IMAGEM8" width="70" height="41" border="0"></td></tr></tbody></table>
As áreas destacadas em negrito são as que devem ser alteradas. Note que você pode inserir mais de 1 imagem ou até mais de 8 imagens; para cada uma, especifique a largura e a altura. A cor de fundo da área do texto (no caso #ffffff) também pode ser alterada.
Conjuntinhos de imagens:
   
   
 


Agora é só ir editando os códigos e adicionando efeitos ao seu gosto ^-^

Modelos Prontos
Copie o código dentro da table que mais gostar :3

<table width="256" height="220" border="0" cellspacing="0" cellpadding="0" background="http://2.bp.blogspot.com/-cju-abf9zZ4/UC_ApfckN0I/AAAAAAAADSQ/VmLWXKW_iaA/s1600/hime5.gif">
<tr><td height="46px"> </td></tr>
<tr>
<td height="2" valign="top" align="center">
<div id="1" style="position:relative; width:182px; height:104px; z-index:1; visibility: visible; overflow: auto;">
<font face="Lobster" size="1" color="pink">
<center>
TEXTO
</center>
</div>
</td></tr>
</table>


<table width="300" height="300" border="0" cellspacing="0" cellpadding="0" background="http://4.bp.blogspot.com/-o7AvnINM5WE/UC_AsGok4bI/AAAAAAAADTA/DM2rndqJPRY/s1600/welcome2.gif">
<tr><td height="126px"> </td></tr>
<tr>
<td height="70" valign="top">
<div id="1" style="position:relative; width:182px; height:134px; z-index:1; visibility: visible; overflow: auto;">
<font face="Lobster" size="1" color="blue">
<center>
TEXTO
</center>
</div>
</td></tr>
</table>

<table cellpadding="0" cellspacing="0">
<tbody>
<tr><td>
<img src="http://3.bp.blogspot.com/-0ZYTOe4vQlo/UC_HviJKzSI/AAAAAAAADcA/AtLZd7sMgw8/s1600/ribonpink1_2.gif" width="69" height="41" border="0"></td><td background="http://4.bp.blogspot.com/-luGz4eCIHxI/UC_HwGpx9xI/AAAAAAAADcI/IStA3tKA49Q/s1600/ribonpink2_2.gif"></td><td><img src="http://3.bp.blogspot.com/-74Jq1jfiW94/UC_HwTHMX4I/AAAAAAAADcQ/yXTvbI-D5k0/s1600/ribonpink3_2.gif" width="70" height="41" border="0"></td></tr><tr><td background="http://1.bp.blogspot.com/-Uq6O36NgFJI/UC_Hwumb3qI/AAAAAAAADcY/1LPzG-c2aaU/s1600/ribonpink4_2.gif"></td><td bgcolor="#ffffff" width="210" height="108" align="center">

TEXTO


</td><td background="http://1.bp.blogspot.com/-yfIqYPBLfeA/UC_Hxaq9MxI/AAAAAAAADcg/J-6c8PevMMg/s1600/ribonpink5_2.gif"></td></tr><tr><td>
<img src="http://3.bp.blogspot.com/-vNrMnrCV1T4/UC_Hxi8jyaI/AAAAAAAADco/SBxs_KV4z-w/s1600/ribonpink6_2.gif" width="69" height="41" border="0"></td>
<td background="http://2.bp.blogspot.com/-ehZt50ya1z0/UC_HytQSY-I/AAAAAAAADcw/WuWL81U8Pac/s1600/ribonpink7_2.gif"></td>
<td><img src="http://3.bp.blogspot.com/-LQU8R6sf-Vw/UC_Hy75w6xI/AAAAAAAADc4/EQ3qnwy5s_I/s1600/ribonpink8_2.gif" width="70" height="41" border="0"></td></tr></tbody></table>

<table cellpadding="0" cellspacing="0">
<tbody>
<tr><td>
<img src="http://1.bp.blogspot.com/-M27XTGxkCZg/UC_Ir8QZUII/AAAAAAAADeI/J23sINYxIig/s1600/rose_lace_1.gif" width="68" height="65" border="0"></td><td background="http://1.bp.blogspot.com/-oNUDOdq-Ekc/UC_ItSWIsmI/AAAAAAAADeY/eCR8XEZ_RPU/s1600/rose_lace_2.gif"></td><td><img src="http://2.bp.blogspot.com/-ofNdaF8HsQU/UC_IuKHWHcI/AAAAAAAADeo/bPMkBus3YSs/s1600/rose_lace_3.gif" width="68" height="65" border="0"></td></tr><tr><td background="http://2.bp.blogspot.com/-38Ur9O9PZp8/UC_Iu4Ajs5I/AAAAAAAADe4/IpA_VQwTmmM/s1600/rose_lace_4.gif"></td><td bgcolor="#ffffff" width="264" height="265" align="center">

TEXTO


</td><td background="http://1.bp.blogspot.com/-ZWVpXXsh-ag/UC_IvmGQjPI/AAAAAAAADfI/Ed2df0J01Xs/s1600/rose_lace_5.gif"></td></tr><tr><td>
<img src="http://2.bp.blogspot.com/-x4x71qDnpO4/UC_IwRHrd3I/AAAAAAAADfY/7mRihGEn7pg/s1600/rose_lace_6.gif" width="68" height="64" border="0"></td>
<td background="http://2.bp.blogspot.com/-lYRwGtZirho/UC_IxaApDzI/AAAAAAAADfo/5MRum4GSGR4/s1600/rose_lace_7.gif"></td>
<td><img src="http://3.bp.blogspot.com/-jy5genqFP78/UC_IyX-VpvI/AAAAAAAADf4/E2JkLSMHWkw/s1600/rose_lace_8.gif" width="67" height="64" border="0"></td></tr></tbody></table>

Kawaii Profile

<table cellpadding="0" cellspacing="0" style="width: 240px;">
<tbody>
<tr><td align="center" background="http://i203.photobucket.com/albums/aa237/hanappi/gal/emmie/img_247663_16552201_26a.gif" height="136" valign="bottom"><span style="color: #ff0080; font-family: tahoma; font-size: small;">TÍTULO  </span></td></tr>
<tr><td align="center" background="http://i203.photobucket.com/albums/aa237/hanappi/gal/emmie/pink.gif" bgcolor="#FFFFFF" valign="top"><span style="color: #ff0080; font-family: tahoma; font-size: xx-small;"> <br />

TEXTO

</span></td></tr>
<tr><td align="center" bgcolor="#FFA2D1" colspan="6"><span style="color: #ff0080; font-family: tahoma; font-size: xx-small;"><a href="http://www.link.com"><b><span style="color: white; font-family: tahoma; font-size: xx-small;">LINK 1</span></b></a><span style="color: white; font-family: tahoma; font-size: xx-small;"><a href="http://www.link.com"><b><span style="color: white; font-family: tahoma; font-size: xx-small;">LINK 2</span></b></a><span style="color: white; font-family: tahoma; font-size: xx-small;"><a href="http://www.link.com"><b><span style="color: white; font-family: tahoma; font-size: xx-small;">LINK 3</span></b></a><span style="color: white; font-family: tahoma; font-size: xx-small;"><a href="http://hanako-lovely.livejournal.com/"><b><span style="color: white; font-family: tahoma; font-size: xx-small;">Crédito</span></b></a> </span></span></span></span></td></tr>
</tbody></table>
LINK 1  LINK 2  LINK 3  Crédito

Cute Profile
About me... 

TEXTO


About my Blog 

TEXTO

Código

Links e Créditos 

LINK 1 x LINK 2 x LINK 3 x LINK 4 x LINK 5 x Crédito
<table border="0" cellpadding="0" cellspacing="0" style="width: 600px;">
<tbody>
<tr><td height="400" rowspan="2" width="300"><img height="400" src="http://4.bp.blogspot.com/-T8SS6P8bEIk/UCko3QoxbcI/AAAAAAAADJA/6ueqHKw9kMs/s400/tumblr_m8an9waxkS1rbtme1o1_500_large.jpg" class="alignleft" width="302" /></td>
<td bgcolor="#fee" height="400" rowspan="2" width="10"></td>
<td align="right" bgcolor="#fee" height="50" width="290"><span style="color: #ff7498; font-family: times new roman; font-size: x-large;"><i>Cute Profile<i></i></i></span></td></tr>
<tr><td align="left" bgcolor="#fee" height="350" valign="top" width="290"><div style="color: #e06666; text-align: center;">
<span style="font-family: tahoma; font-size: xx-small;">
<span style="font-size: x-small;"><b>About me...</b></span>&nbsp;</span></div>
<div style="color: #e06666;">
<br /></div>
<div style="color: #e06666;">
<span style="font-family: tahoma; font-size: xx-small;">TEXTO</span></div>
<div style="color: #e06666;">
<br /></div>
<div style="color: #e06666;">
<br /></div>
<div style="color: #e06666; text-align: center;">
<span style="font-family: tahoma; font-size: xx-small;"><span style="font-size: x-small;"><b>About my Blog</b></span>&nbsp;</span></div>
<div style="color: #e06666; text-align: left;">
<br /></div>
<div style="color: #e06666; text-align: left;">
<span style="font-family: tahoma; font-size: xx-small;">TEXTO</span></div>
<div style="color: #e06666;">
<br /></div>
<div style="color: #e06666; text-align: center;">
<span style="font-family: tahoma; font-size: xx-small;"><span style="font-size: x-small;"><b>Links e Créditos</b></span>&nbsp;</span></div>
<br />
<span style="color: #ffcccc; font-family: tahoma; font-size: xx-small;"><a href="http://www.link.com/"><b><span style="color: #ff7498; font-size: xx-small;">LINK 1</span></b></a> x <a href="http://www.link.com/"><b><span style="color: #ff7498; font-size: xx-small;">LINK 2</span></b></a> x <a href="http://www.link.com/"><b><span style="color: #ff7498; font-size: xx-small;">LINK 3</span></b></a> x <a href="http://www.link.com/"><b><span style="color: #ff7498; font-size: xx-small;">LINK 4</span></b></a> x <a href="http://www.link.com/"><b><span style="color: #ff7498; font-size: xx-small;">LINK 5</span></b></a> x <a href="http://hanako-lovely.livejournal.com/"><b><span style="color: #ff7498; font-size: xx-small;">Crédito</span></b></a>
</span></td>
</tr>
</tbody></table>

<TABLE border="0" cellpadding="0" cellspacing="0">
  <TBODY>
    <TR>
      <TD><IMG src="http://1.bp.blogspot.com/-qV6s-IMOuDo/UC_EFLsjLZI/AAAAAAAADVA/h8pYmR9wHC4/s1600/hidariue.gif" width="47" height="39" border="0"></TD>
      <TD background="http://3.bp.blogspot.com/-sef-TbJzBoQ/UC_EHfTXa4I/AAAAAAAADVw/CzKOAn2vipU/s1600/ue.gif" width="56"></TD>
      <TD><IMG src="http://4.bp.blogspot.com/-4tWmt7lPk0g/UC_EF679mlI/AAAAAAAADVQ/IIMp2XgcCNQ/s1600/migiue.gif" width="47" height="39" border="0"></TD>
    </TR>
    <TR>
      <TD <BODY background="http://1.bp.blogspot.com/-HrA1KeB7s58/UC_ED5g4PaI/AAAAAAAADU4/wdhpSmkZvVk/s1600/hidarinaka.gif" width="47"></TD>
      <TD align="center"bgcolor="#ffffff"><FONT size="2"><bgcolor="#ffffff">


TEXTO

</FONT></TD>
      <TD background="http://4.bp.blogspot.com/-se_1jJDfKEw/UC_EFj17UWI/AAAAAAAADVI/_nsJ414HZC8/s1600/miginaka.gif" width="47"></TD>
    </TR>
    <TR>
      <TD><IMG src="http://1.bp.blogspot.com/-6lwyP_WdC_A/UC_EGnBd0MI/AAAAAAAADVg/qqh_9sFD2fc/s1600/sitahidari.gif" width="47" height="39" border="0"></TD>
      <TD background="http://4.bp.blogspot.com/-8xk6J8Kpi38/UC_EGFXkKeI/AAAAAAAADVY/RY_GhTlglAU/s1600/sita.gif"></TD>
      <TD><IMG src="http://1.bp.blogspot.com/-yH2aX_T0t_o/UC_EHGjYR7I/AAAAAAAADVo/89WCacbgCYs/s1600/sitamigi.gif" width="47" height="39" border="0"></TD>
    </TR>
  </TBODY>
</TABLE>



<TABLE border="0" cellpadding="0" cellspacing="0">
<TBODY>
<TR>
<TD valign="bottom"><IMG src="http://4.bp.blogspot.com/-v51scjEhObw/UC_E0_StmQI/AAAAAAAADWQ/y1mcAvZueDI/s1600/hidariue.gif" width="8" height="8" border="0"></TD>
<TD style="background-image : url(http://1.bp.blogspot.com/-LhH4JZ596K8/UC_E2i5S74I/AAAAAAAADW4/bzzl1Xtpo_4/s1600/ue.gif);background-repeat : repeat-x;background-position : center bottom;" align="center"><IMG src="http://3.bp.blogspot.com/-7r4U_UjjI2E/UC_EztkrVoI/AAAAAAAADV4/a3tchindCFQ/s1600/girl.gif" width="196" height="43" border="0"></TD>
<TD valign="bottom"><IMG src="http://3.bp.blogspot.com/-bGC50oBVFYk/UC_E1__DuPI/AAAAAAAADWo/YtZtp-IuYKg/s1600/migiue.gif" width="8" height="8" border="0"></TD>
</TR>
<TR>
<TD style="background-image : url(http://1.bp.blogspot.com/-M4Tgh-FtRdE/UC_Ez7uKJQI/AAAAAAAADWA/p5lZhgS2M6g/s1600/hidari.gif);background-repeat : repeat-y;"></TD>
<TD  bgcolor="#ffffff"><BR>
<BR>
texto<BR>
<BR>
<BR>
</TD>
<TD style="background-image : url(http://3.bp.blogspot.com/-9sVYl4oLmoI/UC_E1JCv9wI/AAAAAAAADWY/dmMSoQJ1X0w/s1600/migi.gif);background-repeat : repeat-y;"></TD>
</TR>
<TR>
<TD><IMG src="http://4.bp.blogspot.com/-nfjDDytCOP4/UC_E0XwclNI/AAAAAAAADWI/iwiR7M0tISU/s1600/hidarisita.gif" width="8" height="8" border="0"></TD>
<TD style="background-image : url(http://3.bp.blogspot.com/-rxUflAsp4N4/UC_E2f5PzcI/AAAAAAAADWw/waNz91YTzMM/s1600/sita.gif);background-repeat : repeat-x;"></TD>
<TD><IMG src="http://4.bp.blogspot.com/-JHejUMA92AI/UC_E1ipSt2I/AAAAAAAADWg/LfzXPE2IYAE/s1600/migisita.gif" width="8" height="8" border="0"></TD>
</TR>
</TBODY>
</TABLE>



Ufa!!! Basta copiar os códigos e substituir onde estiver escrito TEXTO pelo que quiser ^-^
Espero que gostem e beijus<3
Créditos: Hanako, Ichigo Hime (Chu Itigo), Love Candied e Asterism (links na F.A.Q).

7 comentários:

  1. Amei o tuto floor, seguindo aqui . segue ?http://estacao-teen.blogspot.com.br/

    ResponderExcluir
  2. Fico mega contente que tenha gostado e claro que sim, em breve vou visitá-la tbm ^^
    Beijus<3

    ResponderExcluir
  3. Oi queridaaaaa! Fui no Google buscar modelo de postagem e ele me trouxe pra cah(desculpa a falta de acento, o teclado tah desconfigurado)vc jah estah no favoritos e jah sigo faz tempo!! Quando abrir uma vaguinha na elite lembra de mim! Ah! Tem selinho pra vc lah no meu blog!

    http://facebook.com/brogandome/
    http://brogandome.blogspot.com/
    http://saorimonroecobain.tumblr.com
    @carolposeidon

    ResponderExcluir

Muito obrigada por seu comentário e por sua presença! Ambos são super importantes para mim.

Apenas peço que:
- Comente a vontade, dê sua opinião, faça críticas, esclareça suas dúvidas e dê suas sugestões sobre o assunto referente às postagens;
- Use um vocabulário livre para todas as idades;
- Não ofenda ninguém em hipótese alguma.

Os comentários são moderados e não são permitidos comentários de pessoas que não se identifiquem. Algumas dúvidas podem ser previamente esclarecidas na F.A.Q, assim como créditos e outras coisas.

Por favor, entrem em contato por meio das redes sociais também para dúvidas, sugestões, pedidos ou outros:
Facebook - Twitter - Google+ - Deviantart