Pular para o conteúdo principal

Posicione qualquer elemento de página em uma Div usando CSS Styles no blogger

Trenamento Expresso sobre alinhamentos CSS
Se 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:
  1. Menu flutuante
  2. Rodapé 3 colunas
  3. Banner flutuante
  4. Banner entre postagens

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.
5 comentários

Postagens mais visitadas deste blog

I love ♥ You no Twitter Tabelas | Emoticons | Caracteres € Simbolos Visuåis ☻

♥☺☼ Usando caracteres especiais famoso no twittter, sabemos que uma imagem fala mais que 1000 palavras, e estes símbolos são de grande valia no twitter, já que com um twitter normal só podemos escrever 140 caracteres.



Digo normal porque tem um complemento para firefox chamado shortText.com informado pelo InfoDicas.com em que você pode colocar muito mais do q isso, é possível até mandar uma carta se você precisar.


Voltando ao assunto, temos abaixo a tabela dos quase "emotions" mais usados no twitter: para usar é só copiar e colar
Coração = ♥Espada = ♠Smile 1 = ☺ sorrindoSmiller 2 = ☻em negativoMusica = ♫Som = ♪Bom dia = ☼ solMina = ♀Macho = ♂Ouro = ◊três pontinhos econômico = …crucifixo = †vai e volta = « »Grana = $Certo = √Seta 1= ➤Seta 2 = ➜E não poderia faltar o simbolo do @dicadedica, o triângulo =∆ Agora você pode conhecer a lista completa e usar sua criatividade para enfeitar, enfatizar ou encurtar as suas twittadas.
Link direto para tabela completa e para instala…

Lista de ALIMENTOS INTEGRAIS Ricos em nutrientes e fibras

O processo de refinamento leva a considerável perda de nutrientes, restando praticamente só o amido (carboidrato). Para que tal amido possa ser absorvido, torna-se necessário á presença de vitaminas e minerais. Estas vitaminas, quando não fornecidas pelo alimento (que é o caso dos alimentos refinados) faz com que o próprio organismo se encarregue de fabricá-las. Levando o paciente a um quadro de empobrecimento vitamínico e mineral que proporciona o desequilíbrio do funcionamento do nosso corpo causando (cansaço físico, cansaço mental, eventualmente ocasionando gripes e resfriados constantes, gastrite, dores nos ombros, artrite...).

A alimentação moderna é composta de alimentos refinados, com conservantes, corantes, estabilizantes, aromatizantes e, além disso, são deficientes em fibras, vitaminas e minerais. Por isso, precisamos consumir alimentos integrais saudáveis como:

Alimentos integrais são aqueles que não passaram pelo processo de refinamento, são ricos em nutrientes como as fi…

Todas as Mutretas de GTA San Andreas

Seguinte pessoal, eu como um fanático por games, me sinto na obrigação de ajudar aqueles que não são tão habilidosos (hehehe... zoeira), portanto trago uma lista completa de mutretas para o clássico GTA San Andreas:

Mutretas: Restauração de veiculos/dinheiro/armas: R1, R2, L1, X, esquerda, baixo, direita, cima, esquerda, baixo, direita, cima.
Armamento enquanto dirige: cima, cima, quadrado, L2, direita, X, R1, baixo, R2, bola.
Suicídio: Direita, L2, baixo, R1, esquerda, esquerda, R1, L1, L2, L1

Super Salto: Cima, cima, triângulo, triângulo, cima, cima, esquerda, direita, quadrado, R2, R2

Vida Infinita: baixo, X, direita, esquerda, direita, R1, direita, baixo, cima, triângulo.

Magro: Triângulo, cima, cima, esquerda, direita, quadrado, O, direita

Musculoso: Triângulo, cima, cima, esquerda, direita, quadrado, O, esquerda

Gordo: Triângulo, cima, cima, esquerda, direita, quadrado, O, baixo.

Respeito máximo: L1, R1, triangulo, baixo, R2, X, L1, cima, L2, L2, L1, L1.

Fôlego Infinito: Baixo, esquerda, L…

CoinURL