Menu muda de cor com DHTML
Aumenta link ao passar o mouse(rato) a:hover {font-weight:bold;} no css.
Aumenta bastante o link ao passar o mouse a:hover {font-weight:bolder;} no css.
Menu muda de cor com css
O menu usa estilo css e div mais se quiser pode ser feito com table apesar de estar meio ultrapassado e se for observar poucos sites e blogs novos as utilizam.Vou começar com o style css que deve ir entre as tags <head></head> ou arquivo.css externo:
<head> <style type="text/css"> .lateral {border:1px solid #ccc; position:relative; width:270px; text-decoration:none;} a.menu {border:1px solid #ccc; position:relative; font: 12px Arial, Helvetica, sans-serif; color:blue; text-decoration:none; display:block; background-color:#CCFFFF;} a.menu:hover {font-weight:bolder; color:red; background-color:#CCC; text-decoration:none; }</style> </head>
Agora a parte que vai no <body>corpo</body> do html, no caso do blogspot é mais aconselhável inserir em layout, add elemento, HTML/JavaScript(apesar de não usar JavaScript):
Eu vou explicar algumas tags mais fáceis de mudar e que fazem modificações na apresentação do menu:
Uma explicação sobre o código css(não use esses):
DIV que "segura" os links do menu
.lateral { pode ser mudado as configurações da DIV onde fica os liks width:270px;(largura) deve ser maior que o tamanho do link}
configuração do link antes de passar o rato(mouse)
a.menu {
font: 12px Arial, Helvetica, sans-serif;(tamanho e tipo de fonte do link)color:blue;(cor azul da fonte do link, poderia ser #0066CC)
text-decoration:none;(não permite que o link fique com um traço embaixo...)
display:block; (vai fazer o link se estender lateralmente até a largura total da div)
background-color:#CCFFFF;(cor de fundo do link)}
configuração do link ao passar o rato
a.menu:hover {
font-weight:bolder;(faz a fonte "aumentar" muito, negrito)
color:red;(cor vermelha da fonte do link)
background-color:#CCC;(cor cinza, fundo do link)}
Para a fonte aumentar(negrito) um pouco font-weight:bold;
font: 14px Arial, Helvetica, sans-serif; (poderia ser adicionado, para aumentar o link ao passar o mouse uma fonte maior) no css para a.menu:hover{ }
Se for usar no blogspot e mexer no HTML faça uma cópia dele antes se vc não está muito habituado, o próprio css de um blog ou site pode influenciar, mas dificilmente da grande diferença, faça testes o pior que pode acontecer é aprender com algum erro.
Se usar folha de estilo externa e existir estilização css no seu html(in line)essa terá prioridade. Para saber tudo de css visite o site do maujor.
Agora vou colocar o css no HTML, fazer o teste no blog e ver como funciona.
Agora sem usar a div lateral na volta dos links, e, sem o display:block;(no css) que tem a função de ocupar espaço lateral total. Se tiver espaço os links do menu ficarão lado a lado:
<a class="menu" href="#">Link imagem blogger</a>
<a class="menu" href="#">Link favoritos</a>
<a class="menu" href="#">Menu dhtml</a>
0 comentários:
Postar um comentário