Amor de Amistad: Adorno

Showing posts with label Adorno. Show all posts

Adornar el blog con campanas chinas

Posted by Mrs Daddy at 7:47 PM

Ir a Diseño, Edición de HTML y justo abajo de:

Plantillas viejas: <body>

Plantillas nuevas: <body expr:class='"loading" + data:blog.mobileClass'>

Poner el siguiente código:

<script src='http://anfel.webcindario.com/chino/SWFLayer.js' type='text/javascript'/>
<script src='http://anfel.webcindario.com/chino/wind_chime.js' type='text/javascript'/>

En Firefox pueden tardar un poco en aparecer.

Coronas de reyes en PNG doradas con fondo transparente

Posted by Mrs Daddy at 10:16 PM

Son 27 coronas para decorar en formato PNG doradas con fondo transparente.

Botón derecho del mouse, Guardar imagen como...

Para cambiar de color es muy sencillo con un programa como photoshop.

Seleccionar con la herramienta varita mágica y luego pintar con la herramienta bote de pintura con el color que mas les guste.

O seleccionar la capa, botón derecho de mouse sobre la imagen, elegir gama de colores, seleccionar con el cuentagotas el color dorado, Ok y luego pintar con la herramienta bote de pintura con el color que mas les guste.

Crear un peeling (esquina doblada) a la izquierda

Posted by Mrs Daddy at 10:00 AM

Ya vimos en otra entrada cómo crear el efecto en la parte superior derecha.

Ahora veremos cómo se hace para mostrar el efecto en la parte superior izquierda.

Ver ejemplo:

Los cambios con el anterior son los siguientes:

Se muestra a la izquierda.
Podemos elegir la distancia a mostrar desde arriba y desde la izquierda.
Podemos dejarla fija arriba y que se deslize con la página.
Podemos mostrar un texto desplazandose por la imagen chica.
Podemos mostrar un texto desplazandose por la imagen grande.

¿Cómo se hace...?

Ahora copiaremos todo el contenido del siguiente código:

Peel-top-left.txt

Lo copiaremos en un editor de texto. (puede ser el Bloc de notas)

Lo personalizamos de la siguiente forma:

// Distancia desde arriba
var top = "0px"
//
// Distancia desde la izquierda
var left = "0px"
//
//
// cambiar: absolute: fijo arriba - fixed: se mueve con la página
var position = "position:fixed;"
//
// Flash pequeño
var smallflash ="http://img61.xooimage.com/files/1/9/4/smalltopl-23d29d8.swf"
//
// Imagen pequeña
var smallimg ="http://img61.xooimage.com/files/1/2/6/rss-0-23d2a54.png"
//
// Texto en la imagen pequeña
var scrolltxtsmall = "Suscribete"
//
// Tamaño del texto en imagen pequeña
var txtsizesmall = "20"
//
// Color del texto en imagen pequeña
var textcolorsmall = "FFFFFF"
//
// IMAGEN GRANDE CUANDO ABRIMOS
//
// Flash grande
var bigflash = "http://img51.xooimage.com/files/7/7/0/bigtopl-23d29cb.swf"
//
// Imagen grande
var bigimg = "http://img52.xooimage.com/files/8/5/4/rss-1-23d2a4f.jpg"
//
// URL al darle clic a la imagen grande
var urlval = "http://feedburner.google.com/fb/a/mailverify?uri=blogspot/qygH"
//
// Forma de abrir
var owindow = "blank" // blank: nueva pestaña - self: en la misma
//
// Texto en imagen grande
var scrolltxtbig = " Suscribete para estar siempre actualizado..."
//
// Tamaño del texto en imagen grande
var txtsizebig = "50"
//
// Color del texto en imagen grande
var textcolorbig = "ff0000"
//

Los archivos flash pueden descargarlos y subirlos a su propio servidor:

Ya terminado de personalizar cambiando imágenes, texto, link, etc..., lo guardamos.

Al guardarlo ponerle el nombre con terminación "js"

Ejemplo: peel-top-left.js

Ahora lo subimos a un servidor.

Puede ser Xooimage.com

Si no saben como, ver el siguiente manual: Tutorial Xooimage

Ya subiro el archivo "js"

Vamos a Diseño, Edición de HTML y justo arriba de </body>

Poner el código así:

<script src='URL del archivo.js'/>

Cambiar: URL del archivo.js por el link propio.

Hacer Vista Previa y si todo quedo bien Guardar.

Tener en cuenta que la URL tiene que terminar en .js y no en .js/

Si lo suben a xooimage.com es el link generado al hacer clic sobre "Télécharger".

Música de Navidad en el blog

Posted by Mrs Daddy at 8:23 AM

Duracion del tema 1 minuto.

Opción 1:

Reproducción automática y no para nunca.

<div align="center">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="62" height="28">
<param name="movie" value="http://img51.xooimage.com/files/3/f/a/wewishu-autoplay-loop-23ab170.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<embed src="http://img51.xooimage.com/files/3/f/a/wewishu-autoplay-loop-23ab170.swf"
quality="high"
type="application/x-shockwave-flash"
WMODE="transparent"
width="62"
height="28"
pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</div>

Opción 2:

Reproducción automática y para al terminar.

<div align="center">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="62" height="28">
<param name="movie" value="http://img60.xooimage.com/files/7/f/f/wewishu-si-no-23ab0ce.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<embed src="http://img60.xooimage.com/files/7/f/f/wewishu-si-no-23ab0ce.swf"
quality="high"
type="application/x-shockwave-flash"
WMODE="transparent"
width="62"
height="28"
pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</div>

Opción 3:

Reproducción al hacer clic y para al terminar. (ver ejemplo arriba)

<div align="center">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="62" height="28">
<param name="movie" value="http://img51.xooimage.com/files/d/c/d/wewishu-no-no-23ab130.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<embed src="http://img51.xooimage.com/files/d/c/d/wewishu-no-no-23ab130.swf"
quality="high"
type="application/x-shockwave-flash"
WMODE="transparent"
width="62"
height="28"
pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</div>

Opción 4:

Reproducción automática y para al terminar. (No se muestra el reproductor)

<div align="center">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="0" height="0">
<param name="movie" value="http://img60.xooimage.com/files/7/f/f/wewishu-si-no-23ab0ce.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<embed src="http://img60.xooimage.com/files/7/f/f/wewishu-si-no-23ab0ce.swf"
quality="high"
type="application/x-shockwave-flash"
WMODE="transparent"
width="1"
height="1"
pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</div>

Opción 5:

Reproducción automática y no para nunca. (No se muestra el reproductor)

<div align="center">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="0" height="0">
<param name="movie" value="http://img51.xooimage.com/files/3/f/a/wewishu-autoplay-loop-23ab170.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<embed src="http://img51.xooimage.com/files/3/f/a/wewishu-autoplay-loop-23ab170.swf"
quality="high"
type="application/x-shockwave-flash"
WMODE="transparent"
width="1"
height="1"
pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</div>

Las opciones 1, 2, 3, 4 y 5 las pueden poner en:

Elementos de la página y añadir un gadget HTML/Javascript.

Las opciones 4 y 5 también pueden ir en:

Edición de HTML, arriba de </body> (al final de la plantilla)

Cielo estrellado

Posted by Mrs Daddy at 3:32 PM

Me pregunta Corina administradora del blog Hogar Crecer por la entrada de Efecto meteorito.

"Me podrás decir si los cuadraditos de este efecto, son caracteres unicode? Se pueden cambiar por una estrella o algo así?"

Me anime y modifique el código.

Ahora en lugar de los cuadraditos va a mostrar una imagen.

En el ejemplo puse una imagen de una pequeña estrella, la que se puede cambiar por otra.

Acá te dejo el código modificado.

Ir a Diseño, Edición de HTML y justo arriba de </head>

Poner el siguiente código:

<script type="text/javascript">
//http://loseasi.blogspot.com
//<![CDATA[
if ((document.getElementById) &&
window.addEventListener || window.attachEvent){

(function(){

//Configure here.

var numberOfStars = 20;

var starSpeed = 0.9;

var inTheFace = 5;

var setTimeOutSpeed = 30;

//End config.

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";

//Floor or round anything possible for Netscape.
//Slashes CPU strain in Opera too.

for (i = 0; i < numberOfStars; i++){
document.write('<div id="stars'+(idx+i)+'"style="position:absolute;top:0px;left:0px;z-index:99999999999999999;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguzuSBJse3n6kmGX-Tfe7FA3AL6vIlfIAgkReYklyiWgPvccjtJS4R_SdfHUtqZYzynSjQ-_aYnQIxmupFyeC6NNUn6l9BxH3_D682zXcSJwvQXW8IEYuUaQqSBdKx5jFebOpuAXTV7dg/s1600/star.png" class="stars" /></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] = 50 * (dfc[s] + inTheFace) / 100;
vel[s] = starSpeed * 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 < numberOfStars; 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 < numberOfStars; i++){
strs[i] = document.getElementById("stars"+(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);
}
})();
}
document.documentElement.style.overflowX="hidden";
//]]>
</script>

Cambiar la cantidad de imágenes donde dice: (var numberOfStars = 20;)

Cambiar las velocidades en: (var starSpeed = 0.9;) y (var setTimeOutSpeed = 30;)

Cambiar la imagen: (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguzuSBJse3n6kmGX-Tfe7FA3AL6vIlfIAgkReYklyiWgPvccjtJS4R_SdfHUtqZYzynSjQ-_aYnQIxmupFyeC6NNUn6l9BxH3_D682zXcSJwvQXW8IEYuUaQqSBdKx5jFebOpuAXTV7dg/s1600/star.png)

Ver Ejemplo: