Patricinhas estilosas: Menu giratório no topo do blog

Creditos : Dany Place

Olá amigos hoje vamos aprender a adicionar um menu Fixo com efeito giratório no blog. Ele é fácil, não ocupa espaço e é muito fofo.
Veja como funciona o menu que esta localizado no
Topo do blog Patricinhas estilosas, confira o resultado descansando o mouse.

Copie o código abaixo cole em HTM/Java Script.

#scrollToTop:link,#scrollToTop:visited { color: transparent; 
background-color: transparent; display: none; position: fixed; top: 
15px; right: 15px;}

.icon {display : block; font-size: 8pt; font-family: Calibri; 
line-height: 15px; border-bottom : 1px solid #f4f4f3; text-indent : 5px;
 vertical-align : middle; background: 
url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWCTJgzQw111b9LxHQzBFs6a-tOW_uPZp9AnJ45sZaWu_yhuEeGUGHe7VyGhNxLEZlTkqZhXjSaeFug6JlUksDKhfL3uoiLhJXsl5wbcfTgm3EAc7BrTAOacoeYQEeb5-lB5F9GHkl_Xrx/s320/icon1.gif')
 no-repeat left; padding-left :5px; 
padding-bottom : 2px;}

.icon:hover {display : block; font-size: 8pt; font-family: Calibri; 
line-height: 15px; border-bottom : 1px dashed #E0DCD6; text-indent : 
5px; vertical-align : middle; background : 
url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1fCkMxi8j4ovA5EvDk0txx9OGqq8pr3SYXqtM5idv8-4sh-DUIC-CWIySLRaNsiLp2Owsyq3pUYKijA-1rkx9G6fOTljVNF5Knu7xghARdYIBvYL9fVvivSJxzYyR6H_qdO6GiJblSJal/s320/icon2.gif')
 no-repeat left; padding-left : 10px; padding-bottom : 2px;}

#spinningbox{
-webkit-border-radius: 30px;
-moz-border-radius: 20px;
border-radius: 20px;

moz-box-shadow: 0 0 1px #E799A3; 
-webkit-box-shadow: 0 0 8px #C48793;
position:fixed !important; 
left:200px;
top: -15px; 
padding-bottom:14px; 
padding-top:21px; 
text-align:left; 
height:7px; 
width:79px; 
overflow:hidden;  
border:1px double #D8BFD8 ;
-webkit-transition: opacity 0.6s linear;
-webkit-transition: all 0.6s ease-in-out;

-moz-transition: all 0.6s ease-in-out;

-o-transition: all 0.6s ease-in-out;

background: #fff;

z-index:999;

color:#7f5a58;

background : 
url('http://i111.photobucket.com/albums/n159/docedani/back9.png');
}
#spinningbox:hover{

left:200px;

top:10px;

border:2px dashed #D8BFD8 ;

padding:5px;

height:170px;

width:125px;

-moz-transform: rotate(360deg);

-webkit-transform: rotate(360deg);

-o-transform: rotate(360deg);

-ms-transform: rotate(360deg);

transform: rotate(360deg);

}

p { 
margin:0px; margin-top:0px;
}
a.dp{
color: #8B8682; 
background:#FFF; 
text-decoration: none; 
-webkit-transition: color 0.3s ease-out; 
-moz-transition: color 0.3s ease-out; 
transition: color 0.3s ease-out;
font-size:12px;
}

a.dp:hover{

text-decoration: none; 
font-style: none;
font-size:12px;
color: #DB7093; 
background:#FFFfcc; 
}

</style>

9 comentários:

Unknown14 de julho de 2013 às 16:59
Oi eu não entendi como se faz!
Assim nos cola esse codigo na onde?
ResponderExcluir
Respostas
Luiza †14 de julho de 2013 às 17:58
Amore tem que adicionar na caixinha HTM/Java Script.

Vá em layout adicionar um Gadget e procure HTM/Java Script. e cole mais tem que prencher
ResponderExcluir
Respostas
Bru Almeida1 de agosto de 2013 às 09:13
Este comentário foi removido pelo autor.
ResponderExcluir
Respostas
Luiza †1 de agosto de 2013 às 09:35
O meu deu certo voce tem que ir em layout adicionar um gadget e ai colocar o codigo e preencher
ResponderExcluir
Respostas
Unknown13 de agosto de 2013 às 12:28
Haylla, Desculpa Te atrapalhar em alguma coisa, mas, no meu blog esse menu só aparece um negócio, os outros não...
ResponderExcluir
Respostas
Unknown8 de março de 2014 às 09:31
O que coloca ali? e onde coloca? fica lá só que aparece um só e quando clicko aparece a imagem q eu havia pegado de essa pagina não existe oq eu faço?????
ResponderExcluir
Respostas
Unknown9 de março de 2014 às 11:53
Oi Juliana eu também posto aqui prazer em conhece-la você tem que colocar na caiza de html java script qual o nome do seu blog? ai eu posso ver o que é para você fazer
ResponderExcluir
Respostas

Adicionar comentário

｡ Ei carinha fofa >< seja gentil e não seja mal - - Educado :D
｡ Cupcakes de morando deixe o link do seu blog eu visitarei
｡ De sua opnião ,, mais se for muito mal eu não me aguentarei de raiva ...
｡ Respondo todos os comentários rsrs... ... ... ...
｡◕‿◕｡ Hey... e obrigada pelo comentário use nossas carinhas

❣◕ ‿ ◕❣ ✿◕ ‿ ◕✿ ❀◕ ‿ ◕❀
❁◕ ‿ ◕❁ ✾◕ ‿ ◕✾ ◡‿◡✿
✿◠‿◠ ≧◔◡◔≦ ಥ_ಥ
≧�◡�≦ ≧^◡^≦ ≧✯◡✯≦
✿⍲◡⍲ ◕‿‿◕ ( ● ω ● )>(o゜ェ゜o)

11.7.13

Menu giratório no topo do blog

9 comentários: