8 de jan de 2016

Vídeo: Menu no topo do blog com barra de pesquisa



Essa semana venho recebendo diversas mensagens de carinho de leitoras pelo meu Facebook pessoal e só queria agradecer pois vou guardar cada mensagem no coração. 

Hoje eu trouxe uma novidade para vocês, é o meu primeiro tutorial em vídeo, onde ensino vocês á colocarem um menu no topo do blog com barrinha de pesquisa igual ao meu, eu já ensinei aqui no blog mas decidi gravar pras meninas que muitas vezes tem medo de entrar nos códigos do blog e acabar errando alguma coisa, com o vídeo você consegue se orientar melhor.

Nos outros tutoriais que postei algumas pessoas sempre vinham me pedir para fazer em vídeo pois algo dava errado ou elas se perdiam no meio, então ai vai.

Toda semana vou postar diversos tutoriais e dicas para blogueiras lá no meu canal, também vou falar sobre outros assuntos bem legais.

ANTES DE ASSISTIR SE INSCREVA NO CANAL POIS LÁ TEM VÁRIOS OUTROS TUTORIAIS MARAVILHOSOS E TODA SEMANA TEM ALGO NOVO




1º Código

Cole ele acima da tag ]]></b:skin>

#mymenuda {
background: #FF379B; /* Cor do background */
border-left: 200px solid #FF379B; /* Tamanho e cor da borda - não retire pois ela centraliza o menu */
width: 100%;
height: 34px;
position: fixed;
top: 0;
left: 0;
z-index: 9999; 
}
#mymenu {
background: #fff; /* Cor da fonte */
font-family: 'Arial', corsiva; /* Nome da fonte */
font-size: 16px; /* Tamanho da fonte */
text-transform: uppercase; 
}
#mymenu li {
list-style-type: none;
display: inline;
float: left; /* Posicionamento do menu */
padding: 0px;
}
#mymenu li a {
color: #fff;
text-decoration: none;
padding-right: 24px;
line-height: 37px;
}
#mymenu a:hover {
color: #EED5D2; /* Cor da fonte em hover */
}
#mymenu ul {
list-style: none;
margin: 0;
padding: 0; 
background: #fff;
margin-left: 40px;
}
#mymenu li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 120px;
padding-left: -40px;
}
#mymenu li ul a {
font-size: 12px;
line-height: 24px;
}
#mymenu li:hover ul ul, 
#mymenu li:hover ul ul ul, 
#mymenu li.sfhover ul ul, 
#mymenu li.sfhover ul ul ul {
left: -999em;
}
#mymenu li:hover ul, 
#mymenu li li:hover ul, 
#mymenu li li li:hover ul, 
#mymenu li.sfhover ul, 
#mymenu li li.sfhover ul, 
#mymenu li li li.sfhover ul {
left: auto;
}
#mymenuright {
float: right;
color: #fff;
}
/* BARRA DE PESQUISA */
.search{
float: left; /* Flutuando a esquerda */
font-family: Georgia, Tahoma; /* Nome da fonte */
}
.searchbar{
margin-top:7px;
height: 14px;
width: 240px;
color: #ccc; /* Cor da fonte */
-moz-border-radius: 6px;-webkit-border-radius: 6px;-goog-ms-border-radius: 6px;background: #FFF; /* Cor de fundo */
}
.searchbut{
background: url('http://i43.tinypic.com/2evyidy.png'); /* Link da imagem do botão de pesquisar | tamanho: 20x20px */
width:20px;
height:20px;
border: 0;
padding:6px;

}


2º CÓDIGO

<div id="mymenuda">
<div id="mymenu">
<li><a href=" Link ">Título</a></li>
<li><a href="Link ">Título</a></li>
<li><a href=" Link ">Título</a></li>


<li><a href=" Link ">Título</a></li>
<li><a href=" Link ">Título</a></li></div>
<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>


P.S: Eu gravei o tutorial de como fazer capa para vídeo no PhotoFiltre Studio, é parecido com o que postei aqui, só muda a parte do texto mesmo, e pelo vídeo vocês conseguem ver melhor.

Esse código eu peguei do blog Renata Massa

CONHEÇA MEU OUTRO BLOG! Moda evangélica, cachos, inspirações, resenhas e muito mais!! Blog Twice ♥

ATENÇÃO!


Lembrando que trabalho com layouts por encomenda para Blogger, vinhetas e arte da capa para canal, logotipos, mídiakits e muito mais, para solicitar orçamento basta enviar um e-mail para agencialusadigital@hotmail.com ou deixar seu e-mail nos comentários (ele não será publicado, só eu irei ver).


12 comentários :

  1. Realmente estava perdidinha em relação ao tuturial, obrigada por compartilhar, um beijo♥
    http://rafaelleventura.blogspot.com.br/

    ResponderExcluir
  2. Oi eu tentei fazer no meu blog e não deu certo o menu não ficou fixo igual ao seu. Será que pode tentar me ajudar de algum jeito?

    ResponderExcluir
    Respostas
    1. Manda o link do seu blog pra mim flor

      Excluir
    2. Ele não tem nada pq eu ainda estou arrumando ele. http://virandoesquina.blogspot.com.br/ obrigada

      Excluir
    3. O problema foi no primeiro código, talvez você tenha colocado no lugar errado. E no segundo código tente colocar o gadget na sidebar ou no rodapé

      Excluir
  3. EU TENTEI FAZER NO MEU E NÃO MUDAVA NADA, POR ACASO VC PODE ME AJUDAR??

    ResponderExcluir
  4. Me passe o link do seu blog, mas primeiro exclua qualquer outro menu que tenha nele

    ResponderExcluir
  5. EXELENTE CODIGO ...VC NO TEM UM MENU PARA O TOPO QUE TENHA SOB MENU NELE NAO...

    ResponderExcluir
  6. Parabéns Raquel!!! Seu blog é bem feito e bonito. pegue o link para barra de menu. https://www.facebook.com/vitrinedosartesanatos

    ResponderExcluir