menu drop down no template/blog ~ #saiba mais aqui

TUTORIAL:

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.

Temos duas ou mais opções,
dependendo do modelo do template,
aqui irei mostrar duas opções:

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...

Primeira opção:

...abaixo de :

-----------------------------------------------
Template by "XXXXXXXXXXXXXXXX
Name do template: XXXXXXXXXXXXX
Autor: "XXXXX"
URL: http://www.XXXXXXXXXXXXX.com.br
Date: AGO 2011
----------------------------------------------- */

insira o código a seguir:

/* Menu em Abas CSSTabs
--------------------------- */
#csstabs {
height: 280px; / * altura total da área * /
margin:0 auto;
position:relative;
width: 100%;
}

#csstabs h3 { /* títulos das abas */
color: #f290ef;
cursor: pointer;
display: block;
font-size: 15px;
font-weight: bold;
height: 25px;
margin: 0;
padding: 5px 5px 5px 5px;
text-align: left;
border-top:1px solid #f290ef;
border-left:1px solid #f290ef;
border-right:1px solid #f290ef;
}
.tabcontent { /* conteúdo das abas */
display: block;
height: auto;
width:100%;
padding:15px 0 5px 0px;
border:1px solid #f290ef;
}
#csstabs:hover h3, #tabs:focus h3, #tabs:active h3 {
z-index: 0;
background:none;
}
#csstabs:hover .tabcontent, #tabs:focus .tabcontent, #tabs:active .tabcontent {
opacity: 0;
z-index: 0;
}

#tab1 .tabcontent {
background-color: #f3c4ca;
position:absolute;
left:0;
top:35px;
height: 200px; /* altura total do conteúdo da aba 1 */
z-index: 2;
}
#tab1 h3 {
left: 0;
position: absolute;
top: 0;
z-index: 3;
background-color: #f3c4ca;
}

#tab1:hover h3, #tab1:focus h3, #tab1:active h3 {
background-color: #f3c4ca;
color: #565A63;
z-index: 4;
}
#tab1:hover .tabcontent, #tab1:focus .tabcontent, #tab1:active .tabcontent {
opacity: 1;
z-index: 3;
}

#tab2 .tabcontent {
background-color: #f5d6da;
height: 200px; /* altura total do conteúdo da aba 2 */
opacity: 0;
top:35px;
z-index: 1;
position:absolute;
}
#tab2 h3 {
left: 120px;
position: absolute;
top: 0;
}

#tab2:hover h3, #tab2:focus h3, #tab2:active h3 {
background-color: #f5d6da;
color: #565A63;
z-index: 4;
}
#tab2:hover .tabcontent, #tab2:focus .tabcontent, #tab2:active .tabcontent {
opacity: 1;
z-index: 3;
}

ficando assim:

-----------------------------------------------

Template by "XXXXXXXXXXXXXXXX
Name do template:   XXXXXXXXXXXXX
Autor: "XXXXX"
URL: http://www.XXXXXXXXXXXXX.com.br
Date:   AGO 2011
----------------------------------------------- */
/* Menu em Abas CSSTabs
--------------------------- */
#csstabs {
height: 280px; / * altura total da área * /
margin:0 auto;
position:relative;
width: 100%;
}

#csstabs h3 { /* títulos das abas */
color: #f290ef;
cursor: pointer;
display: block;
font-size: 15px;
font-weight: bold;
height: 25px;
margin: 0;
padding: 5px 5px 5px 5px;
text-align: left;
border-top:1px solid #f290ef;
border-left:1px solid #f290ef;
border-right:1px solid #f290ef;
}
.tabcontent {   /* conteúdo das abas */
display: block;
height: auto;
width:100%;
padding:15px 0 5px 0px;
border:1px solid #f290ef;
}
#csstabs:hover h3, #tabs:focus h3, #tabs:active h3 {
z-index: 0;
background:none;
}
#csstabs:hover .tabcontent, #tabs:focus .tabcontent, #tabs:active .tabcontent {
opacity: 0;
z-index: 0;
}

#tab1 .tabcontent {
background-color: #f3c4ca;
position:absolute;
left:0;
top:35px;
height: 200px; /* altura total do conteúdo da aba 1 */
z-index: 2;
}
#tab1 h3 {
left: 0;
position: absolute;
top: 0;
z-index: 3;
background-color: #f3c4ca;
}

#tab1:hover h3, #tab1:focus h3, #tab1:active h3 {
background-color: #f3c4ca;
color: #565A63;
z-index: 4;
}
#tab1:hover .tabcontent, #tab1:focus .tabcontent, #tab1:active .tabcontent {
opacity: 1;
z-index: 3;
}

#tab2 .tabcontent {
background-color: #f5d6da;
height: 200px; /* altura total do conteúdo da aba 2 */
opacity: 0;
top:35px;
z-index: 1;
position:absolute;
}
#tab2 h3 {
left: 120px;
position: absolute;
top: 0;
}

#tab2:hover h3, #tab2:focus h3, #tab2:active h3 {
background-color: #f5d6da;
color: #565A63;
z-index: 4;
}
#tab2:hover .tabcontent, #tab2:focus .tabcontent, #tab2:active .tabcontent {
opacity: 1;
z-index: 3;
}

Salve!

Segunda Opção:

Dependendo do modelo do template,

procure por:

]]></b:skin>

e,
cole o

código a seguir:

Salve!

Agora:

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:

<span id='skiplinks' style='display:none;'>
      <a href='#main'>skip to main </a> |
      <a href='#sidebar'>skip to sidebar</a>
    </span>

<div id='menu-wrap'>

<div id='menu'>
<ul class='sf-menu'>
<li class='current-cat'><a expr:href='data:blog.homepageUrl'>Inicio</a></li>
<li><a href='http://www.mensagensdiversificadas.com.br/'>Mensagens Diversificadas</a>
<ul>

<a href='http://www.mensagensdiversificadas.com.br/search/label/mensagens' target='_blank'>MENSAGENS</a>

<a href='http://www.mensagensdiversificadas.com.br/search/label/%E2%99%A5%20sa%C3%BAde' target='_blank'>SAÚDE</a>

<li><a href='URL aqui'>Nome da página1</a>
<ul>

<a href='http://www.mensagensdiversificadas.com.br/search/label/v%C3%ADdeos' target='_blank'>Vídeos</a>

</ul>
</li>
<li><a href='URL aqui'>Nome da página3</a></li>
</ul>
</li>
<li><a href='URL aqui'>MD</a></li>
<li><a href='URL aqui'>MD</a>
<ul>
<li><a href='URL aqui'>MD</a></li>
</ul>
</li>
<li><a href='URL aqui'>MD</a></li>
<li><a href='URL aqui'>MD</a></li>

<li><a href='URL aqui'>OUTROS SITES</a>

<a href=' http://saudediversascategoriasdicas.blogspot.com/ ' target='_blank'>SAÚDE</a></li>

<li><a href='URL aqui'>MD</a>

<ul>

<a href=' http://www.mensagensdiversificadas.com.br/search/label/redes%20sociais ' target='_blank'>REDES SOCIAIS</a>
</ul>
</li>
</ul>
</div>
</div>

<div style='clear:both;'/>

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:

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.

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)