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

---

Forma 2:

Es como la anterior forma, pero cambiando un poco el código.

Código 2:

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

<a href="http://vitua.blogspot.com/" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhI6ieHNWm9o3zZUJlui2xeKtaHNnaUe0bXp3N3L6-T8x8pRAbAOXby16R3lrMbWRaudpJm5esokHXJwrZGHPNtSgvLqmRagd9-jkXbvNytYIcXnX7kTV1_202jfF2oSdxqPy9zB-fAiS1t/s1600/VituaR.png"/></a></div>
<script language="javascript">
function parpadeo(){
if(document.getElementById('vku_blink').style.visibility=="hidden")
{document.getElementById('vku_blink').style.visibility= "visible"}
else
{document.getElementById('vku_blink').style.visibility= "hidden"}
}
setInterval('parpadeo()',1500);
</script>

Acá le cambie la ID, la velocidad (es un poco mas lento) y muestro una imagen con enlace.

Ejemplo 2:

---

Forma 3:

Este código es distinto ya que podemos hacer el efecto todas las veces que se quiera utilizando el mismo script, solo hay que ir cambiando la ID.

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">
function vku_parpadeo(otro) {
var el = document.getElementById(otro);
if ( el.style.visibility != 'hidden' ) {
el.style.visibility = 'hidden';
}
else {
el.style.visibility = 'visible';
}
}
</script>

Y en donde quieramos mostrar el efecto ponemos así:

<script>setInterval('vku_parpadeo("asocia1")',2000);</script>
<div id="asocia1" style="color: red; text-align: center;">
Texto que aparece y desaparece</div>

Acá utilizo la ID asocia1, que tiene que ser igual en el script y en el div.

Texto que aparece y desaparece con ID asocia1

Otro ejemplo con la ID asocia2

También le cambie el color del texto utilizando estilo CSS y la velocidad (4000).

Texto que aparece y desaparece con ID asocia2

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:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
function setC(visitas, valor){
 var caducidad=new Date (2099, 12, 31);
document.cookie = visitas + "=" + escape(valor) + ((caducidad == null) ? "" : ("; expires=" +
caducidad.toGMTString())) }
function readC(visitas){
var busca = visitas + "=";
var i, j;
if (document.cookie.length > 0) {
  i = document.cookie.indexOf(busca);
  if (i != -1) {
    i += busca.length;
    j = document.cookie.indexOf(";", i);
    if (j == -1) j = document.cookie.length;
    return unescape(document.cookie.substring(i,j));
  } } }
var num;
num=readC("Visitasblog");
if (!num) num=0;
num++;
setC("Visitasblog", num);
document.write("<div class='visitablog'>");
document.write("<b>Has visto el post "+num+" veces.<\/b>");
document.write("<\/div>");
//]]>
</script>
</b:if>

Puedes agregarle estilos con la clase visitablog: (va arriba de ]]></b:skin>)

.visitablog{
propiedad: valor;
propiedad: valor;
}

Ejemplo:

El código trabaja con Cookies, si el visitante elimina los cookies de su navegador el contador vuelve a 1.

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.

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/AVvXsEhEBqFG8Ijj0wAkTWNILkznVWMDTikuGSp78uXgCfK_fzsYwYOQArVYajbAsdW4KBaVhqzW64XA4ck9AOBaRIRGwqtwEeH2ydEjfkpfZyvTHgdwZ8VWUwr00o9KdOMFrZmwqe6dQ9U6k14/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/AVvXsEh7FJ2eLIXGO-Bu_h6xYLxp2cacfazsTe8mBwtXys1HyKUPsZTKcq21C80ScZy2769GDVSTDXUtQzUS5the1wwqKRL2i9sRw5cUsEBST42ON4IoHik8599jAfDLwFqMEeUnaKfGvLZVgoY/s1600/no-tocar.png" /></a></div>

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.

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:

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/AVvXsEhsUy1MDd4YwpDkUXksroRkS7zKWjmcT7YvhYjSOfBHgAz6EUaagFQryye6HGNQuFDZElhI6geh3vBFT-wtdGriKFKaMfUpEUAjMaG7hhenOBuFjGun3R83HtwRJVPih9EImlx3siPXVcMu/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/AVvXsEgWFnkaxxN4g9sas2ADRnoWpNFiaLfdh3RjfZgM6S1gMhyphenhyphenaan2ntj5FDaetPX8t-GJk_EpAPuud68aZlPfhFvkLrltgZfJW1IEjzY82DxLcrAv1yeL1eJmjTGhKI8n6pX6bSfEwyVBnJk9D/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/AVvXsEjdMC6O4ZRVjcWghxlfedYh6BXZLazzaiJnj9-2IICd71BIMbobw5yRJCYUSMEaWZ6S4KygiJYhagDar1fp1_GYYWlmXxey88fvdrivsG-D8fOVCpcB0CZcXVz1WhO74j3S8Tye0rGvSbfX/s1600/twitter.png"/></a>';
vkurandom[4] = '<a href="http://www.blogger.com" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhEAQGdHu59w8vJQg5f91rtjMR0U7CnQYeDh7EHiNkL0f8M4HnjFwz10OIGlJcyih5SiUcvJNaIHou8NEOcEb3Y3vEBedk5to53Gue8dTysD970pQuXYF7pgOnuSxw70n1Xu0ATkBoQTx7/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/AVvXsEhsUy1MDd4YwpDkUXksroRkS7zKWjmcT7YvhYjSOfBHgAz6EUaagFQryye6HGNQuFDZElhI6geh3vBFT-wtdGriKFKaMfUpEUAjMaG7hhenOBuFjGun3R83HtwRJVPih9EImlx3siPXVcMu/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/AVvXsEhsUy1MDd4YwpDkUXksroRkS7zKWjmcT7YvhYjSOfBHgAz6EUaagFQryye6HGNQuFDZElhI6geh3vBFT-wtdGriKFKaMfUpEUAjMaG7hhenOBuFjGun3R83HtwRJVPih9EImlx3siPXVcMu/s1600/you-tube.png"/></a>';

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

Ejemplo:

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!!!

Activar o habilitar JavaScript en Internet Explorer 9

Ya son varios los que me han preguntado como activar JavaScript en Internet Explorer 9.

Realmente yo utilizo Windows XP y por eso no tengo instalado la versión 9 de Internet Explorer.

Igual he creado una Imagen Virtual en la que instale Windows 7.

Descarge Internet Explorer 9 y lo instale.

Al instalarlo y sin hacer cambios ya tenía habilitado la opción de javaScript.

Pero note que es diferente a la forma de hacerlo en Internet Explorer 7 o 8.

Ya explicado acá

Para activar o habilitar JavaScript en Internet Explorer 9 seguir los siguientes pasos:

1- Ir a "Herramientas" y abrir "Opciones de Internet".
2- Click sobre la pestaña "Seguridad", "Internet".
3- Click sobre el botón "Nivel perzonalizado...".
4- En la nueva ventana buscar "Automatización".
5- En "Active scripting" marcar "Habilitar".
6- Al darle al botón de "Aceptar" va a salir una advertencia, le damos "Sí".
7- Cerramos la ventana y reiniciamos el explorador o bien refrescamos la página que nos encontremos.

Dejo 2 imágenes para que se entienda mejor: (Click sobre ellas para ampliarlas)

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)';
}

Caja de aviso al entrar al blog con cookies

¿Que es una Cookie?

Las cookies almacenan información sobre tí, como nombre de usuario o información de registro, o preferencias de usuario, pero no espían, como el spyware.

Si tienes una cookie de un sitio web al que vas a menudo, la cookie recuerda cosas que harán tu próxima visita a esa página un poco más fácil, e incluso hace que las páginas se carguen un poco más rápido.

En este caso vamos a utilizar las cookies para recordar las visitas en el blog y así mostrar el aviso cada determinado tiempo, y no cada ves que entran al blog.

Lo va a mostrar la primera ves que visita el blog y después de un determinado tiempo, tipo recordatorio.

Los cookies se activan si cerramos la caja, si el visitante no cierra la caja, esta se mostrará en todas las visitas.

En esta caja podemos mostrar un aviso de bienvenida o invitando a los visitantes a registrarse a nuestras redes sociales y/o a suscribirse a los feed.

¿Cómo se hace...?

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

Poner los siguientes tres códigos, todos dentro del mismo gadget:

1- Código de la Caja:

<div id="avisosusc">
<a id="avisosuscerrar" href="#" onclick="closeGreetBox('4')">Cerrar X</a>

CONTENIDO

</div>

Colocar el CONTENIDO que quieran mostrar.

Podemos cambiar Cerrar X por una imagen.

2- Código CSS:

<style>

/* Estilos de la caja */

#avisosusc {
propiedad:valor;
propiedad:valor;
propiedad:valor;
}

/* Botón para cerrar la caja */

#avisosuscerrar {
propiedad:valor;
propiedad:valor;
propiedad:valor;
}
</style>

Le damos el estilo a la caja.

3- Código JavaScript: (es importante que este al final)

<script type="text/javascript">
function showHideDiv(){if(readCookie("ct")){document.getElementById("avisosusc").style.display="none"}else{document.getElementById("avisosusc").style.display="block"}}function closeGreetBox(a){createCookie("ct","true",a);document.getElementById("avisosusc").style.display="none"}function createCookie(c,d,e){if(e){var b=new Date();b.setTime(b.getTime()+(e*24*60*60*1000));var a="; expires="+b.toGMTString()}else{var a=""}document.cookie=c+"="+d+a+"; path=/"}function readCookie(b){var e=b+"=";var a=document.cookie.split(";");for(var d=0;d<a.length;d++){var f=a[d];while(f.charAt(0)==" "){f=f.substring(1,f.length)}if(f.indexOf(e)==0){return f.substring(e.length,f.length)}}return null}; showHideDiv();
</script>

La caja la movemos en donde se quiera mostrar, puede ser arriba de las entradas.

Pueden ver el ejemplo en el blog, abajo de la cabecera, también acá.

Código que utilizo en mi caja de aviso de suscripción:

Código de la Caja:

<div id="avisosusc">
<a id="avisosuscerrar" href="#" onclick="closeGreetBox('4')">Cerrar X</a>
<span style="margin:10px;;font-size:12px;">
Bienvenido amig@!!! Recuerda que puedes recibir las actualizaciones del blog a través de <a style="color:#3366CC" href="http://www.facebook.com/loseasi" target="_blank">Facebook</a> y/o <a style="color:#33CCFF" href="http://twitter.com/v_ku" target="_blank">Twitter</a>, o Suscríbase al Feed vía <a style="color:#FF9933" href="http://feeds.feedburner.com/blogspot/qygH" target="_blank">RSS</a> o vía <a style="color:#FF9933" href="http://feedburner.google.com/fb/a/mailverify?uri=blogspot/qygH" target="_blank">Email</a>.</span>
</div>

Código CSS:

<style>
#avisosusc{background:#E7F9F8;border-top: 2px solid #B5D4FE;border-bottom: 2px solid #B5D4FE;color:#3399FF;font-weight:bold;text-align: center;padding:5px;width:97%;margin-left:auto;margin-right:auto}
#avisosuscerrar{float:right;text-decoration:none;margin:0;color:#ccc;font-size:10px;}
</style>

Código JavaScript: (Es el mismo anterior visto)

<script type="text/javascript">
function showHideDiv(){if(readCookie("ct")){document.getElementById("avisosusc").style.display="none"}else{document.getElementById("avisosusc").style.display="block"}}function closeGreetBox(a){createCookie("ct","true",a);document.getElementById("avisosusc").style.display="none"}function createCookie(c,d,e){if(e){var b=new Date();b.setTime(b.getTime()+(e*24*60*60*1000));var a="; expires="+b.toGMTString()}else{var a=""}document.cookie=c+"="+d+a+"; path=/"}function readCookie(b){var e=b+"=";var a=document.cookie.split(";");for(var d=0;d<a.length;d++){var f=a[d];while(f.charAt(0)==" "){f=f.substring(1,f.length)}if(f.indexOf(e)==0){return f.substring(e.length,f.length)}}return null}; showHideDiv();
</script>

Si van a utilizar el código mío, cambiar los enlaces por los suyos.

Recomendar blog o una entrada por correo

El siguiente código permite a los lectores poder recomendar tu blog, o una entrada a sus amigos enviando el enlace por correo.

Para ponerlo en la sidebar o columna del blog:

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

Poner el siguiente código:

<script language="JavaScript">
var initialsubj="Echa un vistazo a este blog.";
var initialmsg="Te recomiendo ver: ";

var good;
function checkEmailAddress(field) {

var goodEmail = field.value.match(/\b(^(\S+@).+((\.com)|(\.net)|(\.edu)|(\.mil)|(\.gov)|(\.org)|(\..{2,2}))$)\b/gi);
if (goodEmail) {
good = true;
}
else {
alert('Por favor entra una dirección de correo.');
field.focus();
field.select();
good = false;
}
}
u = window.location;
function mailThisUrl() {
good = false
checkEmailAddress(document.eMailer.address)
if (good) {

window.location = "mailto:"+document.eMailer.address.value+"?subject="+initialsubj+"&body="+initialmsg+" "+u;
}
}
</script>
<div align="center"><b>Recomendar a un amig@</b>
<form name="eMailer">
<input type="text" name="address" size="22" value="Ingresar correo @" onfocus="this.value=''" />
<button type="button" onclick="mailThisUrl();" style="vertical-align: middle;margin:0;padding:0;background: transparent;border:0"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjj0kImjqcmt7qeuTtdSIhcltK1XaMQwNyICowvB8ILI4WBMu9UkAsHJG7z4iuSoH-IVBbctg48XuFSS84OFJgvof836DnysyTjYCa-m6PbMAELYnyXaNWuyjZ40H8pTOz64ljuTfNodWBj/s1600/mail.gif"/></button>
</form>
</div>

Cambiar los datos siguientes:

= http://3.bp.blogspot.com/........./mail.gif (Línea 35/36)

Texto de asunto = Echa un vistazo a este blog. (Línea 02)

Texto mostrado en el cuerpo del mensaje = Te recomiendo ver: (Línea 03)

Texto que muestra al no ingresar un correo = Por favor entra una dirección de correo. (Línea 14)

Título = Recomendar a un amig@ (Línea 31)

Ancho de la caja = size="22" (Línea 33)

Texto mostrado en la caja = Ingresar correo @ (Línea 33)

Si quieren quitar el título, eliminan lo siguiente: (Línea 31)

<b>Recomendar a un amig@</b>

Ejemplo:

Recomendar a un amig@

Abrir varias páginas al hacer clic en un solo enlace

Ya vimos en otra entrada como: Abrir 2 ventanas emergentes pop-up

Hoy les voy a dar el código para poder abrir varias páginas en un solo enlace.

Forma 1:

Con función.

<script language="javascript">
function abrir2paginas(){

window.open('http://URL.....1...', '_blank');

window.open('http://URL.....2...', '_blank');

// Acá ponemos otros link
}
</script>

Agregamos otras páginas así:

window.open('http://URL........', '_blank');

En el enlace llamamos a la función:

<a href="javascript:abrir2paginas()">Texto o Imagen</a>

Forma 2:

Directamente en el enlace.

<a href="javascript:void(0);" onclick="javascript:window.open('http://URL.....1...', '_blank');
window.open('http://URL.....2...', '_blank');">Texto o Imagen</a>

Agregamos otras páginas así:

window.open('http://URL........', '_blank');

Ejemplo: Abrir 2 páginas.

Slideshow con efecto fade en Javascript

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

Poner el siguiente código:

<script src="http://dl.dropbox.com/u/19457418/jsvku/fadeslideshowvku.js" type="text/javascript">
</script><center><script type="text/javascript">
// http://loseasi.blogspot.com/
//<![CDATA[
var fadeimages=new Array()

//fadeimages[#]=['Imagen', 'Link URL', 'Link Target blank o self', 'Título Texto']

fadeimages[0]=['URL IMAGEN 1/como-se-hace-lo-se-asi-cabezera.png', 'http://loseasi.blogspot.com/', '_blank', '¿Cómo se hace?']

fadeimages[1]=['URL IMAGEN 2/meli.jpg', 'http://melmysweetworld.blogspot.com/', '_blank', 'Visite My Sweet World']

fadeimages[2]=['URL IMAGEN 3/vitua.png', 'http://vitua.blogspot.com/', '_blank', 'VituaRadio']

fadeimages[3]=['URL IMAGEN 4/1.jpg', 'http://susis-mysticriver.blogspot.com/', '_blank', 'Mystucriver']

var fadebgcolor='blue'

//new fadeshow(Ancho imagen, Alto imagen, borde, velocidad, pause on mouseover (0=no, 1=si))
new fadeshow(fadeimages, 550, 128, 0, 4000, 1)
//]]>
</script></center>

Si quieren pueden mostrar mas imágenes agregando la siguiente línea:

fadeimages[0]=['URL IMAGEN/como-se-hace-lo-se-asi-cabezera.png', 'http://loseasi.blogspot.com/', '_blank', '¿Cómo se hace?']

Tener en cuenta que cada imagen tiene su numero (ID) y no se puede repetir. [0], [1], [2], [3], [4], [5], etc..

En cada línea tiene que ir con el siguiente orden:

1. La URL de la imagen.
2. El link que se dirigirán al hacer clic sobre la imagen.
3. El target, que puede ser blank o self.
4. El título.

Mas abajo vemos la siguiente línea:

new fadeshow(fadeimages, 550, 128, 0, 4000, 1)

Donde:

1. 55o, Va el ancho de la imagen.
2. 128, Va el alto de la imagen.
3. 0, Es el borde. (En este caso no le puse borde)
4. 4000, Es la velocidad. (Mayor es mas lento)
5. 1, Elegir entre 1 o 0 para parar al pasar el mouse por encima de la imagen. (0=no, 1=si)

Colocar el gadget en el lugar que más les guste para mostrar las imágenes.

Slideshow sencillo en Javascript

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

Poner el siguiente código:

<div id="cambiaimg-vku" style="text-align: center;"></div>
<script type="text/javascript">
//<![CDATA[
var cont = 0;
var arr = [
["http://loseasi.blogspot.com/", "http://URL IMAGEN 1/como-se-hace-lo-se-asi-cabezera.png"],    
["http://melmysweetworld.blogspot.com/", "URL IMAGEN 2/meli.jpg"],      
["http://vitua.blogspot.com/", "URL IMAGEN 3/vitua.png"]

]
function cambiaimg_vku() {
var d = document.getElementById("cambiaimg-vku");
cont = cont % arr.length;
d.innerHTML = "<a href='"+arr[cont][0]+"' target='_blank'><img border=0 src='"+arr[cont][1]+"'></a>";
cont++;
}
function inicioimg_vku() {
cambiaimg_vku();
setInterval(cambiaimg_vku, 3000);
}
window.onload=inicioimg_vku;
//]]>
</script>

Cambiar los link que se dirigirán al hacer clic sobre la imagen. (color azul)

Cambiar los link de las imágenes. (color rojo)

Ajustar la velocidad (3000). (negrita) Mayor es mas lento.

Para mostrar mas imágenes agregar la siguiente línea: (la ultima línea colocada no tiene que llevar la coma al final)

["http://loseasi.blogspot.com/","https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge_Sft6SK8OLD4MHjfX2bE8SOEhTZ6G80P4w3nukp-9RjMVB7bIeRX-0DcK-vd2L-NN2ZMS7IHEtVpprXPvxd0W7VOWELwfCAtbQiFEdOQ_e7l3bZabb8inlCHoZt9drrL5niI1BQzFsQv/s570/como-se-hace-lo-se-asi-cabezera.png"],

Colocar el gadget en el lugar que más les guste para mostrar las imágenes.

Mostrar una imagen distinta cada día del mes

Ya vimos cómo: Mostrar una imagen distinta cada día de la semana.

Ahora las imágenes van a ser mostradas una distinta cada día del mes.

El siguiente código tiene que ir en donde se van a mostrar las imágenes.

<script type="text/javascript">
//<![CDATA[
// http://loseasi.blogspot.com
// Vku
var dvku=new Date();
var vkuday=new Array();

vkuday[1]='<img src="http://......"/>';
vkuday[2]='<img src="http://......"/>';
vkuday[3]='<img src="http://......"/>';
vkuday[4]='<img src="http://......"/>';
vkuday[5]='<img src="http://......"/>';
vkuday[6]='<img src="http://......"/>';
vkuday[7]='<img src="http://......"/>';
vkuday[8]='<img src="http://......"/>';
vkuday[9]='<img src="http://......"/>';
vkuday[10]='<img src="http://......"/>';
vkuday[11]='<img src="http://......"/>';
vkuday[12]='<img src="http://......"/>';
vkuday[13]='<img src="http://......"/>';
vkuday[14]='<img src="http://......"/>';
vkuday[15]='<img src="http://......"/>';
vkuday[16]='<img src="http://......"/>';
vkuday[17]='<img src="http://......"/>';
vkuday[18]='<img src="http://......"/>';
vkuday[19]='<img src="http://......"/>';
vkuday[20]='<img src="http://......"/>';
vkuday[21]='<img src="http://......"/>';
vkuday[22]='<img src="http://......"/>';
vkuday[23]='<img src="http://......"/>';
vkuday[24]='<img src="http://......"/>';
vkuday[25]='<img src="http://......"/>';
vkuday[26]='<img src="http://......"/>';
vkuday[27]='<img src="http://......"/>';
vkuday[28]='<img src="http://......"/>';
vkuday[29]='<img src="http://......"/>';
vkuday[30]='<img src="http://......"/>';
vkuday[31]='<img src="http://......"/>';
document.write(vkuday[dvku.getDate()]);
//]]>
</script>

Cambiar http://...... por el link de la imagen.(una por día)

Si quieren ponerle un link, lo hacen de la siguiente forma:

<a href="http://loseasi.blogspot.com"><img src="http://......"/></a>

Pueden ir dentro del cuerpo de la plantilla, ejemplo: debajo de <body>.

O en un nuevo gadget HTML:

Tener en cuenta que los meses de menos de 31 días, las imágenes para esos días faltantes, no se mostrarán

Mostrar una imagen distinta cada día de la semana

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

Poner el siguiente código:

<script language='JavaScript'>
//<![CDATA[
function CambioxDíaVku(){
var día = new Date();
var Cdía = día.getDay();
var CambiarcadaDía = new Array('<img src="http://imagen"/>', // Domingo
'<img src="http://imagen"/>',  // Lunes
'<img src="http://imagen"/>', // Martes
'<img src="http://imagen"/>', // Miércoles
'<img src="http://imagen"/>',  // Jueves
'<img src="http://imagen"/>',  // Viernes
'<img src="http://imagen"/>');  // Sábado
return CambiarcadaDía[Cdía];
}
//]]>
</script>

El siguiente código tiene que ir en donde se van a mostrar las imágenes.

<script language="JavaScript">
document.write(CambioxDíaVku());
</script>

Si quieren ponerle un link, lo hacen de la siguiente forma:

<a href="#"><img src="http://imagen"/></a>

Cambiar http://imagen por el link de la imagen.

La primera imagen es la del Domingo, y la última del Sábado.


Ver ejemplo:

Bloquear ventanas emergentes pop-up

Ya hemos visto en varias entradas como hacer ventanas pop-up.

Ahora les traigo el código para bloquear las ventanas pop-up.

¿Para que puede ser útil?

Algunas veces entramos en algunos blog y nos abre una molesta ventana con publicidad.

Si tu eres administrador del blog y no sabes como quitar esa molesta ventana.

Tus lectores te avisan que les molesta cada ves que entran a tu blog se les abre esa ventana.

Acá tienes la solución para que no la muestre mas.

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

Poner el siguiente código:

<script>
function bloquear(){
return true;
}
window.open = function(){return true};
</script>

La mejor solución es quitar lo que crea esa ventana con publicidad, en la mayoría de los casos es por contadores.

Si utilizas Ventanas pop-up para mostrar tus propios avisos, no podrás poner este código.

Vídeo Galería con Css y Javascript

Mi nuevo proyecto.

Se puede configurar desde el estilo CSS.

El código se debe colocar en un gadget HTML abajo de la cabecera.

Esta configurado para un ancho de 1000px, y para mostrar 16 vídeos.

Si se quiere se puede quitar o agregar vídeos.

Solo agregar o quitar la siguiente línea.

<a href="http://www.youtube.com/v/boDvXJLau1A" onclick="return cambiarvideo(this.href)" title="Video 2"><img src="http://img.youtube.com/vi/boDvXJLau1A/default.jpg" /></a>

El link del vídeo:

http://www.youtube.com/v/boDvXJLau1A

Cambiar la ID del vídeo (boDvXJLau1A) por la ID del vídeo a mostrar.

La medida del vídeo son de 425 x 344. (Se puede cambiar desde el código Javascript)


La imagen a mostrar:

http://img.youtube.com/vi/boDvXJLau1A/default.jpg

Cambiar la ID (boDvXJLau1A) que es el misma ID del vídeo.

De esta forma generamos una imagen thumbnail.

La medida de las imágenes son de 100px x 70px. (Se puede cambiar desde el estilo CSS)


Pueden elegir cuatro formas de mostrar el vídeo.

Los ejemplos y su respectivo código se encuentra en cada entrada.

• El vídeo se muestra a la derecha
• El vídeo se muestra a la izquierda
• El vídeo se muestra arriba
• El vídeo se muestra abajo

Ejemplo del CSS del vídeo mostrado a la derecha:

         ........Imagen thumbnail.........
.contvideogaleria img{width:100px;height:70px;padding:5px;border:1px solid #fff}

         ........El cuerpo contenedor y la imagen a la izquierda.........

.contvideogaleria{width:100%;float:left;background:black url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZsBw-6Pz74r0piFxanmjczny3yNpkTf-zwR4OV08TT5WivBox4SWq6OVJK-uschlOe3rTfxx-9tfWTnXwfP-luj8ouvxsk1rZpDudGAxluR9HcS2yzuCbYX6UjFnPsx8Y2jzpLyhTjlU/s1600/youtube.png) no-repeat center left;}

         ........El cuerpo contenedor de las imágenes thumbnail.........
.contvideogaleria .contvideogaleriaimg{margin:20px;margin-left:30px;/margin-left:20px;margin-right:5px}

         ........El cuerpo contenedor del vídeo.........
.contvideogaleria #videogaleria{float:right;margin-right:20px;margin-top:15px;background:red url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrbeVK41kCyQtuvpMMg_XvOStG0QCqgYKu5p1zAEI_TiA0uAQd8ohGnEu90ixMJrdNQ_DWX60_YerxT3BVla8sAEyz8QqudoSVekg0PAbSomRyIkSiMByivkYDjvqmKBuANXetbbBr0luu/s1600/video-galeria-vku.png) no-repeat center ;}

Personalizar cambiando medidas, borde, imagen de la izquierda, color del fondo y margenes.

Notarán que hay margenes que tienen delante un /, esto es solo para Internet Explorer.

Los comentarios dejarlos en esta entrada y no en el blog de los ejemplos.

Espero que les sea de utilidad.

Bloquear botón derecho del mouse mostrando imagen

Ver página de ejemplo:

Hace ya un tiempo Yely me pidio este código.

Lo que hace es mostrar una imagen con un texto centrada en la página al hacer click con el botón derecho del mouse, cerrandose al hacer click con el botón izquierdo del mouse.

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/
// Creado por Vku para Yeli.
function mostraryeli() {
with(document.getElementById('yeli')) {
style.display = '';
}
return false
}

function cerraryeli() {
document.getElementById('yeli')
.style.display = 'none';
}
document.oncontextmenu=mostraryeli;
document.onclick=cerraryeli;
</script>
<style>
.yeli-vku{
position:fixed;

left:45%;                                      /* Posición desde la derecha */

top:190px;                                  /* Posición desde la arriba */

z-index:8888888;

background: #f9f;                 /* Color del fonto */

border:5px solid #f09;        /* Ancho y color del borde */

padding:0 10px;                    /* Separación del borde */

color:#f09;                              /* Color del texto */

text-align:center;                /* Texto centrado */

}
</style>

Y bien abajo de la plantilla arriba de </body>

Poner este otro código después de personalizar:

<div class='yeli-vku' id='yeli' style='display:none'>
<p align="center"><img src="http://img59.imageshack.us/img59/8990/74308955.gif" border="0" width="70" height="70"/></p>
<p>Por favor,<br/>no click derecho...</p>
</div>

En el primer código cambiar el estilo a su gusto: colores, etc...

En el segundo código cambiar la imagen y el texto que se mostrará.

Width es el ancho de la imagen, height es el alto.

<br/> hace un salto de línea en el texto.


Vista previa para ver que todo este bien y después guardar.