Los Reyes Magos os han dejado un regalo a todos los bloggeros (Con la colaboración de Gem@ BLOG)

¡Feliz Navidad, Año y Reyes! Nuestra querida Gem@ del popular Gem@ BLOG que ganó en la pasada edición de los Premios 20 Blogs a Mejor Blog Popular, ha pasado por aquí junto a Melchor, Gaspar y Baltasar y, como buena Reina Maga, nos ha querido felicitar las fiestas con un regalo muy especial, para que empecemos este 2012 de la mejor forma... ¡Gracias, Gem@!

Mobily Blocks es un menú creado con un plugin de jQuery y como podemos ver además de su vistosidad tiene una bonita animación que Gem@ ha aprovechado sustituyendo las imágenes por unas acordes para estas fechas.

Antes de decidirse por este menú debemos de tener en cuenta el espacio que vamos a necesitar y la utilidad que deseamos darle ya que dependiendo de eso serán las imágenes que le añadiremos.

Buscamos ]]></b:skin> y justo antes añadimos los estilos del menú:

.nature {
display:block;
width:150px;
height:150px;
background:url(http://1.bp.blogspot.com/-9dUfdViRtXI/TvRyEoPUchI/AAAAAAAASQM/43V4slSwJKQ/s1600/1--.png) no-repeat;
cursor:pointer;
position:relative;
}
 .nature {
clear:both;
margin:0 auto;
z-index:2;
}
ul.reset,
ul.reset li {
display:block;
list-style:none;
padding:0;
margin:0;
}
ul.reset li {
position:absolute;
}
ul.reset li a {
outline:none;
}
a img {
border:none;
}

Después nos situaremos justo antes de </head> y añadiremos la librería que es la siguiente línea en rojo:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'/>

Si ya la estamos utilizando omitimos ese paso y procedemos a copiar el contenido de este archivo para pegarlo justo después de la librería jQuery. Y por último editamos un nuevo gadget de html y en su interior añadimos lo siguiente:

<div class="nature">
<ul class="reset" style="display: block; z-index: 50; opacity: 0;">
<li style="top: 0px; left: 0px; z-index: 49;">
<a href="#">
<img alt="" src="http://3.bp.blogspot.com/--uWHnmxtwj8/TvRq5Dr8ZaI/AAAAAAAASNs/Pww-urqkw18/s1600/2-.png" />
</a>
</li>
<li style="top: 0px; left: 0px; z-index: 49;">
<a href="#">
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAZmJ0SM3MQxn12netVt-oaqvhUOR50e-T44V5OhQ9uckUAQ87PXWjSDO0XpisTucaCxbw9fjCcIcoe6Yc3Rd0uxH7ZXovpr7DgcujebudwBAoGeOH9NsE2fig1BATDFDqGtIyZ8nJZ24/s1600/3-.png" />
</a>
</li>
<li style="top: 0px; left: 0px; z-index: 49;">
<a href="#">
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhksZCBh6oBV_0UVAx10xA2_iKxomedKAJhpJL2YnfhoGKyLu6pOkR1rEiTXICMgHr4gphFVCZ09_5Q_8Sj_Ap04CIeqewdjI3NMKze49E9zwn8SXU3z7UPBjfbAmbw_nU0xQ_9foFddWU/s1600/10-.png" />
</a>
</li>
<li style="top: 0px; left: 0px; z-index: 49;">
<a href="#">
<img alt="" src="http://2.bp.blogspot.com/-Gqp3fLaeJ2g/TvRq6EOHn3I/AAAAAAAASOU/T4VBCbe2DJU/s1600/5-.png" />
</a>
</li>
<li style="top: 0px; left: 0px; z-index: 50;">
<a href="#">
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxWvM3091pHW3Uc7dYKYyG4gNv1_7T6gdyE7u6Sx3ELOlIvH0gTldxZxAvrkvtS61tm-X9IJHWbHsiW-8LM5cR3rEy2sbFU1G-88JKDdrOOBDUDoaoHKIQaReDFx2eWz1oJuDdRT_Uvuk/s320/6-.png" />
</a>
</li>
<li style="top: 0px; left: 0px; z-index: 49;">
<a href="#">
<img alt="" src="
http://1.bp.blogspot.com/-rrqq8WFQBqA/TvRq5GmmraI/AAAAAAAASNk/bIzejcJTLwI/s1600/1-.png" />
</a>
</li>
<li style="top: 0px; left: 0px; z-index: 49;">
<a href="#">
<img alt="" src="http://4.bp.blogspot.com/-NFHTvUeUthQ/TvRrNymuvWI/AAAAAAAASPE/neXCwSp-DwQ/s1600/8-.png" />
</a>
</li>
<li style="top: 0px; left: 0px; z-index: 49;">
<a href="#">
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCORwZgsr6UCGQCl_di9zuzCE9qzMfeAkEdGkMpEiG9Aen5hqLofzCpvmEeZd3n1unSWuy_1Vv2-lJ_528fTmIO0ul3WnNUESIOK2joMb4Ih3GdRExu32T88M36bBpap_zFGifHyE-bWg/s1600/9-.png" />
</a>
</li>
</ul>
<a class="trigger" style="display: block; position: absolute; z-index: 1; top: 0px; left: 0px; width: 100%; height: 100%;"></a>
</div>

En ese código estamos añadiendo las imágenes que las podemos sustituir por otras teniendo en cuenta que miden 150x150 y que son en formato png.

Para añadir la url de los enlaces o los sitios que deseamos enlazar debemos sustituir la almohadilla <a href="#"> por la url de cada enlace.


¿Habéis sido buenos? Si seguís los pasos de nuestra Reina Maga, Gem@, os quedará tan genial el efecto como a mí... ¡Felices Reyes!


Uc.

• Tweetealo!
• Facebook
• Suscribete
• Google Bookmarks
• Linkedin