Agora nessas onde estão escritas: Home - Sem sub-menu 01 - Sem sub-menu 02 você irá colocar as páginas que não terão guias embaixo (Parceria - Equipe etc.). Para adicionar mais páginas que não têm guias internas, copie a tag destacada abaixo e cole-as na linha de baixo.
E em Menu dropdown 01, substiuta pelo nome da página que terá guias embaixo. E em: Sub-menu 01 - Sub-menu 02 - Sub-menu 03 ponha o nome das guias internas. Ex.: (Quadros > Você Aprendeu - Fonte Mania). Para adicionar outra página com guias internas copia isso e ponha no fim a tag: </li>
Tente compreender mais ou menos como funciona esse código e vá modificando do seu jeito. Agora vamos para o HTML do blog (css).
Primeiramente, vá para a aba 'Design' e depois 'Editar HTML'.
Vamos às edições!
Primeiro, aperte 'ctrl+f ' e procure por "Cor numero 1" (sem aspas). Lá, você colocará, no lugar de #FFFFFF, o código da cor que você deseja para o menu .
Depois, aperte 'ctrl+f ' novamente, e procure por "Cor numero 2" (sem aspas). Lá, você colocará no lugar de #FFFFFF, o código da cor que você deseja para o menu em estado hover (quando alguem passar o mouse).
Aperte 'ctr+f ' novamente, e procure por "Cor numero 3" (sem aspas). No lugar de #FFFFFF, coloque o mesmo código da Cor numero 1.
Aperte 'ctrl+f ' outra vez (eu sei que é cansativo) e procure por "Cor numero 4" (sem aspas). No lugar de #FFFFFF, coloque o mesmo código da Cor numero 2.
Certo, seu menu já está com a cor desejada. Porém, pode ocorrer uma "incompatibilidade" entre a cor da letra e a cor do menu. Como resolver isso? É Muito fácil!
Aperte 'ctrl+f ' novamente, e procure por "Cor Fonte" (sem aspas). No lugar de #FFFFFF, coloque o código da cor desejada.
Aperte 'ctrl+f ' mais uma vez, e procure por "Cor Fonte 2" (sem aspas). No lugar de #FFFFFF, coloque o código da "Cor Fonte".
Pode ser que seu menu não esteja com a largura desejada. Como arrumar isso?
Primeiramente, você deve tentar descobrir qual a ID do gadget do menu. Para isso, vá até a aba 'Design' e dê um nome ao gadget do menu como por exemplo "TodoDiaMenu". Em seguida, vá até a aba "Editar HTML" (dentro da aba Design) e procure por "Todo dia Menu". Haverá um código, semelhante a este:
Agora, aperte 'ctrl+f ' e procure por "]]></b:skin>" (sem aspas). Logo acima deste código, coloque este outro código:
Obs.: Para botar link você deve ir ao gadget do menu e onde está < a href="#" > substituir o # pelo Link.
Então, aperte 'ctrl+f' e procure por : "]]></b:skin>" (sem aspas) e logo abaixo coloque o seguinte código:
<!--jquery-DD-Menu-Starts-->
<style type="text/css">
/* menu styles */#jsddm{ margin: 0;padding: 0;}#jsddm li{ float: left;list-style: none;font: 12px Tahoma, Arial;}#jsddm li a{ display: block;background: #FFFFFF /* Cor numero 1 */;padding: 5px 12px;text-decoration: none;border-right: 1px solid white;width: auto;color: #FFFFFF; /* Cor Fonte */white-space: nowrap;}#jsddm li a:hover{ background: #FFFFFF /* Cor numero 2 */;}#jsddm li ul{ margin: 0;padding: 0;position: absolute;visibility: hidden;border-top: 1px solid white;}#jsddm li ul li{ float: none;display: inline;}#jsddm li ul li a{ width: auto;background: #FFFFFF /* Cor numero 3 */;color: #FFFFFF; /* Cor Fonte 2*/}#jsddm li ul li a:hover{ background: #FFFFFF /* Cor numero 4 */;}</style><!-- script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script --><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script><script type="text/javascript">var timeout = 500;var closetimer = 0;var ddmenuitem = 0;function jsddm_open(){ jsddm_canceltimer();jsddm_close();ddmenuitem = $(this).find('ul').eq(0).css('visibility', 'visible');}function jsddm_close(){ if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}function jsddm_timer(){ closetimer = window.setTimeout(jsddm_close, timeout);}function jsddm_canceltimer(){ if(closetimer){ window.clearTimeout(closetimer);closetimer = null;}}$(document).ready(function(){ $('#jsddm > li').bind('mouseover', jsddm_open);$('#jsddm > li').bind('mouseout', jsddm_timer);});document.onclick = jsddm_close;</script><!--jquery-DD-Menu-Stops-http://bloggerstop.net-->
Vamos às edições!
Primeiro, aperte 'ctrl+f ' e procure por "Cor numero 1" (sem aspas). Lá, você colocará, no lugar de #FFFFFF, o código da cor que você deseja para o menu .
Depois, aperte 'ctrl+f ' novamente, e procure por "Cor numero 2" (sem aspas). Lá, você colocará no lugar de #FFFFFF, o código da cor que você deseja para o menu em estado hover (quando alguem passar o mouse).
Aperte 'ctr+f ' novamente, e procure por "Cor numero 3" (sem aspas). No lugar de #FFFFFF, coloque o mesmo código da Cor numero 1.
Aperte 'ctrl+f ' outra vez (eu sei que é cansativo) e procure por "Cor numero 4" (sem aspas). No lugar de #FFFFFF, coloque o mesmo código da Cor numero 2.
Certo, seu menu já está com a cor desejada. Porém, pode ocorrer uma "incompatibilidade" entre a cor da letra e a cor do menu. Como resolver isso? É Muito fácil!
Aperte 'ctrl+f ' novamente, e procure por "Cor Fonte" (sem aspas). No lugar de #FFFFFF, coloque o código da cor desejada.
Aperte 'ctrl+f ' mais uma vez, e procure por "Cor Fonte 2" (sem aspas). No lugar de #FFFFFF, coloque o código da "Cor Fonte".
Pode ser que seu menu não esteja com a largura desejada. Como arrumar isso?
Primeiramente, você deve tentar descobrir qual a ID do gadget do menu. Para isso, vá até a aba 'Design' e dê um nome ao gadget do menu como por exemplo "TodoDiaMenu". Em seguida, vá até a aba "Editar HTML" (dentro da aba Design) e procure por "Todo dia Menu". Haverá um código, semelhante a este:
<b:widget id='HTML8' locked='false' title='TodoDiaMenu' type='HTML'/>Copie o que se localiza entre id='' (no meu caso, HTML8).
Agora, aperte 'ctrl+f ' e procure por "]]></b:skin>" (sem aspas). Logo acima deste código, coloque este outro código:
#IDdoMenu {Salve e visualize.
width: larguradesejada (em pixels);
background-color:cordesejada;
margin-left:0px;
}
Obs.: Para botar link você deve ir ao gadget do menu e onde está < a href="#" > substituir o # pelo Link.
~Lanx
Nenhum comentário:
Postar um comentário