Menu para tu blog en navidad

  • agosto 7, 2013
Este men?? super chulo segruo que os va a encantar, y adornar?? vuestro blog en navidad.
Mobily Blocks es un men?? creado con un plugin de jQuery y como podemos ver ademas de su vistosidad tiene una bonita animaci??n que yo he 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 deeste 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 150×150 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.

No Comments Found