Mostrando entradas con la etiqueta Scripts. Mostrar todas las entradas

03 junio 2015

Validaciones esenciales en Javascript paras tus formularios de HTML

  3 comentarios
12:17

Todas las letras a mayusculas

Validacion sumamente esencial, por ejemplo, para cuando quieres llevar el control de todo lo que ingresa a la base de datos, mantener la uniformidad te ayuda en cuanto a la mejor lectura.

function aMayusculas(campo) {
    var x = document.getElementById(campo).value;
    document.getElementById(campo).value = x.toUpperCase();
}

Luego para llamarla en un campo de texto

<input type="text" name="ejemplo1" id="ejemplo1" onkeyup="aMayusculas(document.getElementById('ejemplo1').name)" />

Solo Numeros

Muy util para campos de texto donde el usuario solo se le permite introducir numeros, como campos de moneda, enteros o numeros de telefonos. Es una de las validaciones mas sencillas pero mas utiles de Javascript

function esNumero(campo) {
    var x = document.getElementById(campo).value;
    if (isNaN(x)) {
        document.getElementById(campo).value = "";
    }
}

Luego para llamarla en un campo de texto

<input type="text" name="ejemplo1" id="ejemplo1" onkeyup="esNumero(document.getElementById('ejemplo1').name)" />

Solo Letras

Asi como hay campos donde solo puede introducirse numeros, existen campos en los que estos serian incoherentes, como campos de nombres, apellidos, profesion, etc. Recordemos que es mejor prevenir que lamentar, y es mejor prevenir y controlar lo que escribe el usuario antes de lamentar una base de datos llena de basura.

function soloLetras(e){
       key = e.keyCode || e.which;
       tecla = String.fromCharCode(key).toLowerCase();
       letras = " áéíóúabcdefghijklmnñopqrstuvwxyz";
       especiales = "8-37-39-46";

       tecla_especial = false
       for(var i in especiales){
            if(key == especiales[i]){
                tecla_especial = true;
                break;
            }
        }

        if(letras.indexOf(tecla)==-1 && !tecla_especial){
            return false;
        }
    }


Luego para llamarla en un campo de texto

<input type="text" name="ejemplo1" id="ejemplo1" onkeypress="return soloLetras(event)" />

Mascaras esenciales para campos de texto

Existen ademas diferentes campos los cuales tienen una formato único y que es es sin duda, irreversible, pero que a su vez, pueden presentar diferentes formas dependiendo del gusto del usuario, pero siempre, con un mismo resultado. Para evitar la falta de uniformidad del dato, es necesario usar mascaras pues garantizan que el dato introducido presente el mismo diseño y limite al usuario al mismo.

Leer completo

27 agosto 2010

Abrir imagenes en una misma pagina con efecto zoom de Highslide

  3 comentarios
22:23

HighSlide es un maravilloso script que te permite abrir las imagenes de tu blog en la misma ventana o pagina. Es decir, ya no es necesario que el usuario salga de tu pagina al hacer clic sobre una imagen, si no, que a la imagen que le apliques el Javascript, al hacer clic sobre ella abrira con un efecto Zoom, que se activara una vez dado el clic sobre la imagen deseada. Highslide te permite crear tambien galeria de imagenes, con distintos diseños, en la imagen de la izquierda se pueden vizualizar dos modelos de las ventanas modales, y eso no es nada para las demas que ofrece, tambien, te permite mover la imagen de un lado a otro de la pagina. En esta entrada, te ensañare a aplicar el efecto dentro de tu blog, pero para empezar, es necesario que veas una muestra en la pagina del autor.


1-) Para empezar entra a la edicion HTML de tu blog, busca la etiqueta </head> y pega el siguiente codigo justo antes de dicha búsqueda.

<script type="text/javascript" src="http://h1.ripway.com/inacho/highslide-with-gallery.js"></script>
<link rel="stylesheet" type="text/css" href="http://h1.ripway.com/inacho/highslide.css" />

<script type="text/javascript">
hs.graphicsDir = 'http://h1.ripway.com/inacho/graphic/';
hs.align = 'center';
hs.transitions = ['expand', 'crossfade'];
hs.outlineType = 'rounded-white';
hs.fadeInOut = true;
//hs.dimmingOpacity = 0.75;

hs.addSlideshow({
//slideshowGroup: 'group1',
interval: 5000,
repeat: false,
useControls: true,
fixedControls: 'fit',
overlayOptions: {
opacity: .75,
position: 'bottom center',
hideOnMouseOut: true
}
});
</script>

En Rojo: Son los archivos alojados en el servidor externo

Leer completo

01 agosto 2010

Nuevo Slide con desplazamiento manual usando jQuery

  1 comentario
11:14

Los slides dan un toque de profesionalismo en cada pagina web o blog que los posea, ya que tienen efectos vistosos que rápidamente pueden llamar la atención del lector, invitándolos a hacer clics sobre cada uno de ellos. Este no es el primer Slide con desplazamiento que he publicado en este blog, de hecho, hay uno aquí publicado que posee el mismo efecto y usa jQuery para su acción pero es totalmente diferente en su estilo.



Es momento de comenzar comenzar con la explicación, recuerda siempre de usar imágenes con dimensiones de 307px de ancho (Width) por 254 de altura (Height). También te recomiendo que descargar los archivos Javascript a tu computador y alojarlos en tu propio servidor. Antes de comenzar, te dejo una vista previa en imagen del Slide, pero siempre puede ver la demostracion en mi blog de pruebas.



1) Entra a Blogger > Diseño > Edición HTML
2) Usando Ctrl + F, encuentra la etiqueta </head> dentro del codigo
3) Pega el siguiente código justo antes de la etiqueta que acabas de buscar

Leer completo

02 junio 2010

Mostrar un pequeño anuncio desplazable en el blog

  No hay comentarios
8:40

El truco tiene como función colocar cualquier mensaje que quieras dejar a los usuarios de tu blog, es muy útil, ya que es inevitable que lo vea, ya que al mover la barra de scroll del navegador, este seguirá en el top del blog, con efecto desplazamiento de arriba a abajo. Ademas, si el usuario desea puede cerrar el mensaje, haciendo clic en el botón rojo.


Les cuento, este truco ya lo había visto muchísimo tiempo en algunas paginas y blog, pero pues, nunca me interese en saber como lo hacían, hasta el día de hoy, que me pareció una información útil para los usuarios bloggeros, ya que le agregas un poco de interacción al blog y muchas mas vistosidad. Si no me equivoco, aquí mismo, en esta pagina (La pagina individual de la entrada) puedes ver una demostración de lo que es el truco, pero de todas maneras, si no la ves, puedes ver una demostracion en este blog de pruebas.

Pasos


[1] Estilos CSS

Agrega el siguiente codigo CSS justo encima del ]]></b:skin>

#anuncio {
position: absolute;
border: 0px;
padding: 2px;
width: 300px;
height: 80px;
visibility: hidden;
z-index: 200;
top: 27px;
left: 13px;
}
[2] Los codigos JavaScript (.js)

Leer completo

01 junio 2010

Apture: Agregar una Barra de compartir en tu blog mas búsqueda multimedia

  No hay comentarios
23:13

Apture es un generador en linea, que nos permite colocar una barra de compartir, compartir en Facebook, Twitter y compartir mediante correo electrónico, y no solo eso, tiene función de búsqueda multimedia, con solo colocar la palabra clave en el cuadro de búsqueda al lado izquierdo de la barra, permitiéndonos así, encontrar información en los distintos buscadores, ver vídeos e imágenes sin salir del blog, no es necesario registrarte en la pagina para crear una barra, pero al parecer, si lo haces, podrías tener mas privilegios que hacerlo sin logearte antes.

les dejo una muestra en imagen




Si no te fue suficiente, puedes ver una demostración en este blog de pruebas


La barra se mostrara al dezplazar de arriba a abajo el scrollbar del navegador

Pasos

[1] Entra a Apture.com
[2] Al entrar, haz clic en el boton
[3] Al abrir el vinculo al cual te lleva el boton, rellenaras los siguientes campos mostrados

Leer completo

12 mayo 2010

Agregar un Slideshow automatico en tu blog

  24 comentarios
10:59

Ya hace un buen tiempo, publique una entrada que nos permitia mostrar un slide con nuestras entradas favoritas, pero a diferencia, del que les explicare hoy, este no era automatico, si no manual, manejandose por dos flechas apuntando hacia las dos direcciones, y que al hacer click se pasaba a la otra parte del contenido con un efecto de dezplazamiento muy bonito, producido por jQuery.


Un nuevo amigo, de nombre Carlos Javier, vio esa entrada, le gusto mucho pero no era lo que queria. Este fue su comentario y para complacerlo, hoy le traigo su respuesta.
hola man no se el cambio para ver cada entrada que colcocas es manual...??
osea siempre tego que apretar la flechita para que cambie, como lo hago que sea automatico...

Bien aqui les dejo esta imagen de muestra, para que vean como es el slide, de todas maneras, puedes ver una demostracion en este blog de pruebas.


Pasos

1. Logeate en Blogger
2. Ve a la edicion HTML y busca la etiqueta </head>
3. Copia el siguiente codigo, justo antes de lo que acaba de buscar y guarda los cambios.

Leer completo

17 abril 2010

Mostrar un Slide con tus entradas Favoritas con jQuery

  22 comentarios
0:07

Lo que mas me gusta de los Scripts es el gran tipo de interacción que pueden ofrecer a los blogs, algo que con tan solo usar HTML y CSS, no es imposible hacerlo, pero tal vez un poco dificil, hoy traigo para ti, un slide, uno donde tu podras mostrar resumenes de tu entradas favoritas, quizas, tu entradas populares, o las mas comentadas, o las recientes, puedes añadirles las que quieras y cuantas quieras.


Esto es un efecto que sin duda, deberias colocar el tu blog, si quieres atraer la leccion de tus lectores, lo mas importante es que coloques entradas que consideres de mucho valor, que sea lo que realmente tu lector busca, redactar de forma que el usuario quiera mas, tal vez con una pregunta al final del parrafo que deje en incognita al lector, y quiera entrar a ver cual es la respuesta, todo depende de tu creatividad.

Antes de comenzar, puedes ver una demostracion de este efecto en este blog de pruebas. De igual manera, alli en la imagen te dejo una previsualizacion de su apariencia.



[1] Ahora, para hacer funcionar el efecto, debes añadir el proximo codigo justo antes de </head>, este codigo corresponde a el script, jQuery es el que da la interaccion, si ya tienes el script en tu blog, no es necesario seguir este paso.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

[2] Ahora, lo siguiente sera añadir algunos codigos Javascript a tu blog, yo ya los subir a mi propio servidor, puedes Descargarte el Archivo desde aqui, descomprime el Zip, luego, sube todos los 4 archivos .Js y el .CSS a tu servidor. Si no lo quieres subir, pues no importa, yo aqui pondre la direccion de los mios, es tu decision. Los siguientes codigo van justo antes de </head>

<script src='http://sites.google.com/site/archivosfrikibloggeo/slide/jQuery1-FrikiBloggeo.js' type='text/javascript'/>

<script src='http://sites.google.com/site/archivosfrikibloggeo/slide/jQuery2-FrikiBloggeo.js' type='text/javascript'/>

<script src='http://sites.google.com/site/archivosfrikibloggeo/slide/jQuery3-FrikiBloggeo.js' type='text/javascript'/>

<script src='http://sites.google.com/site/archivosfrikibloggeo/slide/jQuery4-FrikiBloggeo.js' type='text/javascript'/>

<link href='http://sites.google.com/site/archivosfrikibloggeo/slide/Estiloslidecss-FrikiBloggeo.css' rel='stylesheet' type='text/css'/>


Es importante subirlos a tu propio servidor, es por el propio bien de tu blog, si no quieres hacerlo, es tu decision

Otra opcion es, ni subirlo a tu servidor, ni usar el mio, colocarlos directamente en tu blog, aqui tu eres el que decide de que forma colocarla, pero no recomiendo esta opcion, ya que el codigo es demasiado largo, y podrias confundirte. Este codigo, como los demas, tambien va justo antes de </head>.

Leer completo

03 marzo 2010

Agregar emoticones de Yahoo! Smiley encima del formulario de comentarios

  5 comentarios
10:48

Si tienes activado el formulario de comentarios debajo de cada post, entonces seria bueno que le dieras oportunidad a tus lectores al comentar de agregar una lista de emoticones o smilies para que aquellos que deseen comentar en vez de colocar un texto para demostrar agrado como el común"Jajaja" coloquen una carita feliz con los distintos codigos que salen al lado de cada imagen y que al publicar el comentario o post, ya que también sirve para tus entradas, el Script lo sustituya por cada imagen correspondiente.

El formulario de los comentarios se vera igual o similar al que puedes observar en la imagen, al lado derecho de este texto.

Para agregar estos emoticones, debes seguir los siguientes pasos.

[1] Inicia sesion en Blogger, luego ve a la pestaña Diseño>Edicion HTML y expandiendo los artilugios, busca el siguiente codigo.

<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>

[2] Ahora, entre estas dos lineas, pega el siguiente codigo.

Leer completo

27 febrero 2010

Galería de imagen en ventanas modales con SlimBox

  No hay comentarios
12:05


SlimBox es un Script que utiliza las ventanas modales de LightBox, pero a diferencia de este, SlimBox solo sirve para mostrar galería de imágenes o imágenes solas. La ventaja es que tu blog carga mas rápido a diferencia de que coloques todas las imágenes en el blog directamente, y ademas, se vera mucho mas atractivo para los visitantes a la hora de ver las fotos en el blog.


Esta aplicación utiliza para su funcionamiento a Mootools, el cual les explicare aqui como colocarlo en tu blog, pero si ya lo tienes incluido no es necesario hacerlo de nuevo. Entonces, empiezo a explicar.

[1] Ve a la Edicion HTML de tu blog y pega el siguiente codigo justo antes de </head> y guarda los cambios.

<script src='http://sites.google.com/site/frikibloggeo/archivos/mootools.js' type='text/javascript'/>

[2] Ahora, de nuevo, justo antes de </head> pega esto codigos y guarda los cambios.

<!-- SlimBox -->

<script src='http://sites.google.com/site/archivosfrikibloggeo/friki-bloggeo/images/slimboxjs.js' type='text/javascript'/>
<link href='http://sites.google.com/site/frikibloggeo/archivos/slimboxcss.css' media='screen' rel='stylesheet' type='text/css'/>

<!-- /SlimBox -->

[3] Ahora, para aplicar el uso de una sola imagen, solo necesitas incluir el atributo rel="lightbox" en el link.

<a href="URL DE LA IMAGEN AQUI" rel="lightbox" title="TITULO DE LA IMAGEN">NOMBRE DE LA IMAGEN</a>



[4] Ahora, para mostrar galería de imágenes solo debes añadir el atributo rel="lightbox[nombredegrupo]"

Leer completo

24 febrero 2010

No se ve el Gadget de Seguidores: Solucion Definitiva

  12 comentarios
9:22


Desde hace ya mucho tiempo mi gadget de seguidores venia sin funcionar, y este problemas es muy usual, y se que a muchas personas les ocurre esto, trayendo como consecuencia que los usuarios que desean seguir al blog que esta visitando, se le haga imposible hacerlo, por no tener la posibilidad de ver este gadget introducido en el blog...


Ayer, buscando solucionar este problema, entre a la pagina de Google Friend Connect a ver si podia hallar una solucion alli, y efectivamente asi fue, la halle... No es nada complicado, solo debes seguir un pequeño procedimiento y yo lo explicare con mucha atencion y esperando que quedes satisfecho con el tutorial

Entonces, que debemos hacer...

Entra a la pagina oficial de Google Friend Connect, inicias la sesion con tu cuenta google, si ya has iniciado antes no te preocupes, reconocera tu cuenta al instante.

En la pagina, habra una barra lateral o sidebar al lado izquierdo de la pantalla. alli te saldran todos tu blog, creados con la cuenta google que estas utilizando en ese momento.

Obviamente, selecciona el blog que tiene el problema con el gadget e inmediatamente abrira la siguiente pagina en donde debes seguir el proximo paso.


Como ya dije, abrira la siguiente pagina, en la que te mostrara varios botones como el siguiente, y haras click en el boton que dice "Examinar la galeria de Gadgets"


Luego de esto, aparecera la galeria de gadgets, haras click en Todos los Gadgets para que nos muestre el gadget que necesitamos.

No es obligado que usemos el gadget que necesitamos, pero si quieres que el gadget luzca como la primera imagen de este post tendras que seguir los pasos...

De otro modo, tienes el derecho de elejir el gadget que quieras, hay mucha variedad de gadget muy bonitos que podrian combinar con tu blog.

Leer completo

21 febrero 2010

Tabs CSS o Pestañas CSS con efecto desvanecimiento de jQuery

  2 comentarios
14:49


Como yo se que algunos por allí quedaron muy contentos con el post de como
colocar varios widget en una sola sección, algo muy importante para hacer que nuestro blog cargue un poco mas rápido, y que los widget no ocupen tanto espacio, y lo mas importante, hacer ver nuestro blog mas atractivo, profesional e independiente...


Hoy, les traigo otro post, muy parecido pero diferente, Jeje... se trata de pestañas o tabs que al colocar el mouse y hacer clic sobre el abre el contenido pero con un efecto desvanecimiento muy llamativo, puedes ver la demostracion en mi blog de pruebas o en la pagina oficial del script, no se puede negar que es muy atractivo este recursos... Lo primero que tienes que hacer sera lo siguiente...

[1] Debes incluir la Libreria jQuery en tu blog, si ya la tienes no es necesario incluir este el siguiente codigo debajo de la etiqueta <head>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>


[2] Ahora, dirigete hasta la Edicion HTML y justo ante de ]]></b:skin> pega los siguiente codigo.

CSS para los Tabs



ul.tabs {
margin: 0;
padding: 0;
float: left;
list-style: none;
height: 32px;
border-bottom: 1px solid #999;
border-left: 1px solid #999;
width: 100%;
}
ul.tabs li {
float: left;
margin: 0;
padding: 0;
height: 31px;
line-height: 31px;
border: 1px solid #999;
border-left: none;
margin-bottom: -1px;
overflow: hidden;
position: relative;
background: #e0e0e0;
}
ul.tabs li a {
text-decoration: none;
color: #000;
display: block;
font-size: 1.2em;
padding: 0 20px;
border: 1px solid #fff;
outline: none;
}
ul.tabs li a:hover {
background: #ccc;
}
html ul.tabs li.active, html ul.tabs li.active a:hover {
background: #fff;
border-bottom: 1px solid #fff;
}


CSS para el contenido del tab

Leer completo

17 febrero 2010

Drop Down Menu con JQuery

  No hay comentarios
10:27

Hoy, visitando algunas paginas donde pueda encontrar javascripts excelentes para mi blog, me encontre con un menu muy bonito, y que ademas me gusto mucho, es horizontal y desplegable, ya habia publicado otro menu vertical desplegable con CSS y tambien, un menu de pestañas, pero este es el primero que usa el JQuery para darle funcion al menu...


Puedes ver un ejemplo en este blog de pruebas... Si te gusta lo primero que debes hacer es seguir los siguientes pasos

[1] Primero, si ya tienes la libreria JQuery Instalada en tu blog no es necesario seguir este paso, si no lo tienes, ve a la Edicion HTML de tu blog y encima de la etiqueta </head> pega los siguientes codigos.

Codigo 1

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js' type='text/javascript'></script>

Codigo 2

<script type='text/javascript'>

var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;

function jsddm_open()
{ jsddm_canceltimer();
jsddm_close();
ddmenuitem = $(
this).find('ul').css('visibility', 'visible');}

function jsddm_close()
{ if(ddmenuitem) ddmenuitem.css(
'visibility', 'hidden');}

function jsddm_timer()
{ closetimer = window.setTimeout(jsddm_close, timeout);}

function jsddm_canceltimer()
{ if(closetimer)
{ window.clearTimeout(closetimer);
closetimer =
null;}}

$(document).ready(
function()
{ $('
#jsddm > li').bind('mouseover', jsddm_open)
$('
#jsddm > li').bind('mouseout', jsddm_timer)});

document.onclick = jsddm_close;
</script>


[2] Ahora, para darle el estilo CSS al menu, pega el siguiente codigo justo antes de ]]></b:skin>

Leer completo

02 febrero 2010

Redireccionar un Blog hacia otro con JavaScript

  1 comentario
18:35

Hoy, mi amigo Horacio, el creador de la plantilla "Old new for Blogger" se ha dado cuenta de que yo por unos momento redireccione mi blog anterior hasta este otro nuevo, los cuales tienen la misma tematica, me contacto por facabook diciendome esto

una consulta: ¿Cómo hiciste para que recursoswebmasters.com.ar redirija a frikibloggeo.blogspot.com?
Y yo con mucho gusto le respondo mediante este post y al mismo tiempo los ayudo a ustedes...

[1] Dirigete a la edicion HTML de tu plantilla... Busca la etiqueta <head>

[2] ahora, despues de la etiqueta que buscastes pega el siguiente pedazo de codigo.

<script language='Javascript'>
function redireccionar() {
setTimeout(&quot;location.href=&#39;
URL A LA QUE DESEAS REDIRECCIONAR&#39;&quot;, 80000);}
</script>

Debes usar http://

[3] Ahora seguimos, busca la etiqueta <body> y sutituyela por el siguiente codigo

Leer completo

01 febrero 2010

Wibiya: Para colocar barra de herramientas o Tools Bar al final de la pagina

  7 comentarios
10:42

La verdad es que llevo mucho tiempo investigando por la web como podria colocar una barra de herramientas al final de mi pagina, hace mucho tiempo, hasta que dios se compadecio de mi y me hizo encontrar a Wibiya... A poco a ustedes no les gustaria tener esa imagen larga que ven debajo de este texto o que al igual, la pueden ver al final de esta ventana, lo hace todo mas facil y mas actrativa haciendo que tus lectores queden atrapados en la barra....






Ahora les explicare que debemos hacer para obtener la barra...

[1] Entra a wibiya. Luego que abras la paginas haces clic en GET IT NOW como lo muestra la imagen siguiente


[2] luego prosigues en la pagina que abra, rellenado el formulario de registro como te lo muestra en la imagen, en donde Dice Site Name y Site URL esta claro que debes sustituirlos por los tuyos, debes seleccionar idioma español, por defecto viene en Ingles, esta atento a eso... Luego haz clic en NEXT para pasar a la proxima pagina.


[3] Luego selecciona el color de tu barra, yo te recomiendo que veas muy bien tu sitio, y que trates de combinarlo con la barra para darle un aspecto mas elegante... Luego haz clic en NEXT para pasar a la proxima pagina...

Leer completo

30 enero 2010

Agregar Post Relacionadas debajo de cada entrada clasificadas por las etiquetas

  1 comentario
15:20

Ya antes publique como añadir post relacionadas debajo de cada entrada con Linwithin, tal vez sea mas facil de usar, ya que es un generador, y es lo mismo como si no movieras un solo dedo para agregar esto, pero quizas no era lo que esperabas ya que Linwithin agrega los post debajo de cada entrada en la pagina principal, haciendo un poquito mas pesada tu pagina, que a diferencia de esta nueva opcion que hoy te traigo, solo veras los post relacionadas al hacer click en la pagina original de cada entrada y ademas clasificadas cada una con su repectiva etiqueta o label.


Antes de comenzar, siempre recuerda guardar una copia de tu plantilla, no es siempre seguro que todo salga bien, aunque a mi me haya salido...
[1] Para empezar, vea hasta la Edicion HTML de tu blog, y con los artilugios expandidos busca el siguiente codigo...

<data:post.body/>

[2] Justo despues de ese linea de codigo, pega este que sigue

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='similiar'>

<div class='widget-content'><br/>
<h3>Las demas personas tambien leyeron:</h3>
<div id='data2007'/><br/><br/>
<script type='text/javascript'>

var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;

maxNumberOfPostsPerLabel = 10;
maxNumberOfLabels = 3;


function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;

for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;

if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;data2007&#39;).appendChild(div1);
}
}
}
function search10(query, label) {

var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}

var labelArray = new Array();
var numLabel = 0;

<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;
var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>

[3] Guarda los cambios, entra en un post de tu blog y verifica

Cualquier error del codigo o algo mal avisamelo en un comentario y lo resolvere...

Leer completo

25 diciembre 2009

Copos de nieve en tu blog

  No hay comentarios
13:04

Siguiendo en mi busqueda de javascripts para ustedes, encontre un maravilloso efecto para estas epocas que puedes colocar en tu blog, muy parecido al script de la nieve que publique en un post no hace mucho, pero esta vez se trata de copos de nieve cayendo por todo tu blog y haciendo parecer que tu blog esta muy bien adaptado y difrutando estas navidades como debe ser

El codigo de este maravilloso efecto es el que les dare a continuacion:

Leer completo

22 diciembre 2009

Nieve que se acumula al final de la página

  No hay comentarios
1:46

En una entrada anterior habíamos visto como conseguir un efecto de nieve en el blog mediante el uso de la etiqueta "marquee" y poco después veíamos como incluir el efecto nieve usando un script.

En esta ocasión vamos a ver de nuevo como incluir nieve en el blog mediante el uso de un script. El script irá incluido directamente en la plantilla y lo he "marcado" para que, una vez pasadas las fiestas, sea fácil su localización para retirarlo.

Este script consigue un efecto muy lindo, ya que los copos que van cayendo quedan acumulados al final de la página y mientras unos caen, los del pie de la página se van deshaciendo poco a poco...
Además si movemos el ratón por la pagina, los copos cambian de dirección como movidos por un ligero viento.

Antes de decidir si vais a usarlo o no,
podéis ver una demostración online en un blog donde también e incluido el script para copiar.

Lo único que hemos de hacer para
conseguir el efecto nieve, es copiar el script y colocarlo en el código de nuestra plantilla antes de </head>




<!-- Comienzo del script para nieve -->
<script type="text/javascript">
//<![CDATA[

/*
DHTML Snowstorm! OO-style Jascript-based Snow effect
----------------------------------------------------
Version 1.4.20091115 (Previous rev: v1.3.20081215)
Code by Scott Schiller - http://schillmania.com
----------------------------------------------------

Initializes after body onload() by default (via addEventHandler() call at bottom.)
To customize properties, edit below or override configuration after this script
has run (but before body.onload), eg. snowStorm.snowStick = false;

*/

var snowStorm = null;

function SnowStorm() {

// --- PROPERTIES ---

this.flakesMax = 150; // Limit total amount of snow made (falling + sticking)
this.flakesMaxActive = 64; // Limit amount of snow falling at once (less = lower CPU use)
this.animationInterval = 33; // Theoretical "miliseconds per frame" measurement. 20 = fast + smooth, but high CPU use. 50 = more conservative, but slower
this.flakeBottom = null; // Integer for Y axis snow limit, 0 or null for "full-screen" snow effect
this.targetElement = null; // element which snow will be appended to (document body if null/undefined) - can be an element ID string, or a DOM node reference
this.followMouse = true; // Snow will change movement with the user's mouse
this.snowColor = '#fff'; // Don't eat (or use?) yellow snow.
this.snowCharacter = '&bull;'; // &bull; = bullet, &middot; is square on some systems etc.
this.snowStick = true; // Whether or not snow should "stick" at the bottom. When off, will never collect.
this.useMeltEffect = true; // When recycling fallen snow (or rarely, when falling), have it "melt" and fade out if browser supports it
this.useTwinkleEffect = false; // Allow snow to randomly "flicker" in and out of view while falling
this.usePositionFixed = false; // true = snow not affected by window scroll. may increase CPU load, disabled by default - if enabled, used only where supported

// --- less-used bits ---

this.flakeLeftOffset = 0; // amount to subtract from edges of container
this.flakeRightOffset = 0; // amount to subtract from edges of container
this.flakeWidth = 8; // max pixel width for snow element
this.flakeHeight = 8; // max pixel height for snow element
this.vMaxX = 5; // Maximum X velocity range for snow
this.vMaxY = 4; // Maximum Y velocity range
this.zIndex = 0; // CSS stacking order applied to each snowflake

// --- End of user section ---

// jslint global declarations
/*global window, document, navigator, clearInterval, setInterval */

var addEvent = (typeof(window.attachEvent)=='undefined'?function(o,evtName,evtHandler) {
return o.addEventListener(evtName,evtHandler,false);
}:function(o,evtName,evtHandler) {
return o.attachEvent('on'+evtName,evtHandler);
});

var removeEvent = (typeof(window.attachEvent)=='undefined'?function(o,evtName,evtHandler) {
return o.removeEventListener(evtName,evtHandler,false);
}:function(o,evtName,evtHandler) {
return o.detachEvent('on'+evtName,evtHandler);
});

function rnd(n,min) {
if (isNaN(min)) {
min = 0;
}
return (Math.random()*n)+min;
}

function plusMinus(n) {
return (parseInt(rnd(2),10)==1?n*-1:n);
}

var s = this;
var storm = this;
this.timers = [];
this.flakes = [];
this.disabled = false;
this.active = false;

var isIE = navigator.userAgent.match(/msie/i);
var isIE6 = navigator.userAgent.match(/msie 6/i);
var isOldIE = (isIE && (isIE6 || navigator.userAgent.match(/msie 5/i)));
var isWin9X = navigator.appVersion.match(/windows 98/i);
var isiPhone = navigator.userAgent.match(/iphone/i);
var isBackCompatIE = (isIE && document.compatMode == 'BackCompat');
var noFixed = ((isBackCompatIE || isIE6 || isiPhone)?true:false);
var screenX = null;
var screenX2 = null;
var screenY = null;
var scrollY = null;
var vRndX = null;
var vRndY = null;
var windOffset = 1;
var windMultiplier = 2;
var flakeTypes = 6;
var fixedForEverything = false;
var opacitySupported = (function(){
try {
document.createElement('div').style.opacity = '0.5';
} catch (e) {
return false;
}
return true;
})();
var docFrag = document.createDocumentFragment();
if (s.flakeLeftOffset === null) {
s.flakeLeftOffset = 0;
}
if (s.flakeRightOffset === null) {
s.flakeRightOffset = 0;
}

this.meltFrameCount = 20;
this.meltFrames = [];
for (var i=0; i<this.meltFrameCount; i++) {
this.meltFrames.push(1-(i/this.meltFrameCount));
}

this.randomizeWind = function() {
vRndX = plusMinus(rnd(s.vMaxX,0.2));
vRndY = rnd(s.vMaxY,0.2);
if (this.flakes) {
for (var i=0; i<this.flakes.length; i++) {
if (this.flakes[i].active) {
this.flakes[i].setVelocities();
}
}
}
};

this.scrollHandler = function() {
// "attach" snowflakes to bottom of window if no absolute bottom value was given
scrollY = (s.flakeBottom?0:parseInt(window.scrollY||document.documentElement.scrollTop||document.body.scrollTop,10));
if (isNaN(scrollY)) {
scrollY = 0; // Netscape 6 scroll fix
}
if (!fixedForEverything && !s.flakeBottom && s.flakes) {
for (var i=s.flakes.length; i--;) {
if (s.flakes[i].active === 0) {
s.flakes[i].stick();
}
}
}
};

this.resizeHandler = function() {
if (window.innerWidth || window.innerHeight) {
screenX = window.innerWidth-(!isIE?16:2)-s.flakeRightOffset;
screenY = (s.flakeBottom?s.flakeBottom:window.innerHeight);
} else {
screenX = (document.documentElement.clientWidth||document.body.clientWidth||document.body.scrollWidth)-(!isIE?8:0)-s.flakeRightOffset;
screenY = s.flakeBottom?s.flakeBottom:(document.documentElement.clientHeight||document.body.clientHeight||document.body.scrollHeight);
}
screenX2 = parseInt(screenX/2,10);
};

this.resizeHandlerAlt = function() {
screenX = s.targetElement.offsetLeft+s.targetElement.offsetWidth-s.flakeRightOffset;
screenY = s.flakeBottom?s.flakeBottom:s.targetElement.offsetTop+s.targetElement.offsetHeight;
screenX2 = parseInt(screenX/2,10);
};

this.freeze = function() {
// pause animation
if (!s.disabled) {
s.disabled = 1;
} else {
return false;
}
for (var i=s.timers.length; i--;) {
clearInterval(s.timers[i]);
}
};

this.resume = function() {
if (s.disabled) {
s.disabled = 0;
} else {
return false;
}
s.timerInit();
};

this.toggleSnow = function() {
if (!s.flakes.length) {
// first run
s.start();
} else {
s.active = !s.active;
if (s.active) {
s.show();
s.resume();
} else {
s.stop();
s.freeze();
}
}
};

this.stop = function() {
this.freeze();
for (var i=this.flakes.length; i--;) {
this.flakes[i].o.style.display = 'none';
}
removeEvent(window,'scroll',s.scrollHandler);
removeEvent(window,'resize',s.resizeHandler);
if (!isOldIE) {
removeEvent(window,'blur',s.freeze);
removeEvent(window,'focus',s.resume);
}
};

this.show = function() {
for (var i=this.flakes.length; i--;) {
this.flakes[i].o.style.display = 'block';
}
};

this.SnowFlake = function(parent,type,x,y) {
var s = this;
var storm = parent;
this.type = type;
this.x = x||parseInt(rnd(screenX-20),10);
this.y = (!isNaN(y)?y:-rnd(screenY)-12);
this.vX = null;
this.vY = null;
this.vAmpTypes = [1,1.2,1.4,1.6,1.8]; // "amplification" for vX/vY (based on flake size/type)
this.vAmp = this.vAmpTypes[this.type];
this.melting = false;
this.meltFrameCount = storm.meltFrameCount;
this.meltFrames = storm.meltFrames;
this.meltFrame = 0;
this.twinkleFrame = 0;
this.active = 1;
this.fontSize = (10+(this.type/5)*10);
this.o = document.createElement('div');
this.o.innerHTML = storm.snowCharacter;
this.o.style.color = storm.snowColor;
this.o.style.position = (fixedForEverything?'fixed':'absolute');
this.o.style.width = storm.flakeWidth+'px';
this.o.style.height = storm.flakeHeight+'px';
this.o.style.fontFamily = 'arial,verdana';
this.o.style.overflow = 'hidden';
this.o.style.fontWeight = 'normal';
this.o.style.zIndex = storm.zIndex;
docFrag.appendChild(this.o);

this.refresh = function() {
if (isNaN(s.x) || isNaN(s.y)) {
// safety check
return false;
}
s.o.style.left = s.x+'px';
s.o.style.top = s.y+'px';
};

this.stick = function() {
if (noFixed || (storm.targetElement != document.documentElement && storm.targetElement != document.body)) {
s.o.style.top = (screenY+scrollY-storm.flakeHeight)+'px';
} else if (storm.flakeBottom) {
s.o.style.top = storm.flakeBottom+'px';
} else {
s.o.style.display = 'none';
s.o.style.top = 'auto';
s.o.style.bottom = '0px';
s.o.style.position = 'fixed';
s.o.style.display = 'block';
}
};

this.vCheck = function() {
if (s.vX>=0 && s.vX<0.2) {
s.vX = 0.2;
} else if (s.vX<0 && s.vX>-0.2) {
s.vX = -0.2;
}
if (s.vY>=0 && s.vY<0.2) {
s.vY = 0.2;
}
};

this.move = function() {
var vX = s.vX*windOffset;
s.x += vX;
s.y += (s.vY*s.vAmp);
if (s.x >= screenX || screenX-s.x < storm.flakeWidth) { // X-axis scroll check
s.x = 0;
} else if (vX < 0 && s.x-storm.flakeLeftOffset<0-storm.flakeWidth) {
s.x = screenX-storm.flakeWidth-1; // flakeWidth;
}
s.refresh();
var yDiff = screenY+scrollY-s.y;
if (yDiff<storm.flakeHeight) {
s.active = 0;
if (storm.snowStick) {
s.stick();
} else {
s.recycle();
}
} else {
if (storm.useMeltEffect && s.active && s.type < 3 && !s.melting && Math.random()>0.998) {
// ~1/1000 chance of melting mid-air, with each frame
s.melting = true;
s.melt();
// only incrementally melt one frame
// s.melting = false;
}
if (storm.useTwinkleEffect) {
if (!s.twinkleFrame) {
if (Math.random()>0.9) {
s.twinkleFrame = parseInt(Math.random()*20,10);
}
} else {
s.twinkleFrame--;
s.o.style.visibility = (s.twinkleFrame && s.twinkleFrame%2===0?'hidden':'visible');
}
}
}
};

this.animate = function() {
// main animation loop
// move, check status, die etc.
s.move();
};

this.setVelocities = function() {
s.vX = vRndX+rnd(storm.vMaxX*0.12,0.1);
s.vY = vRndY+rnd(storm.vMaxY*0.12,0.1);
};

this.setOpacity = function(o,opacity) {
if (!opacitySupported) {
return false;
}
o.style.opacity = opacity;
};

this.melt = function() {
if (!storm.useMeltEffect || !s.melting) {
s.recycle();
} else {
if (s.meltFrame < s.meltFrameCount) {
s.meltFrame++;
s.setOpacity(s.o,s.meltFrames[s.meltFrame]);
s.o.style.fontSize = s.fontSize-(s.fontSize*(s.meltFrame/s.meltFrameCount))+'px';
s.o.style.lineHeight = storm.flakeHeight+2+(storm.flakeHeight*0.75*(s.meltFrame/s.meltFrameCount))+'px';
} else {
s.recycle();
}
}
};

this.recycle = function() {
s.o.style.display = 'none';
s.o.style.position = (fixedForEverything?'fixed':'absolute');
s.o.style.bottom = 'auto';
s.setVelocities();
s.vCheck();
s.meltFrame = 0;
s.melting = false;
s.setOpacity(s.o,1);
s.o.style.padding = '0px';
s.o.style.margin = '0px';
s.o.style.fontSize = s.fontSize+'px';
s.o.style.lineHeight = (storm.flakeHeight+2)+'px';
s.o.style.textAlign = 'center';
s.o.style.verticalAlign = 'baseline';
s.x = parseInt(rnd(screenX-storm.flakeWidth-20),10);
s.y = parseInt(rnd(screenY)*-1,10)-storm.flakeHeight;
s.refresh();
s.o.style.display = 'block';
s.active = 1;
};

this.recycle(); // set up x/y coords etc.
this.refresh();

};

this.snow = function() {
var active = 0;
var used = 0;
var waiting = 0;
var flake = null;
for (var i=s.flakes.length; i--;) {
if (s.flakes[i].active == 1) {
s.flakes[i].move();
active++;
} else if (s.flakes[i].active === 0) {
used++;
} else {
waiting++;
}
if (s.flakes[i].melting) {
s.flakes[i].melt();
}
}
if (active<s.flakesMaxActive) {
flake = s.flakes[parseInt(rnd(s.flakes.length),10)];
if (flake.active === 0) {
flake.melting = true;
}
}
};

this.mouseMove = function(e) {
if (!s.followMouse) {
return true;
}
var x = parseInt(e.clientX,10);
if (x<screenX2) {
windOffset = -windMultiplier+(x/screenX2*windMultiplier);
} else {
x -= screenX2;
windOffset = (x/screenX2)*windMultiplier;
}
};

this.createSnow = function(limit,allowInactive) {
for (var i=0; i<limit; i++) {
s.flakes[s.flakes.length] = new s.SnowFlake(s,parseInt(rnd(flakeTypes),10));
if (allowInactive || i>s.flakesMaxActive) {
s.flakes[s.flakes.length-1].active = -1;
}
}
storm.targetElement.appendChild(docFrag);
};

this.timerInit = function() {
s.timers = (!isWin9X?[setInterval(s.snow,s.animationInterval)]:[setInterval(s.snow,s.animationInterval*3),setInterval(s.snow,s.animationInterval)]);
};

this.init = function() {
s.randomizeWind();
s.createSnow(s.flakesMax); // create initial batch
addEvent(window,'resize',s.resizeHandler);
addEvent(window,'scroll',s.scrollHandler);
if (!isOldIE) {
addEvent(window,'blur',s.freeze);
addEvent(window,'focus',s.resume);
}
s.resizeHandler();
s.scrollHandler();
if (s.followMouse) {
addEvent(document,'mousemove',s.mouseMove);
}
s.animationInterval = Math.max(20,s.animationInterval);
s.timerInit();
};

var didInit = false;

this.start = function(bFromOnLoad) {
if (!didInit) {
didInit = true;
} else if (bFromOnLoad) {
// already loaded and running
return true;
}
if (typeof s.targetElement == 'string') {
var targetID = s.targetElement;
s.targetElement = document.getElementById(targetID);
if (!s.targetElement) {
throw new Error('Snowstorm: Unable to get targetElement "'+targetID+'"');
}
}
if (!s.targetElement) {
s.targetElement = (!isIE?(document.documentElement?document.documentElement:document.body):document.body);
}
if (s.targetElement != document.documentElement && s.targetElement != document.body) {
s.resizeHandler = s.resizeHandlerAlt; // re-map handler to get element instead of screen dimensions
}
s.resizeHandler(); // get bounding box elements
s.usePositionFixed = (s.usePositionFixed && !noFixed); // whether or not position:fixed is supported
fixedForEverything = s.usePositionFixed;
if (screenX && screenY && !s.disabled) {
s.init();
s.active = true;
}
};

function doStart() {
s.start(true);
}

if (document.addEventListener) {
// safari 3.0.4 doesn't do DOMContentLoaded, maybe others - use a fallback to be safe.
document.addEventListener('DOMContentLoaded',doStart,false);
window.addEventListener('load',doStart,false);
} else {
addEvent(window,'load',doStart);
}

}

snowStorm = new SnowStorm();
//]]>
</script>
<!-- Fin del script para nieve -->



Notas:
[1] He respetado los créditos al autor original: Schillmania, pienso que no sería pedir demasiado hicieseis lo mismo todos y no borraseis esa parte en el script...

[2] Una cosa a tener en cuenta, es que el efecto nieve también será visible en la parte de Diseño de nuestro blog, esto es normal y además he comprobado que no da ningún problema, aunque si en algún caso eso sucediese bastaría retirar el script.

[3] Para retirar el script una vez no queramos usarlo, nos fijaremos en las anotaciones que he puesto al comienzo y al final y que he destacado en color rojo en el código y borramos todo desde la primera anotación a la última, ambas incluidas.

[4] Hay algunos cambios que podemos hacer, aunque yo personalmente lo dejaría como est... cabe destacar que podemos aumentar la cantidad de copos de nieve en esta línea del script:

this.flakesMax = 150;

Leer completo