Olá! No post anterior mostrei como posicionar as sidebars e área de postagem em um blog não foi? Agora mostro para vocês como posicionar qualquer coisa em um layout, por exemplo, menus, cabeçalhos, caixas de pesquisa, imagens mapeadas, afiliados/elite, banners, textos e outros gadgets que estejam em HTML. Tudo que precisa ser feito é...
Em seu Layout, adicione um gadget HTML/JavaScript contendo o seguinte código:
<div style="position:absolute;width:0px; height: 0px; margin-left: 0px; top: 0px; background: #cor(url-da-imagem);"> CONTEUDO DO QUE SERÁ POSICIONADO </div>
Ok, vamos entender cada trecho:
- position - se refere a como o gadget será posicionado, sendo que absolute indica que não ficará fixo, mas caso queira que seja fixo, isso é, que seja mostrado na tela mesmo ao se mover pela página, troque absolute por fixed.
- width e height - se referem a largura e altura da área; no lugar do número 0 atribua valores de acordo com o tamanho que desejar que o local tenha, sendo que height é mais opcional ainda que width (só defina valores se for preciso, se não, remova eles).
- margin-left - ao trocar o número 0 por outros valores você estará definindo quanto o gadget se movimenta para a esquerda ou direita. Os números que substituirão o 0 podem ser negativos ou positivos. Você pode usar margin-right no lugar de margin-left para atribuir valores com relação à margem direita do blog.
- top - ao trocar o número 0 por outros valores você estará definindo quanto o gadget se movimenta com relação ao topo, isso é, se sobe (com números negativos) ou desce (com números positivos). Isso vale para posicionar mais perto ou longe do cabeçalho, para colocar coisas acima ou abaixo dele também.
- background - é opcional, só para mostrar que se pode adicionar estilos, portanto pode remover se quiser; caso queira colocar um plano de fundo naquela área específica, use uma cor (exemplo: background: #fcc;), uma imagem (exemplo: background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQKRPUzhw4OODtd4m1caKjm8jOiycdST7xos0pPwjNQbqHPWcNQxOaa0TJ0XKznwQp3t5rON_qz_QqyhzPJi0SppG0n4x7OccrdEcI07obMP4ri0r-ZgjgfKq8y0DB7LqSzQfpHtXXzKBg/s1600/619384gwfgemc1lv.gif) repeat;) ou deixe transparente (exemplo: background: #transparent;).
Até aqui já posicionamos o que quisermos, e até adicionamos mais estilos caso seja necessário, mas é claro, falta então saber onde adicionar o que será posicionado, que é em CONTEUDO DO QUE SERÁ POSICIONADO. Pronto; salve seu gadget e visualize como ficou, fazendo as alterações que precisar.
Foi assim que fiz para com esse layout atual do blog; posicionei os códigos do menu colorido, do mini status, do voltar ao topo e do "cabeçalho fake" usando esse truque. Basta ter em mente que lá onde diz "conteúdo do que será posicionado" ficariam os códigos que seriam adicionados em um gadget HTML/JavaScripts de um tutorial.
Para deixar mais claro ainda, suponha que se queira posicionar aquele menu colorido, que mostrei como fazer, não fixo, no topo do blog, já tendo adicionado o css dele antes de /b:skin, conforme o tutorial de como usá-lo; vamos supor também que nosso cabeçalho ou área geral do blog tenha tamanho de 990 de largura, então não se pode passar desse valor, mas se deve aproximar a essa largura para não ficar feio, e o cabeçalho tenha uns 100px de altura, ou seja, temos que subir o menu acima de 100px; ficaríamos com algo mais ou menos assim:
<div style="position:absolute;width:980px; margin-left: 10px; top: -190px;">
<a class="mc" href="URL-LINK-1">NOME DO LINK</a>
<a class="mc1" href="URL-LINK-2">NOME DO LINK</a>
<a class="mc2" href="URL-LINK-3">NOME DO LINK</a>
<a class="mc3" href="URL-LINK-4">NOME DO LINK</a>
</div>
Parece complicado descrevendo assim, mas só ir testando e vão ver que é simples. Espero que lhes seja útil :3 Beijus...
Olá, Roberta tem como os gadgets ficarem bem próximos do jeito desse blog:
ResponderExcluirhttp://todateen.uol.com.br/
Tem como deixar os gadgets separados: veja aqui. Agora para deixar daquele jeito, talvez seria legal usar um modelo tipo revista.
ExcluirOnde encontro esse modelo?
ExcluirTem em vários sites, tipo o btemplates ou o soratemplates.
ExcluirRoberta, eu to em dúvida de algo, como eu faço um layout de Boas Vindas, tipo, imagem+texto, igual o que tinha antes no seu blog (a que tinha a foto do ursinho no topo e o texto de apresentação) tem como adicionar imagem no layout HTML/JavaScript ?
ResponderExcluirUsei um gadget HTML/JavaScript :)
ExcluirTem como sim, você pode usar imagens, textos, links, css...
Depois posto ele aqui ok?
Bjus ;3
Roberta, tenho uma duvida, era de outro post, mas esse tem a ver então enfim, eu tentei mover a minha aréa de postagem, mas ela não moveu, só aumentou :( Se puder me ajudar. Obrigada desde de já ^.^
ResponderExcluirTente movê-la usando margin ou padding.
ExcluirOlá Roberta,
ResponderExcluirTo tentando fazer uma coisa a seculos, que tem aqui no seu blog, mas não acho em lugar nenhum e.e
Sabe essa parte que tem os widget com labels e arquivos, etc... eles estão em um background com cor diferete e em toda a largura do blog. Sabe como consigo fazer isso? >.<
Beijo!
Talvez esse tutorial te ajude: Personalizar cada gadget
ExcluirAeee me ajudooo muitoooO vlw
ResponderExcluirValwu me ajudo muito rs belo Blog
ResponderExcluirQue coisinha mais linda esse dia, parabéns pela grande ideia.
ResponderExcluir