Organizando quebra-cabeças no blog

Fazer quebra-cabeças é divertido. E com o site Jigidi, fica muito fácil e automático. Quem quiser fazer e publicar no próprio blog, vai querer que fique tudo organizado, né?

No meu caso, eu uso tabelas e folhas de estilo(css) para organizar tudo. Vai exigir algum conhecimento de HTML, viu?

Primeiro, eu criei uma página para publicar os quebra-cabeças. Quem tem o Blogger já deve saber como de adiciona uma nova página. Na hora de editar o conteúdo dessa página, coloquem lá no topo o seguinte código.

<style>

.links a

{

 color: #fff;

 margin-top: 0px; 

 background:#7e2e91;

 padding:8px 14px;

 display:inline-block;

 font-size:12px;

 line-height:12px;

 text-decoration:none;

}

.links a:hover

{

 background: #BB1717;

}

.puzzle_item{

   background-color: #eaebec;

    border: 1px solid #000000;

           

}

.puzzle_item h3 a

{

 text-decoration: none;

 text-align:center;

 margin-left:5px;

}

.puzzle_item h3 a:hover

{

 text-decoration: underline;

}

.puzzle_item h3

{

 margin-bottom: 5px;

 font-size: 14px;

}

</style>

Esse é o código da folha de estilo que vai deixar tudo bem formatado. Agora tem as tabelas. É esse o código que eu uso para deixar tudo formatado:

<br />
<table border="0" cellpadding="0" cellspacing="0" class="puzzle_item"><tbody>
<tr>     <td valign="middle" width="144"><h3>
<a href="http://www.jigidi.com/solve.php?id=6GUKSXY4" target="_blank">Marina 15 anos - 104 peças</a></h3>
</td>     <td rowspan="2" valign="middle" width="144"><div align="center">
<a href="http://www.jigidi.com/solve.php?id=6GUKSXY4" style="margin-left: 1em; margin-right: 1em;" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijd2_hX4h8W7lafOqeY0gHGVM6bFQSix98kCBwUZXhXZKY9l34d7nI-XjcMjTeC3Ic7rw1H5v_I_GQ7-8AK4NfMkx4VmsK7ZKuTbYKql3v0DbFtz_Rz85beBE6ONuEqAUmSIcTL9rcZxV1/s1600/Marina15.jpg" /></a></div>
</td>     <td valign="middle" width="144"><h3>
<a href="http://www.jigidi.com/solve.php?id=21DAPI1J" target="_blank">Magali na praia - 150 peças</a></h3>
</td>     <td rowspan="2" valign="middle" width="144"><div align="center">
<a href="http://www.jigidi.com/solve.php?id=21DAPI1J" style="margin-left: 1em; margin-right: 1em;" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhS_kLPzcQA-NlZY_lm7XZB43-Q3XOJ-qYgHhefdABYf3vkKffkStBTvMhx8JgNzQVVhgomwQ0944KYT7qjDcJklouYR-C7fFZqloyW5-IdnUQ2jDlRlo2bKrf5AJb-r10nO9-aspQzB-nf/s1600/MagaliPraia.jpg" /></a><a href="http://www.jigidi.com/created.php?id=8FWDCV1I"></a></div>
</td>   </tr>
<tr>     <td height="56" valign="middle" width="144"><div class="links">
<div align="center">
<a href="http://www.jigidi.com/solve.php?id=6GUKSXY4" target="_blank">Resolver</a></div>
</div>
</td>     <td valign="middle" width="144"><div class="links">
<div align="center">
<a href="http://www.jigidi.com/solve.php?id=21DAPI1J" target="_blank">Resolver</a></div>
</div>
</td>   </tr>
</tbody></table>

E abaixo tem o resultado do código acima:

É complicado, eu sei. Para usar, será preciso estudar o código e saber onde colocar cada coisa. Mas pegando o jeito, depois fica simples. Quando tiver um quebra-cabeças só, coloca só no lado esquerdo da tabela. A imagem usada para ilustrar o quebra cabeça tem que ter 100 px de largura por 75 de altura.