Menu Surprise

Ola Galera hoje estou trazendo um tutorial de um menu muito interessante para colocar no seu blog , confiram:

Adicionando O Css ao Blog

Vá em Modelo> Editar HTML > Prosseguir > Ctrl+F e procure por:

]]

Apos encontra-lo adicione o seguinte código acima dessa tag:

.caixa {
width: 180px;
background: #FFF;
padding: 3px;
font-family: 'play';
font-size: 12px;
text-align: justify;
line-height: 17px;
color: #777;}

#sidebar {
float: left;}

.menu {
display: inline-block;
width: 60px;
font-size: 15px;
text-transform: uppercase;
font-family: 'play';
background: #FFF;
padding: 3px;
margin-top: 3px;
text-align: center;
margin-left: -20px;
opacity: 0;
-webkit-transition-duration: 0.3s;}

.menusurprise {
position: absolute;
margin-left: 0px;
width: 183px;
margin-top: 10px;
height: 219px;
background: transparent;}

.menusurprise:hover .menu {opacity: 1; margin-left: 10px; opacity: 0.5;}
.menusurprise:hover .menu:hover {opacity: 1; margin-left: 10px; opacity: 0.9;}

Adicionando o Menu

<div id="sidebar">
<div class="menusurprise">
<a href="URL LINK" class="menu">home</a> <br>
<a href="URL LINK" class="menu">about</a> <br>
<a href="URL LINL" class="menu">other</a> <br>

<a href="/" class="menu">bye</a>
</div>
<div class="caixa">
<img src="URL DA SUA IMAGEM" width="180">

</div></div>