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 > .sf-sub-indicator{top:.8em;background-position:0 -100px;}
a:focus > .sf-sub-indicator,a:hover > .sf-sub-indicator,a:active > .sf-sub-indicator,li:hover > a > .sf-sub-indicator,li.sfHover > a > .sf-sub-indicator{background-position:-10px -100px;}
.sf-menu ul .sf-sub-indicator{background-position:-10px 0}
.sf-menu ul a > .sf-sub-indicator{background-position:0 0}
.sf-menu ul a:focus > .sf-sub-indicator,.sf-menu ul a:hover > .sf-sub-indicator,.sf-menu ul a:active > .sf-sub-indicator,.sf-menu ul li:hover > a > .sf-sub-indicator,.sf-menu ul li.sfHover > a > .sf-sub-indicator{background-position:-10px 0;}
.sf-shadow ul{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjRkMVGbt9uHLQpqTI57XVAsPsomcgw9jbw-vyx_pMiyUo6kKMOjsLEJk-jr2jPQWiqbbRRxvRw9n7-1Kc3l7-ZAG6yzCiu8LNVYXXF3B7MTRQl5lkF1eFxSMlxq4LFsvgyT6G7I4_3DE/s1600/shadow.png') 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:"Segoe UI",Calibri,"Myriad Pro",Myriad,"Trebuchet MS",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!

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

Pesquisar este blog

Pesquisar