Pular para o conteúdo principal

Pesquisar

tutorial, menu drop down





Tutorial, menu drop down


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

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



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


Primeiro passo:

 Procure por:
  
 ]]></b:skin>


encontrado-o,

COLE , antes de

]]></b:skin>

o código abaixo:


/* 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;
}




segundo passo:                                         
 

procure pelo código:

<div id='header-wrapper'>

encontrando-o,

cole,
acima dele (
<div id='header-wrapper'>)


o código a seguir:


<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='ENDEREÇODAURLAQUI'>TITULODAURLAQUI</a>
<ul>

<a href='ENDEREÇO URL AQUI' target='_blank'>TITULO DE SUA URL</a>



<a href='ENDEREÇO URL AQUI' target='_blank'>SEU TEXTO</a>


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

<a href='URL ENDEREÇO AQUI' target='_blank'>TITULODAURL</a>


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


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

<a href=' END.URLAQUI ' target='_blank'>
TITULODAURLAQUI</a></li>


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




<ul>




<a href=' ENDEREÇO/URLAQUI ' target='_blank'>TEXTO?TITULODAURL</a>
</ul>
</li>
</ul>
</div>    
</div>

<div style='clear:both;'/>
OBS.:
O que está na cor azul , no código acima, coloque o que você pretende.
 

terceiro passo:                                               
 

abaixo do código:

/* Footer
----------------------------------------------- */
#footer {
  width:1200px;
  clear:both;
  margin:0 auto;
  padding-top:15px;
  line-height: 1.6em;
  text-transform:uppercase;
  letter-spacing:.1em;
  text-align: center;
}




coloque o código a seguir:


#menu-wrap {}
#menu { margin: 0px auto; width: 1005px; height:40px;  }
#menu ul {height:40px;}
#menu ul li {font-weight:bold;font-size:14px;}
#menu ul li a {text-shadow:2px 1px 2px #321a1c;text-transform:uppercase;margin:0px 0px 0px 0;text-decoration:none;color:#fff;}

.sf-menu,.sf-menu *{margin:0;padding:0;list-style:none}
.sf-menu{line-height:1.0}
.sf-menu ul{position:absolute;top:-999em;width:10em;}
.sf-menu ul li{width:100%}
.sf-menu li:hover{visibility:inherit;}
.sf-menu li{float:left;position:relative}
.sf-menu a{display:block;position:relative}
.sf-menu li:hover ul,.sf-menu li.sfHover ul{left:0;top:3.6em;z-index:99}
ul.sf-menu li:hover li ul,ul.sf-menu li.sfHover li ul{top:-999em}
ul.sf-menu li li:hover ul,ul.sf-menu li li.sfHover ul{left:10em;top:0}
ul.sf-menu li li:hover li ul,ul.sf-menu li li.sfHover li ul{top:-999em}
ul.sf-menu li li li:hover ul,ul.sf-menu li li li.sfHover ul{left:10em;top:0}
.sf-menu{float:left}
.sf-menu a{padding:.75em 1em;text-decoration:none}
.sf-menu a,.sf-menu a:visited{color:#13a}
.sf-menu li{background:transparent}
.sf-menu li li{background:#eea4e5}
.sf-menu li li li{background:#eea4e5}
.sf-menu li:hover,.sf-menu li.sfHover,.sf-menu a:hover{background:#c939a6;outline:0}
.sf-menu a:active{background:}
.sf-menu a:focus{outline:0}
.sf-menu a.sf-with-ul{padding-right:2.25em;min-width:1px;}
.sf-sub-indicator{position:absolute;display:block;right:.75em;top:1.05em;width:10px;height:10px;text-indent:-999em;overflow:hidden;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjo-Zg7oGGiNXPTscfCK-xr_BMbHIVWwPI215eaGHvFwj0x4LDNLD9JJX0aVb3ltsoyLbonO_WpgLCYPEYF3mEOzCUhuHwEbOZXKT9x0AwBkmCR9s-JEV99yxYS9AfZ1G6cdDx6jEM-wy8/s1600/arrows-white.png) no-repeat -10px -100px;}
a &gt; .sf-sub-indicator{top:.8em;background-position:0 -100px;}
a:focus &gt; .sf-sub-indicator,a:hover &gt; .sf-sub-indicator,a:active &gt; .sf-sub-indicator,li:hover &gt; a &gt; .sf-sub-indicator,li.sfHover &gt; a &gt; .sf-sub-indicator{background-position:-10px -100px;}
.sf-menu ul .sf-sub-indicator{background-position:-10px 0}
.sf-menu ul a &gt; .sf-sub-indicator{background-position:0 0}
.sf-menu ul a:focus &gt; .sf-sub-indicator,.sf-menu ul a:hover &gt; .sf-sub-indicator,.sf-menu ul a:active &gt; .sf-sub-indicator,.sf-menu ul li:hover &gt; a &gt; .sf-sub-indicator,.sf-menu ul li.sfHover &gt; a &gt; .sf-sub-indicator{background-position:-10px 0;}
.sf-shadow ul{background:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjRkMVGbt9uHLQpqTI57XVAsPsomcgw9jbw-vyx_pMiyUo6kKMOjsLEJk-jr2jPQWiqbbRRxvRw9n7-1Kc3l7-ZAG6yzCiu8LNVYXXF3B7MTRQl5lkF1eFxSMlxq4LFsvgyT6G7I4_3DE/s1600/shadow.png&#39;) no-repeat bottom right;padding:0 8px 9px 0;-moz-border-radius-bottomleft:17px;-moz-border-radius-topright:17px;-webkit-border-top-right-radius:17px;-webkit-border-bottom-left-radius:17px}
.sf-shadow ul.sf-shadow-off{background:transparent}




.postdate {font-size:12px;display: inline;float:left;font-family:&quot;Segoe UI&quot;,Calibri,&quot;Myriad Pro&quot;,Myriad,&quot;Trebuchet MS&quot;,Helvetica,Arial,sans-serif;margin-left:50px;margin-top:-15px;}
.postdate a {color:#cc44b4;text-decoration:none;font-weight:bold}
.postdate a:hover {color:#b0b77c;}


Salve!

E, pronto.

NOTA:
Quanto as cores, no primeiro passo, do CSS/Menu, coloque a que você preferir!

Comentários

Postagens mais visitadas deste blog

Modelo muito fácil de botas listradas feitas com dois espetos

... ► Modelo muito fácil de botas listradas feitas com dois espetos ◄

trilhas relacionadas com duas figuras master class lindamente

... trilhas relacionadas com duas figuras master class lindamente   Para o trabalho, é necessário tomar  :   .03 (três) combinações de cores contrastantes:  a linha principal (fundo),  as outras duas  realizarão ornamentos florais  (thread  número 1,  thread número 2),  .agulhas de tricô.   Descrição do trabalho   Marcar nas agulhas 22  ms / pts e  tricotar pontos de liga (todos faciais)  aproximadamente 10-12 cm.  Ornamento :  1 linha: Borda,  12 n a rosca principal,  7 loops com fio No. 1,  ATENÇÃO  no raio esquerdo há  1 p + borda,  sem amarrá-los -  desenformar tricô   2 linhas e  todas as fileiras pares  tricotar no padrão com a cor  apropriada  3 Linha  : Borda 10 n o segmento principal, o fio laços 7  №1,  AVISO no raio esquerdo é 3n + talão sem amarrá-los -  estão lançando tricô  linha  5: talão, 8 n o segmento principal, o fio laços 7 №1,  AVISO  no raio esquerdo é 5 p + borda, sem amar

Divulgação de patch restaurado

.. . Divulgação de patch   restaurado Na verdade, fazia muito tempo para o pátio, mas, como o fio que usava era grosso, o que encontrei era enorme (número 43-44), não tentei com outros fios, mas também tentei compartilhá-lo com outros fios. Fotografei um desenho e preparei um diagrama, eu não tenho um programa de esquema sozinho, mas não tenho um papel de charlatão. O que eu não  compartilhei  antes é  explicado em    Hanimelim.  Sercan   fez muito bem e foi muito bonito. Se você quiser ver   aqui ... ... passar a tarifa: Para o lado da pata, 22 loops e 21-22 linhas ásperas serão tecidas, enquanto passam o padrão da folha.    1ª linha: 13, por exemplo, altere a cor 7, por exemplo, volte 7, por exemplo, altere a cor 13, por exemplo, 3 classificações: 11, por exemplo, mude de cor 7, por exemplo, de volta para 7, por exemplo, cor de mudança 11, por exemplo, 5ª linha: 9, por exemplo, altere a cor 7, por exemplo, de volta par

contato

Nome

E-mail *

Mensagem *

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