Deixe a navbar do blog expansível

Para os blogueiros que estão começando ou aqueles que não lembram, Navbar é aquela barrinha que fica no topo do blog com as opções de compartilhamento, ir para o proximo blog e até mesmo a opção de logar no Blogger, com o tamanho e posição pode ser desagradáveel, mas de alguns anos pra cá surgiram vários códigos para esconder  até que o próprio blogger lança a opção de desabilitar,

 

Claro que existe vários usuários desta ferramenta e de uns tempos pra cá vários tutoriais de personalização surgiram, e como prometido deixaremos esta opção expansível ocupando o mínimo de espaço e assim deixando-a em forma de botão.

1º- Clique em Editar HTML e expandir modelos de widgets.

2º- Agora procure por ]]></b:skin>  e cole antes o seguite código. 

/* NAVBAR
----------------------------------------------- */

#navbar {
width: 36px;
border-top: 1px solid #888888;
border-right: 5px solid #888888;
position: fixed;
top: 5px;
left: -6px;
background: #39b3f9;
border-radius : 0 5px 5px 0;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);

-moz-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
transition: all 0.3s linear;

-moz-transition-delay: 1.3s;
-ms-transition-delay: 1.3s;
-o-transition-delay: 1.3s;
-webkit-transition-delay: 1.3s;
transition-delay: 1.3s;

z-index: 10;
}

#navbar:hover {
width: 100%;

-moz-transition: all 0.6s linear;
-ms-transition: all 0.6s linear;
-o-transition: all 0.6s linear;
-webkit-transition: all 0.6s linear;
transition: all 0.6s linear;
}

Configurações:

#fe6602 - aqui é a cor de fundo de deseja outra cor poderá encontrar em nossa paleta de cores
width: 100%  - Define o tamanho da Navbar, de ficar grande basta trocar 100 para o tamanho desejado.

O que achou desta opção? não esqueça de deixar seu comentário.