Ver entrada completa. Sustituir blink con JavaScript

 La etiqueta blink, es utilizada en ocasiones para mostrar un texto parpadeando.

También se puede utilizar el valor blink de la propiedad text-decoration, que podemos asignar a un texto por medio de un estilo CSS.


El problema con utilizar la etiqueta o valor blink es que no funciona con Internet Explorer.

Les voy a mostrar 3 formas que podemos sustituir blink con JavaScript.

Forma 1:

Ir a Diseño, Elementos de la página (vieja interfaz) y añadir un gadget HTML/Javascript.

Poner el siguiente código:

<div id='blink' style="text-align:center;">

<a href="http://vitua.blogspot.com/" target="_blank"><span style="color: red;font-size:18px;">Visite:</span> <span style="color: blue;font-size:24px;">VituaRadio</span></a>

</div>

<script language="JavaScript">
function blink_uno() {
document.getElementById('blink').style.visibility='visible';
setTimeout('blink_dos()',1000);
}
function blink_dos() {
document.getElementById('blink').style.visibility='hidden';
setTimeout('blink_uno()',1000);
}
blink_uno();
</script>

Lo que pongas dentro del div con la ID blink va a parpadear.

Puede ser texto, imagen, etc...

Yo en el ejemplo puse un enlace centrado con distinto tamaño y color en el texto.

La velocidad se regula cambiando 1000, cuando mayor sea el numero mas lento será.
(1000 = 1 Segundo.)

Ejemplo:

Visite: VituaRadio

Ver entrada completa. Agregar mensaje en las entradas: "Has visto el post x veces"

Ir a Diseño (vieja interfaz) o Plantilla (nueva interfaz), Edición de HTML, Expandir plantillas de artilugios.


El código se va a mostrar dentro de los post.

Puede ir abajo de:

<div class='post-footer-line post-footer-line-2'>

O donde lo prefieran mostrar.

Poner el siguiente código:
... ¡¡Si estas viendo esto!!, es porque la entrada no contiene texto, puede contener solo imágenes o un vídeo. Da clic sobre "Continuar leyendo", o en el título para ver su contenido ...

Continuar leyendo »

Ver entrada completa. Caja de texto con aviso o mensaje en movimiento tipo marquee

Paso 1:

Ir a Diseño (vieja interfaz) o Plantilla (nueva interfaz), Edición de HTML y justo arriba de </head>

Poner el siguiente código:

<script language="JavaScript">
//<![CDATA[
var scrtxt= "AQUI ESCRIBE EL PRIMER TEXTO"
var message= new initArray("AQUI ESCRIBE EL SEGUNDO TEXTO QUE SE MOSTRARÁ TODO EL TIEMPO");
var lentxt= scrtxt.length;
var width_Vku= 100;
var countb= 14;
var count= width_Vku+lentxt;
var nmsg=1;
function initArray() {
  this.length= initArray.arguments.length
  for (var i= 0; i < this.length; i++)
  this[i+1]= initArray.arguments[i]
}
function shift() {
  var outtxt= ""
  var  dif= count-lentxt;
  if (dif>0) {
    for (var i= 1; i<=dif; i++) {
      outtxt= outtxt+" "}
    outtxt= outtxt+scrtxt.substring(0,width_Vku-dif)
  }
  else {
    outtxt= scrtxt.substring(-dif,lentxt)
  }
  document.scrform_Vku.scrtext_Vku.value= outtxt
}
function scroll_Vku() {
  var n_Vku;
  if ((countb>0) && (count-lentxt==0)) {count=0}
  if (count-->0) {
    shift();
    setTimeout("scroll_Vku()",70) // VELOCIDAD DESPLAZAMIENTO
  }
  else {
    if (countb-->0) {
      if ((countb % 2)==0) {
        document.scrform_Vku.scrtext_Vku.value= " "
        setTimeout("scroll_Vku()",300)
        }
      else {
        document.scrform_Vku.scrtext_Vku.value= scrtxt;
        if (countb==1) {
          setTimeout("scroll_Vku()",3000)}  // TIEMPO CERRAR PRIMER TEXTO
        else {
          setTimeout("scroll_Vku()",300)}
      }
    }
    else {
      now= new Date();
      n_Vku= 1+Math.floor(nmsg*Math.abs(Math.sin(now.getTime())));
      if (n_Vku>nmsg) { n_Vku= nmsg}
      scrtxt= message[n_Vku];
      lentxt= scrtxt.length;
      count= lentxt+width_Vku+1;
      setTimeout("scroll_Vku()",300)
    }
  }
}
window.onload=scroll_Vku
//]]>
</script>

Camiar el primer y el segundo texto.

Paso 2:

El siguiente código va en el lugar que se quiera mostrar.

Puede ser en un gadget HTML/Javascript.

<form name="scrform_Vku" onSubmit="0">
      <input type="text" name="scrtext_Vku" style="font-family: 'Arial'; color:#6699FF; background: transparent; font-weight: bold; font-size:15px; width:550px; text-align:center; border:0"/></form> 

Adaptamos a gusto cambiando el estilo. ... ¡¡Si estas viendo esto!!, es porque la entrada no contiene texto, puede contener solo imágenes o un vídeo. Da clic sobre "Continuar leyendo", o en el título para ver su contenido ...

Continuar leyendo »

Ver entrada completa. Enlace con efecto expandir ventana

Ir a Diseño (vieja interfaz) o Plantilla (nueva interfaz), Edición de HTML y justo arriba de </head>

Poner el siguiente código:

<script type="text/javascript">
//<![CDATA[
function expand() {
for(x = 0; x < 50; x++) {
window.moveTo(screen.availWidth * -(x - 50) / 100, screen.availHeight * -(x - 50) / 100);
window.resizeTo(screen.availWidth * x / 50, screen.availHeight * x / 50);
}
window.moveTo(0,0);
window.resizeTo(screen.availWidth, screen.availHeight);
}
//]]>
</script>

Guardar Plantilla.

Ahora para darle el efecto a un link hay que agregarle:

onClick="expand()"

Queda así:

<a href="URL DE LA PÁGINA..." onClick="expand()">Ir a la Página</a>

Puede hacer esto como una broma.

<div style="text-align: center;">
<a href="javascript:void(0);" onClick="expand()"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYs4aF50QLSdYd9vsov7isOXSqaoaeQ2vmfDvKSy4MwgQOwzgO4K3ffap0tR5Eu36CYihzMZ-BJbbzYfOeeSMKRf0JEHvB9Uw-pgqb3KBsIaBcrTl-MDj2m4liQo43voK3NVMxBdBDETw/s320/images.jpeg"/></a></div>

<div style="text-align: center;">
<a href="javascript:void(0);" onClick="expand()"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-wi2cKrpfz49BPS5klwI0t6wlJ5qa7L3Uq9yMcnIvkHSP2QdwFT9JveD5lBc3rkc3-aojaNEWNvSebvTeY-VwCl5ZiV8Y21Bm1VJQThbDWh8zChEEQIEGnDjiZZL9-ffCZzXpdoRSuKo/s1600/no-tocar.png" /></a></div>

... ¡¡Si estas viendo esto!!, es porque la entrada no contiene texto, puede contener solo imágenes o un vídeo. Da clic sobre "Continuar leyendo", o en el título para ver su contenido ...

Continuar leyendo »

Ver entrada completa. Texto Arco Iris

Ir a Diseño, Elementos de la página (vieja interfaz) y añadir un gadget HTML/Javascript.

Poner el siguiente código:

El conocimiento es bueno sólo si se comparte. Nada es imposible para una mente dispuesta. Espero que este blog ayude a aquellos que están buscando conocimientos, al igual que yo.
Fuente:

<script language="JavaScript">
/* http://loseasi.blogspot.com
http://loseasi.blogspot.com/2011/09/texto-arco-iris.html
By: Vku. */
function CrearArray(n) {
this.length = n;
for (var i = 1; i <= n; i++)
this[i] = i - 1;
this[11] = "A";
this[12] = "B";
this[13] = "C";
this[14] = "D";
this[15] = "E";
this[16] = "F";
return this;
}
hx = new CrearArray(16);
function Hexadecimal(x) {
if (x < 17) x = 16;
var alto = x / 16;
var s = alto+"";
s = s.substring(0, 2);
alto = parseInt(s, 10);
var left = hx[alto + 1];
var low = x - alto * 16;
if (low < 1) low = 1;
s = low + "";
s = s.substring(0, 2);
low = parseInt(s, 10);
var derecha = hx[low + 1];
var cadena = left + "" + derecha;
return cadena;
}
function ArcoIris(texto) {
texto = texto.substring(0, texto.length);
color_d1 = 255;
mul = color_d1 / texto.length;
for(var i = 0; i < texto.length; i++) {
color_d1 = 255*Math.sin(i / (texto.length / 3));
color_h1 = Hexadecimal(color_d1);
color_d2 = mul * i;
color_h2 = Hexadecimal(color_d2);
k = texto.length;
j = k - i;
if (j < 0) j = 0;
color_d3 = mul * j;
color_h3 = Hexadecimal(color_d3);
document.write("<FONT size=7 color=\"#" + color_h3 + color_h1 + color_h2 + "\">" + texto.substring(i, i + 1) + "</FONT>");
} }
ArcoIris("Texto Arco Iris");
</script>

Cambiar texto = Texto Arco Iris

Altura del texto = size=7 (Valor de 1 a 7)

Mover el gadget al lugar mas apropiado. ... ¡¡Si estas viendo esto!!, es porque la entrada no contiene texto, puede contener solo imágenes o un vídeo. Da clic sobre "Continuar leyendo", o en el título para ver su contenido ...

Continuar leyendo »

Ver entrada completa. Mensaje dentro de un campo textarea

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

Poner el siguiente código:

El conocimiento es bueno sólo si se comparte. Nada es imposible para una mente dispuesta. Espero que este blog ayude a aquellos que están buscando conocimientos, al igual que yo.El conocimiento es bueno sólo si se comparte. Nada es imposible para una mente dispuesta. Espero que este blog ayude a aquellos que están buscando conocimientos, al igual que yo.
Fuente:

<script language="JavaScript">
/* http://loseasi.blogspot.com
http://loseasi.blogspot.com/2011/09/mensaje-dentro-de-un-campo-textarea.html
By: Vku. */
var posicion1=0
var posicion2=0
var Retardo;
var Fin;
var Mensaje='El conocimiento es bueno sólo si se comparte. Nada es imposible para una mente dispuesta. Espero que este blog ayude a aquellos que están buscando conocimientos, al igual que yo.';

function TipeodeMaquina(NuevoRetardo) {
Retardo = NuevoRetardo;
if (posicion1 > Mensaje.length) {
document.MiFormulario.uterra.value = '';
posicion1 = 0;
posicion2 = 0;
}
else if (Mensaje.substring(posicion1-2,posicion1-1) == '.') {
document.MiFormulario.uterra.value = '';
posicion2 = posicion1-1;
posicion1++;
}
else {
document.MiFormulario.uterra.value = Mensaje.substring(posicion1,posicion2);
posicion1++;
}
Fin = setTimeout("TipeodeMaquina(Retardo) ", NuevoRetardo);
}
</script>
<form NAME="MiFormulario">
<textarea name="uterra" style="width: 600px;height: 50px;
color: #ffffff;font-size: 18px;border: 3px solid #3399FF;background: #99CCFF;" ></textarea>
</form>
<script>TipeodeMaquina(110);</script>

Personalizar:

width = ancho de la caja de texto.
height = alto de la caja de texto.
color = color del texto.
font-size = tamaño del texto.
border = ancho, tipo y color del borde.
background = color del fondo.

TipeodeMaquina(110) = velocidad.
var Mensaje='Acá va el mensaje.';

Si se quiere hacer varias líneas, separar los mensajes con un punto.

Así:

var Mensaje='mensaje 1. mensaje 2. mensaje 3. mensaje 4. mensaje 5.';

Mover el gadget al lugar mas apropiado.

Ejemplo:

... ¡¡Si estas viendo esto!!, es porque la entrada no contiene texto, puede contener solo imágenes o un vídeo. Da clic sobre "Continuar leyendo", o en el título para ver su contenido ...

Continuar leyendo »

Ver entrada completa. Botón para recargar una página

Me preguntaron cómo se hace el botón para recargar la página utilizado en la anterior entrada.

Acá les dejo el código utilizado:

<input type="button" value="Recargar página" onClick="location.reload();" style="width: 200px; height: 30px; background: #6699FF; color: #ffffff; cursor: pointer; border: 0px;"/>

Cambiar el texto mostrado en el botón: Recargar página.

Cambiar el estilo del botón:

Ancho = width: 200px
Altura = height: 30px
Color del fondo = background: #6699FF
Color del texto = color: #ffffff
Cursor = cursor: pointer
Borde = border: 0px

Pueden darle otros estilos, como tamaño y/o tipo de la fuente.

Si solo quieren un enlace, el código es el siguiente:

<a href="javascript:location.reload()">Recargar página</a>

Recargar página

---

... ¡¡Si estas viendo esto!!, es porque la entrada no contiene texto, puede contener solo imágenes o un vídeo. Da clic sobre "Continuar leyendo", o en el título para ver su contenido ...

Continuar leyendo »

Ver entrada completa. Imágenes aleatorias

Este código es para hacer que cada vez que se abra una página, salga una imagen diferente de forma aleatoria. (la imagen será distinta cada vez que entren)

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

Poner el siguiente código: (mover al lugar deseado)

<div style="text-align: center;">
<script type="text/JavaScript">
//<![CDATA[
var vkurandom = new Array()
vkurandom[1] = '<a href="http://www.youtube.com/user/thevku" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgo33ZBOiRrwP-ntrkz4JRY0rA7fLU3L38TraH-N5z4kic3SgU6qLM-Vg-iCXKPq6fG1O4nrApQ19OIp1PIADMY_i94ajiobXmdFROA5_zJ87btwRyCfnaPKXoDVnvwCpiqiUC9wYkYjfel/s1600/you-tube.png"/></a>';
vkurandom[2] = '<a href="http://www.facebook.com/loseasi" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKCrIfvm1TS9fVGXBenxstFrYc4HiYeHgFm6J6OMICyH-QOAv0861HGYeh_XojxPooK3U6xN7AmZR73nQFbwmLQbbsIlIwTx5gV2xHGJRq-QRB9UjMuUGL7BPeDY-21Lz5xnIIm51Hqd_u/s1600/facebook.png"/></a>';
vkurandom[3] = '<a href="http://www.twitter.com/v_ku" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZPdV_uXDGjT7o07gMEXzmqhkG8SLx0Hg5hp62i5pyUdlySTCEHh_Jaqe48YWuz9pSBolvpWfMUX5bm6pMx27TgdZ56JiJpmPqzG5wcv0T8hoPPds98jdZGoOdWTYCVIQzptY6KrYmHtvO/s1600/twitter.png"/></a>';
vkurandom[4] = '<a href="http://www.blogger.com" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbjCHdeHa_z6n939M94qpJU68Fa0HgQ0_gZzdfnL6Fmayyaba4JGd5_HYiesUJL52m_1et59Xp2Y8X2lXvAfZz7borIdknfoX3ryt4Zn4RT23Ocx6SOR5TQQ4uf9yjrqqtrFM3vEJFd0qB/s1600/blogger.png"/></a>';

var rn = Math.floor(Math.random() * vkurandom.length)
if (rn == 0) {
rn = 1
}
document.write(vkurandom[rn])
//]]>
</script>
</div>

Cambiar los enlaces y link de las imágenes.
 
Para mostrar mas imágenes solo agregar la siguiente línea:

vkurandom[1] = '<a href="http://www.youtube.com/user/thevku" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgo33ZBOiRrwP-ntrkz4JRY0rA7fLU3L38TraH-N5z4kic3SgU6qLM-Vg-iCXKPq6fG1O4nrApQ19OIp1PIADMY_i94ajiobXmdFROA5_zJ87btwRyCfnaPKXoDVnvwCpiqiUC9wYkYjfel/s1600/you-tube.png"/></a>';

Cada ves que se agregue una imagen hay que cambiar el número. 1, 2, 3, 4, 5, 6, etc...

vkurandom[1]

Si no quieren que las imágenes tengan enlace quitar lo marcado en rojo:

vkurandom[1] = '<a href="http://www.youtube.com/user/thevku" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgo33ZBOiRrwP-ntrkz4JRY0rA7fLU3L38TraH-N5z4kic3SgU6qLM-Vg-iCXKPq6fG1O4nrApQ19OIp1PIADMY_i94ajiobXmdFROA5_zJ87btwRyCfnaPKXoDVnvwCpiqiUC9wYkYjfel/s1600/you-tube.png"/></a>';

target="_blank" es para que abrir el enlace en otra pestaña.

Ejemplo:

... ¡¡Si estas viendo esto!!, es porque la entrada no contiene texto, puede contener solo imágenes o un vídeo. Da clic sobre "Continuar leyendo", o en el título para ver su contenido ...

Continuar leyendo »

Ver entrada completa. Mensaje que cambia de color de fondo y del texto

Añadir un nuevo gadget HTML/Javascript y pegar el siguiente código:

Modificar el texto dentro del Div y adaptar el estilo.En el script cambiar los colores y velocidad.1000 = 1 segundo.Modificar el texto dentro del Div y adaptar el estilo.En el script cambiar los colores y velocidad.1000 = 1 segundo.Modificar el texto dentro del Div y adaptar el estilo.En el script cambiar los colores y velocidad.1000 = 1 segundo.Modificar el texto dentro del Div y adaptar el estilo.En el script cambiar los colores y velocidad.1000 = 1 segundo.

<div id='bgcolor' style="padding:10px;font-size:20px;text-align:center;width:95%;margin:auto">

El color del fondo y del texto cambia cada segundo!!!

</div>

<script language='JavaScript'>
bgrcolor = document.getElementById('bgcolor');
function color_uno() {
bgrcolor.style.backgroundColor='#000000';
bgrcolor.style.color='#00ff00';
setTimeout('color_dos()', 1000);
}

function color_dos() {
bgrcolor.style.backgroundColor='#3366CC';
bgrcolor.style.color='#ffffff';
setTimeout('color_tres()', 1000);
}

function color_tres() {
bgrcolor.style.backgroundColor='#ff0000';
bgrcolor.style.color='#ffff00';
setTimeout('color_uno()', 1000);
}

color_uno()
</script>

Modificar el texto dentro del Div y adaptar el estilo.

En el script cambiar los colores y velocidad.

1000 = 1 segundo.

Tabla de colores

Mover el gadget a al lugar que quierán mostrar el mensaje.

El color del fondo y del texto cambia cada segundo!!!

... ¡¡Si estas viendo esto!!, es porque la entrada no contiene texto, puede contener solo imágenes o un vídeo. Da clic sobre "Continuar leyendo", o en el título para ver su contenido ...

Continuar leyendo »

Ver entrada completa. Cambiar imagen de fondo según resolución de pantalla

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

Plantillas viejas: <body>

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

Poner el siguiente código:

<script language="JavaScript">
//<![CDATA[
if (screen.width == 800)
{
document.body.style.backgroundImage='url(URL IMAGEN 800)';
}
if (screen.width == 1024)
{
document.body.style.backgroundImage='url(URL IMAGEN 1024)';
}
if (screen.width == 1280)
{
document.body.style.backgroundImage='url(URL IMAGEN 1280)';
}
if (screen.width == 1366)
{
document.body.style.backgroundImage='url(URL IMAGEN 1366)';
}
if (screen.width == 1440)
{
document.body.style.backgroundImage='url(URL IMAGEN 1440)';
}
//]]>
</script>

Cambiar url de la imagen con el tamaño adecuado.

Pueden agregar otras resoluciones poniendo la siguiente línea cambiando la medida:

if (screen.width == 1440)
{
document.body.style.backgroundImage='url(URL IMAGEN 1440)';
}

... ¡¡Si estas viendo esto!!, es porque la entrada no contiene texto, puede contener solo imágenes o un vídeo. Da clic sobre "Continuar leyendo", o en el título para ver su contenido ...

Continuar leyendo »