Menu Flutuante

Bom Dia!! Como vocês estão aproveitando as suas ferias? Eu to aproveitando para descansar bastante, ler muito e colocar todas as minhas series em dia e são muitas *--* Além é claro de estar aproveitando para blogar mais, tanto neste como no meu outro blog literário onde estou cada vez mais colocando novas resenhas <3

O tutorial de hoje é de um menu que eu criei e usei muito e ainda gosto bastante dele, ele é simples, mas da um charme a mais para o layout além de ser pratico porque fica flutuando ao lado do blog. Confira a Preview.

Tutorial
1° Passo: Vá em Modelo > Editar HTML.
2° Passo: Procure por(Usando Ctrl+F): ]]></b:skin>
3° Passo: Cole acima de "]]></b:skin>" o código abaixo:
/*-----Início do Menu flutuante por myfluffyrainbow.blogspot.com-----*/
a.menusimplesss{
font: 10px yanone kaffeesatz; /*-----Fonte-----*/
background-color: #ffb4c4; /*-----Cor do Fundo-----*/
padding-bottom: 10px;
padding: 10px;
text-align: center;
margin:10px;
color:#fff; /*-----Cor da Fonte-----*/
}
a.menusimplesss:hover{
background-color: #FFE4E1; /*-----Cor do Fundo Hover-----*/
-webkit-transition-duration: .80s;
}
a.menusimplessss{
font: 14px yanone kaffeesatz; /*-----Fonte-----*/
background-color: #ffb4c4; /*-----Cor do Fundo-----*/
padding-bottom: 10px;
padding-right: 20px;
padding-left: 19px;
padding-top: 10px;
text-align: center;
margin:10px;
color:#fff; /*-----Cor da Fonte-----*/
}
a.menusimplessss:hover{
background-color: #FFE4E1; /*-----Cor do Fundo Hover-----*/
-webkit-transition-duration: .80s;
}
/*-----FIM do Menu flutuante por myfluffyrainbow.blogspot.com-----*/
4° Passo: Altere os códigos das cores e fonte se achar necessário.
5° Passo: Cole em um Gadget Java/Script o seguinte código:
<div style="left: 10px; position: fixed; top: 20%;">
<ul id="navigationMenu">
<li style="text-align: center;">
<a class="menusimplesss" target="_blank">Menu: </a></li>
<li style="text-align: center;">
<a class="menusimplessss" href="http://www.blogger.com/Link" target="_blank" title="Home"> 1</a>
</li>
<li style="text-align: center;">
<a class="menusimplessss" href="http://www.blogger.com/Link" target="_blank" title="About">2 </a>
</li>
<li style="text-align: center;">
<a class="menusimplessss" href="http://www.blogger.com/Link" target="_blank" title="Avaliações">3 </a>
</li>
<li style="text-align: center;">
<a class="menusimplessss" href="http://www.blogger.com/Link" target="_blank" title="Contato">4 </a>
</li>
<li style="text-align: center;">
<a class="menusimplessss" href="http://www.blogger.com/Link" target="_blank" title="Crédito">5 </a>
</li>
<li style="text-align: center;">
<a class="menusimplessss" href="http://www.blogger.com/Link" target="_blank" title="Goodies">6 </a>
</li>
</ul>
</div>
6° Passo: Altere o código colocando o link e o nome do link.

Espero que gostem desse menu e se usarem coloque os devidos créditos *--*

Um comentário:

  1. Que layout fofo <3 Olá! Estou aproveitando as férias para poder dormir e blogar mais, também. O menu é uma graça, assim que eu tiver oportunidade, irei usar.

    strawpanic.blogspot.com.br

    ResponderExcluir