15 março 2016

#TutoriaisDaJaque | Menu Fixo com Imagem + Barra de Pesquisa

Menu Fixo com Imagens Tutorial
  Uma leitora liinda aqui do blog entrou em contato comigo lá pela Fan page (CURTE LÁ!) e pediu para que eu fizesse mais um tutorial de Menu Fixo mas dessa vez, ela queria que eu ensinasse como faz para ter imagens separando um nome do outro.  Para não ficar tão parecido com meu 1º Tutorial de Menu Fixo, coloquei nesse a barra de busca, pois acho que é bem bacana.
 É um tutorial fácil de fazer mas você precisa prestar muita atenção! Não se desespere, fique calmo pois tudo dará certo, ok? Recomendo que você faça esse tutorial em um blog de teste, ou faça o backup de seu template para que não ocorra nenhum problema.

 Antes algumas regras, peço que você leia ♥ Gente, esse tutorial foi bem difícil de reproduzir, pois ele é bem detalhado então tinha que ser um tutorial bem explicado para todos pudessem entender. Você pode usar a vontade, só peço que não retire os créditos que coloquei no código do CSS, o qual está escrito Menu Fixo - Por Jaque Ferreira www.oablogueira.com Caso você faça templates para venda e queira colocar esse menu, não retire esses créditos, por favor. Fiquei bem bolada pois o antigo tutorial de Menu Fixo que fiz, vi várias pessoas usando e colocando o crédito como se elas tivessem feito, ainda mais a imagem.. enfim.

 Atenção: Testei esse modelo de menu fixo somente no template VIAGEM do Blogger! Não sei te informar se ele serve em outros modelos, mas você pode tentar e se der certo, coloca aqui nos comentários, por favor ♥


 Dentro da aba que abrir, cole o código:

<div id='menufixo'>
<div id='menu'>
<li><a href='/'>INÍCIO</a></li>
<li><a><img src='http://static.tumblr.com/wlnblxn/gaQo41kcs/coracao.png'/></a></li>
<li><a href='LINK DA PÁGINA'> NOME </a></li>
<li><a><img src='http://static.tumblr.com/wlnblxn/gaQo41kcs/coracao.png'/></a></li>
<li><a href='LINK DA PÁGINA'> NOME </a></li>
<li><a><img src='http://static.tumblr.com/wlnblxn/gaQo41kcs/coracao.png'/></a></li>
<li><a href='LINK DA PÁGINA'> NOME </a></li>
</div>
<form action='/search' class='search' method='get'>
<input class='searchbar' id='s' name='q' placeholder='Pesquisar' type='text' value=''/>
<input class='searchbut' type='submit' value=''/>
</form>
<div id='menuright'>
</div></div>
 
  LARANJA: é o link do seu separador, você pode fazer sua própria imagem ou usar essa que está hospedada. Caso queira mudar, faça uma imagem, recomendo no tamanho de 27x27, hospede essa imagem em algum site, apague SOMENTE o que está em laranja e coloque o seu link no lugar.
  VERDE: coloque o link da sua página, caso não saiba fazer isso, já fiz um tutorial explicando aqui. 
  ROXO: Coloque o nome da sua página, pode ser sobre mim, contatos, blogrool...
  A barra de pesquisa começa em <form action='... onde está escrito Pesquisar é o nome que ficará dentro da barrinha de busca, pode escrever o que quiser.

 Salve e visualize:

 Pesquise por <head> abaixo dele cole: 

<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed' rel='stylesheet' type='text/css'/>

Esse código determinará uma fonte que não existia antes em seu template, a fonte é a Open Sans Condensed, do Google Fontes.

  Ainda em MODELO > Pesquise dentro do código por ]]>< acima desse código cole:

/* Menu Fixo - Por Jaque Ferreira www.oablogueira.com
-------------------------------------------------------------------------------------*/
#menufixo {
background: url('http://static.tumblr.com/wlnblxn/gHNo41ioh/menufixo.png') repeat; /* Imagem do menu fixo */
padding-left: 300px;
padding-top: 10px;
width: 100%;
height: 47px; /*Altura do menu fixo */
position: fixed;
top: 0;
left: 0;
z-index: 9999;
}
#menu {
font-family:'Open Sans Condensed'; /* Fonte */
font-size: 19px; /* Tamanho da Fonte */
text-transform: none;
margin-top: -3px;
}
#menu li {
list-style-type: none;
display: inline;
float: left;
padding: 0px;
}
#menu li a {
color: #979797; /* Cor da fonte */
text-transform: uppercase;
padding-right: 2px;
line-height: 15px;
}
#menu a:hover {
color: #000; /* Cor da Fonte quando passar o mouse */
text-transform: uppercase;
}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
background: #fff;
margin-left: 40px;
}
#menu li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 100%;
padding-left: -40px;
}
#menu li ul a {
font-size: 12px;
line-height: 24px;
}
#menu li:hover ul ul,
#menu li:hover ul ul ul,
#menu li.sfhover ul ul,
#menu li.sfhover ul ul ul {
left: -999em;
}
#menu li:hover ul,
#menu li li:hover ul,
#menu li li li:hover ul,
#menu li.sfhover ul,
#menu li li.sfhover ul,
#menu li li li.sfhover ul {
left: auto;
}
#menuright {
float: right;
color: #fff;
}
.search{
float: left;
font-family: 'Open Sans Condensed'; /* Fonte da Barra de pesquisa */
margin-top: -13px;
}
.searchbar{
height: 28px;
width: 210px;
border: 0px solid #fff;
margin: 12px;
background: url('http://static.tumblr.com/wlnblxn/B7Fo41ir1/barra_de_pesquisa.png'); /* Imagem da barra de pesquisa */
text-align:center;
font-size: 12px;
}
.searchbut{
background: url('http://static.tumblr.com/wlnblxn/3xao41iqv/search.png') no-repeat;
width:24px;
height:24px;
border: 0;
padding: 17px;
margin-left: -42px;
}
/* Fim Menu Fixo - Por Jaque Ferreira www.oablogueira.com */

  Dentro do código tecle CTRL+F e pesquise por .tabs-inner .widget li a">


 Como pode verificar na imagem, troque bold por normal, caso queira mudar o tamanho da fonte, troque 16px por um numero de sua preferencia. Alterar essa parte fara com que a fonte do seu Menu Fixo não fique negrito.
 No código abaixo, como mostra a imagem, será necessário que você mude também. Então onde esta escrito value=" troque a cor #333333 por transparent.
 Essa é a parte mais importante mas também pode confundir um pouco, não altere mais nada, ainda mais se você não souber mexer muito em CSS. Quando aprendi a fazer esse menu, quebrei muito a cabeça para poder mudar essa parte, mas com calma você faz e fica bem bonito!

Novamente pesquise por .tabs-inner .widget li a, dê enter, não será esse, dê enter novamente até você encontrar o código abaixo:


13. Na 2º linha após o código selecionada na cor amarela, substitua padding: 1em 1.5em; por:

padding: 0em 2.5em;

 Clique em Salvar Modelo, acesse seu blog e veja o Menu Fixo com Imagens Resultado

   E ufa, depois de mais de 6 horas - sério, gente hahaha - consegui terminar esse tutorial. Espero muito que tenha dado para entender e que vocês gostem e coloquem no blog de vocês. Caso queiram modificar algo, fique a vontade, brinquem com os códigos, mexa até dar certo e no final ficará tudo lindo ♥





28 comentários:

  1. Ahh eu adorei *0* Muito obrigada por atender minha sugestão Jaque! ficou muito lindoo, e ainda essa semana eu vou colocar no meu blog, obrigada mesmo <3

    ResponderExcluir
  2. Achei bem fácil de entender muito obg...

    ResponderExcluir
  3. Oi Jaque, amei seu blog lindo demais esse dourado então, parábens.
    Fui fazer isso no meu blog mas no último passo quando fui pesquisar novamente por .tabs-inner .widget li a, só aparece o primeiro e não tem outro para colocar esse último código :/

    ResponderExcluir
    Respostas
    1. Obrigadaaa <3
      Dependendo do template que você usa no seu blog, essa ultima parte não tem mesmo, as vezes não é nem necessário colocar (acho que o modelo simples não precisa). Se não tiver você pode ir mexendo nos paddings/margins para que fique tudo certinho <3

      Excluir
  4. ooii,
    gostei, mas quero tirar aquele efeito branco quando estar hover

    ResponderExcluir
    Respostas
    1. Michael, não entendi muito bem :s
      No código o hover dele está em negrito, não é para ficar branco. Tem como me passar o link pra eu dar uma olhada?

      Excluir
    2. Vi no teu blog que você conseguuuiu õ/
      tá lindooo! Parebéééns

      Excluir
    3. acabeeei de terminar! Parabéns pra ti.
      da uma olhadinha de novo. Ameiii! <3

      Excluir
    4. Euu vi lá, Mihhh. Ficou muito legaaal!
      PARABÉÉNS! Õ/

      Excluir
  5. No meu nao deu certo :( mas eu fiz todos os passos direitinho e ele nao subio ficou na parte de baixo!! :´(

    ResponderExcluir
    Respostas
    1. Paah, que estranho :/
      O primeiro código tem que ficar embaixo do Header da aba LAYOUT e o outro código tem que ficar na aba MODELO acima do ]]><
      Dei uma olhada e você tá usando o template Freebie que eu disponibilizei, ho HTML dele já tem um código de Menu fixo. Apaga ele e coloca esse no lugar.
      Procura no seu HTML por "#alinhamentohorizontal {" e apaga dessa linha até color: "#70dbdb; }"
      Acho que ai dá certo

      Excluir
  6. To fazendo o teste no teu template free e não ta dando certo :/
    Fiz tudo como o tutorial mandou, mas ele continua embaixo e totalmente transparente, quase não dá pra ver. E tentei fazer o que você pediu para a moça no comentário acima, mas continua do mesmo jeito :/ quero choraaaar kkk

    ResponderExcluir
    Respostas
    1. Isa, tenta colocar o código do CSS acima de /* Categoria do seu código fonte, lembrando que o código CSS é aquele que tá escrito /* Menu Fixo por Jaque Ferreira....
      se não conseguir, faz mas não apaga o código pra eu poder dar uma olhada pq não tá dando certo

      Excluir
  7. Tentei em vários templetes só consegui no viagem, ficou lindo <3

    ResponderExcluir
    Respostas
    1. Jaque, só tentei no viagem mas vi que no SIMPLES funciona também. Que bom que conseguiu <33

      Excluir
  8. Oi tudo bem? fiz tudo como pede o tutorial mas ele ficou desconfigurado não apareceu nem os créditos e a lupa ficou para baixo :/

    http://beijouva.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Vanessa, esse código não é responsivo, talvez o seu monitor seja pequeno e por isso que a lupinha foi pra baixo. Dai tem que configurar direitinho até encaixar

      Excluir
    2. aqui pra mim ficou tudo juntinho mas apareceu a barra de pesquisa no menu fixo

      Excluir
  9. Como que eu faço para configurar? Sim meu monitor é pequeno mesmo kkk

    ResponderExcluir
    Respostas
    1. Ai depende, Vah :/ é ruim explicar assim pois cada caso é um caso. Tenta ver se você encontra algum código responsivo pra ficar certinho pra você

      Excluir
  10. Olá, apliquei no meu blog de testes e ficou lindo em breve vou colocar no blog oficial. Gostaria de saber como faço para colocar aba em apenas um link, pois ficou faltando duas categorias para adicionar. ;)

    ResponderExcluir
    Respostas
    1. Oi Caaah, que bom que tu conseguiu, mubeeem <3
      Menu Fixo drop eu ainda não ensinei aqui, o código é bem diferente, mas irei ensinar, aguarde ♥

      Excluir
  11. Olá, amei o seu blog você esta de parabéns mas tenho uma duvida fiz tudo certo o que esta acima e não deu certo em meia parte pois o meu menu ficou no canto e não ao meio! Ai eu apaguei tudo do blog e comecei a fazer do zero ai quando fui colocar novamente deu esse mesmo problema ai apaguei e pedi para o meu pai fazer e deu a mesma coisa. Me ajuda Obrigada

    ResponderExcluir
    Respostas
    1. Caah, seu blog tá ficando tão lindo, parabéns!
      Ficou assim pois já deve ter um menu fixo nos códigos, amore, dai cê tem que apagar um pra poder colocar esse.
      Qualquer coisa gritaaa que eu tento de ajudar kkkk


      Beijooos :*

      Excluir