Hey people! Tudo bom ?? Hoje eu vim postar o meu primeiro tutorial aqui >.< , e também a primeira postagem uhu !!!!
Esses dias eu estava procurando igual a uma louca um menu legal para o blog até que achei um no Uprisingteen , E sim o nosso menu tem como núcleo o da Capricho . Então bora aprender??
Se você quiser igual o menu abaixo não edite nada
• Vá em Modelo > Editar HTML
• Ctrl+F e procure na caixa de pesquisa : ]]></b:skin>
• E acima cole:
#hb-menu, #hb-menu ul {
margin: 0;
padding: 0;
list-style: none;}#hb-menu {width: 100%;background-color:#330033;}#hb-menu:before, #hb-menu:after {content: "";display: table;}#hb-menu:after {clear: both;}#hb-menu {zoom:1;}#hb-menu li {float: left;position: relative;}#hb-menu a {float: left;padding: 10px 11px;color: #fff;font: 14px Arial;text-decoration: none;}#hb-menu li:hover > a {color:#ff0066;text-decoration: underline;}*html #hb-menu li a:hover {/* IE6 only */color: #fafafa;}#hb-menu ul {margin: 20px 0 0 0; _margin: 0; /*IE6 only*/opacity: 0.9;visibility: hidden;position: absolute;top: 47px;left: -10px;z-index: 9999;background: #df005a;/*cor do meu de baixo*/}#hb-menu li:hover > ul {opacity: 0.9;visibility: visible;margin: 0;}#hb-menu ul ul {top: 0;left: 150px;margin: 0 0 0 19px; _margin: 0; /*IE6 only*/}#hb-menu ul li {float: none;display: block;border: 0; _line-height: 0; /*IE6 only*/}#hb-menu ul a {padding: 10px;width: 130px;height: 10px; /*IE6 only*/display: block;white-space: nowrap;float: right;text-transform: none;margin-bottom: 5px;}#hb-menu ul a:hover {color: #FFA500;}#hb-menu ul li:first-child > a {-moz-border-radius: 3px 3px 0 0;-webkit-border-radius: 3px 3px 0 0;border-radius: 3px 3px 0 0;}#hb-menu ul li:first-child > a:after {content: '';position: absolute;left: 15px;top: -6px;border-left: 6px solid transparent;border-right: 6px solid transparent;border-bottom: 6px solid #df005a;opacity: 0.9;}#hb-menu ul ul li:first-child a:after {left: -6px; top: 50%;margin-top: -6px;border-left: 0;border-bottom: 6px solid transparent;border-top: 6px solid transparent;border-right: 6px solid #df005a;}#hb-menu ul li:first-child a:hover:after {border-bottom-color: #df005a;}#hb-menu ul ul li:first-child a:hover:after {border-right-color: #0299d3;border-bottom-color: transparent;}#hb-menu ul li:last-child > a {-moz-border-radius: 0 0 3px 3px;-webkit-border-radius: 0 0 3px 3px;border-radius: 0 0 3px 3px;}
Salve.Agora procure por <b:section class='tabs' id='crosscol-overflow' showaddelement='no'/> e acima desta linha cole o código abaixo já editando com os seus links :
<ul id='hb-menu'><li><a href='Seu Link Aqui'>Início</a></li><li> <a href='Seu Link Aqui'>Nome da página</a> <ul><li><a href='Seu Link Aqui'>Nome da página</a></li><li><a href='Seu Link Aqui'>Nome da página</a></li><li><a href='Seu Link Aqui'>Nome da página</a></li></ul> </li><li> <a href='Seu Link Aqui'>Nome da página</a> <ul><li><a href='Seu Link Aqui'>Nome da página</a></li><li><a href='Seu Link Aqui'>Nome da página</a></li><li><a href='Seu Link Aqui'>Nome da página</a></li></ul> </li><li> <a href='Seu Link Aqui'>Nome da página</a> <ul><li><a href='Seu Link Aqui'>Nome da página</a></li><li><a href='Seu Link Aqui'>Nome da página</a></li></ul> </li><li> <a href='Seu Link Aqui'>Nome da página</a> <ul><li><a href='Seu Link Aqui'>Nome da página</a></li><li><a href='Seu Link Aqui'>Nome da páginas</a></li><li><a href='Seu Link Aqui'>Nome da página</a></li><li><a href='Seu Link Aqui'>Nome da página</a></li></ul> </li><li><a href='Seu Link Aqui'>Nome da página</a><ul><li><a href='Seu Link Aqui'>Nome da página</a></li><li><a href='Seu Link Aqui'>Nome da página</a></li><li><a href='Seu Link Aqui'>Nome da página</a></li></ul></li><li> <a href='Seu Link Aqui'>Nome da página</a> <ul><li><a href='Seu Link Aqui'>Nome da página</a></li><li><a href='Seu Link Aqui'>Nome da página</a></li><li><a href='Seu Link Aqui'>Nome da página</a></li><li><a href='Seu Link Aqui'>Nome da página</a></li></ul> </li><li><a href='Seu Link Aqui'>Nome da página</a></li><li><a href='Seu Link Aqui'>Nome da página</a></li><li><a href='Seu Link Aqui'>Nome da página</a></li></ul>
Simples assim >.<.Qualquer dificuldade em editar o menu é só falar aqui .
EXTRAS:
Adicionar uma página:
<li><a href='LINK_DA_PÁGINA'>NOME DA PÁGINA</a></li>
Adicionar página com sub-páginas:
Querem um tutorial de como editar o menu ou colocar uma imagem como fundo ?? Comente aqui em baixo ou peça por e-mail ou peça em nossa Ask .<li><a href='LINK_DA_PÁGINA'>NOME DA PÁGINA</a> <ul><li><a href='LINK_DA_PÁGINA'>NOME DA PÁGINA</a></li><li><a href='LINK_DA_PÁGINA'>NOME DA PÁGINA</a></li><li><a href='LINK_DA_PÁGINA'>NOME DA PÁGINA</a></li></ul> </li>
Até a próxima :D