19 abril 2015

Gadgets no header e no footer

| |
Sinceramente, depois de tanto tempo, nem sei o que dizer. Fiquei com tanta saudade de postar, mas ao mesmo tempo a minha preguiça me impedia de fazer o meu retorno. Bem, aqui estou eu. Prometi que esse seria o primeiro post, então decidi me apressar e postar logo. 

Ah, espero que tenham gostado do novo template que, a propósito, é bem mais simples que os anteriores. Confesso que parte disso é por causa da preguiça, mas apesar disso acho que ficou bom.

Esse tutorial é bem simples. Vou ensinar como colocar gadgets (textos, imagens, música e tals) no header e no rodapé/footer do blog.


1 - Você tem que colocar seu cabeçalho pelo HTML. Para que fique certinho, você não pode colocar nenhuma imagem pelo cabeçalho do Layout, mas se preferir, exclua o cabeçalho. Procure por .tabs-inner { . Se olhar pelo código irá achar padding: 0;. Abaixo cole:

background: url(imagem) no-repeat;
background-position:center;
margin-top: -47px; /* Move o banner para cima ou para baixo */
padding-top: 350px; /* Coloque a altura do cabeçalho */

2 - Após ajeitar o que era necessário e salvar, vá em layout e adicione um gadget HTML/JavaScript logo abaixo do cabeçalho. Cole:

<div style="margin-right: 0px; margin-bottom: 0px; position: absolute;">
Código aqui</div>

No margin-right números negativos vão para a direita e positivos para a esquerda. Em margin-bottom números negativos vão para baixo e positivos para cima. Não mude o position.

3 - No rodapé é basicamente a mesma coisa. Se quiser pode adicionar uma imagem, mas se não tiver imagem não tem problema. É só adicionar um gadget HTML na parte de baixo do layout, colar o código acima e mudar o que for necessário.

Dica: Se quiser colocar gadgets no cabeçalho e no footer, não coloque esse código na sidebar, pois ao subir ou descer o gadget, ele vai ficar no lugar que quiser, porém ficará "em cima" dos gadgets da sidebar, tornando impossível usar os gadgets na sidebar.

6 comentários:

  1. Adorei o tutorial e que bom que voltou ahah
    bjo :* - http://diamondiamonds.blogspot.com.br/

    ResponderExcluir
  2. Oi Isa <3
    Faz muito tempo que procuro esse tutorial ♥
    Vejo que mudou o lay... ficou muito lindo dá ele pra mim? -qq
    Beijos || ♥ Colorful Dream~

    ResponderExcluir
  3. O lay ficou ótimo, que bom que voltou, amei o tutorial mesmo já conhecendo, é bem útil para quem não conhece! Beijão ♥
    http://supporthtml.blogspot.com.br/

    ResponderExcluir
  4. não deu certo,pode atualizar ensinando como por no footer do layout? Como vc colocou eu não entendi.

    ResponderExcluir
  5. Amei o layout, o tutorial é otimo, pena que eu e html nao nos damos muito bem kkk
    Dani / http://snowing-in-london.blogspot.com.br/ *poderia visitar?*

    ResponderExcluir

« »