miércoles, 12 de septiembre de 2012

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
Personalizacion Annyz Blog


12 comentarios:

  1. Ainwt, que fofinho, amei *-* mas é meio difícil de fazer, né? aushaush

    desenrola-official.blogspot.com

    ResponderEliminar
    Respuestas
    1. sii es muy bonito ^v^
      y es mas facil de lo que se ve
      en serio =D intentalo n.n

      Eliminar
  2. HEY GRACIAS!!!! ME AYUDO MUCHO;)
    SALUDOS!!!

    ResponderEliminar
  3. está increíble, en verdad, y de esta manera puedo practicar a personalizar algo por mi misma >v<

    ResponderEliminar
  4. Está muy padre Annyz en cuanto termine de poner mis entradas, lo cambiaré esta muy nice, jejeje tan lindo como siempre con cosas que nos ayudan a poner lindo nuestro blog.

    ResponderEliminar
  5. asdfgasdfg que bonito *-*
    gracias por ponerlos el tuto *---*

    ResponderEliminar
  6. Me gusto mucho el tuto☆★
    Como has hecho para poner en una pagina,muchos links de entradas?

    ResponderEliminar
  7. me gusto mucho, annyz!!

    Una cosa, m gustaria que volvieses a poner el cbox. Por cierto, ya t habia mandado otros comentarios antes pero no m respondiste a ninguno y m gustaria q mme respondiese Tambien t invito a ver mi blog.

    Adios!!

    ResponderEliminar
  8. Sugoiiii!!! es super cute >w< asdfgfd estoy buscando una tabla de horario escolar kawaii,por si tu tenías en tu blog. Ya me dirás porfa ^^
    Nos leemos~

    ResponderEliminar
  9. Hola Anniz
    No muy seguido visito tu blog, pero tienes muy buenos recursos y es realmente agradable tus diseños.

    Pero quisiera pedirte el favorcito de que este calendario yo lo hice D: .. porfis, podrias colocar los créditos de mi blog??

    Es http://naoboo-shii.blogspot.com/ ...

    ResponderEliminar

Nota: solo los miembros de este blog pueden publicar comentarios.