Tutorial!Almanaque Flotante!

|| ||

Hola!Bueno disculpenme por no haber publicado(a  Caro igual)pero he estado atenta al blog! :D
Bueno hoy les quiero enseñar un tutorial que me pareció muy kawaii!

¿Como poner un Almanaque Flotante?


A veces tenemos ganas de un almanaque pero siempre es igual por eso es mejor darle un poquito de estilo!
Por eso traigo un Almanaque muy Cute!
Empezemos!:

Nos Vamos A Diseño, Edicion HTML, [Ctrl + F] & Buscamos ]]></b:skin>
Arriba De Ella Pegamos:

.box {
position:fixed;
top:100px;
left:800px;
margin:auto;
width:200px; /* ANCHO /*
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxHddPK-LYG3-R-BSgDu1qwYZtnQ3jO9XrkmhKEsMDPtHUIQak2xv4lI6GKSV-ADs0Th4x3hGAIB1uys8W3dTQb8hJk-IwkrZBjmo8ChrELLiO2TGSFnA88y0VcKQC6IkLLy_PhNiuVLg/s1600/guarda1.png) repeat-x; /*GUARDA/*
padding-top:25px;
}
.box1 {
text-align:justify;
background:#fff; /* COLOR DE FONDO /*
padding:10px;
-webkit-border-radius:0px 0px 10px 10px;
-webkit-box-shadow:1px 5px 10px #fcc; /* SOMBRA /*
}
m {
color:#f7719a; /* COLOR DE LAS INICIALES /*
font-style: italic; /* ESTILO DE LAS INICIALES /*
}
d {
background: url(http://i122.photobucket.com/albums/o260/mhilka/minigifs/aicon_79.gif) no-repeat center; /* FONDO DEL NRO DEL DIA /*
padding:1px;
color:#f7719a; /* COLOR DEL MISMO /*
}
n {
font:20px georgia; /* LETRA DEL MES /*
color:#f7719a; /* COLOR DEL MES /*
}


Luego En Un Gadget HTML/javascript Pegamos:

<div class="box">
<div class="box1">
<SCRIPT language="JavaScript">
monthnames = new Array(
"<n>January</n> <img src=#>",
"<n>February</n> <img src=#>",
"<n>March</n> <img src=#>",
"<n>April</n> <img src=#>",
"<n>May</n> <img src=#>",
"<n>June</n> <img src=#>",
"<n>July</n> <img src=#>",
"<n>August</n> <img src=#>",
"<n>September</n> <img src=#>",
"<n>October</n> <img src=#>",
"<n>November</n> <img src=#>",
"<n>December</n> <img src=#>");
var linkcount=0;
function addlink(month, day, href) {
var entry = new Array(3);
entry[0] = month;
entry[1] = day;
entry[2] = href;
this[linkcount++] = entry;
}
Array.prototype.addlink = addlink;
linkdays = new Array();
monthdays = new Array(12);
monthdays[0]=31;
monthdays[1]=28;
monthdays[2]=31;
monthdays[3]=30;
monthdays[4]=31;
monthdays[5]=30;
monthdays[6]=31;
monthdays[7]=31;
monthdays[8]=30;
monthdays[9]=31;
monthdays[10]=30;
monthdays[11]=31;
todayDate=new Date();
thisday=todayDate.getDay();
thismonth=todayDate.getMonth();
thisdate=todayDate.getDate();
thisyear=todayDate.getYear();
thisyear = thisyear % 100;
thisyear = ((thisyear < 50) ? (2000 + thisyear) : (1900 + thisyear));
if (((thisyear % 4 == 0)
&& !(thisyear % 100 == 0))
||(thisyear % 400 == 0)) monthdays[1]++;
startspaces=thisdate;
while (startspaces > 7) startspaces-=7;
startspaces = thisday - startspaces + 1;
if (startspaces < 0) startspaces+=7;
document.write("<FONT face='verdana'>");
document.write("<table width=100% border=0 " );
document.write("style='font-size : 10px; color : #aaaaaa;' cellpadding=0 cellspacing=1>");
document.write("<tr><td colspan=7><ce><upper><center>"
+ monthnames[thismonth] + " " + thisyear
+ "</center></upper></ce></td></tr>");
document.write("<tr>");
document.write("<td align=center><m><ce>S</ce></m></td>");
document.write("<td align=center><m><ce>M</ce></m></td>");
document.write("<td align=center><m><ce>T</ce></m></td>");
document.write("<td align=center><m><ce>W</ce></m></td>");
document.write("<td align=center><m><ce>T</ce></m></td>");
document.write("<td align=center><m><ce>F</ce></m></td>");
document.write("<td align=center><m><ce>S</ce></m></td>");
document.write("</tr>");
document.write("<tr>");
for (s=0;s<startspaces;s++) {
document.write("<td align=center>-</td>");
}
count=1;
while (count <= monthdays[thismonth]) {
for (b = startspaces;b<7;b++) {
linktrue=false;
document.write("<td align=center>");
for (c=0;c<linkdays.length;c++) {
if (linkdays[c] != null) {
if ((linkdays[c][0]==thismonth + 1) && (linkdays[c][1]==count)) {
document.write("<a href=\"" + linkdays[c][2] + "\">");
linktrue=true;
}
}
}
if (count==thisdate) {
document.write("<d>");
}
if (count <= monthdays[thismonth]) {
document.write(count);
}
else {
document.write("X");
}
if (count==thisdate) {
document.write("</d>");
}
if (linktrue)
document.write("</a>");
document.write("</td>");
count++;
}
document.write("</tr>");
document.write("<tr>");
startspaces=0;
}
document.write("</table>");
document.write("</FONT>");
// End -->
</SCRIPT>
</div></div>

Desde Aquí Podemos Editar Dos Cosas:
1ra Remplaza Los "*" En Los Espacios De Números Faltantes De Cada Mes:



Remplaza Por El Signo Que Mas Te Guste O Una Imagen:
<img src=URLDETUIMAGEN>

2do Colocarle Al Costado De Cada Mes Una Imagen:



Edita Al Comienzo Del Código:


"<n>January</n> <img src=#>",
"<n>February</n> <img src=#>",
"<n>March</n> <img src=#>",
"<n>April</n> <img src=#>",
"<n>May</n> <img src=#>",
"<n>June</n> <img src=#>",
"<n>July</n> <img src=#>",
"<n>August</n> <img src=#>",
"<n>September</n> <img src=#>",
"<n>October</n> <img src=#>",
"<n>November</n> <img src=#>",
"<n>December</n> <img src=#>");

Donde Va La URLDETUIMAGEN.
Debes Completar La De Todos Los Meses, Pueden Se Iguales O Diferentes.
Si No Quieres Imágenes, Remplaza TODA Esa Parte Por:

"<n>January</n>",
"<n>February</n>",
"<n>March</n>",
"<n>April</n>",
"<n>May</n>",
"<n>June</n>",
"<n>July</n>",
"<n>August</n>",
"<n>September</n>",
"<n>October</n>",
"<n>November</n>",
"<n>December</n>");

Algunos Gifs Para Que Decores Tu Almanaque:

CREDITOS:MEL

Bueno espero que les haya gustado!
Y bueno dejen sus comentarios!Gracias por leerme y bueno  me gustaría que me dieran alguna idea de algo que quieran que publique ya sea recursos,Tutos etc Besotes!

2 comentarios:

Tu comentario me haría muy feliz!! :D