18 março 2013

2 Meses de Teens Forever + Gadgets no cabeçalho sem mexer no HTML


Então Divos e Divas o Teens Forever hoje faz dois meses *------*  ~Happy~ Ok ésó vou comemorar agora quando o blog fizer um ano u-u e como eu estou feliz, eu trouxe um tuto super útil e fácil que aprendi no We Heart HTML.


Sabe aqueles blogs divos, com gadgets no cabeçalho os principais são slides, tem gente que divide o cabeçalho e tal's e da uma trabalheira mas eu vou ensinar de uma forma bastante fácil como fazer isso, nem vai precisar mexer no HTML.Vamos começar.

Primeiro você vai no seu layout, e adiciona um gadget de HTML/Javascript e salva, mas ele tem que ser o primeiro gadget gente, se você por ele em outro lugar não vai dar certo, tem que ser o primeiro gadget mesmo (Antes até do gadget de boas vindas ou algo parecido) e não dê nome a ele.


Nesse mesmo gadget você vai adicionar esse código 



<div style="margin-left: -20px; margin-top: -20px;">

O que está em negrito você pode mudar. tanto para maior quanto para menor, isso vai decidir onde vai se localizar o gadget no cabeçalho.

ai depois desse código você pode por o HTML/Javascript do que você quer que fique no cabeçalho. 

(clique para ver maior)

Acho que deu para entender melhor com a imagem, é apenas um exemplo u-u
depois de colocar o HTML do que você quer que fique no cabeçalho você põe essa tag no fim do seu HTML. 

</div>
ficando mais ou menos assim.


<div style="margin-left: -20px; margin-top: -20px;"><a href="https://www.facebook.com/alan.felipe.12764" title="Facebook"><img border="0" class="scale" src="http://cdn5.iconfinder.com/data/icons/Mighty_Social_Icons/32/facebook_32.png" /></a></div>

Exemplo do We Heart HTML

Se você quiser adicionar mais gadgets, use o esse mesmo gadget HTML/JavaScrip. Se você usar outro, vai dar erro. Mais lembre-se de por embaixo do código anterior, e colocar <div style="margin-left: -20px; margin-top: -20px;"> e </div> no final de cada código, exemplo:

<div style="margin-left: -20px; margin-top: -20px;"><a href="https://www.facebook.com/alan.felipe.12764" title="Facebook"><img border="0" class="scale" src="http://cdn5.iconfinder.com/data/icons/Mighty_Social_Icons/32/facebook_32.png" /></a></div><div style="margin-left: -30px; margin-top: -30px;"><a href="http://twitter.com/AlanFelipeJ" title="Twitter"><img border="0" class="scale" src="http://cdn5.iconfinder.com/data/icons/Mighty_Social_Icons/32/twitter_32.png" /></a></div>

Eles vão ficar em lugates diferentes, não se preocupe baby u-u .


Todos os créditos a We Heart HTML




12 comentários:

  1. Olá amor! Parabéns pelos 2 meses! Muito útil o tuto. Beijo more, pode passar lá? http://ithe-clouds.blogspot.com.br/ reativamos e precisamos de ajuda!

    ResponderExcluir
  2. parabénss amoreee o/
    espero que fique muito mais tempo por aqui o/
    acervo-de-livros.blogspot.com

    ResponderExcluir
  3. Oi Gleicy! Que tutorial legal,não sabia que dava para colocar gadgets no cabeçalho sem mechar no html :O muito lindo seu blog,amei! Beijos

    ♥ Quem precisa de tv para ver Beyoncé ♥ // Perfil

    ResponderExcluir
    Respostas
    1. Oie Dani OMG uma Kaulitz *--------------------------------* #parei eu também sou fã de TH

      Pois é flor dá para por sim XD

      Obrigada flor ><

      Excluir
  4. ownt que tudo conhecer uma alien também blogueira !:3 já estou seguindo o blog Linda! Beiju s2

    ResponderExcluir
  5. o/

    >< Eu também tenho um blog sobre TH, vou retribuir ;3

    ResponderExcluir
  6. vou visitar :3 o meu de TH é thescreamofhumanoid . blogspot . com [tire os espacinhos para visitar] ^^

    ResponderExcluir

» Nossas redes sociais: Fã page | | Instagram | | Pinterest

» Críticas construtivas são sempre bem vindas.

» Deixe o link do seu blog no final do comentário e retribuiremos a visita com carinho.

» Lembre-se, tudo aqui é feito para você, então fique a vontade para pesquisar,ler,comentar e pedir postagens.

© BELEZA NERD 2013 - 2019. Todos os direitos reservados.
Layout e codificação: GLEICY HANER - DESIGNS E FOTOGRAFIA .
Tecnologia do Blogger.
imagem-logo