13 de janeiro de 2014

Tutorial: Menu Simples

                                   
Konitila Minna!
Hoje vou ensinar a como colocar o Menu simples no blog.
Créditos ao Kawaii Wordl
Se está pronta para aprender, clique em Continue lendo.

Vá em> Design> Modelo> Editar HTML e aperte Ctrl F e procure por:
]]></b:skin>
e acima dessa tag cole o código abaixo:

@font-face { font-family: "silkscreen"; src: url('http://static.tumblr.com/0xqvkot/7jqmgsn0m/pf_arma_five.ttf'); }
a.menupequeno {
background-color: #e6e6e6;
padding-top: 3px;
padding-bottom: 3px;
display: inline-block;
width: 40px;
font-size: 8px;
font-family: silkscreen;
text-transform:  uppercase;
text-align:center;
border: 1px solid #d1d1d1;
letter-spacing: 1px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
box-shadow: inset 0 0 5px #e3e6e7, 0 0 1px #b6b6b6;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
text-shadow: 0 1px 0 #ebebeb;
}
a.menupequeno:hover {
border: 1px solid #f994aa;
background-color: #ffc3d0;
text-decoration: none;
box-shadow: inset 0 0 0px #e3e6e7, 0 0 0px #b6b6b6;
text-shadow: 0 1px 0 #fbdae1;
opacity: 0.8;
}

E salve!
Depois, vá em> Layout> Adicionar Gadget> HTML/JavaScript e depois cole o código abaixo:
<center>
<a class="menupequeno" href="SEULINK">Nome</a>
<a class="menupequeno" href="SEULINK">Nome</a>
<a class="menupequeno" href="SEULINK">Nome</a>
<a class="menupequeno" href="SEULINK">Nome</a>
</center>

Edite onde estiver em negrito no código, e quando terminar, salve e visualize.
Bjs

2 comentários:

Comente a vontade, desde que saiba respeitar ;)
Ah, e não é necessário fazer uma conta para comentar, basta colocar como anônimo.

Emoticons:

♥❤∞ ☆ ★ ✖ 。◕‿◕。® ™ ☏✿゚✤
(◕‿◕✿) 。◕‿◕。 ⊱✿◕‿◕✿⊰(◡‿◡✿)(◕〝◕)◑▂◐ ◑0◐ ◑︿◐ ◑ω◐ ◑﹏◐ ◑△◐ ◑▽◐
●▂● ●0● ●︿● ●ω● ●﹏● ●△● ●▽●
⊙▂⊙ ⊙0⊙ ⊙︿⊙ ⊙ω⊙ ⊙﹏⊙ ⊙△⊙
≡(▔﹏▔)≡ ( ͡° ͜ʖ ͡°)