Modelos de menu flutuante [sidebar]

Oi! Como vocês estão? Eu estou mais que bem, mais que feliz, mais que ótima, mais que... OK, acho que deu para entender. Dia 12/07 foi, com certeza, o melhor dia da minha vida. Estive no evento Anime Friends e conheci grande parte dos meus Youtubers favoritos, inclusive o Cellbit e o cara mais incrível da plataforma: o Alan. Ele foi super simpático, tirou mil fotos com a gente e foi exatamente o cara dos vídeos. Tudo foi muito divertido, desde interagir com os cosplayers, os shows e o momento em que um cara aleatório pediu para tirar uma foto do meu look (?). Sério, difícil algum dia superar aquele. Mas enfim, estou ainda meio ausente aqui do blog e tenho que admitir, é mais fácil manter a rotina quando estou estudando. Nas férias eu esqueço o significado da palavra organização e procrastino loucamente. Mas cá estou, atendendo a um pedido de tutorial de como colocar um menu de botõezinhos ao lado da sidebar, ou seja, flutuante. Para isso, fiz dois modelos e espero que gostem, usem e creditem, lembrando de nunca reblogar.

☆ preview

menu gavetinha

No painel de controle do Blogger, clique em Tema e vá nas três bolinhas, escolhendo Editar HTML. Dê um clique dentro da área de código para localizar seu cursor, aperte Ctrl+F no teclado, pesquise por ]]></b:skin> e dê enter. Depois de ter encontrado, cole acima/antes o seguinte código:

roll {
height: 12px;
width: 10px;
display: inline-block;
overflow: hidden;
background: #d6e0e4;
font-family: arial;
font-size: 10px;
text-transform: uppercase;
color-font: #fff;
padding: 4px;
text-decoration:none;
float: left;
border-right: #c3d7df 4px double;
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.roll:hover {
width: 60px;
border-right: #c3d7df 4px solid;
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}

No painel de controle do Blogger, clique em Layout, adicione um gadget HTML/JavaScript e cole o seguinte código:

</script>
<div style="position: absolute; margin-top: -140px; left: 250px;"><span class="roll" onclick="changenavigation('01')">&#9829; <a href="LINK">TÍTULO</a></span><br /><p><span class="roll" onclick="changenavigation('02')">&#9829; <a href="LINK">TÍTULO</a></span><br /><p><span class="roll" onclick="changenavigation('03')">&#9829; <a href="LINK">TÍTULO</a></span><br /><p><span class="roll" onclick="changenavigation('04')">&#9829; <a href="LINK">TÍTULO</a></span></p></p></p></div>
</div>

entenda os códigos: Os números podem ser mudados de acordo com a posição que você quer que seu menu assuma. Em "margin-top" números negativos sobem o menu  e em "left" números negativos levam o menu mais para a esquerda.

menu flower [imagem]

No painel de controle do Blogger, clique em Layout, adicione um gadget HTML/JavaScript e cole o seguinte código:

<div style="left: 250px; margin-top: -150px; position: absolute; display: inline-block; overflow: hidden; "><a _blank="" href="LINK" title="TÍTULODOLINK"><img onmouseout="this.src='LINKDAIMAGEM1';" onmouseover="this.src='LINKDAIMAGEM2';" src="LINKDAIMAGEM1" /></a><br />

entenda os códigos: o "linkdaimagem1" é a imagem antes do hover e o "linkdaimagem2" depois do hover. Ajuste o left e margin-top como indicado acima. Então é só copiar o link das florzinhas – ou imagem que preferir – e substituir no código. Para adicionar mais links, basta repetir o código a partir de "<a_blank...".

          

É isto, me digam o que acharam nos comentários, sim? Fiquem bem, se cuidem.