Veja aqui o cronograma de aulas.
Tutorial (HTML): Menu Fixo no topo com search
Postado por
Andy
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; }
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)
E cole esse Código:
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>
<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
Nenhum comentário: