Tutorial: Menu ops

Wopie *--* 

Me pediram para ensinar a colocar o menu Ops, que eu usei naquele ultimo layout free que eu fiz o "Simple Blue" o menu é uma graça, eu acho ele super útil, para colocar em cima da postagem ou se preferir na sidebar, mas convenhamos que em cima da postagem como fiz no layout free ele fica bem bonito, bom após o leia mais terá a explicação de como aplicar esse menu no seu blog e pra quem não lembra é esse menu: 

Os passos são bem simples. Enfim, como sempre vão em "MODELO" e cliquem em EDITOR HTML, cliquem dentro da caixa e apertem Ctrl+F vai aparecer a caixinha de costume e lá escreva ]]>< clique em enter e vai aparecer a tag procurada marcada de amarelo, mais duvidas leia esse post (www)

Antes dessa tag cole:

#nav {
font-family: Georgia, cursive;
text-transform: uppercase;
width: 60px;
height: 20px;
background: #c2d0d9;
padding: 5px;
text-align: center;
margin: 9px;
align: left;
font-size: 20px;
font-weight: none;
margin-bottom: 3px;
float: left;
cursor: hand;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease; border-radius: 3px;
line-height: 20px;
}
#nav a{
color: #ffffff;
}
#ops {
background: transparent;
color: #415c7b;
width: 80px;
font-family: Georgia;
font-size: 18px;
text-align: center;
margin-top: 10px;
text-transform: none;
opacity: 0;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
}
#nav:hover #ops {
opacity: 1;
-webkit-transition: all 1s ease;-moz-transition: all 1s ease;-o-transition: all 1s ease;transition: all 1s ease;
}

Não é necessário mudar muita coisa, só o que está em vermelho, o primeiro em vermelho é a cor de fundo do menu, então pode escolher a cor que você preferir, e o segundo em vermelho é a cor da letra quando passa o mouse por cima do menu.
Ao trocar da sua cor favorita salve e vá para a segunda parte.
Agora vai em Layout e adiciona um gadget aonde você preferir, e cole esses códigos mudando o necessário:

<center><div id="nav">
<a href="LINK"> 01 <div id="ops">  NADA </div></a></div>
<div id="nav">
<a href="link"> 02 <div id="ops">  NADA </div></a></div>
<div id="nav">
<a href="link"> 03 <div id="ops">  NADA </div></a></div>
<div id="nav">
<a href="link"> 04 <div id="ops">  NADA </div></a></div>
<div id="nav">
<a href="link"> 05 <div id="ops">  NADA</div></a></div>
<div id="nav">
<a href="link"> 06 <div id="ops">  NADA </div></a></div>
<div id="nav">
<a href="link"> 07 <div id="ops">  NADA </div></a></div></center>

Entendendo o código: 
Link: Obvio, o link da página, twitter, facebook etc...
01,02...: Não é necessário trocar, fica bonito o menu numerado.
NADA:  ali você escreve o que vai aparecer quando passar o mouse, se o link for do twitter você pode mudar por "Twitter" e assim por diante.
Depois de arrumar do seu jeito, salve e visualize se estiver tudo pronto ok. Espero que tenha ajudado vocês, qualquer duvida só perguntar.