Tutorial.

Oi ^_^
Dessa venho não apenas com um, mas sim três tutoriais, todos são bem simples, e os créditos de códigos são do blog Dany's Place , são três menus bem simples de se utilizar e muito lindos, o tuto de hoje é : Menus por HTML/JavaScript, confiram.
Como o próprio nome já diz, os menus são colocados através de Gadgets HTML/JavaScript, não sendo necessário mexer em códigos de HTML, o que torna a fácil utilização dos menus.
São três menus e para usar qual quer um deles, você cola o código do menu escolhido em um Gadget HTML/JavaScript e faz as alterações destacadas em vermelho.
Menu Boll:

Carinhas Mini Sanrio
Marcadores Eletrônicos
Acessórios Papelaria

Crédito de Preview:Dany's Place

Cole o código em um HTML/JavaScript:

<div class="menuboll">

<center>

<a href="SEU LINK"title=" DESCRIÇÃO"> NOME DO LINK </a>

<a href="SEU LINK"title=" DESCRIÇÃO"> NOME DO LINK </a><br>

<a href="SEU LINK"title=" DESCRIÇÃO"> NOME DO LINK </a>

<a href="SEU LINK"title=" DESCRIÇÃO"> NOME DO LINK </a><br>

<a href="SEU LINK"title=" DESCRIÇÃO"> NOME DO LINK </a>

<a href="SEU LINK"title=" DESCRIÇÃO"> NOME DO LINK </a>

</center>

</div>

<style>

.menuboll a{

width:80px; /* LARGURA MENU */

font-family: arial; /* FONT */

font-size: 15px; /* TAMANHO DE LETRA */

border-left:15px solid #FF82AB; /* COR DA BORDA ESQUERDA*/

border-right:15px solid #FF82AB; /* COR DA BORDA DIREITA */

background:#FFB6C1; /* COR DO FUNDO */

margin:3px;

color:#B03060; /* COLOR DA LETRA */

border-radius:10px 10px 10px 10px; /* EFEITO AREDONDADO */

text-align:center;

display:inline-block;padding:3px;

text-shadow: none;

}

/* HOVER {CURSOR} */

.menuboll a:hover{

color:#FFE4E1; /* COR DA LETRA */

border-left:15px solid #DB7093; /* COR DA BORDA ESQUERDA */

border-right:15px solid #DB7093;/* COR DA BORDA DIREITA */

text-decoration:none;

text-shadow: none;

}

</style>

Faça as mudanças destacadas em vermelho, em seguida salve.

-----------♥---------------♥--------------♥----------

Menu Folha:

Home Fan Page Tumblr We Heart It Goodies

Crédito de Preview:Dany's Place

Cole o código em um HTML/JavaScript:

<style>

a.mnfolha {background:#FFB5C5;padding: 6px;display: inline-block;font: 8pt arial;width: 75px;text-align:center;margin-bottom:10px;color:#8B636C;border: 2px dashed #CD919E;opacity:.8;-webkit-transition: 0.5s;-webkit-border-radius: 15px;-moz-border-radius: 1em 4em 1em 4em;border-radius: 1em 4em 1em 4em;}a.mnfolha:hover {color:#8B475D;background:url(http://i111.photobucket.com/albums/n159/docedani/acesstemp/backcg_/backbolinha5-2.jpg);}</style><center><a class="mnfolha" href="LINK">NOME DO LINK</a><a class="mnfolha" href="LINK">NOME DO LINK</a>
<a class="mnfolha" href="<a class="mnfolha" href="<a class="mnfolha" href="LINK">NOME DO LINK</a>
<a class="mnfolha" href="<a class="mnfolha" href="<a class="mnfolha" href="LINK">NOME DO LINK</a>
<a class="mnfolha" href="<a class="mnfolha" href="<a class="mnfolha" href="LINK">NOME DO LINK</a>
</center></center></center>

Faça as mudanças destacadas em vermelho, em seguida salve.

-----------♥---------------♥--------------♥----------

Menu giratório no topo do blog:

Crédito de imagem: Dany's Place

<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/AVvXsEjgLBA3N7O-WGQSc42_S6NQaXZqEjCie-ifKiNyGMvhUMR3dlHBrsILlyRR_lLcglRCwYK1L9aO7hG6gAvPVaIbfTZ7SFCGhiZMFy8PMNPrROXkZAwIttvTXzlTDmQFEPmQSe-YP46QBJtF/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/AVvXsEi7f-Dc-AS4k5GdM3cxxgfzvtbNDu4iDFKblaF9IQIaYx4sKxwM03JOR719hUwkrm6IjKyM9tbN_mSQmr923CC6ZEwuzGP7CtXf7rb_TV2_xfGAM_tpYLbyjs1vXd1u2CGvE-KbKE46YxaE/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/AVvXsEh2Y32mXtWoeXG9Sim5ogpxM9YTPrGfHJXUMdBWPhRulfp9-9nP0uCfTH09B_jJaKLhqwni5_Fi05s9LkXCv45N_TnRWCs_s3lonK2xuFiioDu2-nrKXd8W38IlinSIr4UGBQ1SVQd09H-u/s320/icon3.gif">
<p><p><b>
<div class="icon">
<a href="LINK" class="dp" title="DESCRIÇÃO">NOME DO LINK</a> </div>
<div class="icon">
<a href="LINK" class="dp" title="DESCRIÇÃO">NOME DO LINK</a> </div>
<div class="icon">
<a href="LINK" class="dp" title="DESCRIÇÃO">NOME DO LINK</a> </div>
<div class="icon">
<a href="LINK" class="dp" title="DESCRIÇÃO">NOME DO LINK</a> </div>
<div class="icon">
<a href="LINK" class="dp" title="DESCRIÇÃO">NOME DO LINK</a> </div>
<div class="icon">
<a href="LINK" class="dp" title="DESCRIÇÃO">NOME DO LINK</a> </div>
<div class="icon">
<a href="LINK" class="dp" title="DESCRIÇÃO">NOME DO LINK</a> </div>
</center>
</b>
</div>

Faça as mudanças destacadas em vermelho, em seguida salve.

-----------♥---------------♥--------------♥----------

Créditos totais de códigos ao blog:

Dany's Place

Abraços♥