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
depois de personalizado ao seu gosto, clique em salvar modelo. depois vá em layout adicione o gadget > Html javascript, e cole isso:/* 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.sfhoverul, #dropdown li li li.sfhover ul {left: auto;}#dropdown li:hover, #dropdown li.sfhover {position: static;}
<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.