5.1.16

Menu horizontal com caixa de pesquisa

peguei em algum lugar, mas a moldura é minha <3

Hello, it's me.

E não vou cantar o resto para o desespero de vocês - quero dizer, para o meu desespero.

I was wondering if after all these years you'd like to meet

Ok! Essa música gruda ♥

Queria informar aos docinhos que vão ler isso - e as outras pessoas - que eu consegui, graças a Deus, fazer um "layout revista". Tem bastante tempo que queria fazer algo daquele tipo e não conseguia, mesmo com o tutorial do Cherry Bomb - entre outros blogs - ensinando, eu olhava para aquilo e ficava "que". Ontem encontrei um blog bem antigo ensinando como fazer, na época que a gente ainda clicava para "Expandir Widget". Se o tutorial não fosse tão estressante e se soubesse refaze-lo bem - o que não desisti ainda -, eu postaria-o hoje. 


Mas vamos ao tutorial lindo e maravilhoso do dia de hoje que é o Menu horizontal com caixa de pesquisa. Já vou dando os créditos à Luana Davis do blog Garota Hi-Tech porque além desse código ter me ajudando muito, me deixou disponibilizar o código sem precisar baixar no 4shared.


clique na imagem para vê-la maior

Eu já ensinei a colocar outro menu horizontal, se quiserem ver, clique aqui, mas esse é especial porque até a Jackie do Jackie Dream usa.

Começando: 

Vá em Modelo > Editar HTML > clique em "Formatar Modelo" > Ctrl+f e procure por:
</b:skin>
[antigo ]]></b:skin>]
caso preferir, procure por ]]>,
mas certifique-se que tenha </b:skin> logo após.

Clique aqui e copie e cole o código que você copiou em cima de ]]>

O código é auto-explicativo, mas eu irei explicar algumas coisinhas:
O 1° "background: #FFC0CB; /* defina a cor do background */" se refere ao background logo depois da primeira página se você quiser mudar todo o background mude a cor de "border-left: 200px solid #FFC0CB;" que está logo após. 

Se você deixar assim:
(clique para vê-la maior)
Ficará assim:

(clique para vê-la maior)


E para mudar, caso não saiba onde encontrar códigos, clique aqui para ir até a tabela de cores e coloque um dos códigos representados.

O 1° "font-family: 'Alef'; /* nome da fonte */" Alef é uma fonte do Google fontes, por isso, se quiser deixa-lo precisará ir até:
</head>
Colocar em cima disso o seguinte código:
 <link href='http://fonts.googleapis.com/css?family=Alef' rel='stylesheet' type='text/css'/>
Okay, chega de explicação, eu vou ensinar como coloca-lo.

Vá até Layout > clique em HTML/JavaScript > e cole o seguinte código: 


<div id="mymenuda"><div id="mymenu"><li><a href="link da página">PÁGINA</a></li><li><a href="link da página">PÁGINA</a></li><li><a href="link da página">PÁGINA</a></li><li><a href="link da página">PÁGINA</a></li><li><a href="link da página">PÁGINA</a></li><form action="/search" class="search" method="get"><input class="searchbar" id="s" name="q" type="text" value="" /><input class="searchbut" type="submit" value="" /></form><div id='mymenuright'></div></div>
Aviso: se você já tem uma caixa de pesquisa, apague-a para que ela não "interfira" e cubra a própria do menu. Caso queira realmente que sua caixa de pesquisa fiquei lá, não faça nada, ela já vai ocupar o lugar da caixa do menu.

Eu acho que é só,
obrigada por ter lido,
beijos e mais beijos ♥

Até o próximo tutorial.



12 comentários :

  1. Olá, gostei muito do seu blog, e já estou participando, gostaria de lhe convidar para conhecer e participar do meu e da minha Fan page!

    http://penteadeiradaanapaula.blogspot.com.br/

    https://www.facebook.com/penteadeiradaana/

    Desde já Agradeço


    Ana Paula Marçal...

    ResponderExcluir
  2. Adorei, nossa me ajudou muito! hehe
    Já estou seguindo o blog e te convido para conhecer o meu.

    www.carolyamato.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Awww que bom que consegui ajuda ♥
      E eu já estou seguindo ^^

      Excluir
  3. Já conhecia esse tutorial, mas eu não uso muito ele. Gostei muito da sua formar de explicar.

    Flores ao Chão

    ResponderExcluir
    Respostas
    1. Aww obrigada ^^ eu fico extremamente feliz em saber que minha explicação consegue ser boa ksdljflsjdflkjsdf

      Excluir
  4. O menu fica bem legal, infelizmente só vim achar ele depois que terminei o novo layout do meu blog T.T deixa pra próxima. O tutorial foi bem explicado, salvei até aqui nos fav <3

    Eu Fico Pensando

    ResponderExcluir
    Respostas
    1. Eu fui achar bem depois também :v mesmo assim modifiquei e coloquei esse outro.

      Muitíssimo obrigada <3 eu fico feliz que meu tutorial tenha sido de fácil entendimento ^^

      Excluir
  5. Gente me ajuda fica uma linha no meio

    ResponderExcluir
  6. OLÁ CONSEGUI MUITO OBG , MAIS QUERIA SABER SE TEM COMO COLOCAR TIPO CATEGORIA E COLOCAR ELAS NO MENU ?

    ResponderExcluir
    Respostas
    1. eu não tentei ainda, mas se quiser, posto outro tutorial que tem sub menu ^^

      Excluir

Você pretende comentar?
Saiba que eu fico muito grata e feliz ^^ mas por favor, seja educado e compreensível. Se de alguma forma meu post te feriu ou o meu blog, vá ao e-mail. Críticas são sempre bem-vindas, mas acredito que o lugar delas também é no e-mail.

E eu optei por moderar comentários, não por causa de problemas como os de ofensas, mas para que fique mais fácil saber quando houve comentário. Espero que entenda se você não gosta dessa opção. Acredite, eu também não gosto.
Obrigada por ter vindo aqui.

"Heart" yourself

Ame-se ♥
oohmontana@gmail.com
twitter:@s0meth1ngs, @seehbubble
facebook: Carol Lendino

Status

Nome: Sem Óbice
Criado: 28/12/13
Volta do hiatus: 28/12/15
Tema:G-Friend on twitter; n°: 4

Disclaimer:
Grande parte das coisas aqui não pertencem ou foram criadas por mim, grande maioria foi criada por alguém e, na maior parte das vezes, editas por mim. Se feri alguém, pretendendo creditar ou excluir, como o dono preferir. Não resite em me avisar por e-mail: oohmontana@gmail.com. Espero compreensão.

The End

Isso é tudo, pessoal! Volte sempre que quiser,
beijos no core, rivais no amor


Créditos e agradecimentos aqui