Tutoriales Sobre Blogger: Hermoso Menu Vertical con JQuery y CSS para Blogger

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/AVvXsEitiHlbrTzZtaUS1ETI8eSsL11xLYAeoEoV1R6hawKYlB4EvOTi2IN40iTen0uoytFAl9ZvJOY_xse733k72tzC0r7G_DVsNRWuRI5De6nqlX6tR6XGAYoDy1I_Cyc18Ei3vboev2tudFQ/s1600/home.png);
}
ul#navigation .about a   {
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFVSL2ZAw8xdtCvLtbx5TILdTuyzkDaOp1SfXC1AZuN1kMhW23BxbgG0cAuWQR_f_j2fMnWt24835JhgXG9unsGCqr3bUaW3j9i12i6HA8CWp30NjRavBQ6D7LWuHTqPycBKmPnNJ3uss/s1600/id_card.png);
}
ul#navigation .search a   {
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcDkG_0v5MnWslcBR3w_WFJwnjurGN0n_nY77mVKetwKR_1Le1CF0iRocZ8_ycTtQgE1TUKTfJZxTzDezA-OE06hmMXpSCF6neAHiijf0NUG3v_7pvo7YYYZ2EzhDIIhotU_7M1RNRNSQ/s1600/search.png);
}
ul#navigation .podcasts a   {
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDD1OJtOwkFkkkd-eweFhjILVAP8DVVdC8dwilDhr2pktn3YvIX2EHK20aXOOmRCD6caxT1BIj3zBZhyj2yMIxW73CUe8DciOk66OPMmt1vPjL4ALQ9lgw_-m1gmua01-zfM8uBz8r9PY/s1600/camera.png);
}
ul#navigation .rssfeed a  {
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3ulgTJKmUkviJXeAhBJVs-nGXOWPJdhQapijJq-DI1zOZX1QBO1x0be6Qb6PDsbaIBIJCx97Mw5mSwZpD5hNrsYGbnAk4NnmY73hU0ZkwOMz35FYnJ0LYx-utVtdcWh5Od2FlHUFXXJE/s1600/rss.png);
}
ul#navigation .photos a   {
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi48BUAZXkIk4FdTtOKAJ8UIT75eOJOBxTnz2o3KbWpblAVapdW6FPZmRSDT0VvbKx0nwThJGMPjrIQ6vptW1MnEnt57BFKhexErnFIkGdv6yx4sdXuUQQTRxcuyDmRQbu4FpTVsE8Ih-A/s1600/ipod.png);
}
ul#navigation .contact a  {
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJ5COnIYMPxiEFrWllJ4Wwzp-b62ctogAAg8ZHTZkCz88Wjk3HOix38iHMgcxMMLADSf3wPbS5scHVHtesKR6LRcE7AlPZox8wQ0sC1QS7Wg-PkB68mLTpVcmsT48pEIwsQekc-DmkWCg/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.

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

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

Nota2:- Agregamos en el Codigo HTML

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