Editando gadgets

Tadaima :)

O que trago hoje não é exatamente um tutorial, mas é de extrema importância. Muitas pessoas, nos seus gadgets, não fazem grande coisa - a não ser escrever texto e colocar uma imagem, ou o código de um menu... mas há muitas mais coisas que se pode ajustar por lá. Claro que eu começarei pela imagem e texto, porque é básico, mas não será só isso. Bah, chega de enrolação! Vamos ver?

Antes de tudo, provavelmente será melhor abrir um gadget HTML/Javascript, não? ;)

Colocando uma imagem:

1. No gadget, cole o código seguinte, e não se esqueça de substituir a url:

<img src="URL-DA-IMAGEM" />

2. Se quiser adicionar um efeito à imagem, acrescente antes de fechar em /> o seguinte:

class="NOME-DO-EFEITO"

Esse efeito já deverá estar adicionado no seu HTML, para poder visualizar. 

3. A ordem com que coloca as palavras referentes à imagem, dentro dos sinais maior e menor (< e >) não faz diferença, excepto a palavra img, que se deve seguir imediatamente à abertura. De resto, tanto faz o resultado ser assim:

<img src="URL-DA-IMAGEM" class="NOME-DO-EFEITO" />

como assim:

<img class="NOME-DO-EFEITO" src="URL-DA-IMAGEM" />

Colocando um link:

1. Escreva o seguinte dentro de um gadget, e substitua o que está em maiúscula pelo link da página a que quer ser redirecionado e nome que irá aparecer:

<a href="LINK-DA-PÁG"> NOME-DA-PÁG </a>

2. Se quiser que apareça tooltip (www), antes de fechar o primeiro >, escreva title="TEXTO-QUE-QUER-NA-TOOLTIP", para que fique assim:

<a href="LINK-DA-PÁG" title="TEXTO-QUE-QUER-NA-TOOLTIP"> NOME-DA-PÁG </a>

3. Se quiser acrescentar um efeito - que deve ser adicionado previamente no html - todo o código do link deverá ficar entre as tags <div class="NOME-DO-MENU"> e </div>. Assim:

<div class="NOME-DO-MENU"><a href="LINK-DA-PÁG"> NOME-DA-PÁG </a></div>

4. Sim, pode colocar várias coisas, e a ordem não é relevante, desde que comece sempre por <a .

5. Quase me esquecia! Para uma imagem ser um link, é simples. Em vez de colocar um texto entre as tags <a href="LINK"> e </a>, como no ponto 1, coloca uma imagem, assim:

<a href="LINK-DA-PÁG"><img src="URL-DA-IMAGEM" /></a>

Alinhar texto e imagem:

1. Há 2 várias maneiras de centrar algo, mas a mais simples é colocar tudo o que quiser centrar entre as tags <center> e </center>. Claro que se algo ficar após o fecho da segunda, não ficará centrado... Por exemplo:

<center><img src="URL-DA-IMAGEM" />Oi!</center>

2. Há uma maneira simples de alinhar o que quer que seja, incluindo centrar. Coloca tudo o que quer alinhar dentro das tags <div align="ALINHAMENTO"> e </div>. Onde eu escrevi ALINHAMENTO, você deve trocar pelo nome correspondente ao alinhamento que quer:

• À direita» right
• À esquerda» left
• Centrado» center
• Justificado» justify

Não vou exemplificar, porque funciona como o ponto 1.

3. Numa imagem, acrescentará align="ALINHAMENTO" (não esqueça de trocar pelo alinhamento que quiser) antes de fechar o código da imagem em />. Um pouco como fez para acrescentar o efeito na imagem, sendo que aqui também não importa a ordem. Ficaria:

<img src="URL-DA-IMAGEM" align="ALINHAMENTO" />

Mover um gadget ou algo dentro dele:

1. Coloque o que quiser mover (seja imagem ou link) dentro das tags <div style="margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; position: absolute;"> e </div>. Altere os números para arrastar o elemento, respetivamente, para a esquera, para cima, para a direita, e para baixo. Números positivos criam espaçamento, e números negativos diminuem-no.  Assim:

<div style="margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; position: absolute;"><img src="URL-DA-IMAGEM" class="NOME-DO-EFEITO" />

</div>

ou

<div style="margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; position: absolute;">

<a href="LINK-DA-PÁG"> NOME-DA-PÁG </a>

</div>

Outras dicas:

1. Para tudo ter um ar mais organizado e menos cansativo à vista, divida as coisas em parágrafos. Por exemplo, em vez de

<div class="NOME-DO-MENU"><a href="LINK-DA-PÁG"> NOME-DA-PÁG </a></div>

organize assim:

<div class="NOME-DO-MENU">
<a href="LINK-DA-PÁG"> NOME-DA-PÁG </a>
</div>

2. Veja de que modo pode organizar os seus gadgets. Coloque pelo menos uma imagem e algum texto em todos eles. E veja, por exemplo, se não é possível incluir o menu no welcome para reduzir o tamanho da sidebar.

3. Indico que acrescente sempre algum efeito, nem que seja apenas opacidade ou borda de 1px. Dá um ar muito mais profissional e prova que a simplicidade não se deve a esquecimento. Principalmente se a imagem for pouco editada.

4. Para os parágrafos ficarem visíveis quando salvar o gadget, não basta fazer enter. Quando quiser mudar de linha, use o código abaixo, uma ou duas vezes, caso queira deixar uma linha em branco:

<br />

Era isto. Não duvido de que a maior parte das blogueiras já saiba, mas considero importante de dizer aqui no blog, principalmente porque ninguém nasce a saber, e sabe-se lá se nenhuma principiante com potencial está a ler isto :)