Tutorial - Menu "Size"

Yoo!

Trouxe novamente outro tutorial de menu. Esse é um menu que eu transformei de tumblr para blogger e que para mim serve melhor como "sub-menu" e não como seu menu principal. Você pode usá-lo na sidebar ou nas páginas do seu blog.

Ao passar o mouse em algum dos links a cor do fundo muda, mas com um efeito diferente. É como se a barrinha "crescesse", além do nome se mover um pouco.

1. Procure por ]]></b:skin> e acima da tag, cole:

.menusize {

display : block;

padding: 2px;

background: #e0e0e0;

text-indent : 5px;

padding-left: 6px;

vertical-align : middle;

margin-bottom: 2px;

-webkit-transition: all 0.60s;

}

.menusize:hover {

padding-left: 15px;

border-width: 1px;

border-style: left;

border-color: #f2bad2;

box-shadow: inset 350px 0 0px 0 #f2bad2;

 -webkit-transition: all 0.30s;

}

2. Salve e vá em Design > Editar HTML e adicione um gadget de JavaScript/HMTL. Nele, cole:

<div class="menusize">

<a href="www.seublog.com"> Link 1 </a></div>

<div class= "menusize">

<a href="www.seublog.com">  Link 2 </a></div>

<div class= "menusize">

<a href="www.seublog.com">  Link 3 </a></div>

<div class= "menusize">

<a href="www.seublog.com">  Link 4 </a></div>

<div class= "menusize">

<a href="www.seublog.com"> Link 5 </a></div>

<br />

Prontinho!