Posicione qualquer elemento de página em uma Div usando CSS Styles no blogger
Trenamento Expresso sobre alinhamentos CSSSe você tem um código javascript ou Html de um widget contendo texto, formulários, banners, imagens ou qualquer outro elemento, você pode posiciona lo em local diferente do tradicional colocando o elemento dentro de um div e formatando via CSS styles para que fique em local oportuno.
Para que você precisaria mudar o posicionamento de um widget?
(EX:)
- Você pode ter um banner suspenso como um popup
- Um formulário de busca que em cima de uma imagem
- Um menu com categorias para o blog que flutuando
- Uma imagem alinhada no topo a direita do blog
Referência da posição:
Relativo (position: relative;)
O alinhamento esta referindo-se a posição do último elemento html colocado antes dele.
Absoluto(position: absolute;)
O alinhamento estará referindo-se a posição em relação ao navegador, portanto ao mover o rolamento da página o elemento não mudará sua posição, dando o efeito de flutuante ou suspenso.
-Alinhamentos css:-
alinhado ao topo
top:0px;
alinhado ao direita
right:0px;
alinhado em baixo
bottom:0px;
alinhado esquerda
left:0px;
EX:(topo 5px, direita 10px pixels de distancia da margem absoluta)
<div style="top: 5px; right:
10px; position: absolute;"
>
código do widget vem aqui!
</div>
No painel de controles do blogger acesse add um elemento de página javascript/html e cole o código do exemplo substituindo a frase código do widget vem aqui! pelo código da imagem, banner, widget, busca ou qualquer outro conteúdo que deseja alinhar no blog.Clique na imagem ao lado para ampliar um exemplo de imagem!
NO blog estou usando o código de alinhamento para o top menu e imagens das latinhas flutuantes como absolutas e o posicionamento do banner do blog bem como o campo de busca como imagens com posicionamento relativas!!!
Veja tambem:
Espero que este tutorial esclareça algumas dúvidas, existem muitos outros comando de alinhamento, porém estes são os fundamentais poderá conseguir novos códigos no endereço http://www.w3schools.com/css/default.asp , agradecimento especial ao @LucasPompeu que solicitou esta dica.
