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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGBbLA-5Wq3Z82_oxG8iy0xTyQpgXvejGhFn_xDyyyzBBeCFOTvqblbv2APMHfqrIUvBiZw0OfhIgmiRjrPSxdjB2baMDf6YFjdGP4Wf92mNi2XDWpu8Y4RJZo9ESTKXg-A8dPAtwbTfQ/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLEqKrsWHQqOUC3SbWTuJfupyjVoUat0i4AQi6hxczuYGg40J74IwOyYZgDGNM-B7WxNYVy-0NHfVF4Yo89xrfM3pYpuqgipc2KvQsdh5KzLrkv35-Whq4_1MYyfzTOWwTUiFxhYemSwU/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaYeWhyty6GVCmEeS3zYVxp83XlmfqnLuNnw1sIDQ-Msx9J85SLMH0Zh5gnCB1p-aqgVgSA-RecIghfA4iFhaYGgtwZ2jk9EoMSYzIZO_HbnekxYsJbvHfPguxrl8GubD4t3_qpEuq7Vo/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="
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5VWaGYwdR0E7b4hLPXCYEkFJhIusCQJbeP45L656T9N2u3o1Hsd3kUunCFlZfRW_6dt3AQG7sZfiC60Zo31oEz_5uM7ee2UqtMeSQE73IiPLfPgUN4Jcjr_TU_5BCjlpCju4NfVYe_C8/s1600/1-.png" />
</a>
</li>
<li style="top: 0px; left: 0px; z-index: 49;">
<a href="#">
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvmJQVYgQZelEIKr6HHQXv43SB3X25z6qDMGichO-BS6fCbyiRATw6bhMjGfEmzW1OOhBwiV-hK1ESP5yeDRmYJZQKct3ZUV75Dq-Aud_vCR49U7cfGX1a6bz41DQ350XUqZozJp1meJo/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