sábado, 13 de junio de 2009

Efecto Nieve

Aunque generalmente suele ser cuando se acerca el mes de Diciembre la moda de nieve en el blog, nunca está demas tener a mano la forma de implementar en nuestra página ese efecto característico de la época. A continuación el código para tal efecto, y que debe ser colocado antes de la etiqueta <body> .


< script>

// Numero de copos, recomendados entre 30 y 40, si introducimos más podemos ralentizar la carga del blog.

var nieve_cantidad=35

// Tipo de color de los copos se mostraran. Se muestran de forma aleatoria.

var nieve_colorr=new Array("#aaaacc","#ddddFF","#ccccDD")

// Tipo de letra de los copos

var nieve_tipo=new Array("Arial Black","Arial Narrow","Times","Comic Sans MS")

// Valor o letra de los copos

var nieve_letra="*"

// velocidad de caida

var nieve_velocidad=0.6

// tamaño mas grande de los copos

var nieve_cantidadsize=30

// tamaño mas pequeño de los copos

var nieve_chico=8

// Zona donde cae la nieve: 1 toda la pagina - 2 parte izquierda - 3 centro de pagina - 4 en la parte derecha

var nieve_zona=1



var nieve=new Array()

var marginbottom

var marginright

var timer

var i_nieve=0

var x_mv=new Array();

var crds=new Array();

var lftrght=new Array();

var browserinfos=navigator.userAgent

var ie5=document.all&&document.getElementById&&!browserinfos.match(/Opera/)

var ns6=document.getElementById&&!document.all

var opera=browserinfos.match(/Opera/)

var browserok=ie5||ns6||opera

function aleatorio(range) {

rand=Math.floor(range*Math.random())

return rand

}

function initnieve() {

if (ie5 || opera) {

marginbottom = document.body.clientHeight

marginright = document.body.clientWidth

}

else if (ns6) {

marginbottom = window.innerHeight

marginright = window.innerWidth

}

var nievesizerange=nieve_cantidadsize-nieve_chico

for (i=0;i<=nieve_cantidad;i++) {

crds[i] = 0;

lftrght[i] = Math.random()*15;

x_mv[i] = 0.03 + Math.random()/10;

nieve[i]=document.getElementById("s"+i)

nieve[i].style.fontFamily=nieve_tipo[aleatorio(nieve_tipo.length)]

nieve[i].size=aleatorio(nievesizerange)+nieve_chico

nieve[i].style.fontSize=nieve[i].size

nieve[i].style.color=nieve_colorr[aleatorio(nieve_colorr.length)]

nieve[i].sink=nieve_velocidad*nieve[i].size/5

//controlamos donde cae la nieve

if (nieve_zona==1) {nieve[i].posx=aleatorio(marginright-nieve[i].size)}

if (nieve_zona==2) {nieve[i].posx=aleatorio(marginright/2-nieve[i].size)}

if (nieve_zona==3) {nieve[i].posx=aleatorio(marginright/2-nieve[i].size)+marginright/4}

if (nieve_zona==4) {nieve[i].posx=aleatorio(marginright/2-nieve[i].size)+marginright/2}

nieve[i].posy=aleatorio(2*marginbottom-marginbottom-2*nieve[i].size)

nieve[i].style.left=nieve[i].posx

nieve[i].style.top=nieve[i].posy

}

movenieve()

}

function movenieve() {

for (i=0;i<=nieve_cantidad;i++) {

crds[i] += x_mv[i];

nieve[i].posy+=nieve[i].sink

nieve[i].style.left=nieve[i].posx+lftrght[i]*Math.sin(crds[i]);

nieve[i].style.top=nieve[i].posy

if (nieve[i].posy>=marginbottom-2*nieve[i].size || parseInt(nieve[i].style.left)>(marginright-3*lftrght[i])){

if (nieve_zona==1) {nieve[i].posx=aleatorio(marginright-nieve[i].size)}

if (nieve_zona==2) {nieve[i].posx=aleatorio(marginright/2-nieve[i].size)}

if (nieve_zona==3) {nieve[i].posx=aleatorio(marginright/2-nieve[i].size)+marginright/4}

if (nieve_zona==4) {nieve[i].posx=aleatorio(marginright/2-nieve[i].size)+marginright/2}

nieve[i].posy=0

}

}

var timer=setTimeout("movenieve()",50)

}

for (i=0;i<=nieve_cantidad;i++) {

document.write(""+nieve_letra+"")

}





Espero que para la fecha recuerden donde está.










viernes, 5 de junio de 2009

Mostrando el total de post y comentarios con un Widget

No podía dejar pasar por alto una recomendación que nos hace Vida Blogger cuando en un post nos presenta una manera elegante y vistosa de mostrar el total de post y comentarios de nuestro blog a través de un widget con una imágen llamativa:




Me vi "obligado" por las circunstancias y lo tengo implementado en la sidebar del blog, para lo cual sólo tenemos que colocar el siguiente código como elemento HTML/Javascript:


 <script type="text/javascript"> function

showpostcount(json) {

document.write(parseInt(json.feed.openSearch$totalResults.$t,10));

}</script><div style="width:108px; height:43px;

position:relative; font-size:13px; font:Verdana, Arial, Helvetica,

sans-serif;"><span style="position:absolute; top:5px;

right:7px;"><script src="/feeds/posts/default?alt=json-in-script&callback=showpostcount"></script></span><span style="position:absolute; bottom:5px; right:7px;"><script src="/feeds/comments/default?alt=json-in-script&callback=showpostcount"></script></span><img src="http://4.bp.blogspot.com/_Go-jnwB2e7w/Sh1uvD847WI/AAAAAAAABzs/1pXFK4eP7F4/s1600/widget-comentarios.png"/></div><span style="font-size:10px"> Widget by <a

href="http://www.vidablogger.com.ar" target="_blank" title="Ayuda para Blogs">Ayuda para Blogs</a>

</span>






Guardamos los cambios y... listo.


NOTA: No debe hacersele ninguna modificación al CODIGO, ya que dejaría de funcionar de forma correcta