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(http://4.bp.blogspot.com/_4HKUHirY_2U/TMjHRE3FySI/AAAAAAAAGZ0/hLftpSX0XCY/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;http://3.bp.blogspot.com/_4HKUHirY_2U/TMjHRTCrc8I/AAAAAAAAGZ8/F-nif08ywZg/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

Sapatinho de bebê, de tricô com elástico e/ou lastex : vídeo e receita

...

fonte:  tricotandocroche 





Sapatilha de tricô com elástico – vídeo e receitaSapatilha de tricô com elástico – vídeo e receita


"Sapatilha de bebê:
Material:

Fio usado no vídeo: Super bebê – Cisne – 1 fio
Agulha: 3,00 mm
Lastex, ou látex
Tesoura
Aguha de croche número 2,00 mm
Agulha de tapeçaria



Sola:
Colocar 37 pontos na agulha

1carr: tricô
2 carr: 1m, laç., 16m, laç., m., laç., m., laç.,m, laç., 16 m, laç., m.
3 carr: tricô
4 carr: 2m, laç., 16m., laç., 2m., laç., 3m., laç., 2m., laç., 16m., laç., 2m.
5 carr: tricô
6 carr: 3m., laç., 16m., laç., 3m., laç., 5m., laç., 3m., laç., 16m., laç., 3m..
Até aqui terás 55 pontos na agulha.
Tricotar nos 55 pontos
6 cordões de tricô (avesso e direito em ponto meia)
...então serão 
12 carreiras em ponto meia
para formar os 6 cordões de tricô.
Peito do pé:

Dividir 22, 11, 22 pontos e 

trabalhar nos 11 pontos centrais 
por 9 carreiras em cordões de tricô
(então serão 18 carreiras em ponto meia
para formar 
09 carreiras de cordões de tricô). 

Sempre pegando1 ponto 
de cada …

pérolas, sapatinhos em tricô , 03 - Jaqueline santos -

...







Sapatinho Sophia 39 pontos

...


Peça:




Jaqueline Santos – Sapatinho Sophia 39 pontos

Jaqueline Santos ensina todos os passos para fazer esse sapatinho fofo de bebê.

Lista de Materiais

* Linha de algodão
* Lastex
* Agulha para tricô nº2
* Agulha tapestry
* Solinha de tricô


Modo de Fazer


1- Coloque 39 pontos na agulha:


1ª carreira: 1tr, 1laç, 18tr,1laç,1tr,1laç,18tr,1laç,1tr.


2ª carreira e todas as pares, apenas em tricô.


3ª carreira: 2tr,1laç,18tr,1laç,3tr,1laç,18tr,1laç,2tr.


5ª carreira: 3tr,1laç,18tr,1laç,5tr,1laç,18tr,1laç,3tr.


7ª carreira: 4tr,1laç,18tr,1laç,7tr,1laç,18tr,1laç,4tr.


9ª carreira: 5tr,1laç,18tr,1laç,9tr,1laç,18tr,1laç,5tr.



2- Execução:1 ª Parte


"Faça a solinha de tricô com 39 pontos. 

Depois de feita a solinha ...

contato

Nome

E-mail *

Mensagem *

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