5 de enero de 2012

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="http://1.bp.blogspot.com/-R0O-TVnn6Tc/TvRq5f3JpxI/AAAAAAAASN8/-vCykNp7sWA/s1600/3-.png" />
</a>
</li>
<li style="top: 0px; left: 0px; z-index: 49;">
<a href="#">
<img alt="" src="http://1.bp.blogspot.com/-jGpH-siqWRI/TvRrbOHitHI/AAAAAAAASPo/qIcoMjTf9p8/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="http://3.bp.blogspot.com/-8G5bwU6dS5w/TvRsKbn_rhI/AAAAAAAASQA/rZN7ZP8wqMo/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="http://4.bp.blogspot.com/-88siA7EtQvI/TvRrbFvpueI/AAAAAAAASPc/iti9TnFS6nA/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.

8 comentarios

jairo F.Quindós dijo...

que buen regalo de gemma Manu

Neogeminis dijo...

Gracias por la información y felicidades en el nuevo año. Un abrazo!

PINKY dijo...

Manu ,solamente desearte un feliz 2012 ,que todo lo bueno del mundo aparque en tu vida
Besinos

Gem@ dijo...

Gracias por tus siempre agradables palabras Manu y espero que este año sea fructífero para ti y tus lectores.
Un abrazo :)

abajolasopos dijo...

¡Gracias, Gema, y gracias a Manu or compartir! :D

kampussia dijo...

¿Te gustaría colaborar en el periódico? ¿Te gustaría tener tu propio programa de radio o televisión? ¡¡Aquí te damos la oportunidad de hacerlo, y nosotros te promocionaremos en nuestras redes sociales!! Visita nuestro periódico online (http://lau.kampussia.com/ ) y mira en qué sección te gustaría escribir!!!

¿Eres universitario y te gusta escribir? Entonces, te presentamos ¡¡¡KAMPUSSIA!!! Kampussia es una asociación de estudiantes universitarios que tiene varios soportes: prensa escrita y online, radio y televisión.

Si quieres más información, mándanos un mail a contenidos@kampussia.com

Adivín Serafín dijo...

Son la única monarquía que solo se deja ver una vez al año. Seguro que estaríamos más contentos si se extendiera a todas.

Blogsaludos

Toupeiro dijo...

Este es posiblemente el blog que más me ha gustado por su diseño y distribución de todos los que llevo visto desde que participo en "Los Premios"

¡ENHOABUENA!


 
ir arriba