Big Tutorial - Como colocar uma barra fixa no seu blog.

10:00

Bom dia meus queridos, a imagem de cima ficou legal? Foi ideia minha inspirada no KEEP CALM AND!Bom antes de começar, quero pedir que votem no Acesso Permitido, na segunda fase do concurso.... Votações aqui!
Voltando ao assunto, hoje vou ensinar a colocar aquela barra fixa, que está no topo do blog, vi esse efeito no blog Como um refúgio e adorei! Essa barrinha serve para muitas coisas, e pode ser trocada de tempos em tempos, ou seja, em cada layout você pode colocar uma diferente! Vamos ao tutorial!...

 O tutorial de início é bem simples, no tutorial simples é possível colocar a barrinha e o background dela, o efeito fica lindo do mesmo jeito! Mas no Acesso Permitido está a barrinha com o nome do blog, esse acréscimo foi ideia minha e vou ensinar-los também!!

Quais as vantagens de se ter essa barrinha?
Essa barrinha, pode ajudar a corrigir aquele erro de Background e Cabeçalho que todo mundo odeia! Além de ser bonito para seu layout, o deixar limpo e sem defeito. E você pode como disse mudar o background da barrinha sempre que quiser, quando for trocar de layout!

Como colocar a barrinha no topo?
1º _ Vá em Design > Editar HTML > Aperte Ctrl + F e pesquise por:
<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

* Caso não a encontre, procure por <body> e ache algo semelhante a ela.

 _ ABAIXO do código encontrado você cola este aqui:
<div style=" background-image: url('URL DO PATTERN'); top: 0px; left: 0px; width: 100%; height:40px; z-index: 100; position: fixed;"></div> 

* Modifique o que está em NEGRITO pela Url da imagem que você quer que seja o background da barra.  E onde está de vermelho (40px) você coloca a altura da barra. 

P.S.: Os patterns que você pode usar os que estão neste link, e antes de salvar, visualize e veja se está tudo certinho.
E simples assim, seu blog está com um cara diferente!

Como colocar o nome do blog na barrinha?


É bem fácil, você irá escolher um patterns aqui, realizar os mesmo passos que estão acima, mais antes de salvar clique em visualizar, e dê um Print Screen. Depois abra o programa simples chamado Paint, e cole, recorte somente a barrinha e salve! Depois abra o photofiltre, abra a imagem da barrinha, escreva o nome do seu blog, ou algo que queira escrever, salve! Agora você tem a barrinha feita, salve ela em um site como Imagem Shark, para criar o link, depois cole o link da imagem, no URL do código. E pronto!


By:Andy Reis!

Você também pode gostar:

Comentários
30 Comentários

30 mil comentários

  1. wowww muito legal essa dica!
    Eu adorei, quem sabe uso num próximo lay, também precisa combinar com o estilo de lay que vai usar mas de qualquer forma é uma dica bem estilosa :)

    bjãoo

    ResponderExcluir
  2. Woowww, vindo da dona do Candylland, isso é maravilhoso!! :)

    ResponderExcluir
  3. Ameei o tuto! Quem sabe eu uso? Bom, de qualquer forma: AMEI!
    blogimagine.tk

    ResponderExcluir
  4. Ah! Aceita afiliaçãoooo? Eu querooo muuuiitooo!
    responda o mais breve possivel!
    blogimagine.tk

    ResponderExcluir
  5. Ei Andy, amei! Já conhecia, mas é bom retomar...
    http://pinkpimenta.blogspot.com/

    ResponderExcluir
  6. Oi, Andy. Nossa, amei o tutu, no proximo lay, vou coloca-lo!

    @Raah_Castroo
    www.vidaadegarotaa-vdg.blogspot.com

    ResponderExcluir
  7. Olá Andy, muito bom o tutorial! Simples e fácil, a barrinha dá um novo complemento ao design! Beijos.

    http://ma-petiit.blogspot.com/

    ResponderExcluir
  8. Que tuto legal, e muito bem explicado. Acho um charme quando usam essas barrinhas que dão um charme a mais ao blog! Bjs

    meninasapeca-ms.blogspot.com

    ResponderExcluir
  9. Gostei.Mas,não sei se combina com o meu lay.. =3

    ResponderExcluir
  10. Heey Andyy**
    que pena que não conseguiu o efeito hover :(
    mas o post é super útil e legal fioo ! se orgulhe disso **
    eu já sabia mais é sempre legal re-ver as coisas né ?

    Então ... tá rolando um sorteio de 1 mês de divulgação lá no blog ! e gostaria muiiito que você participa-se !!!

    Kissus**
    www.sweetmafia.net.tc

    ResponderExcluir
  11. ótimo o tutorial :)

    http://coisasdegarotas.tk

    ResponderExcluir
  12. Eu tava curioso para saber isso também, já ia te perguntar! kkkk

    http://abostaquadrada.blogspot.com

    ResponderExcluir
  13. Tuuuto Suuuper útil parabens Ameei seu post's são lindos e seu blog Maravilhosos *--*
    da uma passadinha la bno Portal Disturbia Ficaria Feliz ?
    http://pdisturbia.blogspot.com/

    ResponderExcluir
  14. Mann*
    Juro que quando vi o comentario ...
    PIREI !
    aushausha fiquei pensando ... então não é uma surpresa pra mim ... e sim pra você :) aushausuahs

    Não vai participar no concurso ?
    vocêe que é tão bom com textos e é criativo tbm :)

    vai laá aushaushas''

    ~le te forçando a ir participar do negócio do meu blog~

    -zoa

    Com tudo fiquei muito feliz também pelo aniversário do sweet mafia !

    Brigada por comparecer a festinha :)

    kissus*
    Juicyý
    www.sweetmafia.net.tc

    ResponderExcluir
  15. Gostei da dica. Vou salvar o link para tentar no meu blog de teste.
    Beijos 1000 e uma 4ª-feira maravilhosa para vc.

    SORTEIO!
    http://www.gosto-disto.com/2012/02/sorteio-2-anos-do-blog-giveway-2-years.html

    ResponderExcluir
  16. Uau, com tutorial e tudo mais? Adorei!!! Já estava pensando em como fazer e lá vem vc e explica tudinho, rs.
    Um ótimo dia 29 para você. Bjus.

    ResponderExcluir
  17. Post muito útil amei! ♥
    http://casinhadasnozzles.blogspot.com/

    ResponderExcluir
  18. Respostas
    1. Eu nuuuuunca consigo! :(
      bJSS, XAUU SE DEER MENINAS ACESSeM:
      www.garotaestiloteen.blogspot.com

      Excluir
  19. Estou cm duvida sobre procurar esse codigo, eu colo aquele negocio debaixo dele certo, mais na onde ? Em localizar ou naquela parte onde escreve ? Aguardo explicação ! Bjss
    nosmeninasgostamos.blogspot.com

    ResponderExcluir
    Respostas
    1. Você deve colar exatamente abaixo dele, ou seja, depois dele e fazer as alterações, espero ter ajudado!.;;

      http://acessopermitidoblog.blogspot.com.br/

      Excluir
  20. da pra colocar link nessa imagem irmão

    ResponderExcluir
  21. Oi! estou fazendo um blog e quero tirar a barra fixa acima do cabeçalho onde tem Busca do Blog, compartilhar no google +, próximo Blog, etc etc e colocar o nome do Blog e o telefone ...o Blog é esse http://acucarchic.blogspot.com.br - vc pode me dar uma dica? obrigada. Sandra

    ResponderExcluir
  22. Olá, meu amigo não estou conseguindo por essa barra de menu em meu blog.
    Faço tudo e quando chega no momento não aparece nada.

    ResponderExcluir
  23. Fantástico seu blog! Olha como ficou no blog de Programação:
    www.informaticode.blogspot.com

    ResponderExcluir
  24. Gostei veja em www.codigosparablog.com ficou perfeito aconselho a todos confiram como ficou

    ResponderExcluir

Já curtiu?

+ Lidas