Botones de navegación lateral

Menú  lateral de navegacion

Para ello lo vamos a meter en un gadget de nuestro blog.

Nos vamos a diseño> añadir un gadget y pegamos este código. 

<style>
#mySidenav a {
  position: absolute;
  left: -80px;
  transition: 0.3s;
  padding: 15px;
  width: 100px;
  text-decoration: none;
  font-size: 20px;
  color: white;
  border-radius: 0 5px 5px 0;
}

#mySidenav a:hover {
  left: 0;
}

#about {
  top: 20px;
  background-color: #4CAF50;
}

#blog {
  top: 80px;
  background-color: #2196F3;
}

#projects {
  top: 140px;
  background-color: #f44336;
}

#contact {
  top: 200px;
  background-color: #555
}
</style>



<div id="mySidenav" class="sidenav">
  <a href="#" id="about">About</a>
  <a href="#" id="blog">Blog</a>
  <a href="#" id="projects">Projects</a>
  <a href="#" id="contact">Contact</a>
</div>

   

Modificamos el tamaño de los botones y el color de fondo

#contact {
  top: 200px;
  background-color: #555

position: absolute; left: -80px; 
 transition: 0.3s;
 padding: 15px;
 width: 100px;
 text-decoration: none; 
 font-size: 20px;
 color: white; 
 border-radius: 0 5px 5px 0;

posición: absoluta; izquierda: -80px; transición: 0.3s;
 acolchado: 15px;
 ancho: 100px;
 decoración de texto: ninguno; 
 tamaño de fuente: 20px; 
 color blanco; 
 radio de borde: 0 5px 5px 0;