Menú Horizontal Lavalamp con un bonito Efecto | Creado con CSS y jQuery

Lavalamp es un bonito menú que cuenta con un interesante efecto que pareciera que está creado en flash, pero lo cierto es que está creado con CSS y jQuery. Este efecto fue escrito originalmente por Guillermo Rauch para la librería Mootool, pero gracia a gmarwaha.com podemos disfrutar de este mismo efecto utilizando jQuery.

El efecto funciona con varias librería de jQuery lo he probado con las versiones v1.3.2, v1.4.2 y la verdad es que va perfectamente. Pueden verlo funcionando en mi blog de pruebas.

Para ponerlo en tu blog ve a Diseño > Edicíón de HTML y con la ayuda de (Ctrl + F) busca la etiqueta </head> justo antes pega el siguiente código que corresponde a la librería jQuery 1.3.2:

<script src='http://sites.google.com/site/pazosblogger/config/pagetemplates/script/jQuery1.3.2.min.js' type='text/javascript'/>

Para animar el efecto añadiremos el plugin lavalam y el plugin jQuery, para ello copia los siguientes códigos y pégalo justo depués del anterior código que acabas de poner antes de </head>:

<script src='http://sites.google.com/site/pazosblogger/config/pagetemplates/script/jquery.lavalamp.js' type='text/javascript'/>
<!-- Opcional-->
<script src='http://sites.google.com/site/pazosblogger/config/pagetemplates/script/jquery.easing.1.1.js' type='text/javascript'/>

<script type="text/javascript">
$(function() { $(".lavaLamp").lavaLamp({ fx: "backout", speed: 700 })});
</script>

Ahora añadiremos la hola de estilo CSS justo antes de la etiqueta ]]></b:skin>, para ello copia el siguiente código:

/* Estilo para el menu Lavalamp */
.lavaLamp {
position: relative;
height: 29px; width: 421px;
background: url("http://lh4.ggpht.com/_NLOc3R4Yqfs/S5tySpSK2tI/AAAAAAAABrE/VHTntWnUXZs/bg.gif") no-repeat top;
padding: 15px; margin: 10px 0;
overflow: hidden;
}
/* La Fuerza de la lista para el flujo horizontal */
.lavaLamp li {
float: left;
list-style: none;
}
/* Representa el fondo del elemento de menú resaltado. */
.lavaLamp li.back {
background: url("http://lh3.ggpht.com/_NLOc3R4Yqfs/S5tyS_Jo9tI/AAAAAAAABrI/-nGIREg38fA/lava.gif") no-repeat right -30px;
width: 9px; height: 30px;
z-index: 8;
position: absolute;
}
.lavaLamp li.back .left {
background: url("http://lh3.ggpht.com/_NLOc3R4Yqfs/S5tyS_Jo9tI/AAAAAAAABrI/-nGIREg38fA/lava.gif") no-repeat top left;
height: 30px;
margin-right: 9px;
}
/* Estilos para cada elemento de menú. */
.lavaLamp li a {
position: relative; overflow: hidden;
text-decoration: none;
text-transform: uppercase;
font: bold 14px arial;
color: #fff; outline: none;
text-align: center;
height: 30px; top: 7px;
z-index: 10; letter-spacing: 0;
float: left; display: block;
margin: auto 10px;
}

Guarda los cambios, y ve a Diseño > Añadir gadget > elije > HTML/Javascript y pega el siguiente código HTML para llamar a la hoja de estilo y al efecto:

<ul class="lavaLamp">
<li><a href="#">Inicio</a></li>
<li><a href="#">Trucos</a></li>
<li><a href="#">Efectos</a></li>
<li><a href="#">Herramientas</a></li>
</ul>

Ahora mueve el elemento justo debajo de la cabecera. Donde está la # de color verde cámbialo por la dirección de tu enlace.

Nota: tanto la librería jQuery como los script y imágenes la he subido a mi servidor, es recomendable que dichos script y imágenes la suban cada persona a su propio servidor así no te quitan ancho de banda y tu plantilla cargará más rápido.

Descargar Archivos (recomendado)

Diseñador de Plantillas Incorporado en Blogger | Nueva opción

A pasos lentos pero seguros blogger está mejorando, hoy día leyendo un post de JMiur de Vagabundia donde da a conocer de una forma detallada la nueva opción que hay en blogger.

Para poder ver está nueva opción tienes que ingresar a tu blog desde Blogger in draft  ahora ve a Diseño verás que aparece un nuevo icono con el texto Diseñador de plantillas. Si haces click verás que se abre un editor visual con barias opciones donde podemos seleccionas las nuevas plantillas que blogger a incorporado recientemente. Hay un total de 15 plantillas nuevas completamente personalizables.

Si quieren saber más sobre el Eiditor de plantillas que blogger ha incorporado en blogger in draft, les dejo 2 enlaces a artículos con información detalla de esta nueva opción.

Enlace | Vagabundia
Enlace | Blogger in draft

Dibujar Pinturas Llama de manera Online con Flame

Si quieres divertirte dibujando con llama, pues no dejes de leer este post, porque veremos una estupenda herramienta online que nos permite dibujar de una manera divertida y con un resultado sorprendente.

Flame es una herramienta online desarrollada por Escape Motion, esta aplicación web te permite crear hermosas pinturas en llamas en cuestión de segundos sin necesidad de tener conocimientos avanzados en diseño gráfico.

Está aplicación cuenta con barias herramientas con las que puedes empezar a crear tu propia pintura con efectos de llamas desde cero. Cuenta con una paleta de colores, con la que puedes cambiar el color por pixel, modificar la saturación y la opacidad, agrandar o achicar el trazo, ajustar el brillo, entre muchas cosas más. Pero eso no es toda porque también te permite guardar tu trabajo en alta resolución de imagen, además, puedes compartirlo en la galería de llamas donde puedes ver otros trabajos realizados por los usuarios.

Cuando estés dibujando tu obra de arte si no te gusta como va la cosa, puedes borrar lo último que han realizado con la tecla Z  y para limpiar completamente la pantalla utilicen la barra espaciadora. Si quieres divertirte dibujando con soltura y dejando volar tu creatividad, puedes hacerlo libremente desde el enlace que te dejo a continuación.

Enlace | Flame
Vía | Web Adictos