Que tal em vez da barra padrão do blogspot você utilizar a sua própria barra personalizada, parece complicado, confira os passos e veja que de complicado não tem nada.
1° Entre no Blogger>Design>Editar HTML antes de qualquer coisa faça o Backup do seu template.
2º Procure por ]]> utilize Ctrl+F para localizar mais rápido.
3º Cole antes dela o código abaixo:
#NavbarMenu {
width: 100%;
height: 35px;
font-size: 12px;
font-family: Arial, Tahoma, Verdana;
color: #FFF;
font-weight: bold;
margin: 0;
padding: 0;
background-color: #000033;
}
#NavbarMenuleft {
float: left;
margin: 0;
padding: 0;
}
#NavbarMenuright {
width: 270px;
font-size: 11px;
float: right;
margin: 0;
text-align: right;
padding-top: 6px;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
}
#nav {
margin: 0;
padding: 0;
}
#nav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#pesquisa {
color: #FFFFFF;
background-color: #000066;
border: 1px solid #000000;
}
#nav li {
list-style: none;
margin: 0;
padding: 0;
}
#nav li a, #nav li a:link, #nav li a:visited {
color: #FFF;
display: block;
font-size: 16px;
font-family: Georgia, Times New Roman;
font-weight: normal;
text-transform: lowercase;
margin: 0;
padding: 9px 15px 8px;
}
#nav li a:hover, #nav li a:active {
color: #FFF;
margin: 0;
padding: 9px 15px 8px;
text-decoration: none;
background-color: #000099;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
width: 150px;
color: #FFF;
font-size: 14px;
font-family: Georgia, Times New Roman;
font-weight: normal;
text-transform: lowercase;
float: none;
margin: 0;
padding: 7px 10px;
border-bottom: 1px solid #FFF;
border-left: 1px solid #FFF;
border-right: 1px solid #FFF;
background-color: #000066;
}
#nav li li a:hover, #nav li li a:active {
color: #FFF;
padding: 7px 10px;
background-color: #0000CC;
}
#nav li {
float: left;
padding: 0;
}
#nav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0;
padding: 0;
}
#nav li ul a {
width: 140px;
}
#nav li ul ul {
margin: -32px 0 0 171px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}
#nav li:hover, #nav li.sfhover {
position: static;
}
4º Salve a alteração.
5º Procure por <Body
6º E cole o seguinte código abaixo dela:
<div id='NavbarMenu'>
<div id='NavbarMenuleft'>
<ul id='nav'>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li>
<a href='#'>Sample Page</a>
<ul>
<li>
<a href='#'>Sub Page #1</a>
<ul>
<li><a href='#'>Sub Sub Page #1</a></li>
<li><a href='#'>Sub Sub Page #2</a></li>
<li><a href='#'>Sub Sub Page #3</a></li>
</ul>
</li>
<li><a href='#'>Sub Page #2</a></li>
<li><a href='#'>Sub Page #3</a></li>
<li><a href='#'>Sub Page #4</a></li>
<li><a href='#'>Sub Page #5</a></li>
</ul>
</li>
<li><a href='#'>Sample Post</a></li>
<li><a href='#'>Blog Page</a></li>
</ul>
</div><div id='NavbarMenuright'>
<FORM method=GET action="http://www.google.com.br/search">
<INPUT TYPE=text name=q size=25 maxlength=255 value="">
<INPUT type=submit name=btnG VALUE="Pesquisar">
<input type=hidden name=sitesearch value="endereço do seu blog">
</FORM>
</div>
</div>
<div style='clear:both;'/>
8º No final do código coloque a url do seu blog na caixa de pesquisa, procure o trecho em que está escrito endereço do seu blog.
9º Ou faça as alterações que desejar e salve e confira a nova barra.
Caso queira ocultar a barra padrão do blog, coloque o seguinte código junto ao primeiro que colocamos no passo 3.
#navbar-iframe { height:0px; visibility:hidden; display:none }
Ou confira a postagem sobre como excluir o navbar do blog.
8 comentários:
Dá para trocar a cor dela??!
Ola!, Action Procure pelo código CSS: #Navbar{ dentro dele você vai enontrar a seguinte linha de comando: color: #FFF; altere o #FFF para alterar a cor da letra da navbar.
Procure a linha: background-color: #000033; e altere o #000033 para alterar a cor do fundo da sua navbar
Confira os códigos das cores no site: Tabela de cores para web
legal..vlw a dica!!! (eu sou action..hehe)
ok..otro problema!!.. porque a primeira letra não fica maiuscula?!!
SMK procure pela tag: text-transform: lowercase;
E altere pelas seguintes de acordo com sua preferência:
1. none: texto normal
2. capitalize: todas as primeiras letras do texto em maiúsculas
3. uppercase: todas as letras do texto em maiúsculas
4. lowercase: todas as letras do texto em minúsculas
legal... agora se vc puder visitas meu blog www.gospelchannel.blogspot.com
Vlw pelas dicas! Espero que venha muito mais!!!
1001 faces, queria perguntar como alinho o nomes com meu blog tipo o nome Iniciar do navbar personalizado esta reto com o plano de fundo
Boa tarde!
Antes de mais,agradeço pela excelente ajuda, esta explicação ajudou-me bastante.
Só não sei como publicar dentro do menu, e restantes opções... Tamém gostaria de mudar o aspecto desta navbar (dar-lhe uma aparência mais moderna)...
Depois de ter instaldo a nova navbar, quando vou fazer alterações no "esquema" já não dá para ver direito, pois ficam as letras umas em cima das outras.
Será que pode dar uma ajuda?
Agradeço desde de já, Elisabeth M.
Postar um comentário