Atrevidinhas: Menu giratório no blog

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 meu blog, confira o resultado descansando o mouse.Mas não esqueça de personalizar

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/AVvXsEhjzZs6Ls_qZjSOV1zqrUa0P1gY8ekU1flzyB4yD6mXKqE2BRRQtcfjYljPdWGX8ykMZfO2Tf6Tn5AOTd4V72-TqDm7NVlzHOBUOYanjHHtkif-BGqqw25TXz50nArrTJntI7ojKLssUkT1/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/AVvXsEhpe0krCyeMjtW3K4omfdm4ka8gjWaPlmN0576eV7JXFSLjSXk5Mh1tvc22cKSfyNCTVdQSsN-c9jBaN9QzHS4b32Ibaschaf86oCQLZ3Pka7P14HkhHSXiSya6jG-8Dbh2aU2fih8He3b1/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>

Dany Place

Atrevidinhas

Menu giratório no blog

0 comentários:

Postar um comentário

Blogueira

Seguidores

Translate

Arquivo Blog