Olá pessoas lindas!Muitas de vocês já me pediram para vos ajudar a criar a barra de topo fixa que se têm visto ultimamente em muitos blogs maravilhosos.Hoje é o dia que vos ensino a criar a vossa própria e personalizada Navigation Bar.
Vamos lá começar!
Getting Started
1# Disabling Blogger's navbar / Desactivar a barra do Blogger
To do that you just need to go to the page LAYOUT, search for the rectangle that says NAVBAR and click on the Edit link. Then a pop-up will appear and you just need to click on OFF and then save. Go to the LAYOUT page again, and press on the SAVE ARRANGEMENT button.
A primeira coisa que deves fazer é ver se a barra pré-definida do blogger está activa, se estiver, tens de a desactivar e tornar invisível.
Para isso só precisas de ir à página ESQUEMA, procurar o rectângulo que diz NAVBAR e clicar no botão Editar. Depois irá te abrir um pop-up onde terás de clicar em Desactivada e guardar, voltar à página anterior e clicar em Guardar Disposição.
2# Adding CSS / Adicionar CSS
CSS, or Cascade Style Sheet, is the magic dust that will make your navbar gain color, height, width, and also gave it the ability to stay fixed in one point.
I added some comments to facilitate the process.
(See CSS - comments in English)
To add you CSS go to TEMPLATE page, click on EDIT HTML.
Search for and click on the triangle next to it, and put this css code before
Adicionei alguns comentários no código (ver CSS - comentários em Português) para não teres tanta dificuldade.
Para adicionar o css vai à página MODELO, clica em Editar HTML.
Procura por e clica no triângulo que se encontra ao lado, e coloca o código css antes de .
CSS - comments in English
CSS - comentários em Português
3# Adding HTML / Adicionar HTML
Now, in the same page, search for and put the code AFTER it. Change all the links that says www.lovable-maria.com to yours, and where it says "Link of your icons".
Agora, na mesma página, procura por e coloca o código HTML depois disso.
Muda todos os links que dizem www.lovable-maria.com para os teus, e onde diz "Link of your icon" para as imagens dos teus icons das redes sociais.
HTML
//Hope you liked our first online class. If you want me to do an online class about something you want to learn, please send me a e-mail: maria@lovable-maria.com//Espero que tenham gostado desta primeira online class. Se quiserem que faça uma aula sobre algo específico enviem-me um e-mail para: maria@lovable-maria.com
41 Comments
Este tipo de posts são super úteis para pessoas como eu, que são umas nabas a personalizar o blog!
ResponderEliminarestas coisas deixam-me em pânico, complico sempre xD Mas esta aulinha está bem simples :D
ResponderEliminarMuito útil este post!
ResponderEliminarDemorei três semanas até a minha estar impecável!
Mas tenho uma pergunta para ti (que por mais que pesquise não encontro em lado nenhum!): sabes alguma maneira de centrar o texto da navbar? Por exemplo com a tua: teres o "Lovable Maria" ao centro? Já tentei de tudo, mas não consigo! :(
Beijinho :*
Que post tão útil linda! :) Andei em mudanças no meu blog e por acaso queria ter esta barra no topo, veio mesmo a calhar!
ResponderEliminarMuitos beijinhooos *.*
http://thebeautypalacejh.blogspot.pt/
Adoro este tipo de posts, mas tenho uma perguntinha, e se eu quiser retirar a navbar fixa, como fasso??
ResponderEliminarBeijinhos linda
http://something-over.blogspot.pt/
Olha Maria já me salvaste a vida :P Já queria há algum tempo ter algo assim do género no meu blog, em vez de ter os icones todos na barra lateral mas nunca tinha encontrado ninguém que fosse capaz de ensinar de forma tão simples como tu. É uma alteração pequenina mas faz muito diferença :3 Estou a adorar o novo look do meu blog ahahah, obrigadaaaa <3 Beijinhos*
ResponderEliminarhttp://maisumblogdegaja.blogspot.fr/
que post útil! já tive curiosidade em como se fazia, obrigada :pppp beijinhos!
ResponderEliminarrun-your-world.blogspot.pt
Curioso porque passei o dia à procura disto! Fizeste o post na altura certa :p
ResponderEliminarAssim já consegui xD
És maravilhosa a fazer este tipo de posts! Só nos resta agradecer-te :)
ResponderEliminarxx
http://ruteritamaia.blogspot.com/
great post!! xoxo
ResponderEliminarhttp://www.tanyalsk.ru
É mais fácil do que parece haha. Gostei muito do post, faz mais!
ResponderEliminarBeijinho,
Rute Azevedo ♡ (Red Lipstick & Skinny Jeans)
Olá. Não sei porquê, mas sempre que procuro no htlm por alguma coisa (como ) nunca encontra. Eu faço sempre da maneira certa, mas nunca resulta. Porque será? Não haverá outra maneira? beijo, obrigada :)
ResponderEliminarHello :) é mesmo estranho não conseguires procurar no html, podes-me mandar um print screen de como estás a fazer para o meu e-mail? :) Assim ajudo-te por lá*
Eliminarlovablemaria.blog@gmail.com
Beijinhos,
Maria*
ADOREI o post, super esclarecedor!
ResponderEliminarxoxo,
andy
Professora Maria :D
ResponderEliminarAchas que ficava bem com o blog ou nem por isso? :p
Beijinho <3
R: Não querida, já algum tempo eu coloquei o boneco de ir para o topo no blog e agora mesmo que queira mudar já não consigo :/ é por isso é que estou a perguntar se eu quiser mudar ou retirar a barra dps como é que faço (?)
ResponderEliminarxoxo
Este post é tão awesome :)
ResponderEliminarÉ bom poder ter estas dicas para melhorar o blog
Beijinho
Fantástico post, fantástica organização na explicação. Gostei muito. :)
ResponderEliminarTambém tenho um quê que me puxa para o html, logo adoro isto.
Nice post. You have a great blog here ;)
ResponderEliminarMakeup Demon blog
Makeup Demon Bloglovin
Ao tempo que procurava blogs que ensinavam a fazer isto , e finalmente encontrei ! Muito obrigada querida , foste uma grande ajuda , e tens um ótimo blog , continua assim! <3
ResponderEliminarsomethingwithsa-ra.blogspot.pt
Amei!! Obrigada pelo post! A rubrica está muito fixe :)
ResponderEliminarComo gostava de ter jeitinho para este género de coisas! O pouco que sei aprendi em blogs... Obrigada pela dica, fico à espera das próximas :) beijinhos!
ResponderEliminarhttp://mydeardreamers.blogspot.pt/
Ainda não testei, mas pelo que li parece-me um bom tutorial. Continua, e parabéns por uma bela ideia! :)
ResponderEliminarOlá Maria, gostei muito do post! Mas tenho uma dúvida, na parte de adicionar o link dos ícones das redes sociais, não estou a ver como se faz essa parte (sou um bocado naba nisto).. Não me podes dar uma luzinha se faz favor? :)
ResponderEliminarBeijinho*
Já testei e está a funcionar super bem :)
ResponderEliminarFiz tudo como indicaste e não funcionou :s. O que estarei a fazer errado? :/
ResponderEliminarBeijinho!
Olá querida, tudo bem?
ResponderEliminarEstou a tentar usar a barrinha como explicas e corre tudo lindamente, o unico problema é que aparece sem fundo. Sabes-me explicar porque? :(
Isso era o que eu estava a fazer, mas não acontecia nada. Ficava sempre com a barra transparente.
ResponderEliminarAparentemente o problema era a ordem em que tinha aquilo em relação aos códigos anteriores que tenho pelo blog. Assim que meti mais para cima do /b:skin já apareceu uma corzita ehe
Thanks anyway honey <3
Preciso de ajuda :( a minha barra não fica 'fixa' já tentei de tudo
ResponderEliminarMil obrigadas! :D Já está, só mais uma pergunta, como meto ela assim transparente tipo a tua mas em cor branca?
ResponderEliminarkiss, v!
Done! :) Muito obrigado ficou espectaculoso <3 beijinhos
ResponderEliminarOlá! Já consegui tudo, obrigada. Mas eu gostava de saber como é que ponho os links ao centro :)
ResponderEliminarxx
obrigada pela ajuda! resultou na perfeição!
ResponderEliminarXOXO
http://the-flashy-one.blogspot.pt/
Olá maria, podias-me dizer como fizeste a barra ficar "transparente"?
ResponderEliminarSão óptimos! aconselho-te vivamente a comprares um xp
ResponderEliminarObrigado pela ajuda! agora só preciso de encontrar icons que combinem com a minha barra :)
Olá Maria, fiz tudo como disseste e consegui da primeira vez, mas agora quis alterar a cor e não deu , então apaguei e fiz tudo de novo só que já não dá... Será que sabes o que estou a fazer mal ?
ResponderEliminarMuito obrigada querida, beijinho <3
www.somethingwithsa-ra.blogspot.pt
Olá :) Fiz tudo como era suposto e funcionou! Mas eu queria meter a barra ao centro, e mudar o tipo de letra, e também meter a barra sempre fixa, ou seja, como tens a tua neste momento. Espero que me possas ser útil, obrigada!
ResponderEliminarOlá Lígia, tudo bem? :)
EliminarNão consigo encontrar o link do teu blog no teu perfil por isso vou-te responder por aqui :)
no código que se encontra aqui a barra deveria ficar fixa porque no código .lovablenavbar {
tem position: fixed;
ou estás a dizer mesmo fixa e a não descer para baixo com o rato? se for isso retira onde diz position: fixed
Quando à barra centrada, onde diz
ul.lovablenav { vais encontrar a dizer width: 1000px;
reduz esse número até a barra ficar mais pequena em largura e centrada :)
Quanto a mudar o tipo de letra eu fiz outro tutorial onde ensina isso:
http://www.lovable-maria.com/2014/06/online-class-favorite-font.html
Beijinhos :)
Infelizmente não consegui... acho que pus tudo certinho mas não deu... Para voltar a tentar tenho que apagar tudo o que colei ou não?
ResponderEliminarOlá Maria, sabes como delinear a barra? Isto é, fazer uma linha em baixo para fazer uma "separação" , não sei se me entendeste...
ResponderEliminarBeijinho , e obrigada :)
www.somethingwithsa-ra.blogspot.pt
Olá Maria :)
EliminarEu já uso estas tuas dicas no meu blog de fotografia... No entanto estou a criar outro com mais duas colega, no qual queriamos por barra tal como explicas aqui,mas... sem redes sociais... como posso fazer? E para mudar a cor como faço?
beijinhos **
http://lilianaprataphotography.blogspot.pt/