Blogger: Menú horizontal con CSS3

Un menú siempre es necesario; para implementarlos nos vamos a Diseño > edición de HTML y antes de ]]></b:skin> pegamos el siguiente código:

/* Menú Listón
----------------------------------------------- */
#menuListon:after, #menuListon:before {
content: '';
position: absolute;
}
#menuListon {
height:25px; /* Alto del menú */
text-align: center;
position: relative;
margin: 0 -30px 5px -30px;
padding: 10px 0;
background: #e5592e; /* Color del listón */
background-image: -moz-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
background-image: -webkit-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
background-image: -o-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
background-image: -ms-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
background-image: linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
-moz-box-shadow: 0 2px 0 #bbb;
-webkit-box-shadow: 0 2px #bbb;
}
#menuListon:before, #menuListon:after {
border-style: solid;
border-color: transparent;
bottom: -10px;
}
#menuListon:before {
border-width: 0 20px 10px 0;
border-right-color: #8C3115; /* Color de la sombra del doblez */
left: 0;
}
#menuListon:after {
border-width: 0 0 10px 20px;
border-left-color: #8C3115; /* Color de la sombra del doblez */
right: 0;
}
#menuListon ul {
margin-top: 0px;
}
#menuListon li {
list-style: none;
display: inline;
padding-right:20px;
}
#menuListon li a {
text-shadow: 0 2px 1px rgba(0,0,0,0.5);
display: inline;
text-decoration: none;
color: #f0f0f0; /* Color del texto */
font-size: 18px; /* Tamaño del texto */
transition:all .1s linear;
-o-transition:all .1s linear;
-moz-transition:all .1s linear;
-webkit-transition:all .1s linear;
}
#menuListon li a:hover {
font-size:20px; /* Tamaño del texto al pasar el cursor */
transition:all .1s linear;
-o-transition:all .1s linear;
-moz-transition:all .1s linear;
-webkit-transition:all .1s linear;
}

Después de haber pegado el código sin expandir artilugios buscamos:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Nombre de mi blog (cabecera)' type='Header'/>
</b:section>

Debajo del cual pegaremos este último código que tenemos que personalizarlo con las respectivas URL y nombre en cada una de las pestañas:

<div id='menuListon'>
<ul>
  <li><a href='URL del enlace'> &#10029; Pestaña 1</a></li>
  <li><a href='URL del enlace'> &#10029; Pestaña 2</a></li>
  <li><a href='URL del enlace'> &#10029; Pestaña 3</a></li>
  <li><a href='URL del enlace'> &#10029; Pestaña 4</a></li>
  </ul>
</div>