7 de jan de 2013

Slide (ou outros gadgets) no Cabeçalho

Hey, angels :) What's up?

Mais uma vez eu não printei desculpem-me pela preguiça, mas a Rayane Cássia (dona do incrível Mundo Super Beijo) pediu para que eu ensinasse a colocar o slide no blog.
Enquanto estava fazendo o design do Mrs. Nightshade, tentei com vários tutoriais e não consegui obter o resultado desejado. Quando já estava cansada (e prestes a desistir), encontrei exatamente o que precisava. Considero mais fácil do que o normalmente ensinado nos outros blogs. Vamos lá?

Primeiramente, vocês precisam do slide. Existem três formas que eu conheço:

- Bowie Slide (o mesmo que uso no Mrs. Nightshade)

(É só clicar no que vocês quiserem que serão redirecionados para um tutorial)

Recomendo que editem os códigos no Pastebin, assim vão ter mais liberdade de mexer e alterar. Não é necessário criar conta. Assim que terminarem, adicionem um gadget de HTML/Javascript. Nele, colem o seguinte código abaixo:
<div class="topo">CÓDIGO</div>
Onde está escrito "Código", vocês devem substituir pelo código do que vocês querem: slide, caixa de pesquisa, etc. 
Agora é necessário ajustar, certo? Para que, por exemplo, seu slide vá para o lugar que separou no cabeçalho.
Então é só ir no HTML do seu blog e colar antes da tag ]]></b:skin> o seguinte código:
.topo {
position: absolute;
z-index: 4;
width: 250px; /* LARGURA */
height: auto;
left: -19px; /* Posicionamento */
top: -19px; /* Altura */
}
Depois é só alterar como desejarem. Para colocar mais de um gadget no cabeçalho, é bem fácil:

- Não vamos chamar o código de "Topo", vamos colocar um número junto. Por exemplo:
<div class="topo1">CÓDIGO</div>
- Na hora de usar o código para posicionamento, vamos repetir o mesmo processo. Lembre-se: se adicionar o código do Slide com "topo1", esse código também deve ser acompanhado com 1. Por exemplo:
.topo1 {
position: absolute;
z-index: 4;
width: 250px; /* LARGURA */
height: auto;
left: -19px; /* Posicionamento */
top: -19px; /* Altura */
}
E é isso. Bem simples, não é? Geralmente vejo em vários tutoriais um milhão de passos, mas esse não. Por isso, agradeço ao blog Farry Teen pela genialidade e por me salvar num momento de desespero, [risos].

Qualquer dúvida ou pedido, é só comentar ou mandar uma pergunta aqui.

Espero que tenham gostado.
Beijos,

Mrs. Nightshade.

6 comentários: