►melhores vídeos que já vi - MVQJV -: templatemelhoresvideosquejavi

    "Aprenda como instalar

    um

    "Menu Drop Down "

    no seu template/blog. "

O Menu Drop Down, é aquele que quando passamos o mouse em cima de um determinado button do menu, logo abaixo dele, se abrem diversos sub-menus.

DEMONTRAÇÃO, clique aqui

Antes de começar, é aconselhável que se "Salve" o seu template , para que caso ocorram problemas, você tenha uma cópia de seu template original guardado em seu PC.

Jamais deixe de fazer um backup do seu Template para evitar determinados problemas...

Então,

Logado em seu painel blogger,

...clique em:

... design...

...editar HTML...

...expandir modelos de widgets...

E, procure por:

]]></b:skin>

encontrado,

Cole , antes de

]]></b:skin>

o código abaixo:

.nav-container .divider{
display:block;
font-size:1px;
border-width:0px;
border-style:solid;
}
.nav-container .divider-vert{
float:left;
width:0px;
display: none;
}
.nav-container .item-secondary-title{
display:block;
cursor:default;
white-space:nowrap;
}
.clear{
font-size:1px;
height:0px;
width:0px;
clear:left;
line-height:0px;
display:block;
float:none;
}
.nav-container{
position:relative;
zoom:1;
margin: 0 auto;
}
.nav-container a, .nav-container li{
float:left;
display:block;
white-space:nowrap;
}
.nav-container div a, .nav-container ul a, .nav-container ul li{
float:none;
}
.nav-container ul{
left:-10000px;
position:absolute;
}
.nav-container, .nav-container ul{
list-style:none;
padding:0px;
margin:0px;
}
.nav-container li a{
float:none
}
.nav-container li{
position:relative;
}
.nav-container ul{
z-index:10;
}
.nav-container ul ul{
z-index:20;
}
.nav-container ul ul ul{
z-index:30;
}
.nav-container ul ul ul ul{
z-index:40;
}
.nav-container ul ul ul ul ul{
z-index:50;
}
li:hover>ul{
left:auto;
}
#nav-container ul {
top:100%;
}
#nav-container ul li:hover>ul{
top:0px;
left:100%;
}
/*^'^ Primary Items ^'^*/
#nav-container a{
padding:7px 17px 7px 18px;
margin: 10px 0px 0px 0px;
color: #000000;
font-family: Trebuchet MS, Arial, sans-serif, Helvetica;
font-size:14px;
text-decoration:none;
font-weight: bold;
background: #BDB76B url("");
background-repeat: repeat;
background-position: top;
}
#nav-container a:hover{
color: #6C3600;
background: #BDB76B url("");
background-repeat: repeat;
background-position: center;
}

/*^'^ Secondary Items Container ^'^*/
#nav-container div, #nav-container ul{
padding:10px 4px 10px 4px;
margin:0px 0px 0px 0px;
background:#BDB76B url("");
background-repeat: repeat-x;
background-color: #E2E2A0;
border-bottom: 1px solid #CA6500;
}

/*^'^ Secondary Items ^'^*/
#nav-container div a, #nav-container ul a{
padding:3px 10px 3px 6px;
background-color: #FFFFFF;
background:#FAFAD2 url("");
background-repeat: no-repeat;
background-position: 0px 22px;
font-size:11px;
border-width:0px;
border-style:none;
margin: 0px 0px 0px 0px;
width: 149px;
}
/*^'^ Secondary Items Hover State ^'^*/
#nav-container div a:hover, #nav-container ul a:hover{
background-color: #FFFFFF;
background:#E2E2A0 url("");
background-repeat: no-repeat;
color:#CC0000;
}
/*^'^ Secondary Item Titles ^'^*/

#nav-container .item-secondary-title{
cursor:default;
padding:4px 0px 3px 7px;
color: #6C3600;
font-family: Arial, Trebuchet MS, Arial, sans-serif, Helvetica;
font-size:11px;

/* background:#FAFAD2 url(""); */
background-repeat: no-repeat;
font-weight:bold;

}
/*^'^ Horizontal Dividers ^'^*/
#nav-container .divider-horiz{
border-top-width:1px;
margin:5px 5px;
border-color: #C16100;
}
/*^'^ Vertical Dividers ^'^*/
#nav-container .divider-vert{
border-left-width:1px;
height:15px;
margin:4px 2px 0px 2px;
border-color:#AAAAAA;
}

Salve!

Daí,

Optando pelo menu acima da header (cabeçalho)

Procure pelo código:

<div id='outer-wrapper'><div id='wrap2'>

E,

abaixo dele ( <div id='outer-wrapper'><div id='wrap2'> )

cole o código a seguir:

<ul class='nav-container' id='nav-container'>

<li><a class='item-primary' href='ENDEREÇO DO SEU BLOG AQUI'>HOME</a>

</li>

<li><span class='divider divider-vert'/></li>

<li><a class='item-primary' href='#'>LINK 1 </a>

<ul style='width:150px;'>

<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 1.1</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 1.2</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 1.3</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 1.4</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 1.5</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 1.6</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 1.7</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 1.8</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 1.9</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 1.10</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 1.11</a></li>

<li><span class='divider divider-horiz'/></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 1.12</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 1.13</a></li>

</ul></li>

<li><span class='divider divider-vert'/></li>

<li><a class='item-primary' href='#'>LINK 2</a>

<ul style='width:150px;'>

<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 2.1</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 2.2</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 2.3</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 2.4</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 2.5</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 2.6</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 2.7</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 2.8</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 2.9</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 2.10</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 2.11</a></li>

<li><span class='divider divider-horiz'/></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 2.12</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 2.13</a></li>

</ul></li>

<li><span class='divider divider-vert'/></li>

<li><a class='item-primary' href='#'>LINK 3</a>

<ul style='width:150px;'>

<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 3.1</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 3.2</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 3.3</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 3.4</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 3.5</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 3.6</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 3.7</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 3.8</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 3.9</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 3.10</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 3.11</a></li>

<li><span class='divider divider-horiz'/></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 1.12</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 1.13</a></li>

</ul></li>

<li><span class='divider divider-vert'/></li>

<li><a class='item-primary' href='#;'>LINK 4</a>

<ul style='width:150px;'>

<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 4.1</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 4.2</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 4.3</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 4.4</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 4.5</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 4.6</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 4.7</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 4.8</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 4.9</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 4.10</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 4.11</a></li>

<li><span class='divider divider-horiz'/></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 4.12</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 4.13</a></li>

</ul></li>

<li><span class='divider divider-vert'/></li>

<li><a class='item-primary' href='#;'>LINK 5</a>

<ul style='width:150px;'>

<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 5.1</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 5.2</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 5.3</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 5.4</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 5.5</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 5.6</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 5.7</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 5.8</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 5.9</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 5.10</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 5.11</a></li>

<li><span class='divider divider-horiz'/></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 1.12</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 1.13</a></li>

</ul></li></ul>

nota:
# = ' ENDEREÇO DO SEU LINK AQUI ' ... ou , se preferir não coloque nada

Atente:

Este presente tutorial aplica-se aos antigos modelos de lay-out (Template Mínima). Nos novos Designer de Modelo, ainda não foi testado.

Optando pelo menu abaixo da header (cabeçalho)

Procure por:

<div id='content-wrapper'>

ao encontrar o código,

cole abaixo dele,

o código a seguir:

"Salve"

nota:

# = ' ENDEREÇO DO SEU LINK AQUI '

Querendo, pode-se realizar mudanças , como em cores, inserir links ...

"salvando tudo de novo"

Atenção:

Querendo que o sub-menu abra em outra janela,

utilize o código abaixo:

<li><a href="URL A SER ABERTA NOUTRA PÁGINA" target="_blank">TEXTO</a></li>

ao invéz de apenas:

<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 4.13</a></li> (exemplo)

http://ahsotestandocurioso.blogspot.com

Continue Lendo ►

►melhores vídeos que já vi - MVQJV -

Pesquisar

sexta-feira, 26 de agosto de 2011

"Aprenda como instalar um Menu Drop Down no seu template/blog. "

Marcadores selecionados

Postagens populares

Translate

Postagem em destaque

Chinelos Personalizados - Simples , Barato e Lindos - Customizado!

Seguidores

Marcadores

Formulário de contato

Páginas

arq.

estatísticas