Mostrando entradas con la etiqueta Javascript. Mostrar todas las entradas
Mostrando entradas con la etiqueta Javascript. Mostrar todas las entradas

Barra de cargar pagina

Si deseas ver cuando se termina de cargar el contenido de tu blog lo puedes hacer insertando una barra animada.

Ver el ejemplo en este blog de pruebas.
Solo vas a elementos HTML/Javascript e ingresas el siguiente código:
<script type='text/javascript'> 
window.onload = detectarCarga;
function detectarCarga(){
document.getElementById("imgLOAD").style.display="none";
}
</script>
<div id='imgLOAD' style="text-align: center">
<b>Cargando</b>
<img src="Url-de-tu-gif">
</div>

También podrás incluir el código dentro de la misma plantilla.
Si deseas otros tipos de gifs, a continuación te presento los siguientes generadores:
Ajax load
Load info
Web script lab
Preloaders

Los puedes alojar en:
Free image hosting

Referencias:
Ayuda para el blog

p1

Traductor de banderitas para blogger

Desde cuando quería publicar esta entrada para explicarte como colocar un traductor de banderitas en blogger.
Puedes ver el ejemplo en este blog de pruebas.
Si quisieras traducir tu blog del español al ingles, se implementaría el siguiente código:
<a href="javascript:var t=((window.getSelection&&window.getSelection())(document.getSelection&&document.getSelection())(document.selection &&document.selection.createRange&&document.selection.createRange().text));var e=(document.charsetdocument.characterSet);if(t!=''){location.href='http://translate.google.com/translate_t?text='+t+'&hl=en&langpair=esen&tbb=1&ie='+e;}else{location.href='http://translate.google.com/translate?u='+escape(location.href)+'&hl=en&langpair=esen&tbb=1&ie='+e;};"><img src="Url-de-tu-icono"/></a>

Ahora es(español), es el identificador del idioma de tu blog.
Luego en(ingles), es el identificador del idioma al que quieres traducir.
Y coloca la Url de tu icono del idioma al que quieres traducir, en este caso al ingles.

Recuerda que el código anterior es de un solo idioma.
Para tener los idiomas que desees, solo copéalo y cámbiale el identificador de idioma al que quieres traducir y la Url de tu icono.

Estos son algunos identificadores de idiomas que te pueden servir:

Si quieres emplear las mismas banderitas de el ejemplo, las puedes descargar desde aquí.

Y lo ultimo que queda es colocar el código como elemento HTML/Javascript y listo.
Espero y te sea de utilidad.

Referencias:
Aqui estuve ayer

p1

Ventanas pop up

A menudo, las ventanas emergentes o pop up las llegamos a utilizar con el objetivo de mostrar un aviso publicitario de manera intrusiva.

Si tienes pensado mostrar una imagen, blog o un video de youtube en una ventana pop up, lo puedes hacer como en los siguientes ejemplos:
Ver imagen
En este ejemplo como ves, te muestra una imagen en la ventana:
<a href="Url-de-tu-imagen" target="_blank" onclick="window.open(this.href, this.target, 'top=350, left=480, width=400, height=200, toolbar=NO, Menubar=NO'); return false;">
Ver imagen
</a>

Ver blog o sitio web
Y en este otro si observas, se utiliza el mismo código pero ahora para incluir un blog o sitio web:
<a href="Url-de-tu-blog-o-sitio-web" onclick="window.open(this.href, this.target, 'top=350, left=250, width=900, height=800, toolbar=NO, Menubar=NO'); return false;">
Ver blog o sitio web
</a>

Ver video
Y ahora como pudiste ver en este ultimo ejemplo, aparece un video en la ventana:
<a href="javascript:void(0);" onclick="window.open('Url-de-tu-video', 'popup', 'top=350, left=480, width=400, height=300, toolbar=NO, Menubar=NO')">
Ver video
</a>


La url para que incluyas un video de youtube será como esta:
http://www.youtube.com/watch?v=rIpD7hfffQo

Para que funcione incluye despues de watch esto _popup:
Ejemplo: http://www.youtube.com/watch_popup?v=rIpD7hfffQo

Si en lugar de texto en los links te decidieras por una imagen, lo puedes llevar a cabo colocando en lugar de los links el siguiente código:
<img src="Url-de-tu-imagen" />

Ejemplos:



Y al final, configuras los códigos como tu decidas:
top=# (es la posición de la ventana, en este caso hacia arriba)
left=# (también es la posición de la ventana, en este caso a la izquierda)
width=# (es lo ancho de la ventana)
height=# (es lo alto de la ventana)
toolbar=No (le pregunta si quiere que aparezca la barra de herramientas, Yes o No)
Menubar=No (le pregunta si quiere que aparezca la barra de menús)

Espero y te sean útil en algo.

p1