Apresentação + Tutorial

Ola eu me chama Matheus meu nick e Math-San e espero ajudar muito vocês com tutoriais de diversos tipos, ATENÇÃO  se quiserem pedir tutorias mandem para meu email ;D

Email:

matheusdonizetti@gmail.com

Agora vamos ao tutorial >;D

Hoje aprenderemos a fazer Menu hover + Padding como este do blog

Primeiro va em Editar HTML do seu blog e procure por

]]></b:skin>

e Acima cole

.menu-s a{<br /> background:xxx;<br /> width:202px;<br /> height:15px;<br /> font-family:Arial;<br /> font-size:15px;<br /> color:#FF4040;<br /> display:block;<br /> padding:3px 0px 0px 0px;<br /> margin:0 0 1px 2px;<br /> border-radius:3px;<br /> line-height:12px;<br /> -webkit-transition: all 0.3s linear;<br /> -webkit-transition: all 0.3s linear;<br /> -moz-transition: all 0.3s linear;<br /> -o-transition: all 0.3s linear;<br /> transition: all 0.3s linear;<br /> }<br /> .menu-s a:hover{<br /> background:#FF4040;<br /> width:202px;<br /> height:15px;<br /> font-family:Arial;<br /> font-size:15px;<br /> color:#fff;<br /> display:block;<br /> padding:3px 0px 0px 5px;<br /> margin:0 0 1px 2px;<br /> border-radius:3px;<br /> line-height:12px;<br /> cursor:pointer;<br /> -webkit-transition: all 0.3s linear;<br /> -webkit-transition: all 0.3s linear;<br /> -moz-transition: all 0.3s linear;<br /> -o-transition: all 0.3s linear;<br /> transition: all 0.3s linear;<br /> }

Agore crie um novo Widget HTML/JAVASCRIPT e cole

<div class="menu-s">
<a href="link">nome</a>
</div>

Demo:

nome