Webquest em postagem do blog (no Blogger) - 2

Agora vou explicar os passos para conseguir colocar um elemento para Webquets em postagens do Blogger, como o mostrado no post anteior. Não é algo tão fácil assim, exigindo certo conhecimento de HTML; contudo, não é impossível que alguém -- com cuidado e atenção -- faça o procedimento. Porém, se você prosseguir, o risco é seu. (Se está inseguro, que tal testar num blog de testes? Acho essa uma boa ideia, quando estamos aprendendo ou com menor confiança.)

Testei o método em outro blog, um que utiliza o modelo antigo do Blogger, e também deu certo. Você pode ver o resultado (em termos de exemplo) na postagem anterior.

Os passos são apenas três, mas devem ser feitos com bastante atenção, sobretudo o segundo que envolve mudança no Modelo (Template). Em casos como esse, como o próprio Blogger recomenda, antes da alteração, faça o download (backup) do Modelo existente, pois caso ocorra algum problema, você simplesmente fará o upload do arquivo e restaurará seu blog. (Os problemas comuns são erros de digitação, de fechamento de tag, coisas pequenas como essas provocam, todavia, problemas na interpretação da codificação.)

Vamos aos passos:

1) Em primeiro lugar, você deve fazer o download dos seguintes arquivos (clique com o botão direito do mouse nos links e escolha "Salvar link como..." ou termo similar -- depende do navegador):
tabcontent.css
tabcontent.js

Ainda nessa etapa, você irá colocar esses arquivos num repositório on-line. Recomendo o Drop-box (leia aqui), mas pode ser outro, contanto que seja num repositório e num espaço deste que dê um link público.

2) Agora, você copiará os endereços públicos dos arquivos que foram baixados antes por você nos locais em vermelho respectivos (conforme cada um dos nomes dos arquivos), no código abaixo.

<link rel="stylesheet" type="text/css" href="http://seu_endereço/tabcontent.css" /> <script type="text/javascript" src="http:////seu_endereço/tabcontent.js"> /*********************************************** * Tab Content script v2.2- © Dynamic Drive DHTML code library (www.dynamicdrive.com) * This notice MUST stay intact for legal use * Via http://BloggerStop.Net * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code ***********************************************/ </script>

Como você deve notar, há um crédito (merecido) aos dois sites que desenvolveram essa codificação (o Dynamic Drive e o BloggerStop). Porém, isso só é visto no código. E este deve ser, agora, colado na parte HTML de seu Modelo.

Para isso, você deve estar na zona interna do blog e clicar no ícone Modelo (no canto inferior esquerdo da tela). Aproveite e faça agora o Backup do seu modelo (veja o botão no canto superior direito).

Tendo feito o backup, entre em "Editar HMTL" (que é um botão mais ao centro da tela) e, chegando na codificação do Modelo, encontre (use Crtl+F) a tag </head>. Agora cole o código alterado (com os novos endereços) imediatamente antes da marcação (tag) mencionada. Pode deixar espaço (quebra de linha).

3) Nesse passo final, o BloggerStop (aqui) recomendou colocar um gadget HTML (via Layout), porém -- pensando no uso para Webquest é que resolvi testar no espaço da postagem e, realmente, para esse objetivo é uma opção mais interessante.

Sendo asim, crie uma postagem e, no espaço de edição HTML, copie o código abaixo.

<ul id="countrytabs" class="shadetabs"> <li><a href="#" rel="country1" class="selected">Introdução</a></li> <li><a href="#" rel="country2">Tarefa</a></li> <li><a href="#" rel="country3">Processo</a></li> <li><a href="#" rel="country4">Recursos</a></li> <li><a href="#" rel="country5">Avaliação</a></li> </ul> <div style="border:1px solid gray; width:450px; margin-bottom: 1em; padding: 10px"> <div id="country1" class="tabcontent"> Introdução aqui<br /> </div> <div id="country2" class="tabcontent"> Tarefa aqui<br /> </div> <div id="country3" class="tabcontent"> Processo aqui<br /> </div> <div id="country4" class="tabcontent"> Recursos aqui<br /> </div> <div id="country5" class="tabcontent"> Avaliação aqui<br /> </div> </div> <script type="text/javascript"> var countries=new ddtabcontent("countrytabs") countries.setpersist(true) countries.setselectedClassTarget("link") //"link" or "linkparent" countries.init() </script>

Uma vez que você tenha colocado isso na postagem, pode até publicar para ver como fica. Quando abrir de novo, notará algo interessante: nas primeiras linhas do código, após o <a href=, o Blogger colocará um endereço. Deixe assim mesmo.

A linha azul do código, talvez seja necessário mudar, pois nela está a largura de 450px, e esse parâmetro, assim como os outros, pode ser alterado, conforme seu blog e gosto.

Naturalmente, agora você deve editar/escrever a Webquest -- nos campos que começam com o nome em vermelho. As fotos, você poderá fazer o upload para a própria postagem, porém, é mais fácil mudar a posição das mesmas, a partir do código (sobre o códigos HTML, em particular das imagens, leia aqui)

É conveniente explicar que na Webquest da postagem anterior eu separei os textos das imagens usando tabelas HTML -- uma linha e duas colunas (uma para o texto e outra para a imagem), em cada um dos campos. Para saber mais sobre tabelas, leia aqui.

O BloggerStop tem também outros modelos de tabelas como essa, que você poderá ver (aqui) e se quiser usar, basta copiar lá o código e fazer suas adaptações.

Espero que tenha compreendido e aproveite, se ficou com dúvidas, escreva nos comentários. Se fez e deu certo, escreva também, mandando o link da postagem de seu blog com a Webquest.