Por
Para quem não sabe faz alguns meses que iniciei a série dicas para blogueiras com o primeiro vídeo ensinando como personalizar a sidebar/gadget lateral do layout no blogger (clique aqui para conferir o post) e o feedback foi muito positivo, por isso após me organizar finalmente consegui gravar mais um tutorial que eu espero que vocês gostem.
Menu topo fixo com sub menus e barra de pesquisa
Como falei no vídeo, todos os códigos listarei aqui no post.
Para começar vá em layout e adicione gadget HTML/JavaScript, nele você vai colar o seguinte código e salvar:
<div id=’NavbarMenu’>
<center>
<div id=’alinhamentohorizontal’>
<div id=’NavbarMenuleft’>
<ul id=’nav’>
<li><a href=’SEU LINK AQUI‘>Início</a></li>
<li>
<a href=’SEU LINK AQUI‘>Sobre</a>
</li>
<li><a href=’SEU LINK AQUI‘>Anuncie</a>
</li>
<li><a href=’SEU LINK AQUI‘>Categorias</a>
<ul>
<li><a href=’SEU LINK AQUI‘>Maquiagem</a></li>
<li><a href=’SEU LINK AQUI‘>Moda</a></li>
<li><a href=’SEU LINK AQUI‘>Look</a></li>
<li><a href=’SEU LINK AQUI‘>Dicas</a></li>
<li><a href=’SEU LINK AQUI‘>Produtos</a></li>
</ul>
</li>
<li>
<a href=’SEU LINK AQUI‘>Parcerias</a>
</li>
<li>
<a href=’SEU LINK AQUI‘>Contato</a>
</li>
</ul>
</div>
</div>
<div style=’clear:both;’/></div>
<div id=”barra-busca”>
<form id=”form-busca” method=get action=”SEU LINK AQUI/search”><input id=”sprocura” type=text name=q maxlength=255 value=”” />
<input name=btng type=submit id=”bt-busca” value=”” />
<input type=”hidden” name=”domains” value=”SEU LINK AQUI” /><input type=”hidden” name=”sitesearch” value=”SEU LINK AQUI” />
</form></div>
</center></div>
– Onde está escrito SEU LINK AQUI, você coloca o link do seu blog, da página criada ou do marcador, da forma que expliquei no vídeo.
– Onde está escrito Início, Sobre, Anuncie, Categorias, Maquiagem, Moda e os outros você pode substituir e colocar o que quiser.
– Para apagar algum link sempre lembre de apagar onde começa com: <li> até onde terminar com: </li>.
– Para adicionar mais sub menus ou coloca-los em outros links é necessário começar com: <ul>
<li><a e finalizar com </a></li> e ir adicionando mais.
– Caso queira adicionar apenas 1 sub menu, comece com:
<ul>
<li><a e finalize com </a></li></ul></li>. | Existem dois </li>, pois um é referente ao menu que você escolheu, por exemplo Categorias e o outro referente ao link que você adicionou para criar o sub menu.
Depois de adicionar e salvar, ele ainda não vai estar configurado, irá aparecer mais ou menos assim:
Por isso vá em Modelo, depois editar HTML, clique e digite Ctrl+f, irá abrir uma barrinha de pesquisa e procure pelo código: ]]><. Acima dele você irá colar:
/* NavbarMenu
————————— */
#alinhamentohorizontal {
width: 1050px;
}
#NavbarMenu {
background: #000; | Fundo do menu, altere para a cor que quiser.
width: 100%; | Tamanho da largura do menu.
position: fixed; | Fixo no topo.
height: 40px; | Altura o menu.
z-index: 99; | Não retire.
top: 0; | Muda a posição do menu.
left: 0; | Muda a posição do menu.
}
#NavbarMenuleft {
width: 100%;
float: left;
margin: 0;
padding: 0;
}
#nav {
margin: 0;
}
#nav ul {
float: left;list-style: none;
margin: 0;
padding: 0;
}
#nav li {
list-style: none;
margin-right: -10px;
padding: 0;
}
#nav li a, #nav li a:link, #nav li a:visited {
color: #FFF; |edite cor do link.
display: block;
font-size: 16px; |Tamanho da fonte do link.
font-family: Tahoma; |Letra da fonte.
font-weight: normal;
text-transform: uppercase; | Letra em maiúsculo.
margin: 0;
padding: 9px 19px 8px; | Altura e espaçamento das letras e caixa de pesquisa.
}
#nav li a:hover, #nav li a:active {
background: #000;
color: #253cc7; |edite cor do link hover.
margin: 0;
padding: 9px 15px 8px;
text-decoration: none;
margin-right: 0px
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #000; |cor de fundo.
width: 100px;
color: #FFF; |cor do link.
font-size: 14px;
font-family: Tahoma;
font-weight: normal;
text-transform: uppercase;
float: none;
margin: 0;
padding: 7px 10px;
}
#nav li li a:hover, #nav li li a:active {
background: #000; |cor de fundo hover.
color: #253cc7; |cor do link.
padding: 7px 10px;
}
#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;
}
/* CSS PESQUISA
—————————–*/
#barra-busca {
float:right;
}
#form-busca {
background: none;
}
#form-busca #sprocura{
height: 18px; | Altura da barra.
width: 170px; | Largura da barra.
margin-top: -28px; | Posicionamento no top.
margin-left: 8px; | Posicionamento na esquerda.
color: #000; | Cor da letra digitada.
border: 0px solid #000; |
float: left; | Posicionamento da barra.
padding: 3px; | Tamanho total da barra.
background-color: #FFF; | Cor da barra.
}
#bt-busca {
height: 23px;
width: 33px;
background: transparent url(“LINK DA LUPA DE PESQUISA“) no-repeat scroll 0% 0%;
border: medium none;
margin-top: -28px; | Posicionamento no top.
float: right;
cursor: pointer;
margin-right: 45px;
margin-left: 5px; | Espaço entre a lupa e a barra de pesquisa.
}
– Nos códigos que não tem explicação do que são ou fazem, não é necessário alteração.
– Salve e verifique como ficou.
Deverá ficar mais ou menos assim:
– Como expliquei no vídeo, se ficar listras entre as letras, é só apagar o seguinte código:
border-$startSide: $(tabs.border.width) solid $(content.background.color);
border-$endSide: $(tabs.bevel.border.width) solid $(tabs.border.color);
Para localizá-lo é só procurar por: border-$startSide apagar as duas linhas e salvar.
Para quem quiser utilizar a mesma lupa de pesquisa do vídeo:
Feito isso é só adicionar os links de acordo com o seu gosto e salvar.
Só para lembrar, eu uso o modelo simples do blogger para realizar essas alterações, se o seu modelo for outro pode ser que fique diferente ou que não funcione.
Vídeo explicando (peço desculpas pelo áudio oscilar as vezes):
Espero que tenha gostado do tutorial, se tem alguma sugestão de post ou dúvida fique a vontade para perguntar.
Até mais!
Ray Meireles
maio 6, 2018seu tutorial me ajudou bastante
http://www.raissameireles.com.br/