Reino Kawaii

Olá!! Tudo bem? Espero que sim ^^
Nosso tutorial de hoje será sobre como fazer aquele menu que utilizei anteriormente, que você podia movimentá-lo para qualquer lugar que quisesse. O nome desse menu é jGlide Menu, mas fica mais fácil chamá-lo de móvel não é mesmo? Ele possui subcategorias, com opções de avançar e voltar para a home dele, e de fechar, super útil!
Novamente, aprendi a fazê-lo no Ciudad Blogger, que considero um "google" para blogs. A princípio pode parecer meio complicadinho, mas não é e aos poucos você percebe o quanto ele pode ser personalizado ao seu gosto.
Vamos lá!

1º O resultado será como mostra a imagem abaixo:

Ao passar o mouse no menu o cursor muda para a opção de mover, e você pode arrastar para qualquer lugar

2º Antes de tudo faça um backup do seu template, porque caso não dê certo ou você não goste do resultado, basta fazer o upload novamente;
3º Você deve baixar este arquivo, hospedar em algum site como Github e copiar a URL do arquivo que você hospedou;
Ok, feito isso, vamos começar:
1-Acesse o modelo do seu blog, na edição de html e procure por </head>. Assim que encontrar, adicione este código antes:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript' />
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js' type='text/javascript' />
<script src='URL DO ARQUIVO QUE VOCE HOSPEDOU' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$('#jGlide_001').jGlideMenu({
tileSource : '.jGlide_001_tiles' ,
demoMode : false
}).show();

$('#switch').click(function(){$(this).jGlideMenuToggle();});
});
//]]>
</script>

2-Agora vamos personalizar o nosso menu, dando a ele a aparência que mais agradar; eu vou deixar os códigos que editei para o meu menu, do jeitinho do que usava; espero que gostem. Encontre ]]></b:skin> e acrescente acima disso o seguinte código:

.jGM_box {
position: absolute; /* Troque absolute por fixed se quiser que ele se deslize */
top: 30px; /* Distancia do topo */
left: 155px; /* Distancia da esquerda */
width: 240px;
height: 317px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEHCzyWUsnKCpK2xIkeVYZYywA-xHbp8ILHQ8EChUPjueLrNiydWvzRcqicV1qMULgXjoB_Ssc0bOzOIpqS_dNi6RboU_-uh4mONSJ1imiSGN4ycJ_jqo93MzWgPOvznFmNoL0lJ_a58w/s15/bg11.gif) repeat; /* Cor ou imagem de fundo */
margin: 0;
padding: 0;
border: 5px dashed #ffffff; /* Borda */
overflow: hidden;
border-radius:20px;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
}
.jGM_header {
position: absolute;
top: -5px;
right: -10px;
height: 140px;
width: 240px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJKXlOmeejCvaAfCliQwrxBbQWqyATrc7uCgMLOkVacak7pJVbzNBFcxULjDI39ocRUod6Z9rgK30vxfqFlMLCTxvp6z2Or1B_k6DAAuSC0qp0G5kM_qBflaCSKpiHwHPkLJ83NmG4hhk/s240/pixel6.gif) no-repeat; /* Cor ou imagem do header */
color: #784216;
text-align: right;
vertical-align: middle;
line-height: 18px;
cursor: move;
}
.jGM_header a {
margin-right: 12px;
text-decoration: none;
color: #784216!important;
cursor: pointer;
}
.jGM_wrapper {
position: absolute;
top: 55px;
left: 10px;
width: 2270px;
height: 200px;
margin: 0;
padding: 0;
border: 0;
}
.jGM_tile {
position: absolute;
top: 0;
left: 7px;
width: 213px;
height: auto;
overflow: hidden;
margin: 0;
padding: 0;
border: 0;
display: block;
}
.jGM_cats {
width: 100%;
height: 64px;
overflow: hidden;
vertical-align: middle;
text-align: left;
}
.jGM_cats h4 {
font-family: Verdana,Arial,serif;
font-size: 1.8em;
margin: 0;
padding: 2px 0;
line-height: 1.8em;
color: #784216;
font-weight: normal;
}
.jGM_cats p {
font-family: Verdana,tahoma,arial;
font-size: 1em; /* Tamanho da descricao */
margin: 0;
padding: 0;
line-height: 1.2em;
color: #784216; /* Cor da descricao */
font-weight: normal;
}
.jGM_pager {
height: 18px;
width: 213px;
line-height: 18px;
margin: 0;
border: 0;
padding: 0;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzF08FhUyBGiXPEpPiz6OT8mYDkbCjcbevmJuXG2b7HF8Cak4Zd1KDDgJKMnnA3L6R93Zmuss9k1isteJUyqzZxdf-G1a4CJdwG_sUoJAutxHD9JJMqcPnORX9DAImGvT6FtXbTTe5imA/s10/M3.gif) repeat; /* Barras */
text-align: center;
vertical-align: middle;
border-radius:20px;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
}
.jGM_pager a {
text-decoration: none;
font-weight: bold;
text-decoration: none;
display: block;
}
.jGM_pager a:hover { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzF08FhUyBGiXPEpPiz6OT8mYDkbCjcbevmJuXG2b7HF8Cak4Zd1KDDgJKMnnA3L6R93Zmuss9k1isteJUyqzZxdf-G1a4CJdwG_sUoJAutxHD9JJMqcPnORX9DAImGvT6FtXbTTe5imA/s10/M3.gif) repeat; }
.jGM_pager img { border: 0; margin: 6px 0; }
.jGM_content {
width: 213px;
height: 150px;
margin: 1px 0;
padding: 0;
border: 0;
overflow: hidden;
}
.jGM_content a {
font-family: Tahoma,arial;
text-decoration: none;
color: #784216 !important;
height: 18px;
width: 100%;
display: block;
line-height: 18px;
padding: 0 0 0 10px;
background-color: #ffe;
margin: 1px 0;
}
.jGM_content a:hover {
color: #fcc !important;
background-color: #fff5ff; /* Cor da barra ao passar o cursor */
}
.jGM_more {
background-image:
background-repeat: no-repeat;
background-position: 203px 50%;
}
.jGM_back {
position: absolute;
top: 222px;
right: 0;
height: 18px;
width: 52px;
background: #transparent;
line-height: 18px;
vertical-align: middle;
text-align: center;
margin: 10px 0 0 0;
padding: 0;
border: 0;
z-index: 99;
}
.jGM_back a {
height: 100%;
width: 100%;
text-decoration: none;
color: #784117 !important; /* Cor da palavra atras */
display: block;
}
.jGM_back a:hover {
color: #784117 !important; /* Cor da palavra atras ao passar o cursor */
background: #transparent;
}
.jGM_reset {
position: absolute;
top: 222px;
right: 62px;
height: 18px;
width: 52px;
background: #transparent;
line-height: 18px;
vertical-align: middle;
text-align: center;
margin: 10px 0 0 0;
padding: 0;
border: 0;
z-index: 99;
}
.jGM_reset a {
height: 100%;
width: 100%;
text-decoration: none;
color: #784117 !important; /* Cor da palavra inicio */
display: block;
}
.jGM_reset a:hover {
color: #784117 !important; /* Cor da palavra inicio ao passar o cursor */
background: #transparent;
}

Bom, as partes mais importantes já estão explicadas no código; você pode ir alterando as coisas para modificá-lo, só tenha cuidado. Visualize seu blog; o menu ainda não vai aparecer, então note se está tudo normal e se estiver, prossiga.

3-Entre em Layout-Elementos da Página-Adicionar novo Gadget-Html/JavaScript, e cole isso:

<div class="jGM_box" id="jGlide_001">

<!-- Links primeiro nivel -->
<ul id="tile_001" class="jGlide_001_tiles" title="Titulo" alt="Menu">
<li rel="tile_002"> Titulo1 </li>
<li rel="tile_003"> Titulo2 </li>
<li><a href=" Link "> Nome do link </a></li>
<li><a href="Link"> Nome do link </a></li>
<li><a href=" Link "> Nome do link</a></li>  
<li><a href="Link"> Nome do Link </a></li>
<li><a href=" Link "> Nome do Link </a></li>
<li><a href=" Link "> Nome do Link </a></li>
</ul>

<!-- Links segundo nivel -->
<ul id="tile_002" class="jGlide_001_tiles" title="Titulo" alt="Menu">
<li rel="tile_005">Subtitulo </li>
<li><a href=" Link "> Nome do Link </a></li>
<li><a href=" Link "> Nome do Link </a></li>
<li><a href=" Link "> Nome do Link </a></li>
</ul>

<ul id="tile_003" class="jGlide_001_tiles" title="Titulo" alt="Menu">
<li><a href=" Link "> Nome do Link </a></li>
<li><a href=" Link "> Nome do Link </a></li>
<li><a href=" Link "> Nome do Link </a></li>
<li><a href=" Link "> Nome do Link </a></li>
</ul>



</div>

Essa é a parte mais chatinha; cada nível ou título se subdivide, portanto tem que prestar a atenção, porque dentro de um título pode haver subtítulos; essa maneira foi a forma como simplifiquei o código para vocês. Basta substituir os títulos e links. O menu gera automaticamente setas de navegação para cima ou para baixo, portanto o número de links pode ser bem maior do que os que estão no código.
Caso vocês tenham alguma dúvida, pode perguntar ou então consultar o tutorial original:
Acho esse menu super portátil, você leva para onde quiser rsrsrs...
É isso; beijus<3