Menu Hermooso

Hoy veremos como crear un Hermoso Menú Vertical con JQuery y CSS para blogger , El menú se encontrara casi oculto, el menú solo se desplazara hacia afuera una ves que el cursor se desplace por dicho menú. Esto le dará un efecto muy bonito y un ahorro de espacio en tu blog

Antes de comenzar veremos de que estamos hablando:

Demostración de Comentarios 

Agregaremos el Estilo CSS:

• Paso 1: Vamos a Blogger>>Plantilla>>Edicion HTML
• Paso 2: Buscamos la siguiente linea (Ctrol + F)

]]></b:skin>

Paso 3: Justo por encima de ]]></b:skin> pegamos el siguiente Estilo CSS

/*----------------------------------------------------
{--------} Menu de Navegacion {--------}
----------------------------------------------------*/
ul#navigation {
  position: fixed;
  margin: 0px;
  padding: 0px;
  top: 10px;
  left: 0px;
  list-style: none;
  z-index:9999;
}
ul#navigation li {
  width: 100px;
}
ul#navigation li a {
  display: block;
  margin-left: -2px;
  width: 100px;
  height: 70px;
  background-color:#CFCFCF;
  background-repeat:no-repeat;
  background-position:center center;
  border:1px solid #AFAFAF;
  -moz-border-radius:0px 10px 10px 0px;
  -webkit-border-bottom-right-radius: 10px;
  -webkit-border-top-right-radius: 10px;
  -khtml-border-bottom-right-radius: 10px;
  -khtml-border-top-right-radius: 10px;
  /*-moz-box-shadow: 0px 4px 3px #000;
  -webkit-box-shadow: 0px 4px 3px #000;
  */
  opacity: 0.8;
  filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);
}
ul#navigation .home a{
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDjo9vCvLsuai8cn8bz4NWI5B0UmZFSLfsoUuM5sLNhxXvT6HU2nMQ-VkRU49UDTlTr6WiFg5zIAv26ZPsaBHt5sJl1gAMBBcNmxEqIOu_VCQUXn_cMWFtB_CZkizTqu0VM9OSh-O07w0/s1600/home.png);
}
ul#navigation .about a   {
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJX6taxjdr1CcEXs2RHLRWK7H-JWTw5j1YacPoluYieUYqW8Yx0G6QhOPv016BuIPK0aUbf5dMt0KFqKzkDvR2VPgGFDnT_8aLjyrPfMvi86vbwsFzxoOkGRlPOQoVUepXye9DIgtyJ-Y/s1600/id_card.png);
}
ul#navigation .search a   {
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCe2LLj0U8jFpJc2uuApnB2teKlKN5RDHGmybUOsg92PLKbwB_vg8DpximXqFb3om6AByofa9ARM5ye3mWk2fyYxBB2VN2EEFjKu6c-qKwN4dIsGemYTrM95rDlPd9s6_2mVzHvLUz1hM/s1600/search.png);
}
ul#navigation .podcasts a   {
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimplfbM_KLVU7aN0-0viKKS0x2TpZmil6trQQb7aqyLDpVqd0Y6WndtrOAkfnBE2mQRpSztkkVJLS0v7GVlJXDDYfLWRA9BzTdJjLJseYGXpuiJVq6ktnilNj8uOIa4I2vUPML_hPSWQE/s1600/camera.png);
}
ul#navigation .rssfeed a  {
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiTNq6LNiK__ae8n7sT1GRNApsaeHCy-xLSwyu7Af3ahNF2IH5wh7chLfFj-kDWD0lHHAHODaweNQ2MqTJoT4fFYZ7Dj8CG2ejxNCrqXLXhqX758Rt4EfDKFmkpDbQYS-HOoUUc6XT4lI/s1600/rss.png);
}
ul#navigation .photos a   {
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivb8Q8TE-EKMNNMpE_t1OxkDRkXbhBBmIds570uCjmVyOGS8vq_iI5CK-NJG2zkUEhoAHGj00IDmB2jOURSz_GRRtCsWeQN6MzewyRSDC98o_iP4Swusosi9lV3hBIRbVIbXM9TFAxDN0/s1600/ipod.png);
}
ul#navigation .contact a  {
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR-efk8XUg42cQgZqyvcSDZ5bw9TZwLxYyUsbmd8PpddvNNohGbHLtaWHIDdBIB3dmq6d9Zy7XOxlgKN7uz0cXzJQgaCaCZz7sv8AkpkrBrpY8GgewnllZq0aVgHoz0IB4CtyMhEYd2bM/s1600/mail.png);
} 

Ahora agregaremos el Efecto JQuery

• Paso 5: Buscamos la siguiente linea (Ctrol + F)

</head> 

• Paso 6: Antes de </head> agregamos el Efecto JQuery

<script type="text/javascript">
      $(function() {
        $('#navigation a').stop().animate({'marginLeft':'-85px'},1000);
        $('#navigation > li').hover(
          function () {
            $('a',$(this)).stop().animate({'marginLeft':'-2px'},200);
          },
          function () {
            $('a',$(this)).stop().animate({'marginLeft':'-85px'},200);
          }
        );
      });
    </script> 

 Agregaremos el Menu

• Paso 8: Antes de </body> agregamos el codigo HTML

<ul id='navigation'>
      <li class='home'><a href='URL ENLACE'><span/>Titulo</a></li>
      <li class='about'><a href='URL ENLACE'><span>Titulo</span></a></li>
      <li class='search'><a href='URL ENLACE'><span>Titulo</span></a></li>
      <li class='photos'><a href='URL ENLACE'><span>Titulo</span></a></li>
      <li class='rssfeed'><a href='URL ENLACE'><span>Titulo</span></a></li>
      <li class='podcasts'><a href='URL ENLACE'><span>Titulo</span></a></li>
      <li class='contact'><a href='URL ENLACE'><span>Titulo</span></a></li>
</ul>

Solo debemos de Cambiar la URL ENLACE y el TITULO 

• Paso 9: Guardamos la Plantilla y Listo ya podemos Disfrutar de un Menú Vertical con JQuery y CSS.

Nota: Si queremos agregar agregar mas menús
1º: Agregamos en el Codigo CSS

ul#navigation .thongbao a  {
  background-image: url(URL de la Imagen);
}

2º: Agregamos en el Codigo HTML

<li class='thongbao'><a href='URL Enlace'><span>Titulo</span></a></li>