Para seu blog : Menu no topo do blog com icones.

em terça-feira, 8 de novembro de 2016 |
Olá, algumas pessoas preferem menus no topo do blog do que aqueles menus que vem no cabeçalho (que é feito pelo google-maps), porém algumas pessoas não sabem fazer e nem onde encontrar, então eu trouxe um tutorial de como colocar o menu e também trouxe um menu que eu fiz para vocês usarem. 
Vocês podem trocar as cores que tem no menu, as cores que estão presentes são apenas um exemplo.
Siga todas os passos e veja como instalar e modificar o seu menu.

O modelo de menu que iremos usar é esse aqui : visualize online


Você vai precisar de alguns códigos de cores caso queira mudar as cores do menu, aqui nesse site tem algumas cores em códigos, copie os códigos que estão nesse exemplo" #6495ED"
Só mude o que está de vermelho
Para a instalação do menu você deve ir em Modelo >> Editar HTML.

Aperte as teclas ctlr+f e proucure por : <head>
Assim que você achar coloque acima de <head>  o seguinte código:
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css" />
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />
Agora, proucure por : ]]></b:skin>
coloque acima de ]]></b:skin> o seguinte codigo:
P.S : Coloquei ao lado a legenda de cada código.

#menutop1 a {
 
 /*borda rosa ao lado do link*/border-right: solid 2px #ff6898;
     /*não mexa aqui*/padding: 5px;
   /*Cor da fonte*/ color: #dcd8e7;
   /*não mexa aqui*/ -webkit-transition-duration: .80s;

}

#menutop1 {
   /*tamnho do menu*/  padding: 13px;
 /*Cor do fundo*/   background: #5c3857;
  /*não mexa aqui*/  overflow: hidden;
   /*alinhamento do texto*/ text-align: center;
   /*tamanho da fonte*/ font-size: 18px;
  /*espaço das letras*/  letter-spacing: 2px;
  /*não mexa aqui*/  text-transform: uppercase;
 /*fonte dos links- MUDE SE QUISER*/   font-family: quicksand;
  /*Cor dos links*/  color: #ffffff;
    /*bordar de cima*/ border-top: solid 2px #dcd8e7;
 /*borda de baixo*/   border-bottom: solid 2px #ff6595;
}
#menutop1:hover{
 
}
/*menu em hover (quando passa o mouse)*/
 #menutop1 a:hover {
  /*não mexa*/  text-decoration: none;
  /*bordar branca em baixo do link*/  border-bottom: solid 2px #ffffff;
   /*cor dos links*/ color: #ffffff;
   /*não mexa*/ -webkit-transition-duration: .80s;
    /*cor de fundo quando passa o mouse*/background: #ff6a99;
 
}

Agora procure por " </head> "
Edite as partes em vermelho com seus links
e abaixo dessa tag cole o seguinte código :
<div id='menutop1'>
<a href='LINKDOHOME'><l class='fa fa-home'/>home</a>
<a href='LINKDASREGRAS'><l class='fa fa-cogs'/>regras</a>
<a href='LINKDEENCOMENDE'><l class='fa fa-heart'/>encomende</a>
<a href='LINKRESOUCERS'><l class='fa fa-paste'/>resoucers</a>
<a href='LINKDASTAFF'><l class='fa fa-group'/>staff</a>
<a href='LINKPARACONTATO'><l class='fa fa-comments'/>contato</a>
<a href='LINKCONOGRAMAS'><l class='fa fa-list'/>conogramas </a>
<a href='LINKFAQ'><l class='fa fa-question'/>F.A.Q</a>
</div>

Agora salve está pronto!
Algum erro? avise.
Qual tutorial de blog você gostaria que eu postasse? 

Obs : Esse menu foi feito inteiramente por mim, se usar credite o perfect projects, plágio é crime.

2 comentários:

  1. oi, estou fazendo o cabeçalho, e n consegui achar o ]]> msm procurando com Ctrl + F

    ResponderExcluir
  2. obrigada <3

    usando: http://redesign-the.blogspot.com.br/

    ResponderExcluir