Si entras en esta pagina, encontraras una gran variedades de cosas que podrás decorar en tu blog.
http://www.glitter-graphics.com/
Mostrando entradas con la etiqueta Tutorial. Mostrar todas las entradas
Mostrando entradas con la etiqueta Tutorial. Mostrar todas las entradas
sábado, 7 de enero de 2017
Texto arcoiris
Esta es una aplicación en donde el texto del mensaje que vayas a poner cambia de color a otro .Copia el texto y lo que esta en naranja pon el mensaje que quieras poner:
<b>
<script>
/*
RAINBOW TEXT Script by Matt Hedgecoe (c) 2002
Featured on JavaScript Kit
For this script, visit http://www.javascriptkit.com
*/
// ********** MAKE YOUR CHANGES HERE
var text="RAINBOW TEXT" // YOUR TEXT
var speed=80 // SPEED OF FADE
// ********** LEAVE THE NEXT BIT ALONE!
if (document.all||document.getElementById){
document.write('<span id="highlight">' + text + '</span>')
var storetext=document.getElementById? document.getElementById("highlight") : document.all.highlight
}
else
document.write(text)
var hex=new Array("00","14","28","3C","50","64","78","8C","A0","B4","C8","DC","F0")
var r=1
var g=1
var b=1
var seq=1
function changetext(){
rainbow="#"+hex[r]+hex[g]+hex[b]
storetext.style.color=rainbow
}
function change(){
if (seq==6){
b--
if (b==0)
seq=1
}
if (seq==5){
r++
if (r==12)
seq=6
}
if (seq==4){
g--
if (g==0)
seq=5
}
if (seq==3){
b++
if (b==12)
seq=4
}
if (seq==2){
r--
if (r==0)
seq=3
}
if (seq==1){
g++
if (g==12)
seq=2
}
changetext()
}
function starteffect(){
if (document.all||document.getElementById)
flash=setInterval("change()",speed)
}
starteffect()
</script>
</b>
Cursor de texto
Esta aplicación es bastante interesante, en donde tu cursor puede llevar mensajes .
Copia este código :
<style type='text/css'>
/* Texto giratorio que sigue al cursor */
#outerCircleText {
font-style: italic;
font-weight: bold;
font-family: verdana, arial; /* Tipo de letra */
color: #000; /* Color del texto */
/* No editar esta area */
position: absolute;top: 0;left: 0;z-index: 3000;cursor: default;}
#outerCircleText div {position: relative;}
#outerCircleText div div {position: absolute;top: 0;left: 0;text-align: center;}
</style>
<script type='text/javascript'>
//<![CDATA[
/* Circling text trail- Tim Tilton
Website: http://www.tempermedia.com/
Visit: http://www.dynamicdrive.com/ for Original Source and tons of scripts
Modified Here for more flexibility and modern browser support
Modifications as first seen in http://www.dynamicdrive.com/forums/
username:jscheuer1 - This notice must remain for legal use
*/
;(function(){
// Mensaje
var msg = "obedescan mis ordenes";
// Tamaño de la letra
var size = 22;
// Determina si es ovalado o circular, 1 es circular, 2 es ovalado
var circleY = 0.75; var circleX = 2;
// Espacio entre cada letra
var letter_spacing = 5;
// Diametro del circulo
var diameter = 10;
// Velocidad de rotacion
var rotation = 0.4;
// Velocidad de reaccion
var speed = 0.3;
////////////////////// No editar nada mas //////////////////////
if (!window.addEventListener && !window.attachEvent || !document.createElement) return;
msg = msg.split('');
var n = msg.length - 1, a = Math.round(size * diameter * 0.208333), currStep = 20,
ymouse = a * circleY + 20, xmouse = a * circleX + 20, y = [], x = [], Y = [], X = [],
o = document.createElement('div'), oi = document.createElement('div'),
b = document.compatMode && document.compatMode != "BackCompat"? document.documentElement : document.body,
mouse = function(e){
e = e || window.event;
ymouse = !isNaN(e.pageY)? e.pageY : e.clientY; // y-position
xmouse = !isNaN(e.pageX)? e.pageX : e.clientX; // x-position
},
makecircle = function(){ // rotation/positioning
if(init.nopy){
o.style.top = (b || document.body).scrollTop + 'px';
o.style.left = (b || document.body).scrollLeft + 'px';
};
currStep -= rotation;
for (var d, i = n; i > -1; --i){ // makes the circle
d = document.getElementById('iemsg' + i).style;
d.top = Math.round(y[i] + a * Math.sin((currStep + i) / letter_spacing) * circleY - 15) + 'px';
d.left = Math.round(x[i] + a * Math.cos((currStep + i) / letter_spacing) * circleX) + 'px';
};
},
drag = function(){ // makes the resistance
y[0] = Y[0] += (ymouse - Y[0]) * speed;
x[0] = X[0] += (xmouse - 20 - X[0]) * speed;
for (var i = n; i > 0; --i){
y[i] = Y[i] += (y[i-1] - Y[i]) * speed;
x[i] = X[i] += (x[i-1] - X[i]) * speed;
};
makecircle();
},
init = function(){ // appends message divs, & sets initial values for positioning arrays
if(!isNaN(window.pageYOffset)){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
} else init.nopy = true;
for (var d, i = n; i > -1; --i){
d = document.createElement('div'); d.id = 'iemsg' + i;
d.style.height = d.style.width = a + 'px';
d.appendChild(document.createTextNode(msg[i]));
oi.appendChild(d); y[i] = x[i] = Y[i] = X[i] = 0;
};
o.appendChild(oi); document.body.appendChild(o);
setInterval(drag, 25);
},
ascroll = function(){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
window.removeEventListener('scroll', ascroll, false);
};
o.id = 'outerCircleText'; o.style.fontSize = size + 'px';
if (window.addEventListener){
window.addEventListener('load', init, false);
document.addEventListener('mouseover', mouse, false);
document.addEventListener('mousemove', mouse, false);
if (/Apple/.test(navigator.vendor))
window.addEventListener('scroll', ascroll, false);
}
else if (window.attachEvent){
window.attachEvent('onload', init);
document.attachEvent('onmousemove', mouse);
};
})();
//]]>
</script>
Lo que esta en naranja lo puedes cambiar que son la fuente de letra, el color y el mensaje que vayas a poner.
Si quieres saber cambiar el color de letra tienes que ir a esta pagina y copiar el codigo ej:
Copia este código :
<style type='text/css'>
/* Texto giratorio que sigue al cursor */
#outerCircleText {
font-style: italic;
font-weight: bold;
font-family: verdana, arial; /* Tipo de letra */
color: #000; /* Color del texto */
/* No editar esta area */
position: absolute;top: 0;left: 0;z-index: 3000;cursor: default;}
#outerCircleText div {position: relative;}
#outerCircleText div div {position: absolute;top: 0;left: 0;text-align: center;}
</style>
<script type='text/javascript'>
//<![CDATA[
/* Circling text trail- Tim Tilton
Website: http://www.tempermedia.com/
Visit: http://www.dynamicdrive.com/ for Original Source and tons of scripts
Modified Here for more flexibility and modern browser support
Modifications as first seen in http://www.dynamicdrive.com/forums/
username:jscheuer1 - This notice must remain for legal use
*/
;(function(){
// Mensaje
var msg = "obedescan mis ordenes";
// Tamaño de la letra
var size = 22;
// Determina si es ovalado o circular, 1 es circular, 2 es ovalado
var circleY = 0.75; var circleX = 2;
// Espacio entre cada letra
var letter_spacing = 5;
// Diametro del circulo
var diameter = 10;
// Velocidad de rotacion
var rotation = 0.4;
// Velocidad de reaccion
var speed = 0.3;
////////////////////// No editar nada mas //////////////////////
if (!window.addEventListener && !window.attachEvent || !document.createElement) return;
msg = msg.split('');
var n = msg.length - 1, a = Math.round(size * diameter * 0.208333), currStep = 20,
ymouse = a * circleY + 20, xmouse = a * circleX + 20, y = [], x = [], Y = [], X = [],
o = document.createElement('div'), oi = document.createElement('div'),
b = document.compatMode && document.compatMode != "BackCompat"? document.documentElement : document.body,
mouse = function(e){
e = e || window.event;
ymouse = !isNaN(e.pageY)? e.pageY : e.clientY; // y-position
xmouse = !isNaN(e.pageX)? e.pageX : e.clientX; // x-position
},
makecircle = function(){ // rotation/positioning
if(init.nopy){
o.style.top = (b || document.body).scrollTop + 'px';
o.style.left = (b || document.body).scrollLeft + 'px';
};
currStep -= rotation;
for (var d, i = n; i > -1; --i){ // makes the circle
d = document.getElementById('iemsg' + i).style;
d.top = Math.round(y[i] + a * Math.sin((currStep + i) / letter_spacing) * circleY - 15) + 'px';
d.left = Math.round(x[i] + a * Math.cos((currStep + i) / letter_spacing) * circleX) + 'px';
};
},
drag = function(){ // makes the resistance
y[0] = Y[0] += (ymouse - Y[0]) * speed;
x[0] = X[0] += (xmouse - 20 - X[0]) * speed;
for (var i = n; i > 0; --i){
y[i] = Y[i] += (y[i-1] - Y[i]) * speed;
x[i] = X[i] += (x[i-1] - X[i]) * speed;
};
makecircle();
},
init = function(){ // appends message divs, & sets initial values for positioning arrays
if(!isNaN(window.pageYOffset)){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
} else init.nopy = true;
for (var d, i = n; i > -1; --i){
d = document.createElement('div'); d.id = 'iemsg' + i;
d.style.height = d.style.width = a + 'px';
d.appendChild(document.createTextNode(msg[i]));
oi.appendChild(d); y[i] = x[i] = Y[i] = X[i] = 0;
};
o.appendChild(oi); document.body.appendChild(o);
setInterval(drag, 25);
},
ascroll = function(){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
window.removeEventListener('scroll', ascroll, false);
};
o.id = 'outerCircleText'; o.style.fontSize = size + 'px';
if (window.addEventListener){
window.addEventListener('load', init, false);
document.addEventListener('mouseover', mouse, false);
document.addEventListener('mousemove', mouse, false);
if (/Apple/.test(navigator.vendor))
window.addEventListener('scroll', ascroll, false);
}
else if (window.attachEvent){
window.attachEvent('onload', init);
document.attachEvent('onmousemove', mouse);
};
})();
//]]>
</script>
Lo que esta en naranja lo puedes cambiar que son la fuente de letra, el color y el mensaje que vayas a poner.
Si quieres saber cambiar el color de letra tienes que ir a esta pagina y copiar el codigo ej:
HEX
#D2456C
Este seria un codigo de un color .
Entra en esta pagina: http://htmlcolorcodes.com/es/
jueves, 20 de octubre de 2016
Separadores de blog gif Kawaii
Todos son gif , perfectos para separar los post de tu blogs o webs , solo tienes que copiarlo y pegarlo.
domingo, 16 de octubre de 2016
Como poner flecha para arriba en blog
Página código flechas: http://www.scrolltotop.com
Entrada con el código: http://consejosparanovatos.blogspot.c...
lunes, 15 de agosto de 2016
Fotomontaje y montaje blog en gif animación
Buenas ^^ os voy a enseñar una pagina muy interesante en donde podréis crear imágenes divertidas , retocarlas y crear texto gif , para el blog o para el facebook.
Esta es la pagina de enlace : http://es.grafme.com/
Esta es la pagina de enlace : http://es.grafme.com/
viernes, 8 de abril de 2016
Accesorio de blog
Hola esta es una pagina muy buena aunque esta en japones en donde encontraras cosas que puedan dar a tu blog un toque personal , como efectos ,calendario, juegos, mp3 etc.
Solo hay que ir a la pagina ,pinchar en lo que os interesa , copiar el codigo y pegarlo a HTML/Javascript.
Enlace: http://bpmaker.giffy.me/
Solo hay que ir a la pagina ,pinchar en lo que os interesa , copiar el codigo y pegarlo a HTML/Javascript.
Enlace: http://bpmaker.giffy.me/
viernes, 15 de enero de 2016
miércoles, 13 de enero de 2016
Galeria de imagenes en movimiento
Este programa Html5maker sirve para hacer que las imágenes que pongamos estén en movimiento como una diapositivas, lo puedes poner en tu blog para que sea mas kawaii , también hace que el blog sea mas llamativo.
Esta es la pagina: http://html5maker.com/#/
Os dejo un vídeo que explica los pasos que tenéis que hacer :
Esta es la pagina: http://html5maker.com/#/
Os dejo un vídeo que explica los pasos que tenéis que hacer :
Música en el blog
Este programa es muy interesante ya que puedes coger la música que te gusta de youtube y ponerla en tu blog , totalmente gratis a demás que da a tu blog un look mas llamativo y lindo .
Esta esta pagina : http://scmplayer.net/
Os pondré un vídeo en que explica los pasos que tenéis que hacer , para poner este programa en vuestro blog:
Esta esta pagina : http://scmplayer.net/
Os pondré un vídeo en que explica los pasos que tenéis que hacer , para poner este programa en vuestro blog:
Relojes, calendarios y contador de visitas
Bueno estas cositas sirven para decorar un poquito nuestro blog ^^ , lo puedes encontrar en estas paginas:
Relojes y contador de visitas:
http://www.websmultimedia.com/contador-de-visitas-gratis
Relojes y calendarios:
http://www.cuteki.es/widgets/relojes/
http://www.gifss.com/
Solo tienes que copiar el codigo , ir a diseño y pegarlo en HTML/Javascript y lo guardas.
Relojes y contador de visitas:
http://www.websmultimedia.com/contador-de-visitas-gratis
Relojes y calendarios:
http://www.cuteki.es/widgets/relojes/
http://www.gifss.com/
Solo tienes que copiar el codigo , ir a diseño y pegarlo en HTML/Javascript y lo guardas.
Favicon
Algunos pensaran ¿que es eso ?, pues el favicon es el dibujo que sale en la dirección de tu web, aquí te enseñare como cambiarlo por un dibujo lindo .
1-Ir a diseño>>Favicon>>Editar>>Examinar>>pones la imagen que te descargaste >>Guardar.¡LISTO!

Aquí dejo algunos favicon como ejemplo:

1-Ir a diseño>>Favicon>>Editar>>Examinar>>pones la imagen que te descargaste >>Guardar.¡LISTO!
Aquí dejo algunos favicon como ejemplo:
Picmonkey( Programa editor de imagenes)
Es un programa online que esta bastante bien , en el puedes crear creaciones muy chulas y bonitas, después de ver estos vídeos ya cogeréis el truco a este programa.
Esta es la pagina:http://www.picmonkey.com/
Os pondré vídeos en donde explica muy bien lo que tiene el programa:
Este vídeo explica como hacer cabeceras para nuestro blog:
Estos vídeos explica como hacer retoques a una imagen :
Este video esplica como hacer un collage de imagenes en picmonkey:
Esta es la pagina:http://www.picmonkey.com/
Os pondré vídeos en donde explica muy bien lo que tiene el programa:
Este vídeo explica como hacer cabeceras para nuestro blog:
Estos vídeos explica como hacer retoques a una imagen :
Este video esplica como hacer un collage de imagenes en picmonkey:
Fondos y cabeceras para el blog
Fondos:
Si quieres poner una imagen en el fondo de tu blog , solo tienes que hacer esto ir a Diseño>>Diseñador de plantilla>>Fondo>>subir imagen >>Finalizar.
Cabecera:
Si quieres poner una imagen donde esta el titulo de tu blog , que seria la cabecera , solo tienes que hacer esto ir a Diseño>>Nombre del blog>>editar.

Te saldrá este cuadro , solo tienes que dar en imagen desde tu equipo o desde la web , puedes elegir una de las dos , después carga la imagen y le das guardar .También puedes describir tu blog,¡Listo!

Suscribirse a:
Entradas (Atom)































