Pular para o conteúdo principal

Pesquisar

Saiba como é feito:"Menu Horizontal DropDown"

Menu Horizontal DropDown




...instalar um Menu Drop Down no seu blog.



Para quem não sabe, Menu Drop Down, é aquele que quando passamos o mouse em cima de um determinado botão do menu, logo abaixo dele, se abrem varios sub-menus.


DEMO.


Lembre-se: Salve o seu template antes de começar.
Nunca deixe de fazer um backup do seu Template para evitar transtornos.


1º passo: Aplicar estilos ao seu Menu Drop Down:

Vá em design >> Editar HTML >> Expandir modelos de widgets.
 
Copie o código abaixo e coloque-o 

antes de 

]]></b:skin>



/* NavbarMenu
--------------------------- */
#NavbarMenu {
background: #555 url(http://2.bp.blogspot.com/_kMUpUqMmduA/SVU82PLeYMI/AAAAAAAAA6c/R8Ip5ZMFIh8/s1600/navbar.png);
width: 100%;
height: 35px;
font-size: 12px;
font-family: Arial, Tahoma, Verdana;
color: #FFF;
font-weight: bold;
margin: 0;
padding: 0;
text-transform: capitalize;
}
#NavbarMenuleft {
width: 100%;
float: left;
margin: 0;
padding: 0;
}
#nav {
margin: 0;
padding: 0;
}
#nav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#nav li {
list-style: none;
margin: 0;
padding: 0;
}
#nav li a, #nav li a:link, #nav li a:visited {
color: #FFF;
display: block;
font-size: 16px;
font-family: Georgia, Times New Roman;
font-weight: normal;
text-transform: capitalize;
margin: 0;
padding: 9px 15px 8px;
border-right: 1px solid #fff;


}
#nav li a:hover, #nav li a:active {
background: #555 url(http://1.bp.blogspot.com/_kMUpUqMmduA/SVU-vl5H-bI/AAAAAAAAA68/U4rkLsg0HqE/s1600/navhov.png);
color: #FFF;
margin: 0;
padding: 9px 15px 8px;
text-decoration: none;

}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #555;
width: 150px;
color: #FFF;
font-size: 14px;
font-family: Georgia, Times New Roman;
font-weight: normal;
text-transform: capitalize;
float: none;
margin: 0;
padding: 7px 10px;
border-bottom: 1px solid #FFF;
border-left: 1px solid #FFF;
border-right: 1px solid #FFF;
}
#nav li li a:hover, #nav li li a:active {
background: #777;
color: #FFF;
padding: 7px 10px;
}
#nav li {
float: left;
padding: 0;
}
#nav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0;
padding: 0;
}
#nav li ul a {
width: 140px;
}
#nav li ul ul {
margin: -32px 0 0 171px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}
#nav li:hover, #nav li.sfhover {
position: static;
}


Salve e sigamos para a 2ª parte da instalação.

2º passo: Instalar o Menu Drop Down:

Volte em design >> Editar HTML >> não precisa clicar em 'Expandir modelos de widgets', e procure pelo trecho abaixo:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

<-----restante do código---->

</b:section>
</div>

E cole ABAIXO dele:

<div id='NavbarMenu'>
<div id='NavbarMenuleft'>
<ul id='nav'>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li>
<a href='ENDEREÇO DO SEU LINK AQUI'>Link 1</a>
<ul>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #1.1</a></li>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #1.2</a></li>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #1.3</a></li>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #1.4</a></li>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #1.5</a></li>
</ul>
</li>
<li><a href='ENDEREÇO DO SEU LINK AQUI'>Link 2</a>
<ul>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #2.1</a></li>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #2.2</a></li>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #2.3</a></li>
 <li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #2.4</a></li>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #2.5</a></li>
</ul>
</li>
<li><a href='ENDEREÇO DO SEU LINK AQUI'>Link 3</a>
<ul>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #3.1</a></li>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #3.2</a></li>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #3.3</a></li>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #3.4</a></li>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #3.5</a></li>
</ul>
</li>
<li><a href='ENDEREÇO DO SEU LINK AQUI'>Link 4</a>
<ul>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #4.1</a></li>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #4.2</a></li>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #4.3</a></li>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #4.4</a></li>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #4.5</a></li>
</ul>
</li>
</ul>
</div>
  </div>
<div style='clear:both;'/>


Instalando o código do 2º passo,

acima de

<div id='header-wrapper'>

faz com que o menu fique abaixo do cabeçalho do seu blog.

Caso queira que o menu fique acima do cabeçalho,                                                 

basta instalar o código acima da tag 
<div id='header-wrapper'>
Salve as modificações.
 
Pronto! 


Agora é só editar os links e nome dos botões no menu, nos locais indicados.


Você pode editar as cores do seu menu,


se quiser, para isto basta alterar os códigos referentes as cores no código da 1º parte deste tutorial.




Se quiser, verifique os códigos das cores nesta Tabela de Cores HTML.
 


(Dica: só edite cores se você for um usuário no nível intermediário ou avançado, pois requer conhecimento maior em css.)

fonte:
mundoblogger

Comentários

Postar um comentário

Postagens mais visitadas deste blog

Sapatinho de bebê, de tricô com elástico e/ou lastex : vídeo e receita

...

fonte:  tricotandocroche 





Sapatilha de tricô com elástico – vídeo e receitaSapatilha de tricô com elástico – vídeo e receita


"Sapatilha de bebê:
Material:

Fio usado no vídeo: Super bebê – Cisne – 1 fio
Agulha: 3,00 mm
Lastex, ou látex
Tesoura
Aguha de croche número 2,00 mm
Agulha de tapeçaria



Sola:
Colocar 37 pontos na agulha

1carr: tricô
2 carr: 1m, laç., 16m, laç., m., laç., m., laç.,m, laç., 16 m, laç., m.
3 carr: tricô
4 carr: 2m, laç., 16m., laç., 2m., laç., 3m., laç., 2m., laç., 16m., laç., 2m.
5 carr: tricô
6 carr: 3m., laç., 16m., laç., 3m., laç., 5m., laç., 3m., laç., 16m., laç., 3m..
Até aqui terás 55 pontos na agulha.
Tricotar nos 55 pontos
6 cordões de tricô (avesso e direito em ponto meia)
...então serão 
12 carreiras em ponto meia
para formar os 6 cordões de tricô.
Peito do pé:

Dividir 22, 11, 22 pontos e 

trabalhar nos 11 pontos centrais 
por 9 carreiras em cordões de tricô
(então serão 18 carreiras em ponto meia
para formar 
09 carreiras de cordões de tricô). 

Sempre pegando1 ponto 
de cada …

pérolas, sapatinhos em tricô , 03 - Jaqueline santos -

...







Sapatinho Sophia 39 pontos

...


Peça:




Jaqueline Santos – Sapatinho Sophia 39 pontos

Jaqueline Santos ensina todos os passos para fazer esse sapatinho fofo de bebê.

Lista de Materiais

* Linha de algodão
* Lastex
* Agulha para tricô nº2
* Agulha tapestry
* Solinha de tricô


Modo de Fazer


1- Coloque 39 pontos na agulha:


1ª carreira: 1tr, 1laç, 18tr,1laç,1tr,1laç,18tr,1laç,1tr.


2ª carreira e todas as pares, apenas em tricô.


3ª carreira: 2tr,1laç,18tr,1laç,3tr,1laç,18tr,1laç,2tr.


5ª carreira: 3tr,1laç,18tr,1laç,5tr,1laç,18tr,1laç,3tr.


7ª carreira: 4tr,1laç,18tr,1laç,7tr,1laç,18tr,1laç,4tr.


9ª carreira: 5tr,1laç,18tr,1laç,9tr,1laç,18tr,1laç,5tr.



2- Execução:1 ª Parte


"Faça a solinha de tricô com 39 pontos. 

Depois de feita a solinha ...

contato

Nome

E-mail *

Mensagem *

buscas populares …apareça nas buscas… cadastre seu web site aqui…/buscas populares…alô negócios !!!…