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







viernes 29 de mayo de 2009

Ampliar imagen con un click

Quizás a muchos nos ha sorprendido que, al entrar en alguna página web, nos hemos topado con un efecto en algunas imágenes que al hacer "click" sobre ellas, aumentan su tamaño de manera sustantiva en relación a su tamaño original. Este efecto es bastante sencillo, sólo basta con aplicar un par de códigos para tener en nuestro blog dicho efecto. Para ello debemos seguir los siguientes pasos:


1.- Accedemos a nuestra plantilla, edición HTML, y justo encima de la etiqueta </head> colocamos el siguiente código:


<link href="https://dl.getdropbox.com/u/833381/New%20folder/New%20Folder%20(1)/thumbnailviewer.css"/>





<script src='https://dl.getdropbox.com/u/833381/New%20folder/New%20Folder%20(1)/thumbnailviewer.js'type='text/javascript'></script>



Guardamos los cambios y vamos ahora a colocar el siguiente código en el lugar donde queremos colocar la imágen a ampliar.


<p><a href="Aquí URL de la imágen"rel="thumbnail"title="Lo que coloques aquí saldrá debajo de la foto">







<img src="Aquí URL de la imágen"style="width:550px;height:550px"/></a></p>




Podemos cambiar el tamaño de la imágen donde aparece width y height modificando el valor XXpx a (+) para que se vea más grande. En el aparte donde dice: "lo que coloques aquí saldrá debajo de la foto" colocas la frase correspondiente a la función (cerrar) .
Para finalizar, dejándoles un ejemplo de éste efecto, hay una nota que es la siguiente:
- en el código que va dentro de la plantilla, donde dice link debemos colocar una etiqueta antes de cerrar el código: "rel='stylesheet'.












jueves 28 de mayo de 2009

Eliminando el subrayado de los link

Para lograrlo sólo tenemos que agregar un código encima de la etiqueta </head> . Dicho código a continuación:


<style>

a {text-decoration: none;}

a:hover {text-decoration: underline;}

</style>








Resaltador para tu blog




Herramienta que nos permite resaltar, en nuestro blog, secciones de textos en las entradas, que nos parezcan interesantes o relevantes para su uso posterior o como recordatorio. Solamente trabaja en Mozilla Firefox, Opera, Google Chrome y Apple Safari.
Para implementarlo en tu blog sólo tienes que acceder a MarkkitHighlight y comenzar a brindarle, a los lectores de tu blog, esta útil herramienta para resaltar.