O tutorial dessa semana é de como colocar um menu fixo no seu blogger. E no fim do post tem um super bônus ensinando a colocar uma caixa de busca no menu <3

Vocês vão ver o quanto é fácil. Vou passar o código pronto pra vocês, e vou explicar o que é cada coisa pra vocês conseguirem adaptarem ele a gosto!

A Aparência do Menu

1. Primeiro, copie esse código:

.menutopo { z-index: 333; position: fixed; top: 0px; left: 0px; right: 0px; height: 25px; padding:18px; color: #fff; background-color: #000; font-size: 18px; text-align: center; font-family: 'Calibri'; text-transform: uppercase; }
.menutopo a { color: #fff!important; margin-right: 20px; }
.menutopo a:hover {  text-decoration:underline }
.menutopo img { margin-top: -3px; align:right; width: 35px; margin-left: 5px; float: right;}

2. Entendendo o código:

color:#fff – cor da fonte (os dois “color” tem que ser da mesma cor)
background-color: #000 – cor do fundo
font-size: 18px – tamanho da fonte
font-family: ‘Calibri’ – nome da fonte
text-transform: uppercase – texto maiúsculo
text-decoration:underline – texto sublinhado (quando passa o mouse) / para tirar, é só no lugar do underline colocar none
padding:18px; – tamanho em volta. Mude o valor para deixar mais fino o mais largo.

Dica Extra: o a:hover no código, é o que acontece com o LINK quando passa o mouse, você pode por outra cor, por exemplo, mudar a cor do fundo… Deixe o menu com o seu jeito


Help: Não sabe qual cor usar? Entre nessa Tabela de Cores, escolha uma cor e copie o código, por exemplo: #FF0000

Essas são as coisas que você pode mudar na aparência do menu, se não entende de CSS, não mexa em nada além disso.

Agora vá em Modelo e Editar Html como na imagem:

Clique para ver maior

Aperte dentro do quadrado com os códigos, e pressione CTRL+F, vai abrir uma caixa de pesquisa. Nessa caixa digite:  ]]></b:skin> e aperte Enter

Clique para ver maior.



ANTES dessa tag → ]]></b:skin> ← cole o código que você copiou. (Ou alterou)

Clique para ver maior.

Clique em salvar.

Esse é só o estilo (css) do menu. Para o menu aparecer de fato, vamos colocá-lo no layout.

Vá em layout e Adicione um Gadget na Barra Lateral (Em alguns blogs da erro se for em outro lugar). Não tem problema, o menu vai aparecer no topo de qualquer forma.

Obs. Caso o seu layout não tenha essa sessão de Adicionar Gadgets ou não funcione, cole o código depois da tag <body> ou <body… no Editar HTML. (Use o ctrl+f para achar).

Cole o seguinte código:


<div class="menutopo">

<a href="/"> Início </a>
<a href="LINKAQUI"> TÍTULO </a>
<a href="LINKAQUI"> TÍTULO </a>
<a href="LINKAQUI"> TÍTULO </a>

</div>

Mudando o código para os seus links

LINKAQUI você vai colocar o link desejado, e em TÍTULO o nome que vai aparecer.
Caso queira entender melhor essa parte, de como colocar seus links e categorias, confira esse tutorial de COMO COLOCAR SEUS LINKS NO MENU DO BLOG.

Depois disso é só salvar!

E aí? Conseguiram? Comentem pra eu saber se estou ajudando hahah. Se não tiver conseguido, comente o problema pra que eu possa ajudar <3

Bônus: Caixa de busca no menu

Antes do </div> Acrescente:

<style>

#search {
    float: right;
    height: 30px;
    margin-right: 30px;
    margin-top: -5px;
}

#search input.field {
    padding: 10px;
    outline: none;
    font-size: 13px;
    z-index: 1;
    width: 220px;
    position: relative;
}

#search input.field:focus {
background-position:top right;
background-repeat:no-repeat;
}

#search input.field {
    background-color: #fff;
    border: 1px solid #000;
    color: #000;
    background-image: url('https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_search_48px-128.png');
    background-size: 12%;
    background-position: right;
    background-repeat: no-repeat;
}

#search input.field:focus {

}

</style>
<div id='search'>
<form action='/search' id='searchform' method='get'>
<div><input class='field' id='s' name='q' onblur='if (this.value == &apos;&apos;) {this.value = &apos;Digite e tecle Enter&apos;;}' onfocus='if (this.value == &apos;Digite e tecle Enter&apos;) {this.value = &apos;&apos;;}' type='text' value='Digite e tecle Enter'/></div>
</form>
</div>

Se a caixa ficar muito grande na altura, mude o padding: 10px; para um número menor (não apague o px). Se ela ficar muito larga, mude o width: 220px; pra um número menor.

Se você gostou do tutorial, tem muito mais de onde veio na página EXTRAS do blog! Ah, se você quer mais tutoriais como esse, dicas para o seu blog, cadastre-se aqui para receber nossa newsletter e não perder nenhum. Tem conteúdo exclusivo para assinantes. Logo vou começar uma série para blogueiros iniciantes, você não vai querer perder!