menu drop down no template/blog
Autor: Edilene brandao da silva | Publicado: 2011-08-26T12:47:00-07:00





TUTORIAL:

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




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


 



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




&nbsp;&nbsp;&nbsp; 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:



&nbsp;...abaixo de :



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





insira o código a seguir: 



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

#csstabs h3 {&nbsp; /* 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 {&nbsp;&nbsp; /* 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;&nbsp; /* 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;&nbsp; /* 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:


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

#csstabs h3 {&nbsp; /* 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 {&nbsp;&nbsp; /* 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;&nbsp; /* 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;&nbsp; /* 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;
}




&nbsp;Salve!




Segunda Opção:



Dependendo do modelo do template, 
procure por:


]]&gt;&lt;/b:skin&gt;

e,
cole o 

 código a seguir:



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

#csstabs h3 {&nbsp; /* 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 {&nbsp;&nbsp; /* 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;&nbsp; /* 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;&nbsp; /* 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;
}




&nbsp;Salve!







Agora:




Optando pelo menu abaixo da header (cabeçalho)


Procure por:
&lt;div id='content-wrapper'&gt;



ao encontrar o código,&nbsp;

&nbsp;
cole&nbsp; abaixo dele o código a seguir:



&lt;!-- skip links for text browsers --&gt;&nbsp;&nbsp;&nbsp; &lt;span id='skiplinks' style='display:none;'&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;a href='#main'&gt;skip to main &lt;/a&gt; |&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;a href='#sidebar'&gt;skip to sidebar&lt;/a&gt;&nbsp;&nbsp;&nbsp; &lt;/span&gt;&lt;div id='menu-wrap'&gt;&lt;div id='menu'&gt;&lt;ul class='sf-menu'&gt;&lt;li class='current-cat'&gt;&lt;a expr:href='data:blog.homepageUrl'&gt;Inicio&lt;/a&gt;&lt;/li&gt;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;li&gt;&lt;a href='http://www.mensagensdiversificadas.com.br/'&gt;Mensagens Diversificadas&lt;/a&gt;&lt;ul&gt;&lt;a href='http://www.mensagensdiversificadas.com.br/search/label/mensagens' target='_blank'&gt;MENSAGENS&lt;/a&gt;&lt;a href='http://www.mensagensdiversificadas.com.br/search/label/%E2%99%A5%20sa%C3%BAde' target='_blank'&gt;SAÚDE&lt;/a&gt;&lt;li&gt;&lt;a href='URL aqui'&gt;Nome da página1&lt;/a&gt;&lt;ul&gt;&lt;a href='http://www.mensagensdiversificadas.com.br/search/label/v%C3%ADdeos' target='_blank'&gt;Vídeos&lt;/a&gt;&lt;/ul&gt;&lt;/li&gt;&lt;li&gt;&lt;a href='URL aqui'&gt;Nome da página3&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;&lt;li&gt;&lt;a href='URL aqui'&gt;MD&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href='URL aqui'&gt;MD&lt;/a&gt;&lt;ul&gt;&lt;li&gt;&lt;a href='URL aqui'&gt;MD&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;&lt;li&gt;&lt;a href='URL aqui'&gt;MD&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href='URL aqui'&gt;MD&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href='URL aqui'&gt;OUTROS SITES&lt;/a&gt;&lt;a href=' http://saudediversascategoriasdicas.blogspot.com/ ' target='_blank'&gt;SAÚDE&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href='URL aqui'&gt;MD&lt;/a&gt;&lt;ul&gt;&lt;a href=' http://www.mensagensdiversificadas.com.br/search/label/redes%20sociais ' target='_blank'&gt;REDES SOCIAIS&lt;/a&gt;&lt;/ul&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&nbsp;&nbsp; &nbsp;&lt;/div&gt;&lt;div style='clear:both;'/&gt;


Salve!




Daí, 



Optando pelo&nbsp; menu acima da header (cabeçalho)
Procure pelo código:
&lt;div id='outer-wrapper'&gt;&lt;div id='wrap2'&gt;

E,

abaixo dele ( &lt;div id='outer-wrapper'&gt;&lt;div id='wrap2'&gt; )

cole o código a seguir:






&lt;!-- skip links for text browsers --&gt;
&nbsp;&nbsp;&nbsp; &lt;span id='skiplinks' style='display:none;'&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;a href='#main'&gt;skip to main &lt;/a&gt; |
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;a href='#sidebar'&gt;skip to sidebar&lt;/a&gt;
&nbsp;&nbsp;&nbsp; &lt;/span&gt;


&lt;div id='menu-wrap'&gt;


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

&lt;a href='http://www.mensagensdiversificadas.com.br/search/label/mensagens' target='_blank'&gt;MENSAGENS&lt;/a&gt;



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


&lt;li&gt;&lt;a href='URL aqui'&gt;Nome da página1&lt;/a&gt;
&lt;ul&gt;

&lt;a href='http://www.mensagensdiversificadas.com.br/search/label/v%C3%ADdeos' target='_blank'&gt;Vídeos&lt;/a&gt;






&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a href='URL aqui'&gt;Nome da página3&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a href='URL aqui'&gt;MD&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href='URL aqui'&gt;MD&lt;/a&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href='URL aqui'&gt;MD&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a href='URL aqui'&gt;MD&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href='URL aqui'&gt;MD&lt;/a&gt;&lt;/li&gt;


&lt;li&gt;&lt;a href='URL aqui'&gt;OUTROS SITES&lt;/a&gt;

&lt;a href=' http://saudediversascategoriasdicas.blogspot.com/ ' target='_blank'&gt;SAÚDE&lt;/a&gt;&lt;/li&gt;


&lt;li&gt;&lt;a href='URL aqui'&gt;MD&lt;/a&gt;




&lt;ul&gt;




&lt;a href=' http://www.mensagensdiversificadas.com.br/search/label/redes%20sociais ' target='_blank'&gt;REDES SOCIAIS&lt;/a&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;&nbsp;&nbsp; 
&lt;/div&gt;




&lt;div style='clear:both;'/&gt;







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



Atente:

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






nota:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 

# = ' ENDEREÇO DO SEU LINK AQUI '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 



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



e,


"salvando tudo de novo"




Atenção:




Querendo que o sub-menu abra em outra janela,


utilize o código abaixo:


&lt;li&gt;&lt;a href="URL A SER ABERTA NOUTRA PÁGINA" target="_blank"&gt;TEXTO&lt;/a&gt;&lt;/li&gt;


ao invéz de apenas:


&lt;li&gt;&lt;a href='ENDEREÇO DO SEU LINK AQUI;'&gt;LINK 4.13&lt;/a&gt;&lt;/li&gt; &nbsp;(exemplo)





 

 

 




 



&nbsp;