Efeito Tree

Boa Noite!! Para fujir um pouco dos menus de marcadores resolvi trazer o efeito super legal que encontrei no Kawaii World, prometo que esse é o ultimo tutorial de lá que eu reposto, o efeito da para usar como menu de marcadores ou elite de afiliados e você pode usar imagens que vão se combinando ao invés de todas iguais.

Esse tutorial é outro super fácil onde não é necessário mexer no HTML do blog e você só precisa colar o código no Gagdget desejado. Preview.

Tutorial

1° Passo: Cole em um Gadget Java/Script em que deseja o menu o seguinte código:

<style>
#comida a img{
width:auto;
height:auto;
display:inline;
margin-right:2px;
margin-left:1px;
margin-top:1px;
margin-bottom:1px;
padding: 3px;
background: #ffe8ed;
border: 1px solid #ffd1dc;
outline: solid 1px #fff;
outline-offset: -5px;
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
#comida a:hover img{
outline: solid 3px transparent;
opacity: 0.5;
outline-offset: -20px;
}
</style>
<div id="comida">
<center>
<a href="http://www.blogger.com/" title="Exemplo"> <img src="http://static.tumblr.com/0xqvkot/XWpmsgcou/1850.png" /></a>
<a href="http://www.blogger.com/" title="Exemplo">  <img src="http://static.tumblr.com/0xqvkot/Oixmsgcpe/1854.png" /></a>
</center>
</div>

2° Passo: Altere o código com os dados do seu blog e da imagem desejada.

Bom Espero que tenha Gostado <3