Cute Calendario Personalizado

blogueras como estan ^^? aaww ando muy contenta hoy siii, se puede decir fue un buen dia =D espero mañana sea igual o mejor xD en fiin traigo un tuto muy lindo, navegando por ahi me lo encontre y bueno estaba algo sencillo asi que le anexe codigos de personalizacion para que se viera mas cute ^^

empezemos:

NOTA: este calendario no es automatico es manual quiere decir que tendran que editarlo cada mes ^^

copia este codigo y pegalo en un gadget html/javascript

<center><table style="float:center; background-image:url(http://i160.photobucket.com/albums/t197/myntebuu/SOZAI/bgheartsribbonspink.gif); border: 1px dashed #FA58F4; font-size: 12px; font-family:arial;" width="80%" border="0" cellspacing="0" cellpadding="0">

<tr>

<td colspan="7" align="center">SEPTIEMBRE<div </tr>

<tr>

<td><div align="center"><strong>Dom</strong></div></td>

<td><div align="center"><strong>Lun</strong></div></td>

<td><div align="center"><strong>Mar</strong></div></td>

<td><div align="center"><strong>Mie</strong></div></td>

<td><div align="center"><strong>Jue</strong></div></td>

<td><div align="center"><strong>Vie</strong></div></td>

<td><div align="center"><strong>Sab</strong></div></td>

</tr>

<tr>

<td><div align="center"></div></td>

<td><div align="center"></div></td>

<td><div align="center"></div></td>

<td><div align="center"></div></td>

<td><div align="center"></div></td>

<td><div align="center"></div></td>

<td><div align="center">1</div></td>

</tr>

<tr>

<td><div align="center">2</div></td>

<td><div align="center">3</div></td>

<td><div align="center">4</div></td>

<td><div align="center">5</div></td>

<td><div align="center">6</div></td>

<td><div align="center">7</div></td>

<td><div align="center">8</div></td>

</tr>

<tr>

<td><div align="center">9</div></td>

<td><div align="center">10</div></td>

<td><div align="center">11</div></td>

<td><div align="center">12</div></td>

<td><div align="center">13</div></td>

<td><div align="center">14</div></td>

<td><div align="center">15</div></td>

</tr>

<tr>

<td><div align="center">26</div></td>

<td><div align="center">17</div></td>

<td><div align="center">18</div></td>

<td><div align="center">19</div></td>

<td><div align="center">20</div></td>

<td><div align="center">21</div></td>

<td><div align="center">22</div></td>

</tr>

<td><div align="center">23</div></td>

<td><div align="center">24</div></td>

<td><div align="center">25</div></td>

<td><div align="center">26 </div></td>

<td><div align="center">27 </div></td>

<td><div align="center">28</div></td>

<td><div align="center">29</div></td>

<tr>

<td><div align="center">30</div></td>

</tr>

<td><div align="center"></div></td>

<td><div align="center"></div></td>

</table></center>

Morado: Ahi pones la direccion del fondo que quieres que lleve tu calendario.

Azul: Tipo de borde, grosor del borde y color

Naranja: Es para poner el nombre del mes , si quieres que lleve una imagen (haciendola tu en photoshop) solo borra la palabra en Naranja y sustituyela por este codigo:

<img src="URL DE TU IMAGEN" />

Ahora para insertar los iconos y representar los dias especiales, deberan buscar el codigo del dia que quieren cambiar y sustituirlo por este codigo:

<td> <div align="center"> <img src="URL DE LA IMAGEN"> </ div> </ td>

por ejemplo: el 28 es el dia que quiero que tenga un pequeño gif

busco el codigo del dia 28

<td> <div align="center"> 28 </ div> </ td>

al encontrarlo se sustituye todo ese codigo por este:

<td> <div align="center"> <img src="URL DE LA IMAGEN"> </ div> </ td>

y listo ^^

Ahora para que al pasar el cursor por la imagen se muestre lo que representa ese dia como se muestra en la imagen

igual que el paso anterior debes buscar el codigo del dia que quieren cambiar y sustituirlo por este codigo:

<td> <div align="center"> <img src="URL DE TU IMAGEN" alt="NUMERO DEL DIA|EL EVENTO" title="NUMERO DEL DIA|EVENTO" border="0"> </ div> </ td>

EJEMPLO:

td> <div align="center"> 24 </ div> </ td>

sustituirlo por este codigo:

<td> <div align="center"> <img src="URL DE TU IMAGEN" alt="NUMERO DEL DIA|EL EVENTO" title="NUMERO DEL DIA|EVENTO" border="0"> </ div> </ td>

Para ver el PREVIEW del calendario y la explicacion de como editarlo cada mes da clic aqui en mi blog de pruebas

y aqui les pongo ya editado el mes de octubre para cuando llegue ese mes lo descarguen si gustan ^^

mes de OCTUBRE

Creditos por codigo e insercion de iconos en calendario

HTML y Etc

Personalizacion Annyz Blog