• - ChapStique -

    - ChapStique -

  • - Crouton -

    - Crouton -

  • - Nadaddy -

    - Nadaddy -

  • - Fatty -

    - Fatty -

  • - Hollywood -

    - Hollywood -

22 de abril de 2015

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!


14 comentários:

  1. O layout do blog ficou muito lindo e maravilhoso, assim como você, aceita tomar um café? (ashuashuashua) Esse efeito é bem legal mesmo, raríssimos blogs usam!
    Até mais ;)

    jamilsonoliveira.com

    ResponderExcluir
  2. Interessante,como sou curiosa vou testar em um blog teste.
    Megan,muda a cor do seu layout é lindo mas sou vovó,fica difícil enxergar.
    Parabéns, sucesso para você,bjs

    ResponderExcluir
    Respostas
    1. Graça obrigada pelo aviso, assim que mudarmos será para um cor mais clara, certo? :3 O ruim é que algumas pessoas reclamam por estar claro demais, colocamos escuro e infelizmente para algumas é escuro demais, mas tentaremos mudar para uma cor favorável a todos na próxima.

      Excluir
  3. ~ANNYON MEGAN!
    Eu fico muito feliz pelo desempenho do blog, realmente, na postagem anterior eu vi que tinham muitos visitantes, parabéns morangos doces!!! Eu tb adoro visitantes de outros países ~mentira, eu amo todos meus visitantes~, eu tenho e sei como é ter esse reconhecimento ^w^, tb obtive comentários e seguidores assim.
    - Eu simplesmente amei este efeito, não sei em que tipo de layout combinaria, mas é muito lindo e bem criado.
    ~Kisus da Carol | | ~Visite ♥♥♥ ≧◠◡◠≦ Mini - Realeza ≧◠◡◠≦.

    ResponderExcluir
    Respostas
    1. UHAKHSUA' vlw moranga <3
      Eu sei em que tipo combinaria e tenho que me conter se não a criatividade pula aqui KK'

      Excluir
  4. Parabéns pelo desempenho do AN, eu amo seu blog :) espero que melhore a cada dia. Efeito fofinho,que bom que ensinou estava procurando um efeito diferente para um layout. Beijos

    ResponderExcluir
  5. Você aceita afiliação? pandasbright-s2.blogspot.com.br

    ResponderExcluir
  6. Adorei o menu! Quem saiba eu use! Beijos

    Kissus da Iza // ★*゚*☆*゚**゚*☆*゚*
    By || Hi Tokki 안녕하세요 맛있는 ||

    ResponderExcluir
  7. Lindo mesmo :3 =^~^=
    kiss~~
    liittlegirl.blogspot.com

    ResponderExcluir