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.

14 comentários

  1. Gostei bastante das dicas

    Beijos
    @pocketlibro
    http://pocketlibro.blogspot.com

    ResponderExcluir
  2. Complicado sim, mas não impossível de entender!

    005tutorial

    Uma beijoca,
    Nanda Cris

    Maquiada & Esmaltada
    Maquiada & Esmaltada no Facebook

    ResponderExcluir
    Respostas
    1. parabens novamente vc ganhou a divulgação :)

      Excluir
  3. Gostei desse Drop Down! :D
    Mas por enquanto não aplicaria no meu blog! rs

    Beijo
    http://criandorabiscos.blogspot.com

    ResponderExcluir
  4. Oi Débora!
    Ótima dica, ainda mais para quem como eu não entende muito de webdesign...

    Beijos,
    Sora - Meu Jardim de Livros

    ResponderExcluir
  5. Nossa seu blog é tão legal!!!
    Quantos tutoriais maravilhosos!!
    Mal posso esperar para poder experimentar *-*
    Adorei esse tutorial, estava atrás dele há algum tempo!!1
    Obrigadaaa
    Beijoos
    Garota Liber
    http://garotaliber.blogspot.com

    ResponderExcluir
  6. Amei o cereja black, o blog é lindo.

    PARTICIPE DOS MEUS SORTEIOS: http://rockcomluxo.blogspot.com.br/p/sorteios.html

    ResponderExcluir
  7. adoro tutoriais, rs. Eu sempre destruo um monte de blogs teste, mas eles salvam a minha vida, rs
    bjus
    http://meumundinhoficticio.blogspot.com.br/

    ResponderExcluir
  8. Oie Débora =)

    Sou daquelas que odeia html XD acho que foi por isso que desisti de ser web rs...
    Mas acho bacanas esses tutorias. Ajudam bastante!


    Ane Reis.
    mydearlibrary | Livros, divagações e outras histórias...
    @mydearlibrary

    ResponderExcluir
  9. Muito bom o tuto,depois vou usar em algum lay *o*

    Está lindo o seu blog,e parabéns pelo Veja blogs o//

    até mais!

    Se puder,dá uma passadinha lá no meu,tá rolando sorteio de uma babyliss!

    http://rebiteseflores.blogspot.com.br/2013/07/happiness.html


    bjkz

    ResponderExcluir
  10. Gostei bastante das dicas! No início, tudo é aparentemente complicado, mas com o tempo estou conseguindo entender muitas coisas... Vou acompanhar sempre o seu blog, vai me ser muito útil.
    Estou iniciando um, apareça lá quando quiser.
    Abraços!
    http://pecasdeoito.blogspot.com.br/

    ResponderExcluir
  11. Oi!
    Gostei do tutorial. Bem explicado!

    BjO
    http://the-sook.blogspot.com.br/

    ResponderExcluir
  12. Oi!
    Sempre tentando mexer no html sozinha, mas depois volto aqui para conferir mais tutoriais... Haha

    BjO
    http://the-sook.blogspot.com.br/

    ResponderExcluir
  13. Gostei da dica
    http://umagarotacitouu.blogspot.com.br/

    ResponderExcluir










2011/2017 - Delicada e Abusada | Personalizado por Débora Alvim | Não copie! Encomende o seu na HTML LOVE DESIGN