Botones Animados para Blogger

Botón Azul
Botón Naranja
Botón Verde
Boton Gris

Agregar información en el pie de Una Imagen

» Leer Mas Lorem ipsum Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an.

Comentarios con Pulgar me Gusta para BLogger

ToolTips para Blogger

ToolTip Peligro PeligroMensaje del ToolTip Peligro

Imagenes con Sliding

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut odio. Nam sed est. Nam a risus et est iaculis adipiscing. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer ut justo. In tincidunt viverra nisl. Donec dictum malesuada magna

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>