Gadgets no cabeçalho

1 - Primeiro você deve criar um gadget novo lá em "Layout" nas configurações do seu blog.  De preferencia, crie um naquele espaço em cima dos posts. Não coloque titulo (a não ser que você queira, mas fica meio estranho). Cole o código da barra de pesquisa lá.

Vai ficar assim: IMAGEM

2 - Agora temos que fazer alguma coisa para posicionar o gadget no lugar que você queirano cabeçalho. Para isso vamos criar uma DIV. Coloque o código abaixo em cima do código da barra de pesquisa (ou da coisa que você queira colocar). Não se esqueça de fechar a div!

<div class="NOME">
Seu código aqui
</div>
Você pode escolher o nome que você quiser, quanto mais fácil de lembrar melhor. Vou colocar "barra", por exemplo. 

Vai ficar assim: IMAGEM

Salve e veja como ficou. Vai ficar bem estranho e errado, porque ainda falta fazer mais algumas coisas. É normal ficar errado :B Vamos ver o que fazer depois...Saia do Editar Layout.

3 - Agora vá no "Editar HTML" do seu blog. Vá onde fica o css, que fica acima disso: 
}
]]></b:skin>

E cole esse código aqui:

.NOME {
position: relative; margin-top: 00px; margin-left: 00px; z-index:999;
}
É isso que vai definir a posição em que seu gadget vai ficar. 

NOME: coloque o nome da sua div que você escolheu mais cedo, lembra? O meu é barra.

MARGIN-TOP: Essa é a distância do gadget em relação ao topo. Se você usar um valorpositivo e for aumentando, o gadget vai ficar cada vez mais para baixo. Se você usar um valor negativo (-10) e for aumentando, o gadget vai ficar cada vez mais para cima. Fácil? 

MARGIN-LEFT: Essa é a distância do gadget em relação ao lado esquerdo. É a mesma coisa do margin-top, valores positivos deixam o gadget mais longe do lado esquerdo, valoresnegativos deixam o gadget mais perto do lado esquerdo.

Z-INDEX: Não mexa nisso. Isso fará com que seu gadget fique "por cima" das coisas (header, fundo, etc...)

Você ter que ir tentando números até que o gadget fique no lugar que você quer. Então, você coloca um numero, salva e vê como ficou :33 

Pronto, é só isso -q É fácil. Isso vai fazer com que os gadgets fiquem sempre no mesmo lugar independente do tamanho da tela, ou seja, vão se ajustar ao tamanho do monitor, tipo os meus aqui do blog :3

Nenhum comentário

Postar um comentário

- Se quiser um post, peça na ask !

- Se não gostou, não use palavras ofensivas. Ninguém precisa rebaixar-se a tanto para expressar a opinião.

- Leio todos os comentários, respondo e retribuo sempre que o tempo deixa.