PROFª CAROL aulas dadas haha próximas aulas haha
Veja aqui o cronograma de aulas.
PROFª MEL aulas dadas haha próximas aulas haha
Veja aqui o cronograma de aulas.
Tutorial (HTML): Menu Fixo no topo com search
Postado por
16 setembro 2016


Olá meus amores, hoje eu trago para vocês um tutorial de Menu Fixo no topo do blog, a pedido da minha mais nova amiga (Mari <3). 
Os créditos vão para Place Style

Primeiramente:
Faça um Backup do seu layout caso dê algum erro!

1- Vá no Painel do Blogger > Modelo e procure por  ]]></b:skin>
     Quando encontrar, cole acima:

#MYMENUDA {
BACKGROUND: #CD6090; /* COR DO BACKGROUND */
BORDER-LEFT: 200PX SOLID #CD6090; /* TAMANHO E COR DA BORDA - NÃO RETIRE POIS ELA CENTRALIZA O MENU */ 
WIDTH: 100%;
HEIGHT: 34PX;
POSITION: FIXED;  /* FIXA O MENU NO TOPO */
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;  /* FONTE DO TEXTO EM MAIÚSCULA */  }

#MYMENU LI {
LIST-STYLE-TYPE: NONE;
DISPLAY: INLINE; FLOAT: LEFT; /* POSICIONAMENTO DO MENU */ 
PADDING: 0PX; }

#MYMENU LI A {
COLOR: #FFF;  /* COR DA FONTE DO LINK */
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; }


As marcações em vermelho são de extrema importância, cuidado ao alterá-las.
Lista de cores em HTML (Clique Aqui)


2- Agora "Salve o modelo".
3- Vá na aba "Layout".
4- Adicionar um Gadget.
5- HTML/JavaScript.


E cole esse Código:

<DIV ID="MYMENUDA"> <!-- MENU COMPLETO -->

<DIV ID="MYMENU"> <!-- LINKS DO MENU-->

<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"><!-- SEARCH PERSONALIZÁVEL -->

<INPUT CLASS="SEARCHBAR" ID="S" NAME="Q" TYPE="TEXT" VALUE="" />

<INPUT CLASS="SEARCHBUT" TYPE="SUBMIT" VALUE="" />

</FORM>

<DIV ID='MYMENURIGHT'>  <!-- NUNCA RETIRE ISSO -->

</DIV></DIV>



Bem, espero que vocês tenham entendido.Qualquer duvida, pode deixar aqui nos comentários que responderei a todos!


Beijos e MILHÕES de obrigadas pela preferência,
     Andy Santana (Lermandys). Web-Master FD. Contato: deias.lerman@gmail.com
Andy Santana

Aspirante a designer. Oi. Prazer meu nome é Andy Santana, tenho 19 nos e moro em São Paulo. Estudante de Artes Gráficas. Trabalho como Web Designer freelancer.

Nenhum comentário: