barra de pesquisa categoria dicas para blogueiras Layout sub categoria

Menu topo fixo com sub menus e barra de pesquisa

PorMarioutubro 11, 2016março 30, 20191 Comment

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:

<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‘>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>

</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:

:http://i65.tinypic.com/2dv8pxd.png

:http://i63.tinypic.com/pypv8.png

:http://i64.tinypic.com/28mcn0y.png

:http://i68.tinypic.com/x2ulxg.png

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):