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

Aplicaciones para blog

Si entras en esta pagina, encontraras una gran variedades de cosas que podrás decorar en tu blog.

http://www.glitter-graphics.com/


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:
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.

























































































































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/





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/

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 :



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:


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.

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:

                                                                     


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:

                             












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!