Publicadas por Anónimo a las 11:24 h. Etiquetas: Cosas mias, Navidad
Estás en: Inicio » Etiqueta: Navidad
| [+/-] |
¡Feliz Año Nuevo! |
Que la lluvia de la Paz, la Esperanza, la Felicidad y el Amor os pille con el paraguas roto y salpique a todos los que están a vuestro alrededor.
Publicadas por Anónimo a las 18:43 h. Etiquetas: Cosas mias, Navidad
| [+/-] |
Feliz Navidad 2010 |
| [+/-] |
Guirnalda navideña de luces intermitentes |
En Snowy Sites nos muestran de forma muy sencilla como colocar en la parte superior de nuestra página una bonita guirnalda de luces navideñas que se apagan y encienden de forma intermitente.
Para que la guirnalda de luces se muestre en nuestro blog, no tenemos más que copiar y pegar está línea de código, antes del </head> de nuestra plantilla:
<script type="text/javascript" src="http://snowysites.com/lights.js"></script>
VER EJEMPLO:Guirnalda navideña de luces
| [+/-] |
Y más nieve en el blog |
En entradas anteriores vimos como incluir un efecto de nieve en el blog usando varios sistemas:
->Nieve usando la etiqueta marquee.
->Nieve usando un script externo.
->Nieve que se va acumulando al final de la página.
En esta entrada vamos a utilizar un script que solo tendremos que copiar y pegar -desde Diseño- en un gadget HTML/Javascript.
Mucho mejor si después de añadir el gadget lo movemos al pie del blog, nos será más fácil así el localizarlo después para retirar la "nieve".
El script utiliza una imagen "copo de nieve", pero podrá cambiarse fácilmente por una estrellita, una bolita de árbol de Navidad... cualquier icono apropiado para estas fechas.
Código:
<script language="JavaScript">
if ((document.getElementById) &&
window.addEventListener || window.attachEvent){
(function(){
var numberOfSnows = 20;
var snowSpeed = 0.9;
var inTheFace = 5;
var setTimeOutSpeed = 50;
var h,y,cy,cx,sy,sx,ref,field,oy1,oy2,ox1,ox2,iy1,iy2,ix1,ix2;
var d = document;
var domWw = (typeof window.innerWidth == "number");
var domSy = (typeof window.pageYOffset == "number");
var pi1 = 180/3.14;
var pi2 = 3.14/180;
var y = [];
var x = [];
var strs = [];
var gro = [];
var dim = [];
var dfc = [];
var vel = [];
var dir = [];
var acc = [];
var dtor = [];
var xy2 = [];
var idx = document.getElementsByTagName('div').length;
var zip = [];
var pix = "px";
for (i = 0; i < numberOfSnows; i++){
document.write('<div id="snows'+(idx+i)+'"'
+' style="position:absolute;top:0px;left:0px;'
+'width:40px;height:40px;background-color:transparent;'
+'font-size:0px;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAKiuySuWtEpX4yaT80n7MiOc8cv38w2YSjcR7uLMiajjPkmdnTrmTm6SGZVrym5W5xVn7bYr6zqIl-661BGOd1e3HP5X-tcnpwRCmZNBoM11ioBYuVMR2CaxH-jHUZeZelf0BgfsNw1E8/s320/snow2.gif" class="snow" width="20"/></div>');
}
if (domWw) ref = window;
else{
if (d.documentElement &&
typeof d.documentElement.clientWidth == "number" &&
d.documentElement.clientWidth != 0)
ref = d.documentElement;
else{
if (d.body &&
typeof d.body.clientWidth == "number")
ref = d.body;
}
}
function win(){
var mozBar = ((domWw) &&
ref.innerWidth != d.documentElement.offsetWidth)?20:0;
h = (domWw)?ref.innerHeight:ref.clientHeight;
w = (domWw)?ref.innerWidth - mozBar:ref.clientWidth;
cy = Math.floor(h/2);
cx = Math.floor(w/2);
oy1 = (75 * h / 100);
oy2 = (oy1 / 2);
ox1 = (75 * w / 100);
ox2 = (ox1 / 2);
iy1 = (18 * h / 100);
iy2 = (iy1 / 2);
ix1 = (18 * w / 100);
ix2 = (ix1 / 2);
field = (h > w)?h:w;
}
function rst(s){
var cyx;
sy = (domSy)?ref.pageYOffset:ref.scrollTop;
sx = (domSy)?ref.pageXOffset:ref.scrollLeft;
acc[s] = 0;
dim[s] = 1;
xy2[s] = 0;
cyx = Math.round(Math.random() * 2);
if (cyx == 0){
y[s] = (cy - iy2) + Math.floor(Math.random() * iy1);
x[s] = (cx - ix2) + Math.floor(Math.random() * ix1);
}
else{
y[s] = (cy - oy2) + Math.floor(Math.random() * oy1);
x[s] = (cx - ox2) + Math.floor(Math.random() * ox1);
}
dy = y[s] - cy;
dx = x[s] - cx;
dir[s] = Math.atan2(dy,dx) * pi1;
dfc[s] = Math.sqrt(dy*dy + dx*dx) ;
zip[s] = 10 * (dfc[s] + inTheFace) / 100;
vel[s] = snowSpeed * dfc[s] / 100;
dtor[s] = (field - dfc[s]);
if (dtor[s] < 1) dtor[s] = 1;
gro[s] = 0.003 * dtor[s] / 100;
}
function animate(){
for (i = 0; i < numberOfSnows; i++){
y[i] += vel[i] * Math.sin(dir[i] * pi2);
x[i] += vel[i] * Math.cos(dir[i] * pi2);
acc[i] = (vel[i] / (dfc[i] + (vel[i] * zip[i])) * vel[i]);
vel[i] += (acc[i]);
dim[i] += gro[i] + acc[i] / zip[i];
xy2[i] = dim[i] / 2;
if (y[i] < 0 + xy2[i] ||
x[i] < 0 + xy2[i] ||
y[i] > h - xy2[i] ||
x[i] > w - xy2[i]){
rst(i);
}
strs[i].top = (y[i] - xy2[i]) + sy + pix;
strs[i].left = (x[i] - xy2[i]) + sx + pix;
strs[i].width = (strs[i].height = (Math.round(dim[i])) + pix);
}
setTimeout(animate,setTimeOutSpeed);
}
function init(){
win();
for (i = 0; i < numberOfSnows; i++){
strs[i] = document.getElementById("snows"+(idx+i)).style;
rst(i);
}
animate();
}
if (window.addEventListener){
window.addEventListener("resize",win,false);
window.addEventListener("load",init,false);
}
else if (window.attachEvent){
window.attachEvent("onresize",win);
window.attachEvent("onload",init);
}
})();
}//End.
</script>
<style>
.snow {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;
}
html {
overflow-x:hidden;
}
</style>
Configuración:
-> var numberOfSnows = 20; Cambiamos aquí el valor para mostrar mayor o menor número de copos.
-> var snowSpeed = 0.9; Valor que controla la velocidad de desplazamiento de los copos.
-> var setTimeOutSpeed = 50; Valor que controla la velocidad de aparición de los copos.
-> En esta línea del script, podemos sustituir la url de la imagen por la que vamos a utilizar en nuestro caso y controlar su tamaño (width="20"):
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEip1PEKOr6xlMe2DPgH9gZxd_Z2-iFWNd7jKPnR5wR9HCOE8uEIzQj8hzm5SUMyqpFdboKpw6vMdc6nWAGsP2u5JSk-NRy88KWOS3yOGZnldRkZwgj_RRcbbWAqAaQrLcxtKfy0x9tkjWpb/s320/snow4.gif" class="snow" width="20"/>
-> var snowSpeed = 0.9; Valor que controla la velocidad de desplazamiento de los copos.
-> var setTimeOutSpeed = 50; Valor que controla la velocidad de aparición de los copos.
-> En esta línea del script, podemos sustituir la url de la imagen por la que vamos a utilizar en nuestro caso y controlar su tamaño (width="20"):
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEip1PEKOr6xlMe2DPgH9gZxd_Z2-iFWNd7jKPnR5wR9HCOE8uEIzQj8hzm5SUMyqpFdboKpw6vMdc6nWAGsP2u5JSk-NRy88KWOS3yOGZnldRkZwgj_RRcbbWAqAaQrLcxtKfy0x9tkjWpb/s320/snow4.gif" class="snow" width="20"/>
Nota:
En las plantillas del Diseñador de Blogger, funciona mal o directamente no funciona.
VER EJEMPLO:Estrellas de nieve
| [+/-] |
Nieve que se acumula al final de la página |
En una entrada anterior habíamos visto como conseguir un efecto de nieve en el blog mediante el uso de la etiqueta "marquee" y poco después veíamos como incluir el efecto nieve usando un script.
En esta ocasión vamos a ver de nuevo como incluir nieve en el blog mediante el uso de un script. El script irá incluido directamente en la plantilla y lo he "marcado" para que, una vez pasadas las fiestas, sea fácil su localización para retirarlo.
Este script consigue un efecto muy lindo, ya que los copos que van cayendo quedan acumulados al final de la página y mientras unos caen, los del pie de la página se van deshaciendo poco a poco...
Además si movemos el ratón por la pagina, los copos cambian de dirección como movidos por un ligero viento.
Antes de decidir si vais a usarlo o no, podéis ver una demostración online en un blog donde también e incluido el script para copiar.
Lo único que hemos de hacer para conseguir el efecto nieve, es copiar el script y colocarlo en el código de nuestra plantilla antes de </head>
<!-- Comienzo del script para nieve --><script type="text/javascript">
//<![CDATA[
/*
DHTML Snowstorm! OO-style Jascript-based Snow effect
----------------------------------------------------
Version 1.4.20091115 (Previous rev: v1.3.20081215)
Code by Scott Schiller - http://schillmania.com
----------------------------------------------------
Initializes after body onload() by default (via addEventHandler() call at bottom.)
To customize properties, edit below or override configuration after this script
has run (but before body.onload), eg. snowStorm.snowStick = false;
*/
var snowStorm = null;
function SnowStorm() {
// --- PROPERTIES ---
this.flakesMax = 150; // Limit total amount of snow made (falling + sticking)
this.flakesMaxActive = 64; // Limit amount of snow falling at once (less = lower CPU use)
this.animationInterval = 33; // Theoretical "miliseconds per frame" measurement. 20 = fast + smooth, but high CPU use. 50 = more conservative, but slower
this.flakeBottom = null; // Integer for Y axis snow limit, 0 or null for "full-screen" snow effect
this.targetElement = null; // element which snow will be appended to (document body if null/undefined) - can be an element ID string, or a DOM node reference
this.followMouse = true; // Snow will change movement with the user's mouse
this.snowColor = '#fff'; // Don't eat (or use?) yellow snow.
this.snowCharacter = '•'; // • = bullet, · is square on some systems etc.
this.snowStick = true; // Whether or not snow should "stick" at the bottom. When off, will never collect.
this.useMeltEffect = true; // When recycling fallen snow (or rarely, when falling), have it "melt" and fade out if browser supports it
this.useTwinkleEffect = false; // Allow snow to randomly "flicker" in and out of view while falling
this.usePositionFixed = false; // true = snow not affected by window scroll. may increase CPU load, disabled by default - if enabled, used only where supported
// --- less-used bits ---
this.flakeLeftOffset = 0; // amount to subtract from edges of container
this.flakeRightOffset = 0; // amount to subtract from edges of container
this.flakeWidth = 8; // max pixel width for snow element
this.flakeHeight = 8; // max pixel height for snow element
this.vMaxX = 5; // Maximum X velocity range for snow
this.vMaxY = 4; // Maximum Y velocity range
this.zIndex = 0; // CSS stacking order applied to each snowflake
// --- End of user section ---
// jslint global declarations
/*global window, document, navigator, clearInterval, setInterval */
var addEvent = (typeof(window.attachEvent)=='undefined'?function(o,evtName,evtHandler) {
return o.addEventListener(evtName,evtHandler,false);
}:function(o,evtName,evtHandler) {
return o.attachEvent('on'+evtName,evtHandler);
});
var removeEvent = (typeof(window.attachEvent)=='undefined'?function(o,evtName,evtHandler) {
return o.removeEventListener(evtName,evtHandler,false);
}:function(o,evtName,evtHandler) {
return o.detachEvent('on'+evtName,evtHandler);
});
function rnd(n,min) {
if (isNaN(min)) {
min = 0;
}
return (Math.random()*n)+min;
}
function plusMinus(n) {
return (parseInt(rnd(2),10)==1?n*-1:n);
}
var s = this;
var storm = this;
this.timers = [];
this.flakes = [];
this.disabled = false;
this.active = false;
var isIE = navigator.userAgent.match(/msie/i);
var isIE6 = navigator.userAgent.match(/msie 6/i);
var isOldIE = (isIE && (isIE6 || navigator.userAgent.match(/msie 5/i)));
var isWin9X = navigator.appVersion.match(/windows 98/i);
var isiPhone = navigator.userAgent.match(/iphone/i);
var isBackCompatIE = (isIE && document.compatMode == 'BackCompat');
var noFixed = ((isBackCompatIE || isIE6 || isiPhone)?true:false);
var screenX = null;
var screenX2 = null;
var screenY = null;
var scrollY = null;
var vRndX = null;
var vRndY = null;
var windOffset = 1;
var windMultiplier = 2;
var flakeTypes = 6;
var fixedForEverything = false;
var opacitySupported = (function(){
try {
document.createElement('div').style.opacity = '0.5';
} catch (e) {
return false;
}
return true;
})();
var docFrag = document.createDocumentFragment();
if (s.flakeLeftOffset === null) {
s.flakeLeftOffset = 0;
}
if (s.flakeRightOffset === null) {
s.flakeRightOffset = 0;
}
this.meltFrameCount = 20;
this.meltFrames = [];
for (var i=0; i<this.meltFrameCount; i++) {
this.meltFrames.push(1-(i/this.meltFrameCount));
}
this.randomizeWind = function() {
vRndX = plusMinus(rnd(s.vMaxX,0.2));
vRndY = rnd(s.vMaxY,0.2);
if (this.flakes) {
for (var i=0; i<this.flakes.length; i++) {
if (this.flakes[i].active) {
this.flakes[i].setVelocities();
}
}
}
};
this.scrollHandler = function() {
// "attach" snowflakes to bottom of window if no absolute bottom value was given
scrollY = (s.flakeBottom?0:parseInt(window.scrollY||document.documentElement.scrollTop||document.body.scrollTop,10));
if (isNaN(scrollY)) {
scrollY = 0; // Netscape 6 scroll fix
}
if (!fixedForEverything && !s.flakeBottom && s.flakes) {
for (var i=s.flakes.length; i--;) {
if (s.flakes[i].active === 0) {
s.flakes[i].stick();
}
}
}
};
this.resizeHandler = function() {
if (window.innerWidth || window.innerHeight) {
screenX = window.innerWidth-(!isIE?16:2)-s.flakeRightOffset;
screenY = (s.flakeBottom?s.flakeBottom:window.innerHeight);
} else {
screenX = (document.documentElement.clientWidth||document.body.clientWidth||document.body.scrollWidth)-(!isIE?8:0)-s.flakeRightOffset;
screenY = s.flakeBottom?s.flakeBottom:(document.documentElement.clientHeight||document.body.clientHeight||document.body.scrollHeight);
}
screenX2 = parseInt(screenX/2,10);
};
this.resizeHandlerAlt = function() {
screenX = s.targetElement.offsetLeft+s.targetElement.offsetWidth-s.flakeRightOffset;
screenY = s.flakeBottom?s.flakeBottom:s.targetElement.offsetTop+s.targetElement.offsetHeight;
screenX2 = parseInt(screenX/2,10);
};
this.freeze = function() {
// pause animation
if (!s.disabled) {
s.disabled = 1;
} else {
return false;
}
for (var i=s.timers.length; i--;) {
clearInterval(s.timers[i]);
}
};
this.resume = function() {
if (s.disabled) {
s.disabled = 0;
} else {
return false;
}
s.timerInit();
};
this.toggleSnow = function() {
if (!s.flakes.length) {
// first run
s.start();
} else {
s.active = !s.active;
if (s.active) {
s.show();
s.resume();
} else {
s.stop();
s.freeze();
}
}
};
this.stop = function() {
this.freeze();
for (var i=this.flakes.length; i--;) {
this.flakes[i].o.style.display = 'none';
}
removeEvent(window,'scroll',s.scrollHandler);
removeEvent(window,'resize',s.resizeHandler);
if (!isOldIE) {
removeEvent(window,'blur',s.freeze);
removeEvent(window,'focus',s.resume);
}
};
this.show = function() {
for (var i=this.flakes.length; i--;) {
this.flakes[i].o.style.display = 'block';
}
};
this.SnowFlake = function(parent,type,x,y) {
var s = this;
var storm = parent;
this.type = type;
this.x = x||parseInt(rnd(screenX-20),10);
this.y = (!isNaN(y)?y:-rnd(screenY)-12);
this.vX = null;
this.vY = null;
this.vAmpTypes = [1,1.2,1.4,1.6,1.8]; // "amplification" for vX/vY (based on flake size/type)
this.vAmp = this.vAmpTypes[this.type];
this.melting = false;
this.meltFrameCount = storm.meltFrameCount;
this.meltFrames = storm.meltFrames;
this.meltFrame = 0;
this.twinkleFrame = 0;
this.active = 1;
this.fontSize = (10+(this.type/5)*10);
this.o = document.createElement('div');
this.o.innerHTML = storm.snowCharacter;
this.o.style.color = storm.snowColor;
this.o.style.position = (fixedForEverything?'fixed':'absolute');
this.o.style.width = storm.flakeWidth+'px';
this.o.style.height = storm.flakeHeight+'px';
this.o.style.fontFamily = 'arial,verdana';
this.o.style.overflow = 'hidden';
this.o.style.fontWeight = 'normal';
this.o.style.zIndex = storm.zIndex;
docFrag.appendChild(this.o);
this.refresh = function() {
if (isNaN(s.x) || isNaN(s.y)) {
// safety check
return false;
}
s.o.style.left = s.x+'px';
s.o.style.top = s.y+'px';
};
this.stick = function() {
if (noFixed || (storm.targetElement != document.documentElement && storm.targetElement != document.body)) {
s.o.style.top = (screenY+scrollY-storm.flakeHeight)+'px';
} else if (storm.flakeBottom) {
s.o.style.top = storm.flakeBottom+'px';
} else {
s.o.style.display = 'none';
s.o.style.top = 'auto';
s.o.style.bottom = '0px';
s.o.style.position = 'fixed';
s.o.style.display = 'block';
}
};
this.vCheck = function() {
if (s.vX>=0 && s.vX<0.2) {
s.vX = 0.2;
} else if (s.vX<0 && s.vX>-0.2) {
s.vX = -0.2;
}
if (s.vY>=0 && s.vY<0.2) {
s.vY = 0.2;
}
};
this.move = function() {
var vX = s.vX*windOffset;
s.x += vX;
s.y += (s.vY*s.vAmp);
if (s.x >= screenX || screenX-s.x < storm.flakeWidth) { // X-axis scroll check
s.x = 0;
} else if (vX < 0 && s.x-storm.flakeLeftOffset<0-storm.flakeWidth) {
s.x = screenX-storm.flakeWidth-1; // flakeWidth;
}
s.refresh();
var yDiff = screenY+scrollY-s.y;
if (yDiff<storm.flakeHeight) {
s.active = 0;
if (storm.snowStick) {
s.stick();
} else {
s.recycle();
}
} else {
if (storm.useMeltEffect && s.active && s.type < 3 && !s.melting && Math.random()>0.998) {
// ~1/1000 chance of melting mid-air, with each frame
s.melting = true;
s.melt();
// only incrementally melt one frame
// s.melting = false;
}
if (storm.useTwinkleEffect) {
if (!s.twinkleFrame) {
if (Math.random()>0.9) {
s.twinkleFrame = parseInt(Math.random()*20,10);
}
} else {
s.twinkleFrame--;
s.o.style.visibility = (s.twinkleFrame && s.twinkleFrame%2===0?'hidden':'visible');
}
}
}
};
this.animate = function() {
// main animation loop
// move, check status, die etc.
s.move();
};
this.setVelocities = function() {
s.vX = vRndX+rnd(storm.vMaxX*0.12,0.1);
s.vY = vRndY+rnd(storm.vMaxY*0.12,0.1);
};
this.setOpacity = function(o,opacity) {
if (!opacitySupported) {
return false;
}
o.style.opacity = opacity;
};
this.melt = function() {
if (!storm.useMeltEffect || !s.melting) {
s.recycle();
} else {
if (s.meltFrame < s.meltFrameCount) {
s.meltFrame++;
s.setOpacity(s.o,s.meltFrames[s.meltFrame]);
s.o.style.fontSize = s.fontSize-(s.fontSize*(s.meltFrame/s.meltFrameCount))+'px';
s.o.style.lineHeight = storm.flakeHeight+2+(storm.flakeHeight*0.75*(s.meltFrame/s.meltFrameCount))+'px';
} else {
s.recycle();
}
}
};
this.recycle = function() {
s.o.style.display = 'none';
s.o.style.position = (fixedForEverything?'fixed':'absolute');
s.o.style.bottom = 'auto';
s.setVelocities();
s.vCheck();
s.meltFrame = 0;
s.melting = false;
s.setOpacity(s.o,1);
s.o.style.padding = '0px';
s.o.style.margin = '0px';
s.o.style.fontSize = s.fontSize+'px';
s.o.style.lineHeight = (storm.flakeHeight+2)+'px';
s.o.style.textAlign = 'center';
s.o.style.verticalAlign = 'baseline';
s.x = parseInt(rnd(screenX-storm.flakeWidth-20),10);
s.y = parseInt(rnd(screenY)*-1,10)-storm.flakeHeight;
s.refresh();
s.o.style.display = 'block';
s.active = 1;
};
this.recycle(); // set up x/y coords etc.
this.refresh();
};
this.snow = function() {
var active = 0;
var used = 0;
var waiting = 0;
var flake = null;
for (var i=s.flakes.length; i--;) {
if (s.flakes[i].active == 1) {
s.flakes[i].move();
active++;
} else if (s.flakes[i].active === 0) {
used++;
} else {
waiting++;
}
if (s.flakes[i].melting) {
s.flakes[i].melt();
}
}
if (active<s.flakesMaxActive) {
flake = s.flakes[parseInt(rnd(s.flakes.length),10)];
if (flake.active === 0) {
flake.melting = true;
}
}
};
this.mouseMove = function(e) {
if (!s.followMouse) {
return true;
}
var x = parseInt(e.clientX,10);
if (x<screenX2) {
windOffset = -windMultiplier+(x/screenX2*windMultiplier);
} else {
x -= screenX2;
windOffset = (x/screenX2)*windMultiplier;
}
};
this.createSnow = function(limit,allowInactive) {
for (var i=0; i<limit; i++) {
s.flakes[s.flakes.length] = new s.SnowFlake(s,parseInt(rnd(flakeTypes),10));
if (allowInactive || i>s.flakesMaxActive) {
s.flakes[s.flakes.length-1].active = -1;
}
}
storm.targetElement.appendChild(docFrag);
};
this.timerInit = function() {
s.timers = (!isWin9X?[setInterval(s.snow,s.animationInterval)]:[setInterval(s.snow,s.animationInterval*3),setInterval(s.snow,s.animationInterval)]);
};
this.init = function() {
s.randomizeWind();
s.createSnow(s.flakesMax); // create initial batch
addEvent(window,'resize',s.resizeHandler);
addEvent(window,'scroll',s.scrollHandler);
if (!isOldIE) {
addEvent(window,'blur',s.freeze);
addEvent(window,'focus',s.resume);
}
s.resizeHandler();
s.scrollHandler();
if (s.followMouse) {
addEvent(document,'mousemove',s.mouseMove);
}
s.animationInterval = Math.max(20,s.animationInterval);
s.timerInit();
};
var didInit = false;
this.start = function(bFromOnLoad) {
if (!didInit) {
didInit = true;
} else if (bFromOnLoad) {
// already loaded and running
return true;
}
if (typeof s.targetElement == 'string') {
var targetID = s.targetElement;
s.targetElement = document.getElementById(targetID);
if (!s.targetElement) {
throw new Error('Snowstorm: Unable to get targetElement "'+targetID+'"');
}
}
if (!s.targetElement) {
s.targetElement = (!isIE?(document.documentElement?document.documentElement:document.body):document.body);
}
if (s.targetElement != document.documentElement && s.targetElement != document.body) {
s.resizeHandler = s.resizeHandlerAlt; // re-map handler to get element instead of screen dimensions
}
s.resizeHandler(); // get bounding box elements
s.usePositionFixed = (s.usePositionFixed && !noFixed); // whether or not position:fixed is supported
fixedForEverything = s.usePositionFixed;
if (screenX && screenY && !s.disabled) {
s.init();
s.active = true;
}
};
function doStart() {
s.start(true);
}
if (document.addEventListener) {
// safari 3.0.4 doesn't do DOMContentLoaded, maybe others - use a fallback to be safe.
document.addEventListener('DOMContentLoaded',doStart,false);
window.addEventListener('load',doStart,false);
} else {
addEvent(window,'load',doStart);
}
}
snowStorm = new SnowStorm();
//]]>
</script>
<!-- Fin del script para nieve -->
Notas:
[1] He respetado los créditos al autor original: Schillmania, pienso que no sería pedir demasiado hicieseis lo mismo todos y no borraseis esa parte en el script...
[2] Una cosa a tener en cuenta, es que el efecto nieve también será visible en la parte de Diseño de nuestro blog, esto es normal y además he comprobado que no da ningún problema, aunque si en algún caso eso sucediese bastaría retirar el script.
[3] Para retirar el script una vez no queramos usarlo, nos fijaremos en las anotaciones que he puesto al comienzo y al final y que he destacado en color rojo en el código y borramos todo desde la primera anotación a la última, ambas incluidas.
[4] Hay algunos cambios que podemos hacer, aunque yo personalmente lo dejaría como est... cabe destacar que podemos aumentar la cantidad de copos de nieve en esta línea del script:
this.flakesMax = 150;
[2] Una cosa a tener en cuenta, es que el efecto nieve también será visible en la parte de Diseño de nuestro blog, esto es normal y además he comprobado que no da ningún problema, aunque si en algún caso eso sucediese bastaría retirar el script.
[3] Para retirar el script una vez no queramos usarlo, nos fijaremos en las anotaciones que he puesto al comienzo y al final y que he destacado en color rojo en el código y borramos todo desde la primera anotación a la última, ambas incluidas.
[4] Hay algunos cambios que podemos hacer, aunque yo personalmente lo dejaría como est... cabe destacar que podemos aumentar la cantidad de copos de nieve en esta línea del script:
this.flakesMax = 150;
Script original de: Schillmania
| [+/-] |
Generador de mensaje de Navidad |
Una nota para felicitar las fiestas navideñas a los visitantes de vuestro blog que podéis crear fácilmente desde PagePlugins.
También podéis hacerlo copiando directamente el código desde aquí para colocarlo en un post o en un gadget HTML sobre las entradas, por ejemplo.
Fijaros en las partes marcadas en rojo ya que son las que tendréis que modificar para incluir vuestro propio mensaje y la url de vuestro blog.
Pensad que no admite eñes ni símbolos en lugar de letras.
<embed align="middle" allowscriptaccess="samedomain" flashvars="t=Queridos amigos.&m=Deseo para todos vosotros una Feliz Navidad y un prospero 2010 cargado de felicidad. &f=&px=43.9&py=51.45&dom=http://elescaparatederosa.blogspot.com" height="320" name="Christmas Notes" pluginspage="http://www.macromedia.com/go/getflashplayer" quality="high" src="http://www.pageplugins.com/generators/christmas-note/christmasnote.swf" type="application/x-shockwave-flash" width="400" wmode="transparent"></embed>
| [+/-] |
Pack de iconos navideños |
Ya está disponible para descarga en Smashing Magazine una nueva colección de iconos navideños creación de IconEden.
Todos los iconos están diseñados en 3 estilos diferentes: el estilo realista en 3D, el estilo de forma simple y el estilo de botón.
El pack consta de 39 iconos con los motivos mas habituales de las fiestas navideñas, y que podemos obtener en formato .ico, .incs, .png, .tif y también en formato vectorial (eps y ai).
Usted puede utilizar el conjunto de todos sus proyectos de forma gratuita y sin restricciones.
Usted puede libremente usarlo, tanto para sus proyectos particulares y comerciales, incluyendo software, servicios en línea, plantillas y temas.
Por favor, enlace a este artículo si desea correr la voz.
| [+/-] |
Headers Navideñas |
Una fantástica colección de 75 cabeceras con motivos navideños.
Podéis descargarlas desde ConectaBlog
| [+/-] |
Estrella de Navidad |
Seguimos con cosillas para adornar el blog en estas fechas navideñas, pero antes de nada os recomiendo que no pretendáis poner todos estos adornos navideños a la vez, pues el funcionamiento del blog podría verse afectado.
Esta Estrella de Navidad se pasea a lo ancho de nuestra pantalla de derecha a izquierda, saludando con la mano y deseando a nuestras vistas Feliz Navidad, una vez que desaparece por el lado izquierdo de la pantalla vuelve a salir desde el derecho y así sucesivamente.
Código:
Lo colocaremos en un gadget html en cualquier parte de la plantilla, por ejemplo en el footer.
<marquee direction="left" style="position: absolute; left: 0px; top: 100px; height: 70px;" scrollamount="3"><img class="sin" src="http://img99.imageshack.us/img99/6566/xestelnadal2hl1.gif"/><span style="color: #FFB800; font-size: 20px; font-weight: bold;">Feliz Navidad</span></marquee>Modificaciones:
- Podemos usar cualquier imagen que nos guste, cambiando la url de la estrella por la de la imagen que vayamos a utilizar.
- direction="left" Si queremos que la estrella comience su paseo por la derecha en lugar de salir desde la parte izquierda, cambiamos "left" por "right".
- top: 100px; Es la distancia desde la estrella a la parte superior de la pantalla, según queramos que se vea más arriba o más abajo, cambiamos ahí el valor 100 por el que necesitemos.
- height: 70px; Aquí pondremos el alto que tiene nuestra imagen e incluso algo más, para que esta no se vea cortada.
- scrollamount="3" La velocidad de desplazamiento, a mayor número más velocidad.
<span style="color: #FFB800; font-size: 20px; font-weight: bold;">Feliz Navidad</span>
Aquí podemos cambiar el color del texto y el tamaño. Si no queremos mostrar ningun mensaje siguiendo a la imagen, sencillamente borramos esa línea.
| [+/-] |
Nieve en el blog (II) |
El año pasado a principios de Diciembre veíamos como conseguir que la nieve apareciera en nuestro blog con motivo de las cercanas fechas navideñas.
Este año os traigo otra manera de incluir nieve en el blog mediante el uso de un script que he encontrado en DynamicDrive.
El efecto es sencillo pero no por eso menos espectacular, los copos son simples puntitos a los que da la impresión de "manejar" el viento.
El resultado queda precioso en los blogs con fondo oscuro.
Podéis verlo en funcionamiento en esta página de ejemplo en DynamicDrive.
[1] Nos descargamos el script snow.js a nuestro PC, lo descomprimimos y lo subimos a un alojamiento de archivos.
[2] Incluimos esta línea de código para el script casi al final del código de nuestra plantilla, justo antes de </body>
<script type="text/javascript" src="URL_DE_SCRIPT"></script>
¡Disfrutad de la nieve!
| [+/-] |
Concurso navideño en Pizcos Blog |
Desde el blog de Pizcos nos llega una interesante propuesta para estas Navidades que se aproximan.
Un concurso a la mejor decoración navideña de blog y con un fantástico premio para el ganador, nada más y nada menos, que una plantilla "a la carta" para el blog diseñada por Pizcos.
Los que estéis interesados en participar no tenéis más que pasaros por su blog y apuntaros, allí además encontraréis información sobre los componentes del jurado y demás...
Si queréis difundir la idea de Pizcos para que el número de participantes sea mayor, podéis colocar el banner que ha hecho especialmente para la ocasión directamente desde la sidebar de Pizcos Blog.
Desde luego a mi me encanta la iniciativa y estaré siguiendo los blogs que se apunten para no perderme detalle de su decoración navideña.
Si necesitáis alguna idea podéis consultar alguna entrada en mi blog en "Especial Navidad" donde publicaré alguna cosilla más en los próximos días .
Actualización:
Ya hay otro premio que ofrecer, así que de momento habrá primero, segundo y tercer premio. Desde Xanarts.com, Pilar ofrece una plantilla para WordPress que incluye un banner de 468x60, un botón 88x31, una firma personalizada y el banner de la cabecera también personalizado.
Fernando de Randomness tambien ofrece una plantilla para Blogger o WordPress.
Por si hay alguna duda, el premio que Pizcos ofrece, es completo, es decir incluye diseño original, hacks y trucos que queráis implementar.
| [+/-] |
Cartelitos de Navidad |
Otra cosilla más para adornar el blog en estas fechas navideñas.
[1] Emplearemos unas líneas de CSS, que colocaremos en nuestra plantilla antes de ]]></b:skin>:
.etiqueta {
width: 150px;
background:#00CCFF url(http://img249.imageshack.us/img249/7826/xmastre3vs8.gif)center left no-repeat;
border: 2px solid #000;
padding: 5px 5px 5px 35px;
text-align: center;
color: #fff;
font-weight:bold;
}
[2] Una vez guardados los cambios, tendremos que usar este código donde vamos a mostrar nuestro cartelito.
<div class="etiqueta">Aquí es donde se verá
el mensaje dentro de la caja de texto</div>
Desde El Escaparate os deseo a todos una Feliz Navidad y mejor Año Nuevo
Rosa
Rosa
[3]Si nos fijamos un poco en el código del CSS, podremos modificar nuestra etiqueta como más nos guste, incluso para usarla fuera de la época navideña:
width: Ancho de la etiqueta (la altura no hace falta indicarla, ya que la dará el propio contenido de la etiqueta)
background: El color de fondo de la etiqueta (#00CCFF) y la imagen (url) que en este ejemplo está centrada a la izquierda (center left) y no se repetirá sobre el fondo (no-repeat).
border: Grosor del borde(2px), tipo (solid) y color (#000).
padding Distancia del contenido a los margenes de la etiqueta, 5px en todos, menos en la parte izquierda, donde hemos de colocar la anchura de la imagen que usamos, para que el texto no se superponga a esta (35px, en este ejemplo)
text-align: El texto aparece centrado.
color: Color del texto.
font-weight: Texto en negrita.
[4] Aquí os dejo otro modelo, con la imagen a la derecha, fijaros que si vamos a usar más de un cartelito a la vez en el blog, hemos de cambiar su nombre en el CSS y en el código donde vamos a mostrarlo:
.etiqueta1 {
width: 150px;
background:#fff url(http://img249.imageshack.us/img249/4044/gif6603wt1.gif)center right no-repeat;
border: 1px solid #000;
padding: 15px 50px 15px 15px;
text-align: center;
color: #000;
font-weight:bold;
}
<div class="etiqueta1">Aquí es donde se verá
el mensaje dentro de la caja de texto</div>
Desde El Escaparate os deseo a todos una Feliz Navidad y mejor Año Nuevo
Rosa
Rosa
| [+/-] |
Nieve en el blog |
Un lindo efecto de nieve en el blog que conseguiremos usando la etiqueta "marquee".
Podéis ver como queda de lindo en este blog.
El código se construye a partir de una simple línea:
<marquee behavior="scroll" direction="down" style="position: absolute; left: 100px; top: 0px; width: 16px; height: 700px;" scrollamount="5"><span style="color: #fff;">*</span></marquee>
Esta línea de código hace que se forme un copo de nieve. Para mostrar el copo usamos un asterisco (*).
Cada vez que repetimos esta línea se forma un nuevo copo de nieve, eso si, tendremos en cuenta que si la copiamos tal cual, el copo saldrá encima del anterior. Para evitar esto y conseguir el efecto de nevada, tendremos que copiar esa línea tantas veces como copos queramos conseguir, pero modificando algunos valores:
left La distancia desde la izquierda de la pantalla, hasta donde se verá el copo caer. Aquí tendremos en cuenta ir colocando en cada línea distintos valores, por ejemplo, sumando 20 al valor anterior.
top La distancia desde la cabecera del blog, hasta el lugar donde aparecerá el copo. Si ponemos cero en todas las líneas de código, todos los copos saldrán desde arriba del todo de la pantalla.
width La anchura que ocupará el copo de nieve, en el caso de que usemos el asterisco no necesitaremos modificarla, si usamos una imagen en lugar del asterisco, tendremos que poner en todas las líneas la anchura que tenga la imagen.
height La distancia desde donde aparece el copo hasta donde se oculta. Si ponemos distintos valores quedará más bonito, pero puede dejarse el mismo para todos los copos (en todas las líneas).
scrollamount La velocidad de bajada del copo, cuanto menor sea este valor, más lento se desplazará el copo.
color El color del copo. En el ejemplo lo he puesto de color blanco, pero para un blog con fondo blanco tendremos que colocar un color más oscuro, un azul claro estaría bien (#66CCFF).
Como podéis apreciar en mi blog de ejemplo, he usado ademas de los asteriscos, alguna imagen (estrellas y copos de nieve). He tenido la precaución de buscarlas del mismo tamaño, para que resulte más sencillo armar el código.
La línea para un copo con imagen o la estrella, o la imagen que sea, sería esta:
<marquee behavior="scroll" direction="down" style="position: absolute; left: 675px; top: 0px; width: 16px; height: 90px;" scrollamount="1"><img src="URL_DE_LA_IMAGEN"/></marquee>
En cuanto al letrero de "FELIZ NAVIDAD" lo he conseguido añadiendo en el código esta línea:
<marquee behavior="scroll" direction="down" style="position: absolute; left: 500px; top: 0px; height: 200px;" scrollamount="1"><span style="color: #fff;">FELIZ NAVIDAD</span></marquee>
Una vez explicadas las modificaciones que podemos hacer, os dejo el código para mostrar la nieve con los asteriscos, que pegaremos en un elemento HTML-Javascript.
Si no queréis usar imágenes, con copiar y pegar este código, tendréis la nieve en el blog.
Si queréis usar alguna de mis imágenes (las estrellas o el copo) estas son las urls:
Estrella azul: http://img206.imageshack.us/img206/4751/16starcoldxh2.png
Estrella dorada: http://img155.imageshack.us/img155/6118/16starhotzj7.png
Copo: http://img153.imageshack.us/img153/1231/stockweathersnowrk3.png
Código:
<marquee behavior="scroll" direction="down" style="position: absolute; left: 100px; top: 0px; width: 16px; height: 700px;" scrollamount="5"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 95px; top: 0px; width: 16px; height: 60px;" scrollamount="7"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 115px; top: 0px; width: 16px; height: 70px;" scrollamount="7"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 116px; top: 5px; width: 16px; height: 570px;" scrollamount="3"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 132px; top: 15px; width: 16px; height: 600px;" scrollamount="5"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 148px; top: 5px; width: 16px; height: 610px;" scrollamount="2"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 214px; top: 25px; width: 16px; height: 500px;" scrollamount="7"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 330px; top: 25px; width: 16px; height: 450px;" scrollamount="7"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 246px; top: 15px; width: 16px; height: 430px;" scrollamount="6"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 312px; top: 55px; width: 16px; height: 400px;" scrollamount="5"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 338px; top: 65px; width: 16px; height: 410px;" scrollamount="2"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 354px; top: 35px; width: 16px; height: 460px;" scrollamount="7"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 370px; top: 0px; width: 16px; height: 700px;" scrollamount="5"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 386px; top: 5px; width: 16px; height: 570px;" scrollamount="3"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 402px; top: 15px; width: 16px; height: 600px;" scrollamount="5"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 418px; top: 5px; width: 16px; height: 610px;" scrollamount="2"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 434px; top: 25px; width: 16px; height: 500px;" scrollamount="7"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 450px; top: 25px; width: 16px; height: 450px;" scrollamount="7"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 466px; top: 15px; width: 16px; height: 430px;" scrollamount="6"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 482px; top: 55px; width: 16px; height: 400px;" scrollamount="5"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 598px; top: 65px; width: 16px; height: 410px;" scrollamount="2"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 614px; top: 35px; width: 16px; height: 460px;" scrollamount="7"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 894px; top: 15px; width: 16px; height: 260px;" scrollamount="7"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 630px; top: 0px; width: 16px; height: 700px;" scrollamount="5"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 646px; top: 5px; width: 16px; height: 570px;" scrollamount="3"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 662px; top: 15px; width: 16px; height: 600px;" scrollamount="5"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 678px; top: 5px; width: 16px; height: 610px;" scrollamount="2"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 694px; top: 25px; width: 16px; height: 500px;" scrollamount="7"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 710px; top: 25px; width: 16px; height: 450px;" scrollamount="7"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 726px; top: 15px; width: 16px; height: 430px;" scrollamount="6"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 742px; top: 55px; width: 16px; height: 400px;" scrollamount="5"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 758px; top: 65px; width: 16px; height: 410px;" scrollamount="2"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 774px; top: 35px; width: 16px; height: 460px;" scrollamount="7"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 974px; top: 35px; width: 16px; height: 160px;" scrollamount="7"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 790px; top: 0px; width: 16px; height: 700px;" scrollamount="5"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 806px; top: 5px; width: 16px; height: 570px;" scrollamount="3"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 812px; top: 15px; width: 16px; height: 600px;" scrollamount="7"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 828px; top: 5px; width: 16px; height: 610px;" scrollamount="2"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 844px; top: 25px; width: 16px; height: 500px;" scrollamount="7"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 860px; top: 25px; width: 16px; height: 450px;" scrollamount="7"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 876px; top: 15px; width: 16px; height: 430px;" scrollamount="6"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 892px; top: 55px; width: 16px; height: 400px;" scrollamount="5"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 898px; top: 65px; width: 16px; height: 410px;" scrollamount="2"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 900px; top: 35px; width: 16px; height: 460px;" scrollamount="7"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 90px; top: 0px; width: 16px; height: 700px;" scrollamount="5"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 180px; top: 5px; width: 16px; height: 570px;" scrollamount="5"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 206px; top: 15px; width: 16px; height: 600px;" scrollamount="1"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 399px; top: 5px; width: 16px; height: 610px;" scrollamount="3"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 409px; top: 25px; width: 16px; height: 500px;" scrollamount="7"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 520px; top: 25px; width: 16px; height: 450px;" scrollamount="7"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 656px; top: 15px; width: 16px; height: 430px;" scrollamount="6"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 865px; top: 55px; width: 16px; height: 400px;" scrollamount="1"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 370px; top: 65px; width: 16px; height: 410px;" scrollamount="6"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 290px; top: 35px; width: 16px; height: 460px;" scrollamount="7"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 425px; top: 0px; width: 16px; height: 700px;" scrollamount="5"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 580px; top: 5px; width: 16px; height: 570px;" scrollamount="3"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 306px; top: 15px; width: 16px; height: 300px;" scrollamount="1"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 599px; top: 5px; width: 16px; height: 610px;" scrollamount="3"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 609px; top: 25px; width: 16px; height: 180px;" scrollamount="7"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 1070px; top: 25px; width: 16px; height: 450px;" scrollamount="7"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 950px; top: 15px; width: 16px; height: 430px;" scrollamount="6"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 260px; top: 55px; width: 16px; height: 200px;" scrollamount="1"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 770px; top: 65px; width: 16px; height: 210px;" scrollamount="7"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 690px; top: 35px; width: 16px; height: 360px;" scrollamount="7"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 925px; top: 0px; width: 16px; height: 50px;" scrollamount="7"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 225px; top: 0px; width: 16px; height: 50px;" scrollamount="5"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 380px; top: 5px; width: 16px; height: 70px;" scrollamount="3"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 806px; top: 15px; width: 16px; height: 100px;" scrollamount="1"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 399px; top: 5px; width: 16px; height: 110px;" scrollamount="3"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 909px; top: 25px; width: 16px; height: 280px;" scrollamount="7"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 570px; top: 5px; width: 16px; height: 150px;" scrollamount="7"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 750px; top: 15px; width: 16px; height: 130px;" scrollamount="6"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 660px; top: 5px; width: 16px; height: 100px;" scrollamount="1"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 570px; top: 5px; width: 16px; height: 110px;" scrollamount="7"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 690px; top: 5px; width: 16px; height: 60px;" scrollamount="7"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 965px; top: 0px; width: 16px; height: 50px;" scrollamount="5"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 1000px; top: 0px; width: 16px; height: 50px;" scrollamount="7"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 1010px; top: 0px; width: 16px; height: 150px;" scrollamount="7"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 390px; top: 5px; width: 16px; height: 70px;" scrollamount="3"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 466px; top: 15px; width: 16px; height: 100px;" scrollamount="1"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 359px; top: 5px; width: 16px; height: 110px;" scrollamount="3"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 489px; top: 25px; width: 16px; height: 280px;" scrollamount="7"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 530px; top: 5px; width: 16px; height: 150px;" scrollamount="7"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 780px; top: 15px; width: 16px; height: 130px;" scrollamount="6"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 910px; top: 5px; width: 16px; height: 100px;" scrollamount="1"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 570px; top: 5px; width: 16px; height: 110px;" scrollamount="7"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 620px; top: 5px; width: 16px; height: 160px;" scrollamount="7"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 300px; top: 0px; width: 16px; height: 100px;" scrollamount="1"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 890px; top: 0px; width: 16px; height: 200px;" scrollamount="5"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 840px; top: 10px; width: 16px; height: 100px;" scrollamount="7"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 95px; top: 0px; width: 16px; height: 60px;" scrollamount="7"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 115px; top: 0px; width: 16px; height: 70px;" scrollamount="7"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 116px; top: 5px; width: 16px; height: 570px;" scrollamount="3"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 132px; top: 15px; width: 16px; height: 600px;" scrollamount="5"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 148px; top: 5px; width: 16px; height: 610px;" scrollamount="2"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 214px; top: 25px; width: 16px; height: 500px;" scrollamount="7"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 330px; top: 25px; width: 16px; height: 450px;" scrollamount="7"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 246px; top: 15px; width: 16px; height: 430px;" scrollamount="6"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 312px; top: 55px; width: 16px; height: 400px;" scrollamount="5"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 338px; top: 65px; width: 16px; height: 410px;" scrollamount="2"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 354px; top: 35px; width: 16px; height: 460px;" scrollamount="7"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 370px; top: 0px; width: 16px; height: 700px;" scrollamount="5"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 386px; top: 5px; width: 16px; height: 570px;" scrollamount="3"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 402px; top: 15px; width: 16px; height: 600px;" scrollamount="5"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 418px; top: 5px; width: 16px; height: 610px;" scrollamount="2"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 434px; top: 25px; width: 16px; height: 500px;" scrollamount="7"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 450px; top: 25px; width: 16px; height: 450px;" scrollamount="7"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 466px; top: 15px; width: 16px; height: 430px;" scrollamount="6"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 482px; top: 55px; width: 16px; height: 400px;" scrollamount="5"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 598px; top: 65px; width: 16px; height: 410px;" scrollamount="2"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 614px; top: 35px; width: 16px; height: 460px;" scrollamount="7"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 894px; top: 15px; width: 16px; height: 260px;" scrollamount="7"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 630px; top: 0px; width: 16px; height: 700px;" scrollamount="5"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 646px; top: 5px; width: 16px; height: 570px;" scrollamount="3"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 662px; top: 15px; width: 16px; height: 600px;" scrollamount="5"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 678px; top: 5px; width: 16px; height: 610px;" scrollamount="2"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 694px; top: 25px; width: 16px; height: 500px;" scrollamount="7"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 710px; top: 25px; width: 16px; height: 450px;" scrollamount="7"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 726px; top: 15px; width: 16px; height: 430px;" scrollamount="6"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 742px; top: 55px; width: 16px; height: 400px;" scrollamount="5"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 758px; top: 65px; width: 16px; height: 410px;" scrollamount="2"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 774px; top: 35px; width: 16px; height: 460px;" scrollamount="7"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 974px; top: 35px; width: 16px; height: 160px;" scrollamount="7"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 790px; top: 0px; width: 16px; height: 700px;" scrollamount="5"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 806px; top: 5px; width: 16px; height: 570px;" scrollamount="3"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 812px; top: 15px; width: 16px; height: 600px;" scrollamount="7"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 828px; top: 5px; width: 16px; height: 610px;" scrollamount="2"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 844px; top: 25px; width: 16px; height: 500px;" scrollamount="7"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 860px; top: 25px; width: 16px; height: 450px;" scrollamount="7"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 876px; top: 15px; width: 16px; height: 430px;" scrollamount="6"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 892px; top: 55px; width: 16px; height: 400px;" scrollamount="5"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 898px; top: 65px; width: 16px; height: 410px;" scrollamount="2"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 900px; top: 35px; width: 16px; height: 460px;" scrollamount="7"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 90px; top: 0px; width: 16px; height: 700px;" scrollamount="5"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 180px; top: 5px; width: 16px; height: 570px;" scrollamount="5"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 206px; top: 15px; width: 16px; height: 600px;" scrollamount="1"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 399px; top: 5px; width: 16px; height: 610px;" scrollamount="3"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 409px; top: 25px; width: 16px; height: 500px;" scrollamount="7"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 520px; top: 25px; width: 16px; height: 450px;" scrollamount="7"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 656px; top: 15px; width: 16px; height: 430px;" scrollamount="6"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 865px; top: 55px; width: 16px; height: 400px;" scrollamount="1"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 370px; top: 65px; width: 16px; height: 410px;" scrollamount="6"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 290px; top: 35px; width: 16px; height: 460px;" scrollamount="7"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 425px; top: 0px; width: 16px; height: 700px;" scrollamount="5"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 580px; top: 5px; width: 16px; height: 570px;" scrollamount="3"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 306px; top: 15px; width: 16px; height: 300px;" scrollamount="1"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 599px; top: 5px; width: 16px; height: 610px;" scrollamount="3"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 609px; top: 25px; width: 16px; height: 180px;" scrollamount="7"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 1070px; top: 25px; width: 16px; height: 450px;" scrollamount="7"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 950px; top: 15px; width: 16px; height: 430px;" scrollamount="6"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 260px; top: 55px; width: 16px; height: 200px;" scrollamount="1"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 770px; top: 65px; width: 16px; height: 210px;" scrollamount="7"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 690px; top: 35px; width: 16px; height: 360px;" scrollamount="7"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 925px; top: 0px; width: 16px; height: 50px;" scrollamount="7"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 225px; top: 0px; width: 16px; height: 50px;" scrollamount="5"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 380px; top: 5px; width: 16px; height: 70px;" scrollamount="3"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 806px; top: 15px; width: 16px; height: 100px;" scrollamount="1"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 399px; top: 5px; width: 16px; height: 110px;" scrollamount="3"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 909px; top: 25px; width: 16px; height: 280px;" scrollamount="7"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 570px; top: 5px; width: 16px; height: 150px;" scrollamount="7"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 750px; top: 15px; width: 16px; height: 130px;" scrollamount="6"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 660px; top: 5px; width: 16px; height: 100px;" scrollamount="1"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 570px; top: 5px; width: 16px; height: 110px;" scrollamount="7"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 690px; top: 5px; width: 16px; height: 60px;" scrollamount="7"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 965px; top: 0px; width: 16px; height: 50px;" scrollamount="5"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 1000px; top: 0px; width: 16px; height: 50px;" scrollamount="7"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 1010px; top: 0px; width: 16px; height: 150px;" scrollamount="7"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 390px; top: 5px; width: 16px; height: 70px;" scrollamount="3"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 466px; top: 15px; width: 16px; height: 100px;" scrollamount="1"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 359px; top: 5px; width: 16px; height: 110px;" scrollamount="3"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 489px; top: 25px; width: 16px; height: 280px;" scrollamount="7"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 530px; top: 5px; width: 16px; height: 150px;" scrollamount="7"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 780px; top: 15px; width: 16px; height: 130px;" scrollamount="6"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 910px; top: 5px; width: 16px; height: 100px;" scrollamount="1"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 570px; top: 5px; width: 16px; height: 110px;" scrollamount="7"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 620px; top: 5px; width: 16px; height: 160px;" scrollamount="7"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 300px; top: 0px; width: 16px; height: 100px;" scrollamount="1"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 890px; top: 0px; width: 16px; height: 200px;" scrollamount="5"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 840px; top: 10px; width: 16px; height: 100px;" scrollamount="7"><span style="color: #fff;">*</span></marquee>
| [+/-] |
Contando los días que faltan para Navidad |
En SpringWidgets podemos obtener un árbol de Navidad personalizado (bolas, adornos, colores, nieve...)que muestra además los días que faltan para navidad.
| [+/-] |
Fondos de Navidad |
Ya estamos en Diciembre, dentro de nada llega la Navidad y algun@s seguro que están pensando en adornar sus blogs con este motivo.
Hoy mismo Manu me pedía en un comentario alguna cosilla para adornar su blog de cara a estas fiestas, el me pedía la dirección de alguna web con fondos navideños. En realidad, conozco algunas, pero he preferido poner aquí los fondos navideños que he encontrado y que más me han llamado la atención.
Para colocarlos, buscamos en la parte de edición, HTML de nuestra plantilla este código:
body {
background:$bgcolor;
Algunos tendréis seguramente el color de fondo añadido directamente en la plantilla, así que se verá más o menos así:
body {
background:#2A4359;
Añadiremos el código para la imagen de fondo, justo antes del cierre (;):
body {
background:$bgcolor url(Dirección-url de tu imagen ) repeat;
Fondos navideños animados
Para conseguir su dirección (url) pincha con el ratón derecho sobre la imagen escogida y en propiedades copia su url (están subidos a Photobucket )
Fondos navideños estáticos
Suscribirse a:
Entradas (Atom)