Colocando gadgets no cabeçalho

❋ Pode crer, Sebastian. Pode crer. ❋ -APS
#EstouDeVoltaComHTML! Oi cheirosos, estou com mais um tutorial super útil com html. E ele é super fácil de usar, que até os iniciantes consegui usar e facilita muito no blog de cada um. Eu mesma usei ele aqui no blog e foi o único que funcionou sem nenhum complicação, erro ou algo do tipo, aprendi este tutorial com o blog Batom de framboesa que aprenceu com o Farry teen. Vamos lá? (continue...)

Neste tutorial é a melhor forma usada para colocar no topo, sobre o cabeçalho, com a ajuda do tutorial anterior de 2 background's no blog. Basicamente vou explicar da mesma forma do BF e os seguintes códigos usados foram, assim:

1. Vá em Layout > Adicionar um gadget > Selecione adicionar HTML/Java Script > Cole esse código:
<div class="topo">CÓDIGO</div>
PS: onde está escrito "CÓDIGO" é onde você colocará o código do que você quer que fique no topo!

2. Vá em Modelo > Editar HTML > Procure por  ]]></b:skin> e cole acima da tag o código abaixo:
.topo {
position: absolute;
z-index: 4;
width: 250px; /* LARGURA */
height: auto;
left: -19px; /* Posicionamento */
top: -19px; /* Altura */
}
Explicações:
Width: A largura que você quer que fique.
Height: A altura, aconselho que não mude o auto.
Left: Margem ou espaçamento que fica entre a esquerda, caso quer o contrario (direita) mude para right.
Top: Marguem ou espaçamento que fica entre o topo, caso não fique como desejado, retire o - (sinal de menos). Não mude nada alem dos  que estão em "negrito".

Quando for adicionar outro gadget, em vez de colocar o código normal, acrescente um número, exemplo:
<div class="topo1">CÓDIGO</div>
Onde está destacado, é só você trocar o nome, colocando números, e tal. Aí, na hora que for colocar o código acima de ]]></b:skin> deve mudar isso:
.topo1 {
position: absolute;
z-index: 4;
width: 250px; /* LARGURA */
height: auto;
left: -19px; /* Posicionamento */
top: -19px; /* Altura */
}
 E se for adidionar mais gadgets, é só ir mudando o número. Entenderam? Se tiverem alguma dúvida é só falar comigo!

Enfim, bejios, até o próximo post. Fiquem com Deus.

22 comentários:

  1. Esse tutorial <3 Será extremamente útil para o meu próximo layout, obrigada por trazer de uma forma tão fácil.

    The Lord of Thrones

    ResponderExcluir
    Respostas
    1. - Que bom, fico feliz por isso. E ele estará a sua disposição!
      ~ Kiss

      Excluir
  2. Nossa que tuto legal *o* Por incrível que pareça eu nunca tinha visto este tuto antes e parece ser bem útil né? Amei e salvei ;) Beijos =3

    ResponderExcluir
    Respostas
    1. - Serio? que legal, ter aprendido ele, fico feliz por isso! Sim ele é muito útil, obrigada linda. ~ Kiss

      Excluir
  3. Muito útil para o meu próximo layout!! Estava procurando á um tempo...
    kiiss^^

    Viste| ♥ Trick or Treating ♥

    ResponderExcluir
    Respostas
    1. Que bom ter te ajudado linda, ele estará a sua disposição, obrigada!
      ~ kiss ♥ vou visitar ♥

      Excluir
  4. Esse tutorial é um pouco diferente do que eu conheço é uso. Todavia, é super útil e está muito bem explicado. Beijão >3<

    [look at me, look at fleur faneés]

    ResponderExcluir
    Respostas
    1. Quando vi ele, achei super diferente também. E o melhor de tudo é que deu certo, kkk estou usando ele neste layout! Muito útil, grata pela explicação do BF. ~ Kiss ♥ yes visit ♥

      Excluir
  5. Ótimo tutorial, bem facil e pratico haha. Carol tem algum meio de contato privado com vc ? tipo email ? Se tiver me manda pfvr!

    ResponderExcluir
    Respostas
    1. - Sim, muito prático kakoa. Tem o e-mail, mas eu prefiro mesmo o contato pelo meu facebook. Estou lhe esperando! ~ Kiss

      Excluir
  6. Adorei e.e gostaria de se afiliar?
    Link: http://ohedition.blogspot.com.br/ aguardo resposta
    Kisses! o3o

    ResponderExcluir
    Respostas
    1. - Que bom, sim, aceito! Bjus... Te aviso lá no blog. Okay.

      Excluir
  7. esse tutorial é muito importante para blog, eu demorei a achar ele mais encontrei rs, adoreii o blog e já estou seguindo, também gostaria de saber se você aceita afiliação??
    aguardo a sua resposta, beijos e fica com deus..

    http://apenassonhosdreams.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. - Ele é ótimo kaosk, ficou feliz por ter lhe ajudado linda. Que bom que gostou do blog, obrigada por seguir. Aceito a afiliação sim, espero que siga todas as regras em "about". Me coloca na elite e depois eu faço o mesmo! ~ Kiss

      Excluir
  8. Já conhecia esse tutorial, mas é sempre bom relembrar e ele é muito bom e você explicou muito bem.

    Sweet of Cherry

    ResponderExcluir
    Respostas
    1. Que bom , obrigada pela visita linda, visitarei seu blog! kiss <3

      Excluir
  9. Eu usei muito esse tutorial, ele é super útil!
    Beijoos (◕‿◕✿) || Caramelos Encantados

    ResponderExcluir
    Respostas
    1. Realmente, bem prático e útil. Adorei o novo layout, kiss ✿

      Excluir
  10. Que blog mais lindinho ♥ Te conheço lá da ORG, no facebook. Que engraçado, além de editora, também é blogueira ♥ Adorei o tutorial, é bem prático e tentarei usar no meu bloguinho, que tá em reforma ♥ Ganhou uma nova seguidora, bjs.

    ResponderExcluir
    Respostas
    1. Obrigada linda, que bom kkkk, é eu adorava postar na ORG! Que bom que te ajudei, fico muito feliz. Obrigada por seguir, kiss ✿

      Excluir
  11. Respostas
    1. Olá entre na página de "about" e veja se seu blog corresponde todas as regras citadas, se sim, entre em contato comigo novamente. Beijos!

      Excluir

Please leia:
- Comente sempre em relação ao post.
- Caso queira usar ~> ♡
xoxo e obrigada aos comentários.

≧ω≦ © Mini Realeza - 2015 por Carol Sgomes | | Todos os direitos reservados - Tecnologia do Blogger ≧ω≦