STANDARD @IMPORT Tizy Martins: Personalizando seu blog: Menu Fixo Personalizado

22 janeiro, 2017

Personalizando seu blog: Menu Fixo Personalizado

Oláaa internet, tudo bom?
Fiquei duas semanas sem postar, que vergonha hehe. Mas to aqui, agora.
E no post de hoje vou ensinar a fazer um Menu Fixo personalizado.

Esse post é o inicio da serie: Personalizando seu blog (sem criatividade para nome, aceito dicas para nomes)
Para fazer esse menu é muitooo simples. Se você fizer tudo como eu vou ensinar não tem como dar errado,
Bom chega de blá, blá, blá e vamos lá.

Você vai em Blogger >  Modelo > Editar HTML:

E pesquise ( ctrl+f ) por "]]></b:skin>" e acima dele você vai colar o seguinte código:
/* Menu fixo - Tizy Marins---------------------------------------*/ #alinhamentohorizontal{ width: 1050px; } #menufixo { font-family: tahoma; Color:#COR-EXTRA; background:#COR-DO-FUNDO; height: 35px; position: fixed; top: 0; left: 0; width: 100%; z-index: 99; }#menu { padding:7px 0px; float:left; } #menu a { Color:#COR-DA-FONTE; padding: 0px 40px; text-transform: uppercase; } #menu a:hover { Text-decoration: none; color:#COR-DA-FONTE-SELECIONADA; }
/* CSS PESQUISA-----------------------------*/#barra-busca { float:right; } #form-busca { background: none; }#form-busca #sprocura{ height: 20px; width: 285px; margin-top: 3px; margin-left: 8px; color: #fff; border: 0px solid #000; float: left; padding: 5px; background-color:#COR-DA-BARRA-DE-PESQUISA; } #bt-busca { height: 23px; width: 23px; background: url(http://i.imgur.com/1suO9PH.png) no-repeat; border: none; margin-top: 5px; float: right; cursor: pointer; margin-right:35px; margin-left: 5px;}

Após colar esse codigo, você vai em Blogger > Layout > Adicionar um Gadget > HTML/JavaScript.
E você vai colar o codigo abaixo:
<div id='menufixo'><center><div id='alinhamentohorizontal'><div id='menu'><a href=''>Inicio</a>X<a href=''>Sobre</a>X<a href=''>Anuncie</a>X<a href=''>Contato</a></div><div id="barra-busca"><form id="form-busca" method=get action="http://layout-by-dream-design.blogspot.com.br/search"><input id="sprocura" type=text name=q maxlength=255 value="Pesquise aqui" /><input name=btng type=submit id="bt-busca" value="" /><input type="hidden" name="domains" value="LINK-DO-SEU-BLOG" /><input type="hidden" name="sitesearch" value="LINK-DO-SEU-BLOG" /></form></div></div></center></div>

As partes em negrito você deve modificar de acordo com seu gosto e com o seu blog.
Espero que tenham gostado do tutorial, até a próxima.

3 comentários:

  1. são lindos você tem um belo talento você quando crescer faça web designer <3 você arrasa moça bjs ...
    http://jesscastrojc.blogspot.com.br/

    ResponderExcluir
  2. Olá Beaaaa! É mó maneiro para mim ficar vendo esses modelos de menus. Tem cada menu lindo né? Inclusive esse, basta botar aquelas cores que você quer e pronto já está show. Tem uns layouts que ficam lindos com menu fixo. Um dia eu ainda ponho num layout. Gostei do tuto sim, aliás está bem explicadinho ;).

    Snack Cheese | Porquinhos fofinhos. (っゝω・)っ~☆v i s i t e - n o s☆

    ResponderExcluir

Tecnologia do Blogger.