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.
Comentários
https://twitter.com/dicadedica
cara fazia tempo que eu não entrava no Blog e uauuuu !!! Ele tá muito bom !!!
Não só o seu conteúdo mas seu layout tá ótimo!!!
Acho que foi a melhor customização de um template que eu já vi ! Parabêns !
Por falar nisso eu já até procurei por aqui mais não achei...
que tal uma dica sobre menus horizontais ??? o seu do topo tá muito bom ...
eu vi uma dica parecida em tópico do blog UFO-Nordeste mais o link para o código tá quebrado...
e é isso aí... parabêns !!!
abraços
se não for pedir muito ...
gostaria de saber como incluir META TAGS no código do Blog ... estou tentando mas ainda não achei a forma certa de se fazer isso...
abraços
e custumizar no blogger, mudei as imagens por imagens minhas e coloquei este codigo encinado nesta postagem para deixalo flutuante, tambem posicionei no topo e centralizado.
só cuidado para não usar as imagens deles. eles são chatos neste ponto...
sobre as tags você deve colocar na hora que estiver escrevendo as postagens se elas já existem você deve ir em gerenciasr postagens no painel de controle e filtrar as tags, depois vc coloca um widget com as chaves...
Acho que é isso, se não for me explique melhor o que vc quer fazer... abração!!!
http://cafecomgelo.wordpress.com/2007/05/17/criando-um-layout-com-css-a-partir-do-zero-parte-112/