Menu Roll - Exclusivo?

Boa noite! 

I'm fine in shine & vocês? Espero que bem também. - Minhas rimas melhoram a cada dia muahaha.

Só eu ando viciadíssima em We coração it? É muito bom e a cada imagem heartheada mais vontade de hearthear dá. Tenho uma novidade que me fez ficar bem feliz também, é sobre as visitas em nosso blog. Já tivemos várias visitas, até da Ucrânia! Haha' isso é bom, mas é claro que nosso maior público é brasileiro, pois somos H U 3  H U 3 BR :v 

Mas... Ontem li um comentário de um blog americano. Melhor do que ter visitas estrangeiras é ter comentários estrangeiros, valeu mesmo pela força gente! Outra novidade recente - com recente quero dizer que aconteceu ontem! UAHSUHA' - Foi a entrega do layout para o blog C.L {www} além do blogueiro Thawan ser super paciente, engraçado e exagerado no CAPS LOCK, o blog é super interessante oh, amo essa revista e se quiserem podem conferir o novo layout - com novo quero dizer que ele foi entregue ontem.

P.S.: Hannah G3 trouxe duas gatinhas para casa.

P.P.S.: Ela trouxe mais uma, mas minha vó irá buscar ela, e a merda é que me apeguei a bicha.

Se eu disser que me lembro, estarei mentindo, pois não me lembro onde vi o tutorial do efeito, mas se descobrirem me avisem pelo amor de Deus - pelos comentários; e sim, esse tutorial é meio exclusivo, embora o efeito não tenha sido criado por mim, eu o modifiquei muito e se quiserem ver como ele é...

Clica! {♥}

Cole o código acima 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);}

cole isso em um gadget HTML / JavaScript:

<a href='LINK'>
  <div class="menuroll">
    <div class="titleroll">Nome 1</div>
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgC7cZtjGxS6FytkT1WjFldl9K9fBv7a2CZlWxMFETCTXyUlOY-Dqh2I_An2KpBnf2JHGWcS5yQzY7_ACI1bL72bg-c8Y0vSd0upw3y26e7GRx6ntox-l2uCm6O_xM6iNiS9yFmNktkMGls/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/AVvXsEjdZj0pCt50MqR6EvT1BeVVFm7WaMOA8qqChJ9bHhePYqVCZ0-mbM0lmhslCBv37N1zHtWTApllVUpWPOvodxOJc-MTFPuXjthZGcMbXJ_nwMBcI1c027QsQiaaj7EWy7SBVTHkaHz4DGgj/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/AVvXsEiaCSqavjHmFotSLUy6n4UeW1dze7BZmHqDmtA3rMTnJAiDJAreEy8pW25on8VU__RI5sfCZwfktnihumxj3yR9pbwFTq72e6DsEZ5OmFRB1DL6qJXLMEQqOmmqsJyll2nBdJOm1-DOWR_r/s1600/merdapodri.png" class="rollimg" />
  </div>
</a>

Tá certo galera, foi esse o tutorial e espero que tenham curtido. 

- Rockisses in ur faces chocos!