D.A Tutorial: Menu nos gadgets com Drop Down!

Oi gente estou super feliz, meu blog, está no Veja blogs! Ebaaa, isso graças a vocês, Obriga a todas por fazer parte do blog, e que sem vcs meu blog não seria isso como ele é! Obrigada :), Ah, e vim avisar que as Votações do concurso já começaram, vem, votar aqui do lado! Hoje o tutorial é como criar um menu, só que por gadget, e um pouco no html. então vamos? Lets Go!
                       Click leia mais e vamos que vamos!



para quem não sabe como é o menu, veja no nosso blog de testes  > http://blogdetestesdelicadaeabusada.blogspot.com.br/ quer fazer igual? então preste muita atenção para entender os códigos...

Vá no seu html e cole o código abaixo, em cima de: /* Variable definitions

/* Menu Drop Down --------------------------- */

#menudropdown {background: #000; /* cor do fundo do menu */

width: 100%;height: 35px; /*height tamanho da faixa o fundo */

font-size: 12px;  /* tamanho da fonte */

font-family: trebuchet; /* nome da fonte */

color: #fff;/* cor do link */

font-weight: bold;margin: 0;padding: 0;text-transform: capitalize;

background-position: right; /*posição da faixa se quiser que fique no meio troque right por center, se quiser para a esquerda, troque por left */

}

#menudropdownleft {

width: 100%;float: right; /* posição deixe do mesmo jeito do código de cima */margin: 0;padding: 0;

}

#dropdown {

margin: 0;

padding: 0;

}

#dropdown ul {

float: right;/* esse também deixe do mesmo jeito */ list-style: none;margin: 0;padding: 0;

}

#dropdown li {

list-style: none;margin: 0;padding: 0;}

#dropdown li a, #dropdown li a:link, #dropdown li a:visited {

color: #fff; /* cor do link não é o drop ainda*/

display: block;

font-size: 18px;/*tamanho da fonte*/

font-family: Oswald;font-weight: normal;text-transform: capitalize; /* estilo da fonte */

margin: 0;padding: 9px 15px 8px;

}

#dropdown li a:hover, #dropdown li a:active {

color: #ccc; /*cor do hover quando passar o mouse dos links*/

margin: 0;padding: 9px 15px 8px;text-decoration: none;

}

#dropdown li li a, #dropdown li li a:link, #dropdown li li a:visited {

background: #ccc;/* fundo do drop down*/

width: 150px;

color: #000; /*cor do link do drop down*/

font-size: 14px;font-family: Trebuchet;font-weight: normal;text-transform: /* font do drop */

capitalize;

float: none;margin: 0;padding: 7px 10px;

}

#dropdown li li a:hover, #dropdown li li a:active {

background: #000;/*cor do fundo hover do drop*/

color: #FFF; /*cor do link hover do drop*/

padding: 7px 10px;

}

#dropdown li {float: right;padding: 0; /* mude o right pelo que você tem colocado nos outros */

}

#dropdown li ul {z-index: 9999;position: absolute;left: -999em;height: auto;width: 170px;margin:

0;padding: 0;

}

#dropdown li ul a {width: 140px;

}

#dropdown li ul ul {margin: -32px 0 0 171px;}

#dropdown li:hover ul ul, #dropdown li:hover ul ul ul, #dropdown li.sfhover ul ul, #dropdown li.sfhover ul ul ul {

left: -999em;}

#dropdown li:hover ul, #dropdown li li:hover ul, #dropdown li li li:hover ul, #dropdown li.sfhover ul, #dropdown li li.sfhover

ul, #dropdown li li li.sfhover ul {left: auto;}

#dropdown li:hover, #dropdown li.sfhover {position: static;}

depois de personalizado ao seu gosto, clique em salvar modelo. depois vá em layout adicione o gadget > Html javascript, e cole isso:

<div id='menudropdown'>
<div id='menudropdownleft'>
<ul id='dropdown'>
<li><a href='Link do seu blog'>  home </a></li>
<li>
<a href='link de contato'> contatos </a>
<ul>
<li><a href='link do seu facebook'>facebook (drop) </a></li>
<li><a href='link do twitter'> twitter (drop)</a></li>
</ul>
</li>
<li><a href='link dos goodies'>Goodies</a>
<ul>
<li><a href='link de tutoriais'> tutoriais (drop)</a></li>
<li><a href='link de brushes'>Brushes  (drop) </a></li>
</ul>
</li>
<li><a href='link de parceiros'> Parceiros</a>
<ul>
<li><a href='link de resenhas'>resenhas  (drop)</a></li>
<li><a href='link de empresas'>empresas  (drop)</a></li>
</ul>
</li>
</div>
</div>
<div style='clear:both;'/></div>

é só editar os links, mais antes uma mini legenda:

<a href='link ...   é o link
'>resenhas </a ... é o nome que vai aparecer
'>resenhas (drop)</a.... é o nome do link drop down

para colocar mais links sem o drop down, é só colocar isso acima de </div>
<li><a href='Link '> nome do link </a></li>

e para adicionar mais links com drop down

<li><a href='link'> nome </a>
<ul>
<li><a href='link'>  nome  (drop)</a></li>
<li><a href='link '>nome  (drop)</a></li>
</ul>
</li>

e para adicionar mais drops aos menus é só colocar isso, abaixo dos drops
<li><a href='link '>nome  (drop)</a></li>
<li><a href='link '>nome  (drop)</a></li>
<li><a href='link '>nome  (drop)</a></li>

é meio complicado de entender, não é? mais com muito esforço chegamos lá!
beijos,

Visitem:

ele(não é vc é o blog) ganhou divulgação nesse post por tedo comentado no post anterior com o código 004quadros.

Quem for o primeiro a comentar com o código 005tutorial no final do seu comentário ganha divulgação com banner no proximo post.