Em vários blogs,personalizam os menus com o templade "drop-down",na qual pressionado,aparecerão listas escondidas,muito chamadas de "nav".
(Exemeplo:Dentro da listagem O Incrível Mundo de Gumball,estará a lista com Season 1,Seanson 2,etc...)
Primeiro de tudo,vá no seu blog,em Layout e adicione o gadget "HTML/JavaScript".
Após adicionar isso,cole o seguinte código:
<div id='NavbarMenu'>
<div id='NavbarMenuleft'>
<ul id='nav'>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li>
<a href='ENDEREÇO DO SEU LINK AQUI'>Link 1</a>
<ul>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #1.1</a></li>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #1.2</a></li>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #1.3</a></li>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #1.4</a></li>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #1.5</a></li>
</ul>
</li>
<li><a href='ENDEREÇO DO SEU LINK AQUI'>Link 2</a>
<ul>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #2.1</a></li>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #2.2</a></li>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #2.3</a></li>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #2.4</a></li>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #2.5</a></li>
</ul>
</li>
<li><a href='ENDEREÇO DO SEU LINK AQUI'>Link 3</a>
<ul>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #3.1</a></li>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #3.2</a></li>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #3.3</a></li>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #3.4</a></li>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #3.5</a></li>
</ul>
</li>
<li><a href='ENDEREÇO DO SEU LINK AQUI'>Link 4</a>
<ul>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #4.1</a></li>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #4.2</a></li>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #4.3</a></li>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #4.4</a></li>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #4.5</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div style='clear:both;'/>
Após adicionar,salve e visualize.Você poderá ver que o menu ainda não está como esperado.Para encrementar o nav,como disse no começo do post,vá em Modelo>Personalizar>Avançado>Adicionar CSS e adicione o código css seguinte:
/* NavbarMenu
--------------------------- */
#NavbarMenu {background: #2092C0 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqleHRNx_L_gj9Niw142FbjZkKPkgMUuJG-bWd0htde_jl5aQtMMQVOwbxSuxXHSFG6FAz9OOEWZ6rWmIQQOM6PQu09Sc0QGzS7GkoeYmfD_hGTy-eM427BAdFQd8VtLiv9v_uCPARQfM/s1600/navbg.png);width: 100%;height: 35px;font-size: 12px;font-family: Arial, Tahoma, Verdana;color: #FFF;font-weight: bold;margin: 0;padding: 0;text-transform: capitalize;}
#NavbarMenuleft {width: 100%;float: left;margin: 0;padding: 0;}
#nav {margin: 0;padding: 0;}
#nav ul {float: left;list-style: none;margin: 0;padding: 0;}
#nav li {list-style: none;margin: 0;padding: 0;}
#nav li a, #nav li a:link, #nav li a:visited {color: #FFF;display: block;font: bold 13px Arial,Helvetica,Sans-serif;text-transform: capitalize;margin: 0;padding: 9px 15px 8px;border-right: 1px solid #fff}
#nav li a:hover, #nav li a:active {background: #2092C0 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqleHRNx_L_gj9Niw142FbjZkKPkgMUuJG-bWd0htde_jl5aQtMMQVOwbxSuxXHSFG6FAz9OOEWZ6rWmIQQOM6PQu09Sc0QGzS7GkoeYmfD_hGTy-eM427BAdFQd8VtLiv9v_uCPARQfM/s1600/navbg.png);color: #FFF;margin: 0;padding: 9px 15px 8px;text-decoration: none;}
#nav li li a, #nav li li a:link, #nav li li a:visited {background: #2092C0;width: 150px;color: #FFF;font-size: 13px;font-family: Arial,Helvetica,sans-serif;font-weight: bold;text-transform: capitalize;float: none;margin: 0;padding: 7px 10px;border-bottom: 1px solid #FFF;border-left: 1px solid #FFF;border-right: 1px solid #FFF;}
#nav li li a:hover, #nav li li a:active {background: #777;color: #FFF;padding: 7px 10px;}
#nav li {float: left;padding: 0;}
#nav li ul {z-index: 9999;position: absolute;left: -999em;height: auto;width: 170px;margin: 0;padding: 0;}
#nav li ul a {width: 140px;}
#nav li ul ul {margin: -32px 0 0 171px;}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {left: -999em;}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {left: auto;}
#nav li:hover, #nav li.sfhover {position: static;}
Após terminar,visualize o modelo,e caso tudo ocorra certo,sem erros,clique em Aplicar Modelo!
Veja como ficou o nosso modelo após salvar!Cliqua aê...
Nenhum comentário:
Postar um comentário
Olá,antes de comentarem leiam essas regras rapidinhas:
1ª Tente não abreviar muitas palavras;
2ª Escreva claramente o que você quer;
3ª Não critiquem;
4ª Sem Comentários ofensivos;
5ª Sem Spans
6ª E por favor,não postem qualquer tipo de palavreado inapropriado.
Se você seguir essas regras,seus comentários sempre serão bem vindos aqui no blog!