Aqui vamos ver como colocar uma Navbar personalizada no lugar da Navbar padrão do Blogger "Blogspot". Se trata de um menu simples, e imagens de redes sociais para dar ai uma aparência legal no seu Blog. Obeserve a imagem desta Navbar.
Criei está simples Navbar para usar em meu Blog, mas vou compartilhar com todos. Vamos aos passos para colocar essa Navbar no seu Blog.
Primeiro no painel do seu Blog clique em Design, depois clique em Editar Html. Não esqueça de baixar uma cópia do modelo do seu templete.
Agora marque a opção Expandir Modelos de Widgets, de ( ctrl+f ) em seu teclado e procure por:
]]></b:skin>Logo acima dessa linha coloque o seguinte código.
/* inicio navbar personalizada */A parte marcada em Vermelho é responsável por ocultar a Navbar padrão do Blog, se quiser manter as duas barras apague essa parte do código. Marcado em Azul é onde coloquei uma imagem gradiente, para alterar coloque o link da imagem que você criar ou se quiser uma cor no lugar da imagem apague o link e coloque o código da cor na frente de background, desta forma:
#navbar-iframe{height: 0px;
visibility: hidden;
display: none;
}
#menu-nav{
background: url(http://i1212.photobucket.com/albums/cc447/wesleyextreme/imagem%20de%20postagem/img_sidebarh2.gif) repeat-x;
position:absolute; /* Importante */
z-index:2;
width:100%;
height:35px; /* Altura da Navbar */
margin-top:-30px; /* Importante */
}
#menu-nav a{
float:left; /* Faz os links flutuar a esquerda */
margin:10px; /* Importante */
margin-left:30px;} /* Distancia dos links do canto esquerdo */
#menu-img-nav{
float:right; /* Faz as imagens flutuar a direita */
margin-right:30px;} /* distancia das imagens do canto direito */
#menu-img-nav a{
margin:10px; /* Espaça entre as imagens */
margin-top:-2px; /* Importante */
}
/* fim navbar personalizado */
background: #cccccc; url() repeat-x;Escolha aqui sua cor preferida para combinar com seu Blog Tabela de Cores Html.
Não edite onde está marcado com /*Importante*/, a menos que entenda sobre código.
Salve e vamos a próxima etapa.
Agora procure por:
<bodyE logo abaixo cole o seguinte código:
<!-- inicio navbar personalizada -->As marcações em Azul é o local do seus links, e na marcação em Vermelho é o link das imagens que aparecerão, se quiser trocar as imagens veja esse meu outro post Sites de ícones Grátis.
<div id='menu-nav'>
<a href='###' title='Mapa do Site'>Mapa do Site</a>
<a href='###' title='Cursos'>Cursos</a>
<a href='###' title='Divulgação'>Divulgação</a>
<a href='###' title='Termos de Uso'>Termos de Uso</a>
<div id='menu-img-nav'>
<a href='Link do seu facebook' target='_blank' title='Facebook'><img height='60px;' src='http://i1212.photobucket.com/albums/cc447/wesleyextreme/imegens%20menu/facebook.png' width='60px;'/></a>
<a href='Link do seu twiiter' target='_blank' title='Twitter'><img height='60px;' src='http://i1212.photobucket.com/albums/cc447/wesleyextreme/imegens%20menu/twitter.png' width='60px;'/></a>
<a href='Link do seu Feed Rss' target='_blank' title='Feed Rss'><img height='60px;' src='http://i1212.photobucket.com/albums/cc447/wesleyextreme/imegens%20menu/rss.png' width='60px;'/></a>
</div>
</div>
<!-- Fim navbar personalizada -->
Para colocar mais links você só precisa repetir o trecho:
<a href='###' title='Mapa do Site'>Mapa do Site</a>.Para adicionar mais imagens é só repetir o código:
<a href='Link do seu Feed Rss' target='_blank' title='Feed Rss'><img height='60px;' src='Link da sua Imagem' width='60px;'/></a>Pronto agora salve e veja como ficou, qualquer dúvida não exite em Comentar.
