menu Stylish CSS Sprites

Siempre es difícil encontrar un menú adecuado para su blog. Estamos haciendo que la decisión más difícil para usted compartiendo otro menú impresionante ... : p Recuerde, usted no puede cambiar la opción de menú, porque es un menú basado en imágenes. Aquí vamos: 

Ir a Blogger> Plantilla> Edición de HTML> Find]]> </ b: skin>.

     Justo por encima de]]> </ b: skin> mensaje siguiente css: 

/*Menu Stars BWidgets.com */
.bwidgets-nav {
    display:block;
    height:72px;
    margin:30px auto;
    position:relative;
    width:525px; }
.bwidgets-nav ul {
    float:none;
    list-style-image:none;
    list-style-type:none;
    margin:3px 0; }
.bwidgets-nav ul li {
    background-image:url('http://2.bp.blogspot.com/-hEI0Ves3ZAc/UQA-WTYVaII/AA
AAAAAAXww/hQUBL5F4ios/s1600/SpritesMenu.png');
    background-repeat:no-repeat;
    float:left;
    height:72px;
    margin:0px;
    padding-top:5px;
    position:absolute; }
.bwidgets-nav ul li a {
    display:block;
    height:100%;
    width:100%; }
.bwidgets-nav ul li.sm1 {
    background-position:0 0;
    left:0px;
    width:125px; }
.bwidgets-nav ul li.sm2 {
    background-position:-125px 0;
    left:100px;
    width:124px; }
.bwidgets-nav ul li.sm3 {
    background-position:-249px 0;
    left:200px;
    width:124px; }
.bwidgets-nav ul li.sm4 {
    background-position:-373px 0;
    left:300px;
    width:125px; }
.bwidgets-nav ul li.sm5 {
    background-position:-498px 0;
    left:400px;
    width:126px; }
.bwidgets-nav ul li:hover {
    z-index:1000; }
.bwidgets-nav ul li.sm1:hover {
    background-position:0 -75px; }
.bwidgets-nav ul li.sm2:hover {
    background-position:-125px -75px; }
.bwidgets-nav ul li.sm3:hover {
    background-position:-249px -75px; }
.bwidgets-nav ul li.sm4:hover {
    background-position:-373px -75px; }
.bwidgets-nav ul li.sm5:hover {
    background-position:-498px -75px; }
/*Menu Ends BWidgets.com */ 

Ahora guarde la plantilla ...

Todo hecho con el pasado, ahora es el momento de añadir HTML mark-up de este menú en su diseño.

     Ir a Blogger> Diseño> Añadir un gadget> HTML / JavaScript> Pega el siguiente código: 

<div class="bwidgets-nav">
<ul>
<li class="sm1"><a href="#"></a></li>
<li class="sm2"><a href="#"></a></li>
<li class="sm3"><a href="#"></a></li>
<li class="sm4"><a href="#"></a></li>
<li class="sm5"><a href="#"></a></li>
</ul>
</div> 

Vuelva a colocar todas las # en código anterior con sus enlaces .....  

No te olvides de dejar un comentario .... :)