Curta Nossa Página do Facebook!


  • Desenvolvido Por Iago Melanias

    Menu Hover com efeito Transition

    Bom galera hj vou postar um tuto muito pedido pela galera do chat... Vamo lá:

    Vá em Editar HTML do seu blog>>procure pela tag:

    </head>
    ...logo acima desta tag adicione o seguinte código:

    <style> a.menu{ width:XXXpx;/* Edite a largura do menu */ height:20px; background-color:#XXX;/* Edite a cor de fundo do menu normal */ display:block; margin-left:3px; padding-left:10px; border-left:0px solid #XXX;/* Edite a cor da borda do menu normal */ border-bottom:1px solid #XXX;/* Edite a cor da borda do menu normal */ font-weight:bold; line-height:175%; -webkit-transition: all 0.5s linear;/* Edite o tempo de transição de uma cor para outra */ -moz-transition: all 0.5s linear; -o-transition: all 0.5s linear; transition: all 0.5s linear; } a.menu:hover{ background-color:#XXX;/* Edite a cor de fundo do menu hover */ display:block; margin-left:3px; padding-left:10; border-left:0px solid #XXX;/* Edite a cor da borda do menu hover */ border-bottom:1px solid #XXX;/* Edite a cor da borda do menu hover */ color:#XXX; }/* Edite a cor da fonte do menu hover */ -webkit-transition: all 0.5s linear;/* Edite o tempo de transição de uma cor para outra*/ -moz-transition: all 0.5s linear; -o-transition: all 0.5s linear; transition: all 0.5s linear; </style>

    Agora Vá em >> Layout >> adicione um novo gadget >> e coloque o seguinte código:

    <a class="menu" href="url">titulo</a> <a class="menu" href="url">titulo</a> <a class="menu" href="url">titulo</a> <a class="menu" href="url">titulo</a>

    Pronto! Só isso, ate +...se der para comentar agradeço!

    0 Deixe um Comentário:

    Postar um comentário