Organizando quebra-cabeças no blog ~ TMJ do meu jeitoTMJ do Meu Jeito

quinta-feira, 21 de fevereiro de 2013

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="http://3.bp.blogspot.com/-71OUj_gkFZ0/USFkaa2uBgI/AAAAAAAABVQ/U3TmDHSZvR0/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="http://3.bp.blogspot.com/-qPf3rM1Z5NM/USFkaY6POpI/AAAAAAAABVI/dS7je_krfwY/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.



9 comentários:

  1. Respostas
    1. São só tabelas mesmo. Pra deixar mais fácil, faça a tabela no word e cole no seu blog. Depois vc vai inserindo as imagens lá dentro, mas tem que colocá-las no tamanho pequeno.

      Excluir
  2. Mallagueta, voce poderia postar nos tutoriais, como voce coloca um banner de outro blog no seu, né?

    ResponderExcluir
  3. Mallagueta, eu tento, tento, mais depois de publicar nada, como voce consegue?

    ResponderExcluir
    Respostas
    1. Na hora de escrever um post para o blog, vc vai ver dois botões acima da caixa de edição: "Excrever" e "HTML". Clique no botão html e coloque ali o código que eu te dei. Mas acho que pra quem não entende, fica complicado mesmo. Vou ver se consigo pensar num jeito mais simples e depois eu te falo.

      Excluir
  4. Muito obrigada Mallagueta, só não consegui colocar a imagem, não sei por que, eu coloquei o o URL e tudo certinho, mais pelo menos, o resto está tudo certo e formatado, só a imagem não apareceu, mais o nome está lá, o link funciona, muito obrigada mesmo, vou continuar tentando colocar a imagem, mais por enquanto, está bom, valeu

    ResponderExcluir
    Respostas
    1. Eu fiz um código em html pra servir de modelo. Assin vc estuda um pouco pra entender. Mas não dá pra postar aqui, então vou precisar do seu e-mail pra te enviar o código.

      Excluir
    2. Tudo bem, já te mandei o meu email na resposta rápida do gmail

      Excluir
    3. Obrigada Mallagueta, eu consegui colocar a imagem, valeu mesmo, ficou legal: http://portaltmjovemtm.blogspot.com.br/p/quebra-cabeca.html
      Valeu mesmo.

      Excluir