BIG TUTORIAL | COMO FAZER UMA PARTE SUPERIOR COM INFORMAÇÃO - PARTE 2 [ULTIMA]

Oioi pessoal? Tudo bem com vocês? Antes de iniciar a segunda parte do tutorial em que ensino-vos a como se cria uma parte superior com informação, quero agradecer à Megan, do blog Adolescente Nerd, por ser extremamente fofa e ter sido a primeira a responder-me e a aceitar o meu pedido de afiliação! Muito, muito, muito obrigado! :D

Mas, vamos lá ao que me trouxe aqui hoje...

Depois de na primeira parte ter-vos ensinado o mais complicado deste tutorial, neste parte final tudo torna-se muito mais fácil. Volto a relembrar o facto de que quem já fez a imagem com toda a informação que queria que o "quadro de informações" (lembram-se desta minha expressão muito feia) tivesse não precisa de ter em atenção esta segunda parte!

A todas as outras, venham comigo que vou agora ensinar-vos a colocar manualmente a informação.

1º PASSO (e único ahah)

Deverão de criar os widgets com a informação que querem, e que pode ir desde um pequeno texto, a uma imagem.

PARA IMAGEM

Caso seja imagem, deverão criá-la com as dimensões que desejam. Como é óbvio, aconselho a que a dimensão da imagem seja um pouco inferior à da parte do quadro de informações em que vocês querem colocá-la de forma a que fique tudo mais bonitinho.

De seguida, deverão fazer o upload da vossa imagem no servidor que normalmente utilizam e, posteriormente, adaptar o seguinte código, trocando apenas o que se encontra a negrito, de acordo com as vossas medidas e ao vosso layout.

<div style="top:  Wpx; left: Xpx; right: Ypx; bottom: Zpx; position: absolute;"><a href="LINK AO CLICAR NA IMAGEM" target="_blank"><img border="0" src="URL DA IMAGEM" /></a></div>

Para as letras W, X, Y e Z, valores positivos descem enquanto que valores negativos sobem.


PARA TEXTO
No caso da vossa informação ser texto, deverão alterar apenas o seguinte código com o texto e as medidas que desejam, não esquecendo de alterar apenas o que encontra-se a negrito:

<div style="margin-left: Wpx; margin-right: Xpx; margin-top: Y; margin-bottom: Z; text-align: justify; width: LARGURA QUE QUEREM QUE O TEXTO OCUPEpx;">TEXTO</div>

Para as letras W, X, Y e Z, valores positivos descem enquanto que valores negativos sobem.

E pronto, para todos vocês que necessitaram desta segunda parte, o vosso quadro de informações já está pronto! Espero que todos vocês tenham gostado e que este tutorial tenha-vos ajudado bastante... Eu volto brevemente com o meu segundo tutorial! (yeyyyyy :D). Beijos e abraços!