Hey galera! Como vocês estão? espero que bem. Estou bem feliz que o blog está voltando ativa e vocês continuam acompanhado o conteúdo. O blog estava com poucos views diários, porém começou a subir rapidamente e o número de seguidores também ♥ Por isso vocês são os melhores leitores que qualquer blogueiro poderia ter <3
Hoje eu trago um tutorial que foi pedido lá na ask , um menu no topo do blog já tem um tutorial de um aqui e agora vou postar outro um pouco (ou muito diferente desse) percebi que vocês gostam bastante das dicas HTML pois os views das postagens são bem maiores :3
Esse menu eu desenvolvi para o layout de um cliente, e achei ele bem legal. Trocando as cores obvio ele combina com quase todo tipo de layout, e tem um efeito simples e bonitinho.
A diferença é que ele não é um menu fixo, ou seja ele não desce junto com a página enquanto a gente rola o mouse, ele fica lá em cima mesmo. Eu particularmente prefiro ele assim.
Print do menu
É um menu super fácil de instalar no blog, vamos usar apenas Css
Então abra o HTML do seu blog, tecle ctrl + f e na caixinha de pesquisa cole }]]></b:skin> e logo ACIMA dessa tag cole o código abaixo modificando ao seu gosto.
/* MENU POR GLEICY HANER - TEENS FOREVER */
.menu {
margin: 0 auto;
width: 100%;
height: 55px;
padding: 12px 0 0 0;
background: #COR-DE FUNDO-DO-MENU;
font-family: 'Arial; /*Pode alterar a fonte */
font-size: 30px;
text-transform: uppercase; /* Deixa as letras maiúsculas se não quiser apague essa linha*/
text-align: center;
}
.menu a{font-size: 30px; /**Tamanho da fonte pode ser alterado**/
font-family: 'Arial /**Altera a fonte novamente **/
color: #fff; /**cor da fonte**/
text-decoration:none;}
.menu a::before, .menu a::after {display: inline-block;opacity: 0;-webkit-transition: -webkit-transform 0.3s, opacity 0.2s;-moz-transition: -moz-transform 0.3s, opacity 0.2s;transition: transform 0.3s, opacity 0.2s;}
.menu a::before {margin-right: 2px;content: '['; -webkit-transform: translatex(20px);-moz-transform: translatex(20px);transform: translatex(20px);}
.menu a::after { margin-left: 2px;content: ']';-webkit-transform: translatex(-20px); -moz-transform: translatex(-20px); transform: translatex(-20px);}
.menu a:hover::before,.menu a:hover::after,.menu a:focus::before,.menu a:focus::after { opacity: 1; -webkit-transform: translatex(0px); -moz-transform: translatex(0px);transform: translatex(0px);}
@font-face { font-family: "silkscreen"; src: url('http://static.tumblr.com/0xqvkot/7jqmgsn0m/pf_arma_five.ttf'); }
Agora ainda na caixinha de pesquise procure por <body e ABAIXO dessa tag cole o seguinte código
<div class='menu'>
<a href='Link/'>Nome da sua página</a>
<a href='link'>Nome da sua página</a>
<a href='link'>Nome da sua página</a>
<a href='link'>Nome da sua página</a>
</div>
Visualize e salve! Seu menu está pronto.
Tabela de cores aqui
Então é isso gente! Espero que tenham gostado. Se rapostarem/usarem o menu lembrem-se dar os créditos ao blog.
Até o próximo post!
Sem dúvida que disseste tudo!!! São os seguidores que fazem o nosso próprio blog. Acaba por ser tudo um trabalho de equipa. :D Adoro sentir todo este carinho e todo este feedback da vossa parte. Vocês, sim, fazem-me perceber que devo continuar aqui!
ResponderExcluirO teu post é extremamente útil. Quero ver se dou uma voltinha pelo layout do meu blog :D
Instagram ∫ Facebook Oficial Page ∫ Miguel Gouveia / Blog Pieces Of Me :D
Realmente, nossos leitores é que fazem o blog e que fazem nosso trabalho valer a pena ♥ Que bom que gostou do menu! E obrigada pela visita!
ExcluirMuito legal da tua parte compartilhar as coisas que sabe amôura.
ResponderExcluirParabéns por isso.
Beijoo !!
| O Blog Que Não é Blog |
| Esmalteca 230 |
É sempre bom compartilhar conhecimento querida ♥ Obrigada pela visita!
ExcluirAiiii, amei. Sou uó com layout haha
ResponderExcluirAjudou bastante esse tutorial!
www.iamcamilakellen.blogspot.com
Que bom que gostou querida! Com prática você chega lá ♥ Obrigada pela visita!
ExcluirAmo menus no topo do blog >3< esse é realmente muito bonito XD ~Kisses
ResponderExcluirThree Wishes | http://t-hreewishes.blogspot.com.br/
Eu também amo esse estilo de menu ♥ Acho que combina com todo tipo de layout haha. Obrigada pela visita!
ExcluirAmo menus, e sempre que vejo um diferente que eu curta já vou logo usando no meu blog haha !! Amei esse <3
ResponderExcluirBeijos
http://intoxicadosporlivros.blogspot.com.br/
Eu também amo menus <3 deixam o blog bem mais bonitos e descomplicados. Obrigada pela visita!
ExcluirMuito bom esse tutorial!
ResponderExcluirBeijos
Bluebell Bee
Que bom que gostou! Obrigada pela visita!
ExcluirAdorei o tutorial! Bem explicadinho e fácil <3
ResponderExcluirBeijo
Dicas para Todas
Que bom que gostou querida! Obrigada pela visita!
ExcluirOi Gleicy!
ResponderExcluirAdoro esse estilo de menu, deixa o blog muito organizado. :)
beijos ♥
nuclear--story.blogspot.com
Eu também amo esses estilos de menus ♥ Obrigada pela visita
ExcluirAdorei e ajudou muito. Super útil.
ResponderExcluirBeijos
http://pimentasdeacucar.blogspot.com.br/
Que bom que gostou querida! Obrigada pela visita!
ExcluirAmei a dica! Acho que o menu que desce junto com a página é o melhor tipo, e o processo de instalar ele é bem fácil também! Valeu por disponibilizar ;)
ResponderExcluirBeijão
http://www.perigosasgarotas.com.br/
Eu também gosto do menu que desce junto com a página, mas as vezes ele atrapalha haha. Obrigada pela visita <3
ExcluirOlá, bem legal o tutorial. Eu adoro o menu no topo do blog, mas o do meu desce junto com a página e eu prefiro assim rs.
ResponderExcluirUm beijo
Suellen Esposte Blog | Facebook | Youtube | Instagram
Eu também adoro menu no topo do blog <3 Eu gosto das duas versões, depende bastante de cada layout. Obrigada pela visita!
ExcluirEste layout eh bem bacana. Gostei do tutorial.bjkas
ResponderExcluirhttp://brilhorosablog.blogspot.com.br/
Obrigada querida :))
ExcluirAchei lindo seu layout.
ResponderExcluirBeijos
www.decaronanamoda.com
Obrigada querida <3
ExcluirQue menu top!!! Amei!!!
ResponderExcluirxoxo, Sarah
Ideias no Chuveiro
Que ótimo que gostou do menu querida <3 Obrigada pela visita!
ExcluirQue bom que gostou. Obrigada pela visita!
ResponderExcluir