Páginas

segunda-feira, 17 de julho de 2017

MENU NO TOPO COM BARRA DE PESQUISA DO BLOG DA BLOGGER- POR ELIANE TAVARES


https://dicasdemodacomeliane.blogspot.com.br/2017/07/menu-no-topo-com-barra-de-pesquisa-do.html


Olá meus amores! Comecei meu blog, já faz algum tempo. gostaria de dividir com vocês, sugestões para quem é iniciante e ainda está com dificuldades para fazer um menu com barra de pesquisa no topo do blog.
 
Para começar vá em layout e adicione gadget HTML/JavaScript, nele você vai colar o seguinte código e salvar:

 <div id="mymenuda">
<div id="mymenu">
<li><a href="SEU LINK AQUI">Inicio</a></li> <!-- Troque o link entre as " pelo link que voce deseja que o menu leve a pessoa e troque o texto "Inicio" pelo que voce quer que apareca na tela -->
<li><a href="SEU LINK AQUI">NOME DO MENU</a></li> <!-- Troque o link entre as " pelo link que voce deseja que o menu leve a pessoa e troque o texto "NOME DO MENU" pelo que voce quer que apareca na tela -->
<li><a href="SEU LINK AQUI">NOME DO MENU</a></li> <!-- Troque o link entre as " pelo link que voce deseja que o menu leve a pessoa e troque o texto "NOME DO MENU" pelo que voce quer que apareca na tela -->

<li><a href="SEU LINK AQUI">
NOME DO MENU</a></li> <!-- Troque o link entre as " pelo link que voce deseja que o menu leve a pessoa e troque o texto "NOME DO MENU" pelo que voce quer que apareca na tela -->

<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></div>


- Onde está escrito SEU LINK AQUI, você coloca o link do seu blog, da página criada ou do marcador, e onde está INICIO, NOME DO MENU, VOCES COLOCAR O NOME QUE QUIZER PARA DIRECIONAR A SUA PAGINA OU MARCADOR...


Depois de adicionar e salvar, ele ainda não vai estar configurado, ele irá aparecer na lateral do seu blog. Clique em visualizar.


Antes vo precisa copiar seu HTML do seu blog e colar em pasta e salvar, por que se vose confidir, com algum codigo, e so retirar e colar novamente.


Por isso vá em Modelo, depois editar HTML, clique e digite  irá colar:
Ctrl +f, irá abrir uma barrinha de pesquisa e procure pelo código:]]></b:skin> . Acima dele você irá colar:


/* Inicio da barra de pesquisa */

#mymenuda {
background: #C0C0C0; /* defina a cor do background */
border-left: 320px solid #C0C0C0; /* tamanho da borda e cor- não retire pq ela centraliza o menu */
width: 100%;
height: 32px;   
position: fixed;
top: 0;
left: 0;
z-index: 9999;
}
#mymenu {
font-family: Verdana, corsiva; /* nome da fonte */
font-size: 14px; /* titulo da fonte */
text-transform: uppercase;
font-weight: bold;
}
#mymenu li {
list-style-type: none;
display: inline;
float: left;
padding: 0px;
}
#mymenu li a {
color: #fff; /* cor da fonte */
text-decoration: none;
padding-right: 24px;
line-height: 32px;
}
#mymenu a:hover {
color: #8EEE90; /* cor do link da fonte em hover */
}
#mymenu ul {
list-style: none;
margin: 0;
padding: 0;
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: 10px;
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;
}
/* BARRA DE PESQUISA */
.search{
float: left;
font-family: Verdana, Tahoma; /* Fonte da letra que será escrita quando procurarmos por algo */
}
.searchbar{
margin-top:3px;
height: 17px;
width: 140px;
color: #45B343; /* Cor da fonte da letra que será escrita quando procurarmos por algo */
-moz-border-radius: 6px;-webkit-border-radius: 6px;-goog-ms-border-radius: 6px;background: #FFFFFF; /* Cor de fundo da parte onde escrevemos */
}
.searchbut{
background: url('http://i59.tinypic.com/2s6kly0.png');
width:22px;
height:22px;
border: 0;
padding:7px;
}

/* Fim da barra de pesquisa */


-Gente não se confundam. é começo da barra de pesquisa ao fim da barra de pesquisa!
E barra vai ficar cinza, se quizer mudar a cor tem substituir um código da cor pelo outro da cor que preferir!

Depois de tudo pronto, clique visualizar e irar ficar assim!


Feito isso é só adicionar os links de acordo com o seu gosto e salvar.
Só para lembrar, eu uso o modelo simples do blogger para realizar essas alterações, se o seu modelo for outro pode ser que fique diferente ou que não funcione.
Mais não saber mexer, não mexa pois pode dá alguma complicação no seu HTML... Bom! eu como sou teimosa, fui tentando até que consegui, fiz muitas pesquisas na internet e deu certo.... Agradeço muito o YOTUBE!

Se eu te ajudei de alguma forma! Deixe seu comentário!

BEIJOS!

Nenhum comentário:

Postar um comentário

© Blog Eliane Tavares - 2017. Todos os direitos reservados.
Criado por: @elianetavaresoficial.
Tecnologia do Blogger.
imagem-logo