Tutorial - Menu Roll

Oi,oi,como estão cookies de chocolate? Espero que gostem do efeito de hoje ><

Para visualizar esse efeito clique aqui bom,agora vamos para o tutorial,ele é meio exclusivo digamos assim hahaha falando em exclusivo já estão sabendo do jogo Eldarya em português? To ansiosa demais para jogar aquela delicia cara!

Cole o código a cima de ]]></b:skin>

 .menuroll {
 width: 40px;
     height: 40px;
     padding: 5px;
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     border-radius: 5px;
     -webkit-transition-duration: .90s;
     -webkit-box-shadow: 0px 0px 4px #efefee;
     -moz-box-shadow: 0px 0px 4px #efefee;
     box-shadow: inset 3px 3px 0 #faf9fb, 2px 2px 0 #f6f6f6;
     overflow: inherit;
     margin-bottom: 5px;
     color: #fff;
     background: #f1edf4;
     border: #d4c8dd solid 1px;
     outline: solid 1px #f1edf4;
     outline-offset: -2px;
     text-shadow: 1px 1px 0 #cbbcd6;}
.menuroll:hover {
     background: #e7e1ec;
     width: 250px;
     height: 40px;
     padding: 5px;
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     border-radius: 5px;
     -webkit-transition-duration: .90s;}
.rollimg {
     width: 40px;
     height: 40px;
     float: right;
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     border-radius: 5px;
     -webkit-transition-duration: .90s;
     z-index: 100;}
.menuroll:hover .rollimg  {
     width: 40px;
     height: 40px;
     float: right;
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     border-radius: 5px;
     position: center;
     -webkit-transition-duration: .90s;
     -webkit-transform: rotate(360deg);
     -moz-transform: rotate(360deg);
     -o-transform: rotate(360deg);
     -webkit-box-shadow: 0px 0px 4px #d0d3bb;
     -moz-box-shadow: 0px 0px 4px #d0d3bb;
     box-shadow: -2px 0px 3px #d0d3bb;}
.titleroll {
     width: 300px;
     color: #c8cbaf;
     font-size: 10px;
     font-family: Jacques Francois Shadow;
     z-index: 50;
     margin-top: 5px;
     margin-bottom: -31px;
     -webkit-transition-duration: .90s;
     opacity:0;
     -moz-opacity: 0;
     filter: alpha(opacity=0);
     text-shadow:0px 0px 5px #b8a4c7;}
.menuroll:hover .titleroll  {
     text-shadow:0px 0px 2px #d0d3bb;
     margin-left: 5px;
     -webkit-transition-duration: .90s;
     opacity: 1;
     -moz-opacity: 1;
     filter: alpha(opacity=100);}

Agora cole isso no gadget HTML/JavaScrip

 <a href='LINK'>
  <div class="menuroll">
    <div class="titleroll">Nome 1</div>
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIuuTxVq4m9fjdpcHv0Cy9r4kLNuQfNcaoAF5Ye8EU0818lOl4OkYQeXdszTUtQiQA35peicmQuOHVAE552y4-tBI3ZJ0kmIaRUhKH0s9kbVwzFxJU5ixqP7h-dIO1a9dxSZrCMTP6MiaU/s1600/asno.png" class="rollimg" />
  </div>
</a>
<a href='LINK'>
  <div class="menuroll">
    <div class="titleroll">Nome 2</div>
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUlHzsby9abstUkFzKdmJa-eC4DZKv_yIIgptr5u4Ti4duj2_MHTrh8ElnzlL8EyrPnxU4ZZvejTNbQyUyJjA7hKuWQNbwoaFNIOcnKigvaD6KP6g_lo0ezREkXve2ySa8CpIMnooTfHg4/s1600/egvf.png" class="rollimg" />
  </div>
</a>
<a href='LINK'>
  <div class="menuroll">
    <div class="titleroll">Nome 3</div>
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTfvlXXimA6kB-pQxl9YD7NNUYPPh4oVnnEgvZgH0ZxvEICggy554PksGuJVw687vYEFe5GcNEW2eF7w8jXOBB7J7-c0pQUa-xlGS5KBPlaSjJsWc8LhGSzERgxAYEtloVoO3QItIdua8n/s1600/merdapodri.png" class="rollimg" />
  </div>
</a>

Esse foi o tutorial,espero que de certo no blog de vocês qual quer coisa comentem,tentarei ajudar ou tirar dúvidas...de qual quer forma não tem erro galera! :)