06 dezembro 2014

Menu Fixo no topo do Blog


Oi pessoal,tudo bom?
Bom,esse é o 1° Tutorial do blog,uhul,e eu vou ensinar como colocar um menu fixo parecido com esse que tenho aqui no blog,você pode alterar as cores de fundo,das letras e pode colocar uma barra de pesquisa e ícones também se quiser.Então vamos ao Tutorial:

Primeiro vá em Modelo>Editar HTML> dê Ctrl F e procure por }]]></b:skin> e acima dele coloque o primeiro código:



Algumas partes que você pode editar,estão em rosa (só faça isso se souber):

A cor de fundo: background: #CEF6F5/* Cor do fundo */ Escolha a cor aqui.
OBS:Você terá que mudar a cor da borda também aqui: border-left: 200px solid #CEF6F5
Dependendo do quanto você queira centralizar o menu (a partir do 1° link) você muda e espessura da borda,aqui:
border-left: 200px solid #CEF6F5; /* Tamanho e cor da borda - não retire pois ela centraliza o menu */
Edições das letras:
background: #848484; /* Cor da fonte */
font-family: 'Arial', corsiva; /* Nome da fonte */
font-size: 16px; /* Tamanho da fonte */
Para mudar a cor da fonte você terá que alterar aqui também:
color: #848484; /* Cor da fonte novamente*/

Se você quiser colocar uma caixa de pesquisa,adicione o código abaixo depois do 1° código:



As partes que você pode editar,estão em rosa:

Posição da caixa de pesquisa:
float: left; /* Flutuando a esquerda */
margin-top:7px; /*Distância do topo */
Cor de fundo:
background: #FFF; /* Cor de fundo da caixa de pesquisa*/
Edições das letras da caixa:
font-family: Arial, corsive; /* Nome da fonte */
color: #ccc; /* Cor da fonte */
Botão Pesquisar:
background: url('URL AQUI'); /* Link da imagem do botão de pesquisar | tamanho: 20x20px */

Para fazer mais alterações basta localizar a parte que você quer modificar no código,tá tudo explicadinho,só altere as partes que você souber,tem tipo uma legenda do lado de cada parte que você pode mudar,ela está dentro dessas coisinhas: /*ASSIM*/
Salve.

Agora vá em Layout>Adicionar um gadget>procure por HTML/JavaScript e cole o seguinte código:



Caso queira colocar ícones de redes sociais ou a logo do seu blog-em miniatura claro-ao invés do código acima coloque o código abaixo no HTML/JavaScript:



Onde tem: Link substitua pelo link do local que você quer que vá ao clicar na imagem ou no título.
E onde tem TÍTULO substitua pelo nome da aba,por exemplo: Início,Contato,Sobre etc.

OBS: O menu só irá funcionar perfeitamente dependendo do lugar que você adicionar o gadget,se não ficar tudo ok,vá mudando o local do gadget e visualizando,onde ficar ok,salve.

Vou deixar alguns ícones de Redes Sociais pra vocês pegaram o url:



Ficará assim com as imagens:

Então é isso,espero que tenham gostado e entendido,qualquer dúvida deixem nos comentários pra ver se consigo te ajudar.
Beijos da Isa

2 comentários: