Delux Menu - Pages Blogger

Como muchos ya estan enterados desde que se lanzo la nueva interfaz de Blogger ahora nos permite crear secciones y tambien incluir un widget el cual es un menu, a medida de que creamos una seccion se agrega tambien la opcion en el menu y al estar dentro de la misma se marca con el class "selected" lo cual nos permite saber que estamnos en dicha seccion, este menu tiene la misma funcion y esta especificamente diseñado para sacarle probecho a ese widget

Si lo vas a incluir dentro de una misma pagina en html recuerda incluirlo dentro de las etiquetas corresponientes, ejemplo:

<style type="text/css">

...aqui el codigo...

</style>

  Si usas blogger no incluiremos estas etiquetas, nos vamos a dirigir a Plantilla > Edicion html y buscaremos ]]></b:skin>ensima de eso ponen esto:

#delux-menu {
    border-bottom: 5px solid #000;
    border-radius: 5px ;
    box-shadow: 0 7px 9px -2px #333;
    float: left;
    overflow: hidden;
}

#delux-menu ul {
    list-style: none outside none;
    margin: 0;
    padding: 0;
}

#delux-menu ul > li {
    border-right: 1px solid #151515;
    float: left;
    list-style: none outside none;
    margin: 0;
    padding: 0;
}

#delux-menu div {
    margin: 0 !important;
}

#delux-menu h2 {
    display: none !important;
}

#delux-menu ul li > a {
    background:#444;
    background-image: linear-gradient(bottom, #333 0%, #666 100%);
    background-image: -o-linear-gradient(bottom, #333 0%, #666 100%);
    background-image: -moz-linear-gradient(bottom, #333 0%, #666 100%);
    background-image: -webkit-linear-gradient(bottom, #333 0%, #666 100%);
    background-image: -ms-linear-gradient(bottom, #333 0%, #666 100%);
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #333),color-stop(1, #666));
    border-bottom: 1px solid #5D5D5D;
    box-shadow: 0 -16px 49px -5px rgba(0, 0, 0, 0.4) inset;
    color: #000;
    display: block;
    font-family: Arial,Helvetica;
    font-size: 13px;
    font-weight: bold;
    padding: 16px 17px;
    text-decoration: none !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.15);
}

#delux-menu ul li > a:hover {
    box-shadow: 0 0;
}

#delux-menu li.selected > a {
    background: none repeat scroll 0 0 #272727;
    border-bottom: 1px solid #000;
    color: #37D9F2;
    margin-bottom: -5px;
    margin-top: 5px;
    padding: 13px 17px 19px;
    text-shadow: 0 0 12px #37D9F2, 0 -1px 0 #000;
}

Por ultimo buscaremos el lugar en donde deseamos nuestro menu el cual funcionara atravez de las secciondes de blogger, una vez hayamos decidido el lugar en donde lo pondremos copiamos el siguiente codigo y lo pegamos en dicho lugar: 

<div id='delux-menu'>
      <b:section class='menu-principal' id='menu-principal' maxwidgets='1' showaddelement='yes'>
<b:widget id='PageList1' locked='false' title='Páginas' type='PageList'/>
</b:section>
</div>

Y listo, este menu antes de publicarlo lo agregue a varios templates default de blogger y algunos de mis trabajos, el efecto final puede variar dependiendo de nuestros diseños, el menu les quedara de esta forma, dependiendo de la seccion en donde se encuentren quedara seleccionado en el menu: