<h3>Menu giratório no topo do blog</h3>

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 Dany's Place, confira o resultado descansando o mouse.

Menu

Menu com Efeito

Paletas e Tabelas

Bolinhas de sabão

Efeito Hover no Link

Status personalizado

Lacinhos para Layout

A moda Rilakkuma

Copie o código abaixo cole em HTM/Java Script. <style type="text/css"> #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/AVvXsEj9TtJApmwF_ySYdi2PU8k8Uh2YhxV9e-I8rmiSU9bn4z-BRcszHG41KuWZ2GI6LUw55iDijcnaTU2HpddL9Dp5sVxnlKs3msf_vmZuRkgixo4MCPKiYzemy7MwDm_wxey764juLukni3Fm/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/AVvXsEi8hIzbgGu0o9u8ipgkOGDpyPPjT9Rf2oDqe86MTfRHd62UigOBQ2xcC9RClXYD5_p7Z27ZGIL3kdZSKL_wvrP0lfzDuSksoDZSn5fQZL_LnTy0YwAO4vk0I6wCWAu5T4iOVvGT2xou3Lnh/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> <div id="spinningbox"> <center> <span font="font" style="color: black; font-family:Lucida Sans; font-size: 16;"><span style="background-color: #EED5D2;"> Menu </span> </span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjbKFYW7GYW1QXPAECbNpIocA5WstyDq7-ENaNeIeNdjwvsFAR2zSfs45-zZAhOtUneZZfHk99o1-tfF4NNXGkyND6N_QJz19oqNM9APwnKU3t1a1n_8iTjdB8UwUsndvOnGKVdR_6gbiO/s320/icon3.gif"> <p><p><b> <div class="icon"> <a href="ENDEREÇO DO SITE" class="dp" title="descrição">Nome do Site/Blog</a> </div> <div class="icon"> <a href="ENDEREÇO DO SITE" class="dp" title="descrição">Nome do Site/Blog</a> </div> <div class="icon"> <a href="ENDEREÇO DO SITE" class="dp" title="descrição">Nome do Site/Blog</a> </div> <div class="icon"> <a href="ENDEREÇO DO SITE" class="dp" title="descrição">Nome do Site/Blog</a> </div> <div class="icon"> <a href="ENDEREÇO DO SITE" class="dp" title="descrição">Nome do Site/Blog</a> </div> <div class="icon"> <a href="ENDEREÇO DO SITE" class="dp" title="descrição">Nome do Site/Blog</a> </div> <div class="icon"> <a href="ENDEREÇO DO SITE" class="dp" title="descrição">Nome do Site/Blog</a> </div> </center> </b> </div>