Como criar uma nova navbar personalizada no Blogger

Fonte da imagem: http://www.them.pro/
Hoje eu preparei esse tutorial que irá modificar todo o seu NavBar do seu Blog, porque é hospedado pelo Blogger e sempre insere uma barra como essa acima do Blog, veja na imagem abaixo:
E como todo blogueiro gosta de dar um toque personalizado em seu Blog, e você gostaria de colocar pelo menos novas cores e até inserir qualquer link nessa NavBar ? Aprenda aqui.

Bom, não é possível modificar tudo no NavBar do Blogger, mas não é isso que pretendemos fazer, queremos Ocultar a NavBar original para colocar uma NavBar estética. Eu conseguiu tornar dois modelos de Navbars personalizáveis agora modificáveis, cores e novos links podem ser inseridos e modificados. As NavBars que eu tornei modificáveis são:

NavBar: Claro Transparente
&
NavBar: Escuro Transparente.

Agora se você quer uma NavBar para Cores Claras, Faça o DOWNLOAD AQUI,
ou e se você quer uma NavBar para Cores Escuras, Faça o DOWNLOAD AQUI.

Bom, Ao clicar em DOWNLOAD, você irá baixar um arquivo em HTML, neste arquivo contem códigos que exibem a NavBar que você escolheu acima, e quando você abrir o arquivo HTML e seu Navegador irá abrir-se e exibir uma barra como essa:
"Esta NavBar é pobre e vazia, mas é só você dar um toque especial a ela"
Você percebe que essa barra é transparente, ótimo, qualquer cor pode ser aplicada, e também você pode notar que há link, como: exemplo1, exemplo2 e etc. esses Links são para você inserir qualquer Link. Esta barra ainda não está Pronta! Falta Fazer umas modificações.

Agora, antes de continuar, certifique que você tenha:

  • Imagem tamanho 20x20px (pixels) que representa o seu Blog (Favicon)

  • Editor de imagens (Recomenda-se o Paint do Windows 7)

  • Navegador capaz de abrir documentos HTML (Mozilla Firefox por exemplo)

Bom, agora salve esta Imagem abaixo para o seu Computador:
Dê um duplo clique nesta imagem, após isso dê um ''Crtl + S'' para Salvar a imagem no seu PC.
Após baixar, abra esta imagem com o Paint, lá você vai pegar a imagem que representa o seu Blog (Favicon) tamanho 20x20 px (Pixels) e com esta imagem você vai por a mesma em Cima do quadradinho na imagem que você baixou. É provável que fique assim após você acabar:
Imagem de exemplo.
É isso que você deve fazer, deixar como na imagem acima mas com a sua própria imagem. Após as modificações Salve-as, e após isso você deve publicar esta imagem na web (mas para dar certo, a imagem tem que ser exibida ao acessar o seu Link) você pode usar o ImageShack para hospedar a sua imagem. Após você hospedar a imagem, pegue o link que faz a imagem ser exibida no seu Navegador e abra o bloco de Notas e cole o link da imagem pois isto é muito Importante neste tutorial.

Agora abra o arquivo HTML que você baixou no Link do começo deste Post, e abra-o com o Bloco de Notas. Lá você vai Determinar a cor do NavBar e os Links que seram exibidos. Os links, basta você pegar os links de cada Página e inseri-los no bloco de notas (junto com o link da imagem mas separado). você vê que os Links que estão no Arquivo são links com o Nome: exemplo1, exemplo2 e etc.

Você deve trocar os Links: exemplo1,2,3,4,5,6,7,8 e exemplo 9 pelos Seus Links que você achar melhor colocar. Lembre-se que os Links do arquivo estão assim:

  •    Nome    -                  Link

  • Exemplo1 - http://www.exemplo1.com/

  • Exemplo2 - http://www.exemplo2.com/

  • Exemplo3 - http://www.exemplo3.com/

  • Exemplo4 - http://www.exemplo4.com/

  • Exemplo5 - http://www.exemplo5.com/

  • Exemplo6 - http://www.exemplo6.com/

  • Exemplo7 - http://www.exemplo7.com/

  • Exemplo8 - http://www.exemplo8.com/

  • Exemplo9 - http://www.exemplo9.com/

  • Exemplo10 - http://www.exemplo10.com/

Agora, pegue o link da imagem que você hospedou, e no arquivo HTML aberto no Bloco de Notas, Clique no menu: Arquivo e em seguida clique em:  Localizar (Ctrl + F) e ai é só procurar o nome do link:

http://www.link_do_arquivo.jpg e no lugar colocar o url da imagem que você Hospedou.

Ai salve o arquivo modificado no Bloco de Notas e salve-o e execute o arquivo HTML no seu Navegador para ver se deu Certo.

No arquivo HTML baixado e que está aberto no Bloco de Notas, Clique no menu: Arquivo e em seguida clique em:  Localizar (Ctrl + F) e ai é só procurar o nome do link e/ou o seu URL, e quando o achar, modifique-o pondo o seu Link e nome ou Exclua a linha do Código que gera o Link, e ai você vai salvando e visualizando o Arquivo no Navegador.

Agora modificar a Cor, Clique no menu: Arquivo e em seguida clique em:  Localizar (Ctrl + F) e escreve:
<BODY BGCOLOR="#FFFFFF">
e quando você achar o escrito acima, exclua o: "#FFFFFF" e no lugar, coloque o código da cor que você quer colorir o seu NavBar (O Código da cor está em Hexadecimal). E salve o arquivo HTML e visualize-o no seu Navegador.

Para encontrar o Código da cor em Hexadecimal, CLIQUE AQUI

Agora você deve hospedar o arquivo HTML, mas é um pouco complicado hospedar o arquivo que seja executável na web. Tente hospedar* o arquivo HTML para um local onde ele possa ser acessado sem problemas ou Peça para que alguém hospede o Arquivo em Alguma Hospedagem de sites com suporte de execução de arquivos em HTML.

* Voce pode hospedar o arquivo HTML no:
XPG (No modo de FTP, apenas)
CJB (Alem de ser redirecionador de link, é tambem um pequeno HD)
Google Sites

Depois de ter hospedado o arquivo HTML, pegue o link e cole no navegador para ver se a Navbar aparece, e quando aparecer, é porque a hospedagem e o arquivo estão funcionando corretamente. Com o link do arquivo HTML cole-o no Bloco de Notas.

Entre o código abaixo, coloque o link do arquivo html no local indicado:
<IFRAME ALIGN='CENTER' frameBorder='0' height='28' scrolling='no' src='apague este texto e no lugar coloque o link do arquivo HTML' width='100%'/>
Após modificar o código acima colocando o link do arquivo HTML, cole o todo o código no Bloco de Notas.

No Blogger, vá no link ou na Aba: Design e clique no link: Editar HTML
agora procure a tag: ]]></b:skin> (digite Crtl + F e escreva a tag para encontra-la)
após encontrar a tag: ]]></b:skin> e pegue o código abaixo e insira-o em cima da tag: ]]></b:skin>.

EXEMPLO:
#navbar-iframe { height:0px; display:none; visibility:hidden; }
]]></b:skin>
agora, pegue o código que você colocou o link do arquivo HTML abaixo da tag: <head> 

EXEMPLO: 
<head>
<IFRAME ALIGN='CENTER' frameBorder='0' height='28' scrolling='no' src='http://link_do_arquivo_HTML' width='100%'/>
E Após tudo isso Salve as Modificações do HTML do seu Blog clicando no Botão: SALVAR MODELO, e após o salvamento, veja a sua nova Navbar do seu Blog, alias veja que a Navbar foi feita na base deste Tutorial ;).

NavBar personalizado:
Esta é a NavBar do Blogger, mas modificada totalmente!
Então é isso, esperamos que você tenha gostado e aproveitado este Único tutorial ensinando a modificação total do NavBar do Blogger, para qualquer erro ou falha encontrada, basta usar os comentários para colaborar conosco.

Compartilhe no:

Dono do blog e Autor.
Possui conhecimento em diversos assuntos e atualmente se dedica ao blog para ensinar coisas e dar soluções através dos problemas que ele mesmo se depara em seu desktop e na Web.

3 Respostas em "Como criar uma nova navbar personalizada no Blogger"

  1. Blog...

    Magnificent web site. A lot of helpful info here. I'm sending it to a few friends ans also sharing in delicious. And naturally, thank you for your effort!...

    ResponderExcluir
  2. Amigo, não consigo baixar o Código direciona para erro 404 google docs.

    ResponderExcluir
  3. Os links de download foram reabilitados para Download, obrigado pelo report.
    e aproveite!

    ResponderExcluir

Eu espero que voce...

1. Comente com moderação.
2. Sugira ou Opine.
3. Divulgue.