Menu deslizante com Imagem

Vou ensinar como fazer esse menu deslizante que eu uso aqui no T+.

É bem facil e muito bonito! esse estilo, é muito usado em tumblr's, mas eu aprendi a

fazer sozinho, enquanto brincava de criar menus num arquivo de txt. HAHAHA

Não sabe qual eu estou falando? Veja aqui abaixo

Como disse acima, é um menu muito bonito e facil!

Tutorial

Vá em Layout >> Adicionar um Gadget

Escolha a opção HTML/JavaScript

Cole o código a seguir editando onde deseja e salve

.menu-deslizante li{
list-style:none;
}

.botão-deslizante {
position:absolute;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJYXjQBkUwRd1Ajyg6jTAaMcHE7Vd7L5lJFoRfxeUlpT4idivlDeJmj1ExmzwNOfEF7aHcvZEWxdcWA8nzLmyZ7EEF5nQnLV_N9lvuuNUMh4aQLHsgOSac_4w9ZCYl1KF5Q6zrG6T4B94/s1600/Menu+Deslizante+bot%C3%A3o+01.png)center bottom;
width:100px; /*--- Largura do botão ---*/
height:40px; /*--- Altura do botão Obs: deve ficar aparecendo só o titulo ---*/
top:0;right:10px; /*--- Em relação ao topo, e a direita ---*/
-webkit-transition: 0.4s ease-out;
-moz-transition: 0.4s ease-out;
transition: 0.4s ease-out;
}
.botão-deslizante:hover {
height:106px; /*--- Altura do botão Obs: agora aparece o botão inteiro ---*/
}

.botão-deslizante2 {
position:absolute;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVzdpvYNdx440ez0FE-7ns3gxF5OFC8kf2eg8SKeDcASeZkbQddBS_FmVavWpGhJjAtufbbK4IxvNK9RDWuCy90Fzhvp03PQS0TC1v1O9l42mWpnLlOtekhII4x1XXOze73klAbEi3f9g/s1600/Menu+Deslizante+bot%C3%A3o+02.png)center bottom;
width:100px; /*--- Largura do botão ---*/
height:40px; /*--- Altura do botão Obs: deve ficar aparecendo só o titulo ---*/
top:0;right:115px; /*--- Em relação ao topo, e a direita Obs: deve ter a largura do botão anterior + a diferença em relação a direita + o espaço entre eles ---*/
-webkit-transition: 0.4s ease-out;
-moz-transition: 0.4s ease-out;
transition: 0.4s ease-out;
}
.botão-deslizante2:hover {
height:106px; /*--- Altura do botão Obs: agora aparece o botão inteiro ---*/
}
</style>
</text>
<div class="menu-deslizante">
<ul>
<a href="http://www.blogger.com/LINKDAPAGINA">
<li class="botão-deslizante"></li>
</a><a href="http://www.blogger.com/LINKDAPAGINA2">
<li class="botão-deslizante2"></li>
</a></ul>
</div>

Movimente o Gadget para o fim da sidebar e clique em Salvar Organização.