Friki Bloggeo

[2] Crear una calculadora simple en Microsoft Visual Studio 2010 (El Código) Parte I

noreply@blogger.com (.::: Anthony :::.) — Sun, 12 May 2013 17:45:58 PDT

Continuando con el tutorial sobre como crear una calculadora en Microsoft Visual Studio 2010, les traigo la segunda parte y la mas importante y no complicada, sino que hay que concentrarse y nunca perder la atención.

Si no has visto la primera parte de este tutorial, puedes verla haciendo clic aquí.

En esta segunda parte les explicaré como darle dinamismos a esos controles estáticos que puedes ver en la imagen, a realizar las operaciones de suma, resta, multiplicación y división raíz cuadrada, porcentaje, entre otros.

2) El Código

Los Números: hablamos de aquellos botones representados por los números de 0 al 9 ¿Qué necesitamos hacer? Necesitamos que cada vez que se presioné el botón 0, 1, 2, 3, 4, 5, 6, 7, 8 y 9 aparezca escrito en el cuadro de texto principal o caja de operaciones. No es tan dificil si lo miramos desde el punto de vista que todos los botones requieren el mismo código, cambiando solamente, una parte, que sera lo mismo que aparecerá escrito. Veamos el código

Me.TextBox2.Text = TextBox2.Text & "0"

Entendamos el código mostrado, correspondiente a la tecla o botón "0", en color Azul vemos el nombre de la cuadro de texto principal, o la caja de operaciones ¿Porque está en color azul? Está de ese color por que el nombre del control puede variar según tu versión de Visual o el nombre que le hayas puesto al momento de insertarlo, en la calculadora que yo creé se llama TextBox2 y es el nombre predeterminado que Visual Studio da a este tipo de controles. ¿No sabes el nombre de tu caja de operaciones? Fíjate en la siguiente figura.

Figura 1
Agrandar Imagen

En el punto 1 de la figura 1 te muestra el nombre de tu control, como ves, coincide con el código que anteriormente te he mostrado, en el punto 2 de la figura 1 podrás personalizar este nombre, colocar el que tu quieras, pero recuerda, siempre que lo cambies, debes sustituirlo en el código también pues si no lo haces, el código será inservible. Veamos de nuevo el código.

Me.TextBox2.Text = TextBox2.Text & "0"

Como ya he dicho antes, el 0 en color rojo está en ese lugar puesto que al presionar la tecla 0, obviamente en la caja de operaciones o Textbox2 debe aparecer un cero. ¿Que hacer con los otros numeros? Copia y pega ese mismo código en todos los números haciendo doble clic en cada uno de ellos, ejemplo, si haces doble clic el numero 1, sustituye el 0 entre comillas por un 1, y haras lo mismo con los demas hasta llegar al 9, como se muestra en la siguiente figura

Figura 2
Agrandar Imagen

Presiona la tecla F5 y en la vista previa a la aplicación, prueba que al presionar los botones de los números aparezcan en la caja de operaciones, como en la siguiente figura.

Figura 3

El punto: el código es el mismo que el anterior pero añadiéndole otra linea que hará una acción bien importante dentro de nuestra calculadora.

Me.TextBox2.Text = TextBox2.Text & "."
Button3.Enabled = False

Como saben, el texto en Azul es lo que puede variar, el nombre. Recuerden que la caja de operaciones en la calculadora que yo creé es TextBox2 pero ustedes pueden cambiarlo por el nombre que les asigne el programa. Ahora, explico la linea Button3.Enabled = False

Como pueden observar, la palabra Button3 también está remarcada en azul, pues puede variar porque es el nombre del botón que contiene el punto, para ver o cambiar el nombre que les asigno Visual deben hacer el mismo procedimiento de la Figura 1. Pero, ¿Que acción hace esta linea? Como todos sabemos, en una calculadora el punto puede escribirse una sola vez ya que si se escribe mas de una vez produciría un SYNTAX ERROR o Error de sintaxis, esta linea hace una acción muy simple pero bien importante, ya que al presionar el botón del punto se desactivará el botón de manera que ya no podremos presionarlo sino hasta cuando nos toque escribir la otra cantidad.

Declaración de variables: hemos llegado al punto exacto de la interacción. Tenemos una calculadora que nos permite colocar números y el punto hasta ahora, pero aun no podemos realizar las operaciones básicas. Antes de entrar al punto de operaciones básicas por suma, resta, multiplicación o división debemos declarar nuestras variables, que será el espacio en la memoria que almacenará nuestros números o datos para que el programa pueda recordarlos al momento de darnos un resultado. Si no se declararán las variables, este tutorial no tendría sentido, pues es la parte mas esencial para iniciar todo el proceso del resultado final.

Para comenzar, busca la siguiente linea de código
.

Public Class Form1

Justo debajo, pega el siguiente.

    Dim numerouno As Double
    Dim numerodos As Double
    Dim total As Double
    Dim operacion As Double

El código en azul está precisamente de este color por ser el nombre de las variables, nombre que tu puedes cambiar por cualquier otro, pero siempre recordándolo ya que influye en la interpretación de otros códigos que te mostraré mas adelante.

A continuación, te explico que dato guardará cada una de estas cuatros variables presentes en el código anterior.

- numerouno: guardará el primer dato o número introducido.
- numerodos: guardará el segundo dato o número introducido.
- total: como la palabra lo dice, guardará el resultado obtenido.
- operacion: nos permitirá saber que operación básica se está realizando entre numerouno y numerodos.

Las variables son declaradas As Double o Como Decimal en español ya que precisamente, pueden ser cantidades decimales, y también, cantidades enteras, pero si se declarará As Intenger o Como Entero, el programa reconocería solo lo que esta antes de la coma e ignoraría lo que venga después totalmente.

Operaciones básicas: la suma, la resta, la multiplicación y la división son dichas operaciones básicas que realizaremos con un código muy simple y parecido en todos los casos. Echemos un vistazo al siguiente código.

        Button3.Enabled = True
        Button2.Enabled = True
        TextBox1.Text = "+"
        operacion = 2
        numerouno = Val(TextBox2.Text)
        TextBox2.Clear()

Entendamos el código, en azul son los nombres de los controles y de nuestras variables, en rojo, opciones a cambiar. Recuerdas el Button3 o el boton del punto, recordemos que este se des-habilitaba al hacer clic sobre el mismo, pero ¿Por qué la linea button3.Enabled = True está presente dentro del código que corresponde al signo "+"? Hay una palabra clave dentro de este linea, la cual es "True" o verdadero, en el código del botón del punto en lugar de "True", estaba "False" o falso, pensemos que cada vez que presionemos el signo "+" es porque deseamos escribir otra cantidad, y está cantidad también puede ser decimal, lo mismo ocurre en el caso de Button2 o en la calculadora de yo creé, el símbolo de mas o menos (+-) ubicado al lado derecho del punto. Al presionar este botón al igual que el botón del punto des-habilitará y al dar clic en un símbolo de operaciones básicas se habilitara de nuevo ya que es momento de escribir una nueva cantidad. TextBox1 es el cuadrito ubicado encima de la tecla MC. Este mostrará el símbolo según la operación que se este realizando, por eso, si el código anterior es de la suma, en el cuadro se mostrara el símbolo "+".

A continuación, una parte bastante esencial y que hay que tener muy en cuenta, recuerdan que la variable operacion es la nos permitirá saber que operación básica se está realizando entre numerouno y numerodos. Por esto, a dicha variable se le asignara un valor distinto por cada operación en mi caso use el valor 2 para identificarla, pero podrias usar el 3, 4, 5 o cualquier numero que se te venga a la mente, incluso una palabra encerrada entre comillas.

Al hacer clic en el boton de suma, necesitamos que la variable numerouno capture el numero que se encuentra en ese momento en la caja de operaciones, que lo guarde para despues sumarlo al siguiente numero que tecleemos. Por este motivo, numerouno sera igual al texto convertido en valor que se encuentra en la caja de operaciones.

Como necesitamos que guarde ese valor, pero que al mismo tiempo lo borre, ya que necesitaremos escribir otro numero, es neceserario el codigo TextBox2.Clear() presente en el código anterior.

A continuación, los códigos por operación básica

- Resta o Sustracción

        Button3.Enabled = True
        Button2.Enabled = True
        TextBox1.Text = "-"
        operacion = 3
        numerouno = Val(TextBox2.Text)
        TextBox2.Clear()

- Multiplicación

        Button3.Enabled = True
        Button2.Enabled = True
        TextBox1.Text = "*"
        operacion = 4
        numerouno = Val(TextBox2.Text)
        TextBox2.Clear()

- División

        Button3.Enabled = True
        Button2.Enabled = True
        TextBox1.Text = "/"
        operacion = 5
        numerouno = Val(TextBox2.Text)
        TextBox2.Clear()

Nota que todos los códigos serian idénticos sino fuera por dos puntos bien importantes. En la tercera linea es necesario cambiar el símbolo dependiendo de la acción que estemos realizando, y que la variable operación necesita tener un valor único por cada operación de manera que pueda identificarse en el siguiente punto que trataremos.

Boton Igual (=): este será la puerta que nos mostrará el resultado, y el que contendrá el identificador de la variable operación. Veamos su código

        numerodos = Val(TextBox2.Text)
        If operacion = 2 Then
            total = numerouno + numerodos
            TextBox2.Text = total
        ElseIf operacion = 3 Then
            total = numerouno - numerodos
            TextBox2.Text = total
        ElseIf operacion = 4 Then
            total = numerouno * numerodos
            TextBox2.Text = total
        ElseIf operacion = 5 Then
            total = numerouno / numerodos
            TextBox2.Text = total
        End If

Recordemos que la variable operación esta representada por valores diferentes que corresponden con cada operación básica a realizar.

- Suma: 2
- Resta: 3
- Multiplicación: 4
- División: 5

En la primera linea del codigo se puede ver la variable numerodos; ya que al dar clic en el boton igual lo primero que necesitamos el capturar el numero que sumará, restará, multiplicará o dividirá al numerouno.

En la siguiente linea necesitamos reconocer la operación, por eso, en el simbolo igual utilizamos el comun If-Else el cual define dentro de nuestra calculadora la identificación de cada operación, pero ¿Cómo funciona? Si la variable operacion es igual al valor 2 el total o resultado será igual al numerouno mas el numerodos y la caja de operaciones será la encargada de mostrar el total en pantalla, pero si la variable operacion fuera igual a 3 el total o resultado será igual al numerouno menos el numerodos y la caja de operaciones será la encargada de mostrar el total en pantalla, y asi sucesivamente hasta llegar a la division.

Pulsa la tecla F5 y ya las operaciones básicas de la calculadora deben estar funcionando.

La Raíz Cuadrada (sqrt): Para sacar el sqrt (Square Root) o Raíz cuadrada en español, hacemos doble clic en dicho botón y entre las lineas del código donde nos redireccionó, pegamos el siguiente código.

        operacion = 6
        If operacion = 6 Then
            numerouno = Val(TextBox2.Text)
            TextBox2.Text = System.Math.Sqrt(numerouno)
        End If

La raíz cuadrada al igual que las operaciones básicas, es una operación, valga la redundancia, por esta razón necesitamos identificarla, el valor que yo le he dado ha sido 6 como ves en el código de arriba, y debajo de la variable he puesto el identificador que reconocerá si la operación es igual a 6 entonces el la variable numerouno capturará el valor que se encuentra en ese momento en la caja de operaciones o TextBox2 en mi caso, y en la misma caja mostrará el resultado de la raiz cuadrada de el numero capturado.

El porcentaje: Hay varias maneras de calcular el porcentaje de un número en una calculadora, pero esta vez lo haré de la forma sencilla que puedo mostrarles. Antes de comenzar, en el cuadro de herramientas o ToolBox buscamos la herramienta Label y la arrastramos hasta cualquier espacio libre de la calculadora de esta manera.

Figura 4

Ahora, haz clic en cualquier espacio libre del formulario, donde no haya puesto ningun boton, ni ninguna caja de texto, ni ninguna label, ni ningun menu, solo haz doble clic en cualquier espacio de la ventana gris. Entre las lineas que se encuentra el cursor de escritura, pega el siguiente código.

Label1.Visible = False

Label1 será el nombre del nuevo control que hemos insertado, pero ¿Qué hace precisamente este código? Como no queremos que ese label se vea al momento de arrancar el programa, ya que solo será un "puente" para obtener nuestro resultado de porcentaje, le quitamos visibilidad con el atributo Visible en False.

A continuación, nos vamos al diseño, y hacemos doble clic en el boton de porcentaje, entre las lineas que se encuentra el cursor de escritura, pega el siguiente código.

        numerodos = Val(TextBox2.Text)
        If operacion = 4 Then
            total = numerouno * numerodos
            Label1.Text = total
        End If
        TextBox2.Text = Val(Label1.Text) / 100

Para sacar el porcentaje de descuento, necesitamos de una operación básica; la multiplicación. En este caso, el porcentaje será quien haga la función que hace el botón igual al momento que se hace una multiplicación. Para empezar, con el botón porcentaje debemos capturar el numero en la caja de operaciones con la variable numerodos ya que el primer numero ya lo habríamos capturado al presionar el símbolo de multiplicación primero. Entonces, ya que hemos capturado el numerodos, reconocemos si antes se hizo la operacion 4 que corresponde a la multiplicación, si fue asi entonces en Label1 se mostrará el producto de numerouno por numerodos, mientras que al presionar el botón de porcentaje se realizará la operación de dividir el producto en label1 entre 100, es simple, se hace una regla de tres para obtener nuestro resultado de porcentaje.

El botón mas o menos (+-): este botón nos permitirá pasar una cantidad escrita de mas a menos, así como poner en negativo cualquier cantidad próxima a escribir. La hace negativa ya que el positivo esta predeterminado. Haz doble clic sobre el, y entre las lineas donde se encuentra el cursor de escritura pega el siguiente código.

        TextBox2.Text = "-" & TextBox2.Text
        Button2.Enabled = False

En la primera linea del código lo que hacemos en anteponer un signo menos a lo que ya esta escrito en la caja de operaciones, o lo que está por escribirse, la segunda linea, simplemente des-habilita el botón una vez se haya presionado, y no sera habilitado de nuevo hasta que se presione un botón de operaciones o el botón C que veremos a continuación.

El botón C: Clean o Limpiar sera la accion que realizara este boton al dejar en blanco la caja de operaciones. Haz doble clic en el boton C y entre las lineas de codigo donde se encuentra el cursor de escritura pega el siguiente código.

        Button3.Enabled = True
        Button2.Enabled = True
        TextBox2.Clear()

En la primera linea, habilitamos el botón del punto, en la segunda, habilitamos el botón de mas o menos y en la tercera linea, simplemente limpiamos la caja de operaciones.

Esto ha sido todo por este tutorial, los demás botones y el menú son códigos mas avanzados que estaré explicando próximamente.

[1] Crear una calculadora simple en Microsoft Visual Studio 2010 (El Diseño)

noreply@blogger.com (.::: Anthony :::.) — Sun, 12 May 2013 13:27:33 PDT

Figura 1

Me complace escribir mi primera entrada después de haberles anunciado mi retorno a escribir de nuevo en mi hermoso y preciado blog, considerando que esto es una de las cosas que mas amo. En este día, voy a presentarles un pequeño tutorial que voy a dividir en varias entradas sobre como crear un calculadora en Microsoft Visual Studio 2010 paso a paso, cabe destacar que tambien puedes utilizar otras versiones de Visual Studio, e incluso Visual Basic 6.0, ya que me los códigos son muy parecidos, excluyendo un poco Visual Basic 6.0 que cambian un poco, pero la sintaxis sigue siendo la misma, de todas formas, explicaré el código para ambos.

En esta primera entrada del tutorial, trataremos el diseño de la calculadora, primeramente, enfocandonos en como queremos que se vea, no tienes que diseñarla tal cual la ves en la imagen, puedes personalizarla a tu gusto, pues esto no influira ni hara que el codigo sea diferente.

¡Comenzamos!

1) El diseño

- Entra a tu Visual Studio 2010 o la version de Visual que poseas
- Haz clic en Archivo > Nuevo y en la ventana emergente selecciona Aplicación de Windows Forms, como observas en el punto 1

Figura 2
Agrandar Imagen

- Escribe el nombre que quieres par tu aplicación, en el cuadro de texto mostrado en el punto 2 de la figura 2
- Haz clic en Aceptar como se muestra en el punto 3 de la figura 2, te debe aparecer la siguiente ventana

Figura 3
Agrandar Imagen

- Para empezar a poner los botones de la calculadora, en la barra Cuadro de herramientas o ToolBox en inglés, seleccionen la herramienta Button o CommandButton en VB 6.0, copien, peguen y reubiquenlos hasta tener el aspecto que se muestra en la figura 4.

Figura 4
Agrandar Imagen

- Agrega dos TextBox como se muestra en la siguiente figura

Figura 5
Agrandar Imagen

- Agrega un MenuStrip como se muestra en la figura 6 siguiente, en VB 6.0 hay otra manera de poner el menú, eso lo explicare luego en otra entrada.

Figura 6
Agrandar Imagen

- En la barra de Propiedades el texto de cada botón hasta dar el aspecto de que se muestra en la Figura 1

Importante Hacer

Justo en el TextBox ubicado por encima del boton MC, lo seleccionamos, vamos a la barra de propiedades, y en la propiedad Enabled, valga la redundancia, seleccionamos la opción False, pues solo queremos ver lo que mostrará dicho cuadro de texto, mas no seleccionarlo ni escribir dentro de el mismo.

Crecer y Volver

noreply@blogger.com (.::: Anthony :::.) — Sun, 12 May 2013 12:06:41 PDT

Buenos días Mis Lectores

Este día, precisamente segundo domingo de Mayo, debo anunciarles una gran noticia para mi, estoy de fiesta, y espero que aquellos, los que me han venido apoyando desde el primer día que creé este blog con el gran placer que significa para mi ayudar a los demás webmaster que necesitan que le echen una mano en esos líos que tanto códigos nos forman, quiero gritar al mundo; ¡Volví!

Para esos que aún no me conocen, Mi nombre es Anthony Medina, soy el creador, diseñador, y quien publica cada entrada que de este blog lees. ¡Wow!, que alejado de ustedes he estado, ya han corrido 28 meses desde el dia en que publique mi ultima entrada, pero quiero comentarles que ese tiempo no ha sido en vano, por lo menos para mi, no lo ha sido.

La temática principal de este blog, como todos saben, ha sido la fácil comprensión de los código en lenguaje de programación de blogs, tales como HTML y CSS, y algunos otros widgets o gadgets que hacen lucir tu blog un poco mas distinto a los demás. ¿Porqué he dicho que todo este tiempo no ha sido en vano para mí? He tenido tiempo para formarme, justo tenia 15 años, yo, quizás un nerd o geek de bachillerato, radicalizado en Venezuela, y estudiante del liceo de secundaria en el que siempre quise estudiar, emprendí una búsqueda en la Internet, intentando llenar un vacío, el de compartir los pocos conocimientos que granito por granito fueron aumentando al mismo tiempo que ayudaba a los demás, y en ese feedback que mantenía con mis mas grandes comentadores. Hoy, con 20 años de edad, y graduado de la secundaria hace casi 4 años, vivo otra etapa en mi vida, mi formación profesional. Estudiante de ingeniería en informática, donde he aprendido mas de un lenguaje y hasta ha aumentado mis afecciones por otros asuntos.

Esto será tan bueno para mi como para ustedes, ya que si bien, el HTML y CSS siguen siendo uno de los lenguajes mas usados, todo avanza y se actualiza, así como este blog, donde tratare de emprenderlos en la maravilla y el dinamismo de lenguajes como C, C++, PHP, MySQL, Excel, Visual Basic, VB.net y otros lenguajes de programación que harán una maravilla de nuestros conocimientos.

No tengo mas nada que decirles, me activé nuevamente y estoy con udstedes para ofrecerles mas de lo que merecen, feliz fin de semana, y abrazos.

Anthony Medina
+58 (424) 517 60 64
Twitter: @aimtone
Facebook: Tone Medina
Ask: Tone
San Felipe, Yaracuy, Venezuela

Como crear un servidor local (localhost) en tu computador

noreply@blogger.com (.::: Anthony :::.) — Tue, 20 Dec 2011 07:37:46 PST

Tal vez, no parezca tan esencial este post para algunas persona, pero desde mi punto de vista como programador y desarrollador de sitios web, un localhost en el computador es de suma importancia para visualizar nuestro trabajo terminado sin tener la necesidad de subirlo a un servidor web externo para previsuarlizarlo o visualizarlo ya terminado el trabajo.

Uno de los software que he considerado mas importante entre las diferentes funciones que los software de aplicacion puede ejecutar, es el AppServer 2.6.0, programa fácil de manejar y controlar al momento de su instalación, aunque este en idioma Ingles. Este software viene dotado a su vez de MySQL para creación de bases de datos, esenciales para para ingeniar una retroalimentacion con los usuarios que visitan tu sitio y PHPMyAdmin, este ultimo que te ayuda a visualizar lo que esta almacenado en tu pagina siendo previamente introducido mediante campos de escritura.

Al final de esta entrada, les dejare el enlace de descargar gratuita desde Softonic. Por ahora mostraré paso a paso cada ventana del asistente de instalación para facilitarles el trabajo. Al momento de ejecutar el instalador, lo primero que será:

Para comenzar, es necesario hacer clic en el boton 'Next', el cual se accionara para mostrarnos los terminos y condiciones de licencia gratuita del programa, los cuales debemos aceptar para proseguir dicha instalacion. Al aceptarlos, seguimos con la instalacion, que nos mostrara la siguiente ventana donde debemos seleccionar la ruta donde el programa almacenara sus datos para ejecutar el servidor local.

Hacemos clic en 'Next' y seleccionamos los siguientes atributos

Donde Apache HTTP Server crea el servidor local, MySQL Database crea el servidor de las bases de datos, PHP Hipertext Preprocessor interpreta los códigos PHP introducidos en el código fuente de la pagina o sitio web, y PHPMyAdmin administra y ordena en tablas los datos obtenidos del sitio.

Prosiguiendo con la instalacion, hacer clic en 'Next' y les aparecerá

Donde introducirán los datos tal cual se muestra en la imagen anterior. hacer clic en 'Next' y les mostrará lo siguiente:

Introducen su contraseña dos veces como se muestra en la imagen.

Quiero advertir que MySQL crea por defecto el usuario, así que no debes volverte demente pensando en cual usuario has elegido. El servidor predetermina 'root' como tu nombre de usuario, la contraseña sera la que acabas de introducir. Hacer clic en 'Install' para comenzar de una vez por todas con la instalación del localhost

Luego de llenarse la barra de instalación, te dirigirá a la siguiente, donde dejaras marcados los atributos que muestra. Hacer clic en 'Finish' para terminar el asistente.

¿Que nos queda ahora?

Entra en en navegador de tu preferencia, introduce la palabra 'localhost' en la barra de direcciones, y observa como te dirige a una pagina web que no se descarga de un servidor externo, pues, todos los datos de la misma están almacenados en tu computador. Por defecto, la pagina que asigna es la siguiente.

¿Como sustituir el index que seria la pagina web que ves, por la tuya propia?

Es muy fácil, sino configuraste la ruta donde se guarda el servidor, por defecto, debería ser algo como esto.

C:/AppServ

Para eliminar el index, entra en la ruta

C:/AppServ/www

Allí, podrás observar que hay un archivo llamado index, el cual es un archivo PHP. El index siempre debe llamarse de esa forma, variando sus extensiones donde lo mas recomendable es que sea PHP o HTML, pero nunca cambiar su nombre, pues, el sistema reconoce la pagina principal de la web mediante este conjunto de letras. Al eliminarla, si vas al navegador y entras en localhost de nuevo, veras que ya no hay nada. Copia de tu sitio web allí con el nombre de 'index'. Entra en localhost y podrás ver tu pagina resplandeciente en el navegador.

Ahora, ¿Como administrar bases de datos con PHPMyAdmin y MySQL?

Para entrar a PHPMyAdmin introduce en el navegador la dirección localhost/PHPMyAdmin donde te solicitar el nombre de usuario de MySQL (root) y la contraseña que asignaste. Haz clic en 'Acceder' y ya podrás administrar tus bases de datos.

Esto fue todo por hoy amigos, muchas gracias por leer.

Descarga AppServer 2.6.0 gratis

Ocultar "Leer mas" en paginas estáticas de blogger

noreply@blogger.com (.::: Anthony :::.) — Wed, 16 Mar 2011 06:44:30 PDT

Aún, Blogger sigue presentando ciertos percances que no logran satisfacer completamente la necesidad del bloggero, y es que cuando tenemos habilitado el enlace "Leer mas" en nuestro blog, de seguro habremos notado que en las paginas estáticas también aparece este enlace, cosa que se luce algo raro e incomodo, si lo que queremos tener una pagina independiente, cual blog de Wordpress.

No puedo culpar a Blogger, pues las paginas estáticas no son mas que una pagina individual de una entrada, la diferencia es que en las paginas estáticas solo se nos permite colocar una sola entrada, es mi punto de vista particular.

Pero bien, para eso estamos aquí, para resolver problemas y ayudar a Google a mejorar este servicio. A continuación, les presento los pasos a seguir.

Ocultar leer mas en paginas estáticas

1. Ir a Blogger > Diseño > Edicion HTML

2. Haz una copia de seguridad por precaucion

3. Busca tu codigo de "Leer mas" antiguo. Te muestro un ejemplo de como podria ser

<b:if cond = 'data: blog elemento. "pageType! =" ">
expr:href='data:post.url'>

<a><div style="text-align: right;"> Leer mÃ¡s ->> </ div> </ a>
</b:if>

O puede ser algo similar a esto

<!--READ-MORE-STARTS-->
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><br/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'><br/>
<a expr:href='data:post.url'><div style='text-align: right;'>
<img height='33px' src='IMAGEN DE BOTON DE LEER MAS' width='120px'/></div>
</a>
</b:if>
</b:if>
<!--READ-MORE-STOPS-->

Debes sustituir lo azul en el codigo por tu boton para hacer funcionar el codigo.

Via | Bloggertrick

Luxury Christmas: Plantilla de navidad para Blogger

noreply@blogger.com (.::: Anthony :::.) — Thu, 02 Dec 2010 11:14:21 PST

Luxury Christmas es una plantilla para Blogger original de Anthony Medina, Webmaster y creador de FrikiBloggeo como regalo de navidad para todos mis lectores que dia a dia me siguen.

Luxury Template fue creada basada en la plantilla sencillo de blogger con diseño de imagenes creadas con Adobe Photoshop CS5 extended por mi propia persona.

Caracteristicas:

Header de 821 pixeles de ancho por 241 pixeles de alto, con las 4 esquinas redondeadas con un radio de 5 pixeles cada una.
Sidebar de 243 pixeles de ancho con hermosas imagenes de lazos en la parte superior de ella misma. Titulos con letras corridas.
Main de 537 pixeles de ancho, igual que la sidebar, con hermosos lazos en la parte superior de ella misma. Titulos y parrafos con fuente Arial tamaño 12.
Footer con 822 pixeles de ancho, letras blancas, Arial tamaño 8.
Fondo de imagen de navidad, mas fondo de color rojo
Efecto caida de nieva por todo el monitor
Cuadro de busqueda
Enlaces RSS

La plantilla esta protegida bajo la licencia de Creative Commons como no comercial, editable siempre y cuando se respeten enlaces a pagina del autor y demas enlaces en el pie de pagina. Mas sobre la licencia.

España: El pais hispano con mas bloggers en el mundo

noreply@blogger.com (.::: Anthony :::.) — Sun, 21 Nov 2010 13:48:21 PST

Segun estadisticas registradas basadas en el registro de directorios, España es el primer pais hispano con mayor numero de bloggeros en el mundo, y no es de dudar, si no fijense quien es el primer pais en las estadisticas de mi blog.

Si comparamos los primeros cinco paises de mi estadistica

España: 4.074 usuarios

Argentina: 3.026 usuarios

Venezuela: 2.526 usuarios

Mexico: 1.861 usuarios

Chile: 734 usuarios

Se ve que si van muy a la par con los primeros cinco paises hispanos en el mundo de los bloggeros, sobre todo España, que ocupa el primer lugar

1. España

2. Argentina

3. Mexico

4. Chile

5. Peru

Un pequeño percance alli con Venezuela, que se ubica en el 7mo puesto, soy venezolano, registrado en mi estadisticas con hora de venezuela, registrado en algunos directorios venezolanos, me parece que eso influye mucho. Gracias a mi Venezuela y a la querida España por ser parte tambien de mi blog.

Gracias tambien, a todos los paises que diariamente me visitan

Correo con dominio propio gracias a Google

noreply@blogger.com (.::: Anthony :::.) — Sat, 28 Aug 2010 15:47:50 PDT

Google Apps es un servicio de Google para el uso de servicios de este mismo como correo, documentos, calendarios, etc. Google Apps tiene una version gratuita y puedes registrarte para obtener los productos de Google en tu nombre de dominio. Supongamos, tu dominio es WWW.MIDOMINIO.COM y no tienes servidor de correo propio, estas aplicacion te otorgara una direccion como MAIL.MIDOMINIO.COM, basada en la interfaz de la pagina de Gmail. Una de las mas grandes ventajas, sera que podras usar tu dominio como tu propio servidor de correos, hablo de que si usas una pagina de correo que te ofrece una direccion como "tunombre@hotmail.com" o "tunombre@gmail.com", eso se termino. Ahora sera "tunombre@tudominio.com". Esto pasara con Google Talk o con cualquier otro servicio ofrecido por google. Ya yo cree el mio, y desde ahora si deseas comunicarte personalmente conmigo deberas escribirme a contacto@frikibloggeo.com.ar. No es Genial?

1- Inscripción gratuita en Google Apps

Inscribete gratis desde esta pagina de esta manera

2- Rellenar el formulario de Inscripcion

Luego que hagas clic en el boton "Empezar a utilizar el programa", debes rellenar el formulario de inscripcion que te aparecera a continuacion en la siguiente pagina. Luego que completes todos los datos pasaras a la proxima pagina, que es la que te permitira ya crear tu cuenta de correo con tu propio dominio. Ya para cuando aceptes las condiciones, todos los servicios apareceran inactivos, pero podras entra a tu correo ingresando a la pagina http://mail.google.com/a/tudominio, donde te mostrara una pagina parecida a esta.

Agrandar Imagen

Veras, que no solo puedes crear una sola cuenta con tu dominio, de manera gratuita Google te ofrece un valido de 50 cuentas por cada dominio.

3- Verificar la cuenta

En la pagina anterior si vizualizas bien, podras ver este enlace en algun lugar. Se encuentra justo debajo del menu de dicha pagina

Haz clic alli, y te apareceran dos formas para verificarla, subiendo un archivo HTML a tu blog o modificando tu registro en CNAME. Tu elijes el que prefieras. De todas maneras, aqui te dejo la guia de instruccion, para que tengas mas informacion de como editarla.

Eso es todo!

Abrir imagenes en una misma pagina con efecto zoom de Highslide

noreply@blogger.com (.::: Anthony :::.) — Fri, 27 Aug 2010 19:55:05 PDT

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

2-) Debes agregar la imagen en una entrada nueva o en la pagina, debes tener una imagen en miniatura de la imagen real que se abrira al hacer el clic, o si prefieres podrias tambien colocar botones con texto por ejemplo "Vizualizar imagen", "Ver imagen", entre otros. o quizas, tan solo podrias usar el texto mismo. La imagen en minuatura sirve para que los usuarios tengan una vista previa de lo que veran si hacen clic, y podria llamarles mas la atencion, ya que esta atentos a lo que veran. Para insertar la imagen debes usar el siguiente codigo.

<div class="highslide-gallery">
<a href="http://imagen_real.jpg" class="highslide" onclick="return hs.expand(this)">
<img src="http://imagen_en_miniatura_o_boton.jpg"
title="Clic para ver Imágen" />
</a>
<div class="highslide-caption">
Texto opcional para la imágen, aparecerá en la parte inferior.
</div>
</div>

En Rojo: Lo opcional.

En Violeta: Lo indispensable.

En Verde: Lo editable

Aqui, te dejo tambien para que te descargues el ZIP de los archivos, por si quieres subirlos a tu propio servidor.

Eso es todo!

VISTO EN:Crea Web

Google Font API: Fuentes diferentes en tu blog proporcionadas por Google

noreply@blogger.com (.::: Anthony :::.) — Sun, 22 Aug 2010 20:27:56 PDT

Google font API es un nuevo servicio de Google que te permite colocar fuentes interactivas en tu blog que podra ver cada usuario que lo visite, sin necesidad alguna de que este usuario deba tener la fuente utilizada almacenada en el disco duro de su computador. Ya hace muchisimo tiempo, publique una entrada a la que llame Nuevas fuentes para los post de tu blog, pero ocurre que, si el usuario no tenia esta fuente guardada en su computador, no podria vizualizar bien la fuente, o el sistema la sutituiria por otra, por eso se seleccionaron mas las fuentes que se estimaba que toda computadora con el Sistema Operativo Microsoft Windows traeria por defecto. Esta es la gran ventaja de usar Google font API para una fuente distinta. Por los momentos, el servicio se encuentra en su fase BETA. Esperemos que pronto comience su fase permanente, para asi tener mas fuentes de la cuales elejir.

Este es un ejemplo de fuente usando Tangerine

Debes entrar al directorio de fuentes de Google, la web ofrece por los momentos pocas fuentes, pero de las que hay, algunas muchas llaman la atencion. Estan fuentes poseen variantes, hablo de que podria ser Tangerine en italica, o bold. Tienes mucho de donde elejir.

Aqui te dejo una muestra de las fuentes

Lobster

Cantarell

Cardo

Crimson Text

Droid Sans

Droid Sans Mono

Droid Serif

IM Fell DW Pica

Inconsolata

Josefin

Molengo

Neuton

Nobile

OFL Sorts Mills Goudy TT

Old Standard TT

Reenie Beanie

Tangerine

Vollkorn

Yanone Kaffeesatz

Como Instalar las fuentes

Segun la fuente que elijas, Google te proporcionara un codigo que debes colocar debajo de la etiqueta <head> del siguiente modo

<head>

<link href='http://fonts.googleapis.com/css?family=Fuente+que+elejiste' rel='stylesheet' type='text/css'>

...

Luego encontraras el siguiente codigo en tu blog

h1 { font-family: 'Fuente que elejiste', arial, serif; }

NOTA: El codigo de arriba puede variar dependiendo de la cantida de atributos que tengas en la etiqueta h1, su orden o las cantidad de fuentes opcionales.

Eso es todo!

Nuevo Slide con desplazamiento manual usando jQuery

noreply@blogger.com (.::: Anthony :::.) — Sun, 01 Aug 2010 09:16:00 PDT

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.

Lea También : Mostrar un Slide con tus entradas Favoritas con jQuery

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

<script src='http://bnote.googlecode.com/files/jquery-1.2.6.min.js' type='text/javascript'></script>
<script src='http://bnote.googlecode.com/files/jquery.jcarousel.pack.js' type='text/javascript'></script>
<script src='http://bnote.googlecode.com/files/jquery-ui-personalized-1.5.2.packed.js' type='text/javascript'></script>

<script type="text/javascript">
jQuery(document).ready(function() {
      jQuery('#mycarousel').jcarousel({
      wrap:"both",
      scroll:2,
      animation:"slow"
});
      function mycarousel_initCallback(carousel) {
      jQuery('#featured-next-button').bind('click', function() {
              carousel.next();
              return false;
      });

      jQuery('#featured-prev-button').bind('click', function() {
              carousel.prev();
              return false;
      });
      jQuery('.button-nav span').bind('click', function() {
              carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text()));
              return false;
      });
};
      jQuery('#feature-carousel').jcarousel({
      wrap:"both",
      scroll:1,
      auto:10,
      initCallback: mycarousel_initCallback,
      buttonNextHTML: null,
      buttonPrevHTML: null
});

});
</script>

<style type="text/css">
.jcarousel-skin-tango .jcarousel-container {-moz-border-radius: 10px;}

.jcarousel-skin-tango .jcarousel-container-horizontal {width: 941px;margin: 0 auto;padding:0 20px;}

.jcarousel-skin-tango .jcarousel-clip-horizontal {width:  941px;height: 254px;}
.jcarousel-skin-tango .jcarousel-item {width: 307px;height: 254px;}
.jcarousel-skin-tango .jcarousel-item-horizontal {margin-right: 10px;}
.jcarousel-skin-tango .jcarousel-item-placeholder {background: #fff;color: #000;}

.jcarousel-skin-tango .jcarousel-next-horizontal {
background:transparent url(http://3.bp.blogspot.com/_pZaV-NlP_3s/TFAMVbjDoRI/AAAAAAAAAGc/qVMBXOUAnnY/s1600/image-slider-button.png) no-repeat scroll -46px 0;
cursor:pointer;
height:254px;
right:20px;
position:absolute;
top:0;
width:46px;
}

.jcarousel-skin-tango .jcarousel-prev-horizontal {
background:transparent url(http://3.bp.blogspot.com/_pZaV-NlP_3s/TFAMVbjDoRI/AAAAAAAAAGc/qVMBXOUAnnY/s1600/image-slider-button.png) no-repeat scroll 0 0;
cursor:pointer;
height:254px;
left:20px;
position:absolute;
top:0;
width:46px;
}

.jcarousel-container {position: relative;}
.jcarousel-clip {z-index: 2;padding: 0;margin: 0;overflow: hidden;position: relative;}
.jcarousel-list {z-index: 1;overflow: hidden;position: relative;top: 0;left: 0;margin: 0;padding: 0;}
.jcarousel-list li,.jcarousel-item {float: left;list-style: none;width: 75px;height: 75px;}
.jcarousel-next {z-index: 3;display: none;}
.jcarousel-prev {z-index: 3;display: none;}

#news-slider{background-color:#FFFFFF;padding:20px 0;}
#news-slider img{border:none;height:254px;width:307px;}
</style>

4) Guarda los cambios
5) Dirígete hasta Diseño > Elementos de la pagina
6) Clic en Añadir un Gadget de tipo HTML/Javascript
7) Pega el siguiente codigo allí

<div id='news-slider'> <ul class='jcarousel-skin-tango' id='mycarousel'> <li><a href='SLIDE-1-LINK-HERE'><img src='SLIDE-1-IMAGE-ADDRESS-HERE'/></a></li> <li><a href='SLIDE-2-LINK-HERE'><img src='SLIDE-2-IMAGE-ADDRESS-HERE'/></a></li> <li><a href='SLIDE-3-LINK-HERE'><img src='SLIDE-3-IMAGE-ADDRESS-HERE'/></a></li> <li><a href='SLIDE-4-LINK-HERE'><img src='SLIDE-4-IMAGE-ADDRESS-HERE'/></a></li> <li><a href='SLIDE-5-LINK-HERE'><img src='SLIDE-5-IMAGE-ADDRESS-HERE'/></a></li> </ul> </div>

En Naranja: URL a la que el usuario se dirigira al hacer el clic
En Azul: URL de cada imagen

Agregar un nueva entrada al slide

Para añadir una nueva entrada al slide, tan solo debes copiarel siguiente codigo justo antes de la etiqueta </ul> del codigo anterior.

<li><a href='SLIDE-6-LINK-HERE'><img src='SLIDE-6-IMAGE-ADDRESS-HERE'/></a></li>

8) Eso es todo! Esta hecho.

Agregar enlace de respuesta (Reply) en cada comentario

noreply@blogger.com (.::: Anthony :::.) — Sat, 14 Aug 2010 17:41:54 PDT

Como los blogs de Wordpress y la mayoria de blogs impotantes junto con paginas web que admiten el uso de comentarios, siempre hubo la duda de por que blogger no tenia habilitado en su formulario de comentarios la opcion para responder a un comentario que quizas nos haya llamado la atencion, y es que poco a poco, con los dintintos trucos y codigos HTML que van llegando cada vez, blogger se ha convertido en los ultimos tiempo en un servidor de bloggeros que no tiene nada que envidiarle a sistemas como el de Wordpress, que a pesar de ser pago, es un servidor elegante y muy vistoso.

No tengo nada contra Wordpress, de hecho me gusta mucho, pero me encuentro un poco mas suelto con blogger, en cuanto a la admision de poder editar el codigo HTML y CSS, algo que en Wordpress no se puede hacer, a menos que pagues el precio propuesto!.

Bien, ahora si, les explico como hacer!

1) Entra a tu cuenta Blogger > Diseño > Edicion HTML

2) Busca la etiqueta ]]></b:skin> y copia el siguiente codigo justo antes de ella

#reply {
float:right;
text-align:justify;
font: italic bold 12px arial, sans-serif;
}

3) Expande las plantillas de artilugios y busca el siguiente codigo

<data:commentPostedByMsg/>

4) Copia el siguiente codigo justo debajo del codigo que acabas de buscar

<div id='reply'> <span><a expr:href='"https://www.blogger.com/comment.g?blogID=XXXXXXXXXXXXXXXXXXX&postID=" + data:post.id + "&isPopup=true&postBody=%40%3C%61%20%68%72%65%66%3D%22%23" + data:comment.anchorName + "%22%3E" + data:comment.author + "%3C%2F%61%3E#form"' onclick='javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=450,height=450"); return false;'>[Responder]</a></span> </div>

5) Si puedes observar el codigo anterior, te podras fijar que se encuentran 19 equis (X) seguidas, esas equis, debes sustituirlas por la ID de tu blog, que es un numero unico que blogger te otorga, no se como ustedes lo consideran, pero yo lo considero como algo confidencial.

Como saber cual es mi ID

Si entras a tu cuenta Blogger y vas a cualquier pestaña (Ya sea crear nueva entrada, configuracion o diseño, etc) podras ver que la direccion se presenta algo como esto.

En el lugar donde se encuentran las 19 equis, aparecerá tu ID. Sustituye las 19 equis en el codigo por ese numero que veras en la barra de direcciones.

Tambien, te has podido fijar que el texto Responder encerrado entre corchetes esta tambien resaltado. Tienes dos opciones aqui, tan solo dejar el enlace responder, cambiarlo por el nombre de enlace que tu quieras, o en lugar de texto colocar una imagen. Te explico como.

Sustituiras dentro del codigo el Responder con todo y corchetes, y colocaras el siguiente codigo en su lugar

<img src='URL-DE-LA-IMAGEN'/>

Debes sustituir URL DE LA IMAGEN por la direccion de tu imagen, recuerda que si elijes esta opcion, debes tener en cuenta que es una imagen pequeña, no una imagen grande, yo te recomiendo que la hagas con las mismas dimensiones que usaria si fuera un enlace de texto.

6) Guarda los Cambios. Eso es todo!

Incrustar campos de texto de enlaces en URL, HTML y Foros debajo de cada entrada.

noreply@blogger.com (.::: Anthony :::.) — Wed, 28 Jul 2010 21:30:54 PDT

En este tutorial explicare, cual es la manera o como se hace para incrustar campos de textos debajo de cada entrada con diferentes enlaces, para ser insertados como enlace directos a la URL, enlaces de textos a la entrada actual y el código para insertar en foros de discusión. La verdad, es que este truco ya lo había visto en varias paginas web, pero nunca en un blog que no haya sido de Wordpress, asi, que si te ha gustado también, el tutorial de instalación ya esta disponible. Para que te des un poco mas de cuenta de lo que te hablo, observa la siguiente imagen.

1) Entra a tu cuenta Blogger > Diseño > Edicion HTML2) Busca la etiqueta </head>3) Copia el siguiente codigo justo antes de la etiqueta que acabas de buscar

<style type='text/css'>
.about-article{
background-color:#f9f9f9;
padding-bottom:5px;
padding-left:20px;
font-size:11px;
}
.about-article input{
background-color:#ffffff;
}
</style>

4) Expande los artilugios y encuentra el siguiente código

<data:post.body/>

5) Copia el siguiente codigo justo despues del codigo que acabas de buscar

<b:if cond='data:blog.pageType == &quot;item&quot;'>
&lt;div class=&quot;about-article&quot;&gt;<p>Enlaces para compartir en tu blog o pagina web.</p>&lt;p class=&quot;noborder&quot;&gt;&lt;label for=&quot;aa-url&quot;&gt;URL:&lt;/label&gt;&lt;br /&gt;&lt;input size=&quot;80&quot; readonly=&quot;readonly&quot; onclick=&quot;this.focus();this.select();&quot; type=&quot;text&quot; id=&quot;aa-url&quot; value=&quot;<data:post.url/>&quot; /&gt;&lt;/p&gt;&lt;p&gt;&lt;label for=&quot;aa-forum&quot;&gt;Enlace con HTML:&lt;/label&gt;&lt;br /&gt;&lt;input size=&quot;80&quot; readonly=&quot;readonly&quot; onclick=&quot;this.focus();this.select();&quot; type=&quot;text&quot; id=&quot;aa-forum&quot; value=&quot;&lt;a href=&amp;quot;<data:post.url/>&amp;quot;&gt;<data:post.title/>&lt;/a&gt;&quot; /&gt;&lt;/p&gt;&lt;p&gt;
&lt;label for=&quot;aa-forum&quot;&gt;Enlace para Foros:&lt;/label&gt;&lt;br /&gt;
&lt;input size=&quot;80&quot; readonly=&quot;readonly&quot; onclick=&quot;this.focus();this.select();&quot; type=&quot;text&quot; id=&quot;aa-forum&quot; value=&quot;[url=<data:post.url/>]/<data:post.title/>[/url]&quot; /&gt;&lt;/p&gt;
<p align='center'><a href='http://www.frikibloggeo.com.ar/' style='display:none;' target='_blank'>Widget por Friki Bloggeo</a></p>
&lt;/div&gt;<br/>
</b:if>

6)Eso es todo! Disfruta tu nuevo gadget.

Primer año de Friki Bloggeo

noreply@blogger.com (.::: Anthony :::.) — Tue, 27 Jul 2010 13:35:30 PDT

Optimizar tu blog para ver en teléfonos móvil

noreply@blogger.com (.::: Anthony :::.) — Tue, 27 Jul 2010 08:13:51 PDT

Como todos sabemos, millones de personas ingresan a Internet usando su teléfono celular. La velocidad del Internet móvil es también muy rápida en los últimos tiempos con 3G, aplicaciones para el móvil, entre otros.

De esto, podemos decir que mucho de nuestros lectores quizás llegan a nuestro blog a travez de sus teléfonos celulares, pero si no haces un blog amistoso, podrías perder a tal lectores, ya que en un teléfono móvil un blog toma mucho tiempo en cargar en cuestión de que no se ajuste el blog al tamaño de la pantalla del teléfono.

Así pues, es como hacer es como hacer que su Blogger (Blogspot) sea amigable y este optimizado con el uso del Internet móvil.

Accede a tu cuenta Blogger > Diseño > Edición HTML y encuentra la siguiente linea.

<b:include data='blog' name='all-head-content'/>

Pega el siguiente código debajo de la linea que buscaste.

<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>

<b:if cond='data:blog.isMobile'>

<meta content='width=device-width, initial-scale=1.0, user-scalable=0' name='viewport'/>

<b:else/>

<meta content='width=1100' name='viewport'/>

</b:if>

Guarda los Cambios. Listo

Ahora tus visitantes podrán acceder a tu blog a travez de sus celulares con una velocidad increíble.

Colocar varios enlaces en una sola imagen usando Mapas de Imagenes

noreply@blogger.com (.::: Anthony :::.) — Fri, 23 Jul 2010 08:10:47 PDT

Ver videotutorial de como extraer coordenadas de una imagen

Para los que no saben, y aquellos que deseen saber, esta forma de enlazar tiene mucho tiempo, casi nadie se interesa en usarlo pero es una forma interesante y bonita de colocar varios links en tu blog en una misma imagen. Este metodo podria servir, si por casualidad, se te ocurre hacer el menu de tu blog en la misma cabecera, de esta forma, podras enlazar diferentes sitios usando las coordenadas de la imagen.

Te explico como va esto, pero, antes, mira la proxima imagen de abajo. Podras ver la figura de un saltamontes con grandes ojos. Esa imagen tiene dos enlaces. Si le das clic en el ojo superior de la imagen, podras ver que te lleva a la pagina principal de este blog, mientras que si das clic en el ojo superior, veras que te llevara a la pagina de contacto. Con un enlace normal de imagen, solo podrias acceder a un enlace por cada imagen. Eso es lo maravilloso.

Ahora, veamos el codigo que usamos para hacer esto:

<div id="imagen1">
<img border="0" src="http://1.bp.blogspot.com/_ANAc3M1UV3E/TEj8rxeHzSI/AAAAAAAABJg/EJrn_0B3JyE/s1600/20091206222801_ojos+arco+iris.jpg" usemap="#Map" />
<map id="Map" name="Map">
<area coords="111,73,140,96" href="http://www.frikibloggeo.com.ar/" shape="rect" target="_blank">
<area coords="61,104,93,128" href="http://www.frikibloggeo.com.ar/p/contacto.html" shape="rect" target="_blank">
</map></div>

EXPLICACION DEL CODIGO

En rojo: Es la id del codigo en la etiqueta div

En azul: Es la URL de la imagen en proporciones reales (Debes usar la imagen con sus propias medidas)

En naranja: Las coordenadas de los ojos dentro de la imagen

En azul: Los enlace a los que nos dirije cada ojo.

Te doy el codigo limpio.

<div id="nombre">
<img border="0" src="URL de la imagen" usemap="#Map" />
<map id="Map" name="Map">
<area coords="Coordenadas1" href="link1" shape="rect" target="_blank">
<area coords="coordenadas2" href="link2" shape="rect" target="_blank">
</map></div>

Sacar las coordenadas en la imagen es muy sencillo. Usando el Paint de Windows o cualquier otro programa de editado de fotos podras hacerlo. Aqui te dejo este manual que hice explicando paso a paso que hacer para sacar las coordenada usando Paint.

Descargar el manual en formato PDF para ver con Adobe Reader

Descargar el manual en XPS para ver con el visor de XPS de Windows

Atajos del teclado para editor de entradas de Blogger

noreply@blogger.com (.::: Anthony :::.) — Thu, 15 Jul 2010 14:51:03 PDT

Tal vez esto a simple viste no te parecerá útil, pero mira dos veces! puedes ver que esta entrada es mas útil de lo que pudieras creer, o tal vez, así lo considero yo. Muchas veces me ha pasado que escribiendo una entrada, cometo algún error grande, y trato de remediarlo con la función Deshacer, pero si nos fijamos, el editor de blogger no cuenta con este botón entre su panel de funciones.

Aquí, en este corto post te mostrare ciertas funciones que puedes aplicar mientras escribes tus entradas, que puede que blogger las tenga disponible con alguna no las tendrá, pero es una forma mas fácil y rápida de darle formatos a tus entradas usando simplemente el teclado sin tener que mirar el mouse de la computadora. A continuacion, te muestro la serie de atajos que puedes realizar con el teclado.

Serie de atajos que puedes realizar con el teclado de tu computador

Atajos de teclado	Funciones
CTRL + Z	Para Deshacer
CTRL + X	Para cortar
CTRL + C	Para copiar
CTRL + V	Para pegar
CTRL + B	Para poner letra en negrita
CTRL + A	Para resaltar el texto completo
CTRL + S	Para autoguardar y seguir editando
CTRL + D	Para guardar como borrador
CTRL + F	Para encontrar una palabra o frase
CTRL + G	Habilitar la transliteracion
CTRL + Y	Para rehacer
CTRL + U	Para subrayar
CTRL + I	Cambiar letra a cursiva
CTRL + P	Para publicar la entrada
CTRL + SHIFT + P	Para vista previa de la entrada
CTRL + SHIFT + A	Para insertar un vinculo

Los atajos marcados en rojo no funcionar con Firefox o algun navegador de los ultimos lanzados
Si sabes de algun otro atajo, deja el comentario con este

Falkner Press: Nueva plantilla premiun para blogger (Gratis)

noreply@blogger.com (.::: Anthony :::.) — Sun, 01 Aug 2010 15:34:29 PDT

FALKNER PRESS

Características Principales

1. Imágenes miniaturas automáticas en las entradas

2. Resumen automático de las entradas

3. SlideShow editable para lo que desees

5. Adsense agregado

6. Logotipo editable con Photoshop

7. Incrustacion de vídeo de Youtube incluido

8. Bloque de publicidad agregado

9. Tres columnas

10. Iconos de redes sociales incluidos

11. Gadget de twitter incrustado

12. Suscripción de correo electrónico de Feedburner agregado

13. Indice de publicaciones en la sidebar

14. Cuadro de búsqueda integrado

15. Menú con especial belleza

16. Tres columnas de footer

17. Compatible con muchos navegadores

18. Gadget de comentarios recientes

19. Y mucho mas..!

Guia para instalar la plantilla.

El logotipo

Antes que todo, siempre asegúrate de hacer una copia de seguridad de tu plantilla, no te aseguramos que todo salga bien. En la descargar de la plantillas, puedes apreciar un archivo llamada logo.psd. Este es editable con photoshop, en caso de no tenerlo puedes hacerlo con cualquier otro software, aunque tal vez no quede igual. Luego, que edites la imagen, subela a tu servidor, y la URL te daran, debes conlocarla en el siguiente codigo de la plantilla

Dirigite a el codigo de la plantilla

Busca la siguiente URL y reemplazala por la tuya

http://3.bp.blogspot.com/_ANAc3M1UV3E/TD0bExs4sDI/AAAAAAAABE0/uCUH4Wkjupc/s1600/logo.jpg

Modificar el menú de navegación

Dirigete a la edicion HTML de la plantilla, y busca el siguiente codigo

<ul>

<li><a expr:href='data:blog.homepageUrl'>Home</a></li>

<li><a href='WEBSITE URL HERE'>About</a></li>

<li><a href='WEBSITE URL HERE'>Archives</a></li>
<li><a href='WEBSITE URL HERE'>Contact</a></li>


<li><a href='WEBSITE URL HERE'>Disclaimer</a></li>


<li><a href='WEBSITE URL HERE'>Forum</a></li>


<li><a href='WEBSITE URL HERE'>Subscribe</a></li>


<li><a href='WEBSITE URL HERE'>History</a></li>


<li><a href='WEBSITE URL HERE'>Profiles</a></li></ul>

Solo debes reemplazar donde dice WEBSITE URL HERE por la direccion del vinculo que desses, y los nombres a mostrar en el menu (About, archives, contact, etc)

Editar el gadget de Twitter

Si usas twitter, puedes editar este gadget integrado en la plantilla buscando el siguiente codigo.

<a href='http://twitter.com/frikibloggeo' id='twitter-link' style='display:block;text-align:right;'>follow me on Twitter</a>

</div>

<script src='http://twitter.com/javascripts/blogger.js' type='text/javascript'/>

<script src='http://twitter.com/statuses/user_timeline/frikibloggeo.json?callback=twitterCallback2&amp;count=1' type='text/javascript'/>

Solo debes editar donde dice frikibloggeo por tu nombre de usuario de twitter. Si no usas twitter solo elimina el siguiente codigo de la plantilla

<b:widget id='HTML5' locked='false' title='Twitter' type='HTML'>

...................

...............

<script src='http://twitter.com/statuses/user_timeline/bloggertricks.json?callback=twitterCallback2&amp;count=1' type='text/javascript'/>

</div>

</div>

<b:include name='quickedit'/>

</b:includable>

</b:widget>

Editar el cuadro de suscripcion

En la plantilla busca el siguiente codigo

http://feedburner.google.com/fb/a/mailverify?uri=frikibloggeo

y luego este

<p><a href='http://feeds2.feedburner.com/frikibloggeo'><img alt='' height='26' src='http://feeds2.feedburner.com/~fc/frikibloggeo?bg=FD6D00&amp;fg=202931&amp;anim=1' style='border:0' width='88'/></a></p>

sustituye frikibloggeo por tu nombre de usuario de Feedburner. Si aun no tienes cuenta haz clic aqui para crear una.

Agregar un video de youtube

Si vas a la pestaña diseño en tu plantilla, podras ver algo asi

Haras clic en Editar en tu plantilla, e introduces el codigo del video de youtube en el gadget HTML/javascript. Nunca olvides cambiar las dimensiones del video original a 250 x 190, de otra manera, el video aparecera incompleto.

Si no quieres colocar video, quitalo eliminando el siguiente codigo de la plantilla

<b:widget id='HTML2' locked='true' title='VIDEO (250 x 190)' type='HTML'>

<b:includable id='main'>

<!-- only display title if it's non-empty -->

<data:content/>

<b:include name='quickedit'/>

</b:includable>

</b:widget>

Indice de entradas recientes con imagen minatura

En esta plantilla viene incluido el gadget de entradas recientes con imagen miniatura, solo que deberas editarlo para que aparezcan las entradas de tu blog, te explico como hacerlo.

Busca el siguiente codigo en la plantilla

home_page = &quot;http://falknerpress.blogspot.com/&quot;;

Sustituye la direccion en naranja por la URL de tu blog.

Editar el gadget de marcadores sociales

En el footer puedes encontrar el gadget que nos muestra en la imagen, con los marcadores sociales mas importantes y visitados del mundo, algo que no puedes ignorar, podemos ver agregado a redes como facebook, twitter o technorati, etc. Te explico como editarlo.

Busca las siguientes lineas en el codigo


<ul>


<li><a href='http://your-feedburner-url.com' target='_blank'>Subscribe</a></li>


<li><a href='http://digg.com/users/frikibloggeo' target='_blank'>Digg</a></li>


<li><a href='http://www.facebook.com/people/frikibloggeo' target='_blank'>Facebook</a></li>


<li><a href='http://frikibloggeo.stumbleupon.com'>Stumble It!</a></li>


</ul>


</div>

<div class='share-list2'>


<ul>


<li><a href='http://technorati.com/faves?add=http://your-blog.blogspot.com/'>Technorati</a></li>


<li><a href='http://twitter.com/frikibloggeo' target='_blank'>Twitter</a></li>


</ul>

Sustituye cada direccion por las tuyas en cada marcador social

Slideshow

Ve a la Edicion HTML de tu plantilla, y encuentra las siguiente lineas

Antes que todo, un slideshow requiere de preparacion previa. Ve preparando tus imagenes con dimensiones de 490 (Ancho) x 280 (Alto) pixeles. Puedes usar photoshop o cualquier software de editado de fotos, y luego subirlas a cualquier servidor.

Encuntra el codigo


<div id='myGallery'>


<!-- First Picture Start -->


<div class='imageElement'>


<h3>Title 1 </h3>


<p/>


<a class='open' href='LINK 1 '/>


<img alt='Marley And Me' class='full' src='URL OF IMAGE 1 '/>


</div>


<!-- First Picture End -->


<!-- Second Picture Start -->


<div class='imageElement'>


<h3>Title 2 </h3>


<p/>


<a class='open' href='LINK 2 '/>


<img alt='Marley And Me' class='full' src='URL OF IMAGE 2 '/>


</div>


<!-- Second Picture End -->


<!-- Third Picture Start -->


<div class='imageElement'>


<h3>Title 3 </h3>


<p/>


<a class='open' href='LINK 3 '/>


<img alt='Marley And Me' class='full' src='URL OF IMAGE 3 '/>


</div>


<!-- Third Picture End -->



</div>

En Rojo: Titulo

En Naranja: URL a la que ira dirigido lo mostrado actualmente en el slideshow

En Verde: URL de la Imagen

Despues de este paso, ya puedes disfrutar de tu nueva plantilla.

Ver Demostracion - Descargar

Via : BloggerTricks

Mostrar un pequeño anuncio desplazable en el blog

noreply@blogger.com (.::: Anthony :::.) — Wed, 02 Jun 2010 06:14:04 PDT

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)

Agrega los siguiente codigos .JS justo antes de la etiqueta </head> de tu blog en la edicion HTML

<script src='http://sites.google.com/site/archivosfrikibloggeo/friki-bloggeo/Anuncio.js' type='text/javascript'/>
<script src='http://sites.google.com/site/archivosfrikibloggeo/friki-bloggeo/Anuncio-ACC.js' type='text/javascript'/>

Si prefieres colocar los codigos directamente en tu blog, sin estar comprimidos en una direccion, deberas agregar el siguiente codigo justo antes de </head>

[3] El codigo HTML

Ahora, para finalizar, debes colocar el siguiente codigo HTML justo antes de la etiqueta </body> o bien, en un nuevo gadget HTML/javascript.

<div id='anuncio'>
<a href='javascript:void' onclick='closebar(); return false'><img align="right" border="0" src="http://sites.google.com/site/archivosfrikibloggeo/friki-bloggeo/images/close.png" /></a><br />
<a href='http://www.frikibloggeo.com.ar/'><img src="http://sites.google.com/site/archivosfrikibloggeo/friki-bloggeo/images/anuncio.png" /></a>
</div>

En Rojo: URL de la imagen del boton cerrar, puedes sustituirla por la tuya

En Azul: URL de la imagen del anuncio

En Naranja: Enlace al que te llevara en anuncio.

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

noreply@blogger.com (.::: Anthony :::.) — Tue, 01 Jun 2010 20:39:25 PDT

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

Your Website Address : Url de tu Blog
Your Email : Tu correo electronico
En el recuadro azul, te mostrara las opciones de diseño de la barra, en el campo te toca colocar el nombre de tu blog, pero si miras arriba de ese campo, hay un vinculo que te permite subir un logo.
Al lado derecho del campo azul, te permite colocar el color de tu barra, puedes elejir si quieres que ese color se vea degradado o simplemente el color que le colocaste elijiendo cada radio del campo Shading

[4] Luego, de haber realizado todos esos pasos, debes hacer clic en el botón

[5] Luego, entra a la edición HTML de tu blog, y pega el código que te dará el generador justo antes de </body>

[7] Guarda los cambios y mira tu barra.

Agregar un Slideshow automatico en tu blog

noreply@blogger.com (.::: Anthony :::.) — Tue, 01 Jun 2010 15:58:45 PDT

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.

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

<script type='text/javascript'>
//<![CDATA[

/*
* jQuery Easing v1.1 - http://gsgd.co.uk/sandbox/jquery.easing.php
*
* Uses the built in easing capabilities added in jQuery 1.1
* to offer multiple easing options
*
* Copyright (c) 2007 George Smith
* Licensed under the MIT License:
*   http://www.opensource.org/licenses/mit-license.php
*/

jQuery.easing = {
easein: function(x, t, b, c, d) {
return c*(t/=d)*t + b; // in
},
easeinout: function(x, t, b, c, d) {
if (t < d/2) return 2*c*t*t/(d*d) + b;
var ts = t - d/2;
return -2*c*ts*ts/(d*d) + 2*c*ts/d + c/2 + b;
},
easeout: function(x, t, b, c, d) {
return -c*t*t/(d*d) + 2*c*t/d + b;
},
expoin: function(x, t, b, c, d) {
var flip = 1;
if (c < 0) {
        flip *= -1;
        c *= -1;
}
return flip * (Math.exp(Math.log(c)/d * t)) + b;
},
expoout: function(x, t, b, c, d) {
var flip = 1;
if (c < 0) {
        flip *= -1;
        c *= -1;
}
return flip * (-Math.exp(-Math.log(c)/d * (t-d)) + c + 1) + b;
},
expoinout: function(x, t, b, c, d) {
var flip = 1;
if (c < 0) {
        flip *= -1;
        c *= -1;
}
if (t < d/2) return flip * (Math.exp(Math.log(c/2)/(d/2) * t)) + b;
return flip * (-Math.exp(-2*Math.log(c/2)/d * (t-d)) + c + 1) + b;
},
bouncein: function(x, t, b, c, d) {
return c - jQuery.easing['bounceout'](x, d-t, 0, c, d) + b;
},
bounceout: function(x, t, b, c, d) {
if ((t/=d) < (1/2.75)) {
        return c*(7.5625*t*t) + b;
} else if (t < (2/2.75)) {
        return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
} else if (t < (2.5/2.75)) {
        return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
} else {
        return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
}
},
bounceinout: function(x, t, b, c, d) {
if (t < d/2) return jQuery.easing['bouncein'] (x, t*2, 0, c, d) * .5 + b;
return jQuery.easing['bounceout'] (x, t*2-d,0, c, d) * .5 + c*.5 + b;
},
elasin: function(x, t, b, c, d) {
var s=1.70158;var p=0;var a=c;
if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
if (a < Math.abs(c)) { a=c; var s=p/4; }
else var s = p/(2*Math.PI) * Math.asin (c/a);
return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
},
elasout: function(x, t, b, c, d) {
var s=1.70158;var p=0;var a=c;
if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
if (a < Math.abs(c)) { a=c; var s=p/4; }
else var s = p/(2*Math.PI) * Math.asin (c/a);
return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
},
elasinout: function(x, t, b, c, d) {
var s=1.70158;var p=0;var a=c;
if (t==0) return b;  if ((t/=d/2)==2) return b+c;  if (!p) p=d*(.3*1.5);
if (a < Math.abs(c)) { a=c; var s=p/4; }
else var s = p/(2*Math.PI) * Math.asin (c/a);
if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
},
backin: function(x, t, b, c, d) {
var s=1.70158;
return c*(t/=d)*t*((s+1)*t - s) + b;
},
backout: function(x, t, b, c, d) {
var s=1.70158;
return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
},
backinout: function(x, t, b, c, d) {
var s=1.70158;
if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
},
linear: function(x, t, b, c, d) {
return c*t/d + b; //linear
}
};

//]]>
</script>


<script type='text/javascript'>
//<![CDATA[

eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('(6($){$.1g.1w=6(o){o=$.1f({r:n,x:n,N:n,17:q,J:n,L:1a,16:n,y:q,u:12,H:3,B:0,k:1,K:n,I:n},o||{});8 G.R(6(){p b=q,A=o.y?"15":"w",P=o.y?"t":"s";p c=$(G),9=$("9",c),E=$("10",9),W=E.Y(),v=o.H;7(o.u){9.1h(E.D(W-v-1+1).V()).1d(E.D(0,v).V());o.B+=v}p f=$("10",9),l=f.Y(),4=o.B;c.5("1c","H");f.5({U:"T",1b:o.y?"S":"w"});9.5({19:"0",18:"0",Q:"13","1v-1s-1r":"S","z-14":"1"});c.5({U:"T",Q:"13","z-14":"2",w:"1q"});p g=o.y?t(f):s(f);p h=g*l;p j=g*v;f.5({s:f.s(),t:f.t()});9.5(P,h+"C").5(A,-(4*g));c.5(P,j+"C");7(o.r)$(o.r).O(6(){8 m(4-o.k)});7(o.x)$(o.x).O(6(){8 m(4+o.k)});7(o.N)$.R(o.N,6(i,a){$(a).O(6(){8 m(o.u?o.H+i:i)})});7(o.17&&c.11)c.11(6(e,d){8 d>0?m(4-o.k):m(4+o.k)});7(o.J)1p(6(){m(4+o.k)},o.J+o.L);6 M(){8 f.D(4).D(0,v)};6 m(a){7(!b){7(o.K)o.K.Z(G,M());7(o.u){7(a<=o.B-v-1){9.5(A,-((l-(v*2))*g)+"C");4=a==o.B-v-1?l-(v*2)-1:l-(v*2)-o.k}F 7(a>=l-v+1){9.5(A,-((v)*g)+"C");4=a==l-v+1?v+1:v+o.k}F 4=a}F{7(a<0||a>l-v)8;F 4=a}b=12;9.1o(A=="w"?{w:-(4*g)}:{15:-(4*g)},o.L,o.16,6(){7(o.I)o.I.Z(G,M());b=q});7(!o.u){$(o.r+","+o.x).1n("X");$((4-o.k<0&&o.r)||(4+o.k>l-v&&o.x)||[]).1m("X")}}8 q}})};6 5(a,b){8 1l($.5(a[0],b))||0};6 s(a){8 a[0].1k+5(a,\'1j\')+5(a,\'1i\')};6 t(a){8 a[0].1t+5(a,\'1u\')+5(a,\'1e\')}})(1x);',62,96,'||||curr|css|function|if|return|ul|||||||||||scroll|itemLength|go|null||var|false|btnPrev|width|height|circular||left|btnNext|vertical||animCss|start|px|slice|tLi|else|this|visible|afterEnd|auto|beforeStart|speed|vis|btnGo|click|sizeCss|position|each|none|hidden|overflow|clone|tl|disabled|size|call|li|mousewheel|true|relative|index|top|easing|mouseWheel|padding|margin|200|float|visibility|append|marginBottom|extend|fn|prepend|marginRight|marginLeft|offsetWidth|parseInt|addClass|removeClass|animate|setInterval|0px|type|style|offsetHeight|marginTop|list|jCarouselLite|jQuery'.split('|'),0,{}))

//]]>
</script>


<script type='text/javascript'>
//<![CDATA[

/*! Copyright (c) 2009 Brandon Aaron (http://brandonaaron.net)
* Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
* and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
* Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers.
* Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix.
*
* Version: 3.0.2
*
* Requires: 1.2.2+
*/

(function($) {

var types = ['DOMMouseScroll', 'mousewheel'];

$.event.special.mousewheel = {
setup: function() {
if ( this.addEventListener )
        for ( var i=types.length; i; )
                this.addEventListener( types[--i], handler, false );
else
        this.onmousewheel = handler;
},

teardown: function() {
if ( this.removeEventListener )
        for ( var i=types.length; i; )
                this.removeEventListener( types[--i], handler, false );
else
        this.onmousewheel = null;
}
};

$.fn.extend({
mousewheel: function(fn) {
return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");
},

unmousewheel: function(fn) {
return this.unbind("mousewheel", fn);
}
});


function handler(event) {
var args = [].slice.call( arguments, 1 ), delta = 0, returnValue = true;

event = $.event.fix(event || window.event);
event.type = "mousewheel";

if ( event.wheelDelta ) delta = event.wheelDelta/120;
if ( event.detail     ) delta = -event.detail/3;

// Add events and delta to the front of the arguments
args.unshift(event, delta);

return $.event.handle.apply(this, args);
}

})(jQuery);

//]]>
</script>

<script type='text/javascript'>
//<![CDATA[

/*
* Copyright (c) 2009 Simo Kinnunen.
* Licensed under the MIT license.
*
* @version 1.02
*/
var Cufon=(function(){var m=function(){return m.replace.apply(null,arguments)};var x=m.DOM={ready:(function(){var C=false,E={loaded:1,complete:1};var B=[],D=function(){if(C){return}C=true;for(var F;F=B.shift();F()){}};if(document.addEventListener){document.addEventListener("DOMContentLoaded",D,false);window.addEventListener("pageshow",D,false)}if(!window.opera&&document.readyState){(function(){E[document.readyState]?D():setTimeout(arguments.callee,10)})()}if(document.readyState&&document.createStyleSheet){(function(){try{document.body.doScroll("left");D()}catch(F){setTimeout(arguments.callee,1)}})()}q(window,"load",D);return function(F){if(!arguments.length){D()}else{C?F():B.push(F)}}})(),root:function(){return document.documentElement||document.body}};var n=m.CSS={Size:function(C,B){this.value=parseFloat(C);this.unit=String(C).match(/[a-z%]*$/)[0]||"px";this.convert=function(D){return D/B*this.value};this.convertFrom=function(D){return D/this.value*B};this.toString=function(){return this.value+this.unit}},addClass:function(C,B){var D=C.className;C.className=D+(D&&" ")+B;return C},color:j(function(C){var B={};B.color=C.replace(/^rgba\((.*?),\s*([\d.]+)\)/,function(E,D,F){B.opacity=parseFloat(F);return"rgb("+D+")"});return B}),fontStretch:j(function(B){if(typeof B=="number"){return B}if(/%$/.test(B)){return parseFloat(B)/100}return{"ultra-condensed":0.5,"extra-condensed":0.625,condensed:0.75,"semi-condensed":0.875,"semi-expanded":1.125,expanded:1.25,"extra-expanded":1.5,"ultra-expanded":2}[B]||1}),getStyle:function(C){var B=document.defaultView;if(B&&B.getComputedStyle){return new a(B.getComputedStyle(C,null))}if(C.currentStyle){return new a(C.currentStyle)}return new a(C.style)},gradient:j(function(F){var G={id:F,type:F.match(/^-([a-z]+)-gradient\(/)[1],stops:[]},C=F.substr(F.indexOf("(")).match(/([\d.]+=)?(#[a-f0-9]+|[a-z]+\(.*?\)|[a-z]+)/ig);for(var E=0,B=C.length,D;E<B;++E){D=C[E].split("=",2).reverse();G.stops.push([D[1]||E/(B-1),D[0]])}return G}),hasClass:function(C,B){return RegExp("(?:^|\\s)"+B+"(?=\\s|$)").test(C.className)},quotedList:j(function(E){var D=[],C=/\s*((["'])([\s\S]*?[^\\])\2|[^,]+)\s*/g,B;while(B=C.exec(E)){D.push(B[3]||B[1])}return D}),recognizesMedia:j(function(G){var E=document.createElement("style"),D,C,B;E.type="text/css";E.media=G;try{E.appendChild(document.createTextNode("/**/"))}catch(F){}C=g("head")[0];C.insertBefore(E,C.firstChild);D=(E.sheet||E.styleSheet);B=D&&!D.disabled;C.removeChild(E);return B}),removeClass:function(D,C){var B=RegExp("(?:^|\\s+)"+C+"(?=\\s|$)","g");D.className=D.className.replace(B,"");return D},supports:function(D,C){var B=document.createElement("span").style;if(B[D]===undefined){return false}B[D]=C;return B[D]===C},textAlign:function(E,D,B,C){if(D.get("textAlign")=="right"){if(B>0){E=" "+E}}else{if(B<C-1){E+=" "}}return E},textDecoration:function(G,F){if(!F){F=this.getStyle(G)}var C={underline:null,overline:null,"line-through":null};for(var B=G;B.parentNode&&B.parentNode.nodeType==1;){var E=true;for(var D in C){if(!k(C,D)||C[D]){continue}if(F.get("textDecoration").indexOf(D)!=-1){C[D]=F.get("color")}E=false}if(E){break}F=this.getStyle(B=B.parentNode)}return C},textShadow:j(function(F){if(F=="none"){return null}var E=[],G={},B,C=0;var D=/(#[a-f0-9]+|[a-z]+\(.*?\)|[a-z]+)|(-?[\d.]+[a-z%]*)|,/ig;while(B=D.exec(F)){if(B[0]==","){E.push(G);G={};C=0}else{if(B[1]){G.color=B[1]}else{G[["offX","offY","blur"][C++]]=B[2]}}}E.push(G);return E}),textTransform:(function(){var B={uppercase:function(C){return C.toUpperCase()},lowercase:function(C){return C.toLowerCase()},capitalize:function(C){return C.replace(/\b./g,function(D){return D.toUpperCase()})}};return function(E,D){var C=B[D.get("textTransform")];return C?C(E):E}})(),whiteSpace:(function(){var B={inline:1,"inline-block":1,"run-in":1};return function(E,C,D){if(B[C.get("display")]){return E}if(!D.previousSibling){E=E.replace(/^\s+/,"")}if(!D.nextSibling){E=E.replace(/\s+$/,"")}return E}})()};n.ready=(function(){var B=!n.recognizesMedia("all"),E=false;var D=[],H=function(){B=true;for(var K;K=D.shift();K()){}};var I=g("link"),J=g("style");function C(K){return K.disabled||G(K.sheet,K.media||"screen")}function G(M,P){if(!n.recognizesMedia(P||"all")){return true}if(!M||M.disabled){return false}try{var Q=M.cssRules,O;if(Q){search:for(var L=0,K=Q.length;O=Q[L],L<K;++L){switch(O.type){case 2:break;case 3:if(!G(O.styleSheet,O.media.mediaText)){return false}break;default:break search}}}}catch(N){}return true}function F(){if(document.createStyleSheet){return true}var L,K;for(K=0;L=I[K];++K){if(L.rel.toLowerCase()=="stylesheet"&&!C(L)){return false}}for(K=0;L=J[K];++K){if(!C(L)){return false}}return true}x.ready(function(){if(!E){E=n.getStyle(document.body).isUsable()}if(B||(E&&F())){H()}else{setTimeout(arguments.callee,10)}});return function(K){if(B){K()}else{D.push(K)}}})();function s(C){var B=this.face=C.face;this.glyphs=C.glyphs;this.w=C.w;this.baseSize=parseInt(B["units-per-em"],10);this.family=B["font-family"].toLowerCase();this.weight=B["font-weight"];this.style=B["font-style"]||"normal";this.viewBox=(function(){var E=B.bbox.split(/\s+/);var D={minX:parseInt(E[0],10),minY:parseInt(E[1],10),maxX:parseInt(E[2],10),maxY:parseInt(E[3],10)};D.width=D.maxX-D.minX;D.height=D.maxY-D.minY;D.toString=function(){return[this.minX,this.minY,this.width,this.height].join(" ")};return D})();this.ascent=-parseInt(B.ascent,10);this.descent=-parseInt(B.descent,10);this.height=-this.ascent+this.descent}function f(){var C={},B={oblique:"italic",italic:"oblique"};this.add=function(D){(C[D.style]||(C[D.style]={}))[D.weight]=D};this.get=function(H,I){var G=C[H]||C[B[H]]||C.normal||C.italic||C.oblique;if(!G){return null}I={normal:400,bold:700}[I]||parseInt(I,10);if(G[I]){return G[I]}var E={1:1,99:0}[I%100],K=[],F,D;if(E===undefined){E=I>400}if(I==500){I=400}for(var J in G){if(!k(G,J)){continue}J=parseInt(J,10);if(!F||J<F){F=J}if(!D||J>D){D=J}K.push(J)}if(I<F){I=F}if(I>D){I=D}K.sort(function(M,L){return(E?(M>I&&L>I)?M<L:M>L:(M<I&&L<I)?M>L:M<L)?-1:1});return G[K[0]]}}function r(){function D(F,G){if(F.contains){return F.contains(G)}return F.compareDocumentPosition(G)&16}function B(G){var F=G.relatedTarget;if(!F||D(this,F)){return}C(this)}function E(F){C(this)}function C(F){setTimeout(function(){m.replace(F,d.get(F).options,true)},10)}this.attach=function(F){if(F.onmouseenter===undefined){q(F,"mouseover",B);q(F,"mouseout",B)}else{q(F,"mouseenter",E);q(F,"mouseleave",E)}}}function u(){var C=[],D={};function B(H){var E=[],G;for(var F=0;G=H[F];++F){E[F]=C[D[G]]}return E}this.add=function(F,E){D[F]=C.push(E)-1};this.repeat=function(){var E=arguments.length?B(arguments):C,F;for(var G=0;F=E[G++];){m.replace(F[0],F[1],true)}}}function A(){var D={},B=0;function C(E){return E.cufid||(E.cufid=++B)}this.get=function(E){var F=C(E);return D[F]||(D[F]={})}}function a(B){var D={},C={};this.extend=function(E){for(var F in E){if(k(E,F)){D[F]=E[F]}}return this};this.get=function(E){return D[E]!=undefined?D[E]:B[E]};this.getSize=function(F,E){return C[F]||(C[F]=new n.Size(this.get(F),E))};this.isUsable=function(){return !!B}}function q(C,B,D){if(C.addEventListener){C.addEventListener(B,D,false)}else{if(C.attachEvent){C.attachEvent("on"+B,function(){return D.call(C,window.event)})}}}function v(C,B){var D=d.get(C);if(D.options){return C}if(B.hover&&B.hoverables[C.nodeName.toLowerCase()]){b.attach(C)}D.options=B;return C}function j(B){var C={};return function(D){if(!k(C,D)){C[D]=B.apply(null,arguments)}return C[D]}}function c(F,E){var B=n.quotedList(E.get("fontFamily").toLowerCase()),D;for(var C=0;D=B[C];++C){if(i[D]){return i[D].get(E.get("fontStyle"),E.get("fontWeight"))}}return null}function g(B){return document.getElementsByTagName(B)}function k(C,B){return C.hasOwnProperty(B)}function h(){var B={},D,F;for(var E=0,C=arguments.length;D=arguments[E],E<C;++E){for(F in D){if(k(D,F)){B[F]=D[F]}}}return B}function o(E,M,C,N,F,D){var K=document.createDocumentFragment(),H;if(M===""){return K}var L=N.separate;var I=M.split(p[L]),B=(L=="words");if(B&&t){if(/^\s/.test(M)){I.unshift("")}if(/\s$/.test(M)){I.push("")}}for(var J=0,G=I.length;J<G;++J){H=z[N.engine](E,B?n.textAlign(I[J],C,J,G):I[J],C,N,F,D,J<G-1);if(H){K.appendChild(H)}}return K}function l(C,J){var B=n.getStyle(v(C,J)).extend(J);var D=c(C,B),E,H,G,F,I;for(E=C.firstChild;E;E=G){H=E.nodeType;G=E.nextSibling;if(H==3){if(F){F.appendData(E.data);C.removeChild(E)}else{F=E}if(G){continue}}if(F){C.replaceChild(o(D,n.whiteSpace(F.data,B,F),B,J,E,C),F);F=null}if(H==1&&E.firstChild){if(n.hasClass(E,"cufon")){z[J.engine](D,null,B,J,E,C)}else{arguments.callee(E,J)}}}}var t=" ".split(/\s+/).length==0;var d=new A();var b=new r();var y=new u();var e=false;var z={},i={},w={enableTextDecoration:false,engine:null,forceHitArea:false,hover:false,hoverables:{a:true},printable:true,selector:(window.Sizzle||(window.jQuery&&function(B){return jQuery(B)})||(window.dojo&&dojo.query)||(window.Ext&&Ext.query)||(window.$$&&function(B){return $$(B)})||(window.$&&function(B){return $(B)})||(document.querySelectorAll&&function(B){return document.querySelectorAll(B)})||g),separate:"words",textShadow:"none"};var p={words:/[^\S\u00a0]+/,characters:"",none:/^/};m.now=function(){x.ready();return m};m.refresh=function(){y.repeat.apply(y,arguments);return m};m.registerEngine=function(C,B){if(!B){return m}z[C]=B;return m.set("engine",C)};m.registerFont=function(D){var B=new s(D),C=B.family;if(!i[C]){i[C]=new f()}i[C].add(B);return m.set("fontFamily",'"'+C+'"')};m.replace=function(D,C,B){C=h(w,C);if(!C.engine){return m}if(!e){n.addClass(x.root(),"cufon-active cufon-loading");n.ready(function(){n.addClass(n.removeClass(x.root(),"cufon-loading"),"cufon-ready")});e=true}if(C.hover){C.forceHitArea=true}if(typeof C.textShadow=="string"){C.textShadow=n.textShadow(C.textShadow)}if(typeof C.color=="string"&&/^-/.test(C.color)){C.textGradient=n.gradient(C.color)}if(!B){y.add(D,arguments)}if(D.nodeType||typeof D=="string"){D=[D]}n.ready(function(){for(var F=0,E=D.length;F<E;++F){var G=D[F];if(typeof G=="string"){m.replace(C.selector(G),C,true)}else{l(G,C)}}});return m};m.set=function(B,C){w[B]=C;return m};return m})();Cufon.registerEngine("canvas",(function(){var b=document.createElement("canvas");if(!b||!b.getContext||!b.getContext.apply){return}b=null;var a=Cufon.CSS.supports("display","inline-block");var e=!a&&(document.compatMode=="BackCompat"||/frameset|transitional/i.test(document.doctype.publicId));var f=document.createElement("style");f.type="text/css";f.appendChild(document.createTextNode((".cufon-canvas{text-indent:0;}@media screen,projection{.cufon-canvas{display:inline;display:inline-block;position:relative;vertical-align:middle;"+(e?"":"font-size:1px;line-height:1px;")+"}.cufon-canvas .cufon-alt{display:-moz-inline-box;display:inline-block;width:0;height:0;overflow:hidden;text-indent:-10000in;}"+(a?".cufon-canvas canvas{position:relative;}":".cufon-canvas canvas{position:absolute;}")+"}@media print{.cufon-canvas{padding:0;}.cufon-canvas canvas{display:none;}.cufon-canvas .cufon-alt{display:inline;}}").replace(/;/g,"!important;")));document.getElementsByTagName("head")[0].appendChild(f);function d(p,h){var n=0,m=0;var g=[],o=/([mrvxe])([^a-z]*)/g,k;generate:for(var j=0;k=o.exec(p);++j){var l=k[2].split(",");switch(k[1]){case"v":g[j]={m:"bezierCurveTo",a:[n+~~l[0],m+~~l[1],n+~~l[2],m+~~l[3],n+=~~l[4],m+=~~l[5]]};break;case"r":g[j]={m:"lineTo",a:[n+=~~l[0],m+=~~l[1]]};break;case"m":g[j]={m:"moveTo",a:[n=~~l[0],m=~~l[1]]};break;case"x":g[j]={m:"closePath"};break;case"e":break generate}h[g[j].m].apply(h,g[j].a)}return g}function c(m,k){for(var j=0,h=m.length;j<h;++j){var g=m[j];k[g.m].apply(k,g.a)}}return function(ah,H,Z,D,L,ai){var n=(H===null);if(n){H=L.alt}var J=ah.viewBox;var p=Z.getSize("fontSize",ah.baseSize);var X=Z.get("letterSpacing");X=(X=="normal")?0:p.convertFrom(parseInt(X,10));var K=0,Y=0,W=0,F=0;var I=D.textShadow,U=[];if(I){for(var ag=I.length;ag--;){var O=I[ag];var T=p.convertFrom(parseFloat(O.offX));var R=p.convertFrom(parseFloat(O.offY));U[ag]=[T,R];if(R<K){K=R}if(T>Y){Y=T}if(R>W){W=R}if(T<F){F=T}}}var al=Cufon.CSS.textTransform(H,Z).split(""),B;var o=ah.glyphs,E,r,ac;var h=0,v,N=[];for(var ag=0,ae=0,ab=al.length;ag<ab;++ag){E=o[B=al[ag]]||ah.missingGlyph;if(!E){continue}if(r){h-=ac=r[B]||0;N[ae-1]-=ac}h+=v=N[ae++]=~~(E.w||ah.w)+X;r=E.k}if(v===undefined){return null}Y+=J.width-v;F+=J.minX;var C,q;if(n){C=L;q=L.firstChild}else{C=document.createElement("span");C.className="cufon cufon-canvas";C.alt=H;q=document.createElement("canvas");C.appendChild(q);if(D.printable){var ad=document.createElement("span");ad.className="cufon-alt";ad.appendChild(document.createTextNode(H));C.appendChild(ad)}}var am=C.style;var Q=q.style;var m=p.convert(J.height);var ak=Math.ceil(m);var V=ak/m;var P=V*Cufon.CSS.fontStretch(Z.get("fontStretch"));var S=h*P;var aa=Math.ceil(p.convert(S+Y-F));var t=Math.ceil(p.convert(J.height-K+W));q.width=aa;q.height=t;Q.width=aa+"px";Q.height=t+"px";K+=J.minY;Q.top=Math.round(p.convert(K-ah.ascent))+"px";Q.left=Math.round(p.convert(F))+"px";var A=Math.ceil(p.convert(S))+"px";if(a){am.width=A;am.height=p.convert(ah.height)+"px"}else{am.paddingLeft=A;am.paddingBottom=(p.convert(ah.height)-1)+"px"}var aj=q.getContext("2d"),M=m/J.height;aj.scale(M,M*V);aj.translate(-F,-K);aj.lineWidth=ah.face["underline-thickness"];aj.save();function s(i,g){aj.strokeStyle=g;aj.beginPath();aj.moveTo(0,i);aj.lineTo(h,i);aj.stroke()}var u=D.enableTextDecoration?Cufon.CSS.textDecoration(ai,Z):{};if(u.underline){s(-ah.face["underline-position"],u.underline)}if(u.overline){s(ah.ascent,u.overline)}function af(){aj.scale(P,1);for(var x=0,k=0,g=al.length;x<g;++x){var y=o[al[x]]||ah.missingGlyph;if(!y){continue}if(y.d){aj.beginPath();if(y.code){c(y.code,aj)}else{y.code=d("m"+y.d,aj)}aj.fill()}aj.translate(N[k++],0)}aj.restore()}if(I){for(var ag=I.length;ag--;){var O=I[ag];aj.save();aj.fillStyle=O.color;aj.translate.apply(aj,U[ag]);af()}}var z=D.textGradient;if(z){var G=z.stops,w=aj.createLinearGradient(0,J.minY,0,J.maxY);for(var ag=0,ab=G.length;ag<ab;++ag){w.addColorStop.apply(w,G[ag])}aj.fillStyle=w}else{aj.fillStyle=Z.get("color")}af();if(u["line-through"]){s(-ah.descent,u["line-through"])}return C}})());Cufon.registerEngine("vml",(function(){var e=document.namespaces;if(!e){return}e.add("cvml","urn:schemas-microsoft-com:vml");e=null;var b=document.createElement("cvml:shape");b.style.behavior="url(#default#VML)";if(!b.coordsize){return}b=null;var g=(document.documentMode||0)<8;document.write(('<style type="text/css">.cufon-vml-canvas{text-indent:0;}@media screen{cvml\\:shape,cvml\\:rect,cvml\\:fill,cvml\\:shadow{behavior:url(#default#VML);display:block;antialias:true;position:absolute;}.cufon-vml-canvas{position:absolute;text-align:left;}.cufon-vml{display:inline-block;position:relative;vertical-align:'+(g?"middle":"text-bottom")+";}.cufon-vml .cufon-alt{position:absolute;left:-10000in;font-size:1px;}a .cufon-vml{cursor:pointer}}@media print{.cufon-vml *{display:none;}.cufon-vml .cufon-alt{display:inline;}}</style>").replace(/;/g,"!important;"));function c(h,i){return a(h,/(?:em|ex|%)$|^[a-z-]+$/i.test(i)?"1em":i)}function a(k,l){if(/px$/i.test(l)){return parseFloat(l)}var j=k.style.left,i=k.runtimeStyle.left;k.runtimeStyle.left=k.currentStyle.left;k.style.left=l.replace("%","em");var h=k.style.pixelLeft;k.style.left=j;k.runtimeStyle.left=i;return h}var f={};function d(o){var p=o.id;if(!f[p]){var m=o.stops,n=document.createElement("cvml:fill"),h=[];n.type="gradient";n.angle=180;n.focus="0";n.method="sigma";n.color=m[0][1];for(var l=1,i=m.length-1;l<i;++l){h.push(m[l][0]*100+"% "+m[l][1])}n.colors=h.join(",");n.color2=m[i][1];f[p]=n}return f[p]}return function(aj,K,ad,G,O,ak,ab){var o=(K===null);if(o){K=O.alt}var M=aj.viewBox;var q=ad.computedFontSize||(ad.computedFontSize=new Cufon.CSS.Size(c(ak,ad.get("fontSize"))+"px",aj.baseSize));var aa=ad.computedLSpacing;if(aa==undefined){aa=ad.get("letterSpacing");ad.computedLSpacing=aa=(aa=="normal")?0:~~q.convertFrom(a(ak,aa))}var C,r;if(o){C=O;r=O.firstChild}else{C=document.createElement("span");C.className="cufon cufon-vml";C.alt=K;r=document.createElement("span");r.className="cufon-vml-canvas";C.appendChild(r);if(G.printable){var ag=document.createElement("span");ag.className="cufon-alt";ag.appendChild(document.createTextNode(K));C.appendChild(ag)}if(!ab){C.appendChild(document.createElement("cvml:shape"))}}var ap=C.style;var V=r.style;var m=q.convert(M.height),am=Math.ceil(m);var Z=am/m;var T=Z*Cufon.CSS.fontStretch(ad.get("fontStretch"));var Y=M.minX,X=M.minY;V.height=am;V.top=Math.round(q.convert(X-aj.ascent));V.left=Math.round(q.convert(Y));ap.height=q.convert(aj.height)+"px";var v=G.enableTextDecoration?Cufon.CSS.textDecoration(ak,ad):{};var J=ad.get("color");var ao=Cufon.CSS.textTransform(K,ad).split(""),B;var p=aj.glyphs,H,s,af;var h=0,P=[],W=0,x;var z,L=G.textShadow;for(var ai=0,ah=0,ae=ao.length;ai<ae;++ai){H=p[B=ao[ai]]||aj.missingGlyph;if(!H){continue}if(s){h-=af=s[B]||0;P[ah-1]-=af}h+=x=P[ah++]=~~(H.w||aj.w)+aa;s=H.k}if(x===undefined){return null}var A=-Y+h+(M.width-x);var an=q.convert(A*T),ac=Math.round(an);var S=A+","+M.height,n;var N="r"+S+"ns";var y=G.textGradient&&d(G.textGradient);for(ai=0,ah=0;ai<ae;++ai){H=p[ao[ai]]||aj.missingGlyph;if(!H){continue}if(o){z=r.childNodes[ah];while(z.firstChild){z.removeChild(z.firstChild)}}else{z=document.createElement("cvml:shape");r.appendChild(z)}z.stroked="f";z.coordsize=S;z.coordorigin=n=(Y-W)+","+X;z.path=(H.d?"m"+H.d+"xe":"")+"m"+n+N;z.fillcolor=J;if(y){z.appendChild(y.cloneNode(false))}var al=z.style;al.width=ac;al.height=am;if(L){var u=L[0],t=L[1];var F=Cufon.CSS.color(u.color),D;var R=document.createElement("cvml:shadow");R.on="t";R.color=F.color;R.offset=u.offX+","+u.offY;if(t){D=Cufon.CSS.color(t.color);R.type="double";R.color2=D.color;R.offset2=t.offX+","+t.offY}R.opacity=F.opacity||(D&&D.opacity)||1;z.appendChild(R)}W+=P[ah++]}var Q=z.nextSibling,w,E;if(G.forceHitArea){if(!Q){Q=document.createElement("cvml:rect");Q.stroked="f";Q.className="cufon-vml-cover";w=document.createElement("cvml:fill");w.opacity=0;Q.appendChild(w);r.appendChild(Q)}E=Q.style;E.width=ac;E.height=am}else{if(Q){r.removeChild(Q)}}ap.width=Math.max(Math.ceil(q.convert(h*T)),0);if(g){var U=ad.computedYAdjust;if(U===undefined){var I=ad.get("lineHeight");if(I=="normal"){I="1em"}else{if(!isNaN(I)){I+="em"}}ad.computedYAdjust=U=0.5*(a(ak,I)-parseFloat(ap.height))}if(U){ap.marginTop=Math.ceil(U)+"px";ap.marginBottom=U+"px"}}return C}})());

//]]>
</script>

<script type='text/javascript'>
//<![CDATA[

jQuery(document).ready(function() {
Cufon.replace('#blog-title,.postleft h2,.title h2', { fontFamily: 'Liberation Serif' });

});

//]]>
</script>


<style type="text/css">
#slidearea{
height: 250px;
overflow: hidden;
position: relative;
width:670px;
margin-bottom:10px;
background:#373737;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
float:left;
display:inline;
}

#gallerycover{
overflow: hidden;
margin:15px ;
height: 220px;
}

.mygallery{
overflow: hidden;
position:relative;

}

.mytext img{
position:absolute;
left:0px;
top:0px;
width:635px;
height:220px;

}

.mytext a img {
border:none;
}

.mytext{
position:relative;
width:635px;
height: 220px;
float:left;
display:inline;
float:left;
color:#c4c4c4;
background:#4F4B40;
border:1px solid #CFC4A8;
}

.inpost{
position:absolute;
bottom:10px;
left:10px;
width:620px;
background:url(http://2.bp.blogspot.com/_4HKUHirY_2U/S7vsC69pSuI/AAAAAAAAA5k/4HH41BzX3lo/trans.png);
}

.inpost p{
margin:5px;
font-size:12px;
font-family:"Segoe UI";,Calibri,"Myriad Pro",Myriad,"Trebuchet MS";,Helvetica,Arial,sans-serif;
}

.mytext h2 {
padding:5px 10px;
color:#fff;
font-size: 16px ;

}

.mytext h2 a:link,.mytext h2 a:visited{
color:#e9dbd5;
}
</style>

4. Ahora, ir a elementos de la pagina

5. Seleccione añadir un nuevo gadget> HTML/javascript

6. Pega el siguiente codigo.

<script type="text/javascript">
var $jx = jQuery.noConflict();
$jx(function() {
$jx(".mygallery").jCarouselLite({
btnNext: ".nextb",
btnPrev: ".prevb",
  visible: 1,
speed: 1500,
  auto:5000,
  mouseWheel: true,
  easing: "backout"

});

});
</script>

<div id="slidearea">
<div id="gallerycover">
<div class="mygallery">

<ul>

<!-- Slide-1 Code Start -->
<li>
<div class="mytext">
<a href="YOUR-POST-1-LINK-HERE">
<img src="imagen" alt=""/>
</a>
<div class="inpost">
<p>YOUR-FEATURED-POST-1-SMALL-DESCRIPTION-HERE [...] </p>
</div>
</div>
</li>
<!-- Slide-1 Code End -->


<!-- Slide-2 Code Start -->
<li>
<div class="mytext">
<a href="YOUR-POST-2-LINK-HERE">
<img src="imagen" alt=""/>
</a>
<div class="inpost">
<p>YOUR-FEATURED-POST-2-SMALL-DESCRIPTION-HERE [...] </p>
</div>
</div>
</li>
<!-- Slide-2 Code End -->


<!-- Slide-3 Code Start -->
<li>
<div class="mytext">
<a href="YOUR-POST-3-LINK-HERE">
<img src="imagen" alt=""/>
</a>
<div class="inpost">
<p>YOUR-FEATURED-POST-3-SMALL-DESCRIPTION-HERE [...] </p>
</div>
</div>
</li>
<!-- Slide-3 Code End -->

</ul>

<div class="clear"></div>

</div>
</div>
</div>

<div class="clear"></div>

Para Entender el codigo

En rojo; Titulo de la entrada
En verde: La imagen de fondo referente
En Amarillo: Una descripcion o fragmento de la entrada

Si deseas añadir otro slide mas al codigo, debes usar el siguiente codigo.

<!-- Slide-4 Code Start -->
<li>
<div class="mytext">
<a href="YOUR-POST-6-LINK-HERE">
<img src="imagen" alt=""/>
</a>
<div class="inpost">
<p>YOUR-FEATURED-POST-6-SMALL-DESCRIPTION-HERE [...] </p>
</div>
</div>
</li>
<!-- Slide-4 Code End -->

Esto debe ser añadido justo antes de </ul>

Eso es todo

Nuevas 2 plantillas premium para Blogger totalmente Gratis

noreply@blogger.com (.::: Anthony :::.) — Thu, 06 May 2010 16:10:23 PDT

Webfolio Blogger Template

Webfolio Blogger Template es una plantilla para blogger de 2 columnas y un elegante diseño de fondo, hecho con las mas alta calidad de imagen, pero tambien, es una plantilla muy simple, para los usuarios que les gusta mantener su blog limpio y fresco a toda hora. Solo por la imagen que puedes ver, ya te puedes imaginar lo ordenada que es esta plantilla, y la forma en la que las entradas van ordenadas.

Caracteristicas

Tipo de Plantilla: Tema para Blogger
Nombre: Webfolio Blogger Template
Licencia: Free Template [Plantilla Gratis]
Propiedades:

Dos columnas de plantilla de Blogger
Tres columnas en el pie de pagina
Lateral derecho
Elegante diseño
Viene en tres versiones

Demostracion | Descargar

Premium Blogger Theme

Premium Blogger Theme es una plantilla para blogger de 9 columnas, la plantilla es muy elegante, con un fondo transparente que la realza, posee 7 caja dentro de ella para agregar anunciantes o publicidad, y mucho mas... La plantilla se ha diseñado con una alta calidad y profesionalismo, es limpia y ordenada, con gran cantidad de caracteristicas de las plantillas para blogger

Caracteristicas

Tipo de plantilla: Tema para Blogger
Nombre: Premium Blogger Theme
Licencia: Free Template + Creative Commons License
Propiedades:

9 columnas
1 columnas para el pie de pagina
Elegante diseño
Lateral derecho
125x125 de cuadro para anunciantes
Numeracion de paginas para la navegacion
Gadget de suscripcion
Entradas miniaturas
Estilo de Revista

Demostracion | Descargar

Añadir un recuadro de suscripcion al final de cada entrada

noreply@blogger.com (.::: Anthony :::.) — Mon, 19 Apr 2010 00:01:01 PDT

Un enlace de suscripcion en un blog, nunca esta demas, como lo dije ya antes en una anterior entrada, hoy te lo vuelvo a decir aqui. Hace mucho, observe en los grandes blogs, que casi todos tienen un enlace de suscripcion encerrado en un recuadro al final de cada entrada.

Jamas me pregunte como lo hicieron, me puse a trabajar en ellos hasta que logre hacer uno, que me quedo muy bonito, diria que mucho mejor a los que pude observar. Te mostrare como personalizar el codigo para que combine con los estilo de tu blog, este artilugio ira añadido al final de cada entrada es la pagina indivudual de cada una de ellas, si quieren ver una demostracion, pues ve a la pagina individual de esta entrada, y mirala.

[1] Los estilos CSS

#notas{
border: 1px dashed #33CC33;
padding: 15px;
text-align:center;
font-size:12px;
font-family: Comic Sans MS, Verdana;
}

.suscripcion {
background: transparent url(http://2.bp.blogspot.com/_ANAc3M1UV3E/S8aD54Bmw5I/AAAAAAAAA8U/X5L-mBzfT44/s1600/1271301025_rss.png) no-repeat center left;height:30px;
padding-left: 32px;
font-size:16px;
text-align:left;
}

Para entender el codigo

En Rojo: Es el grosor del borde.

En violeta: Es el color del borde.

En verde: Son las alineaciones de los textos (Center [Centrado], left [a la izquierda], right [a la derecha])

En Naranja: Es la fuente de la letra. Asegurate que si la cambiaras por una letra no determinada por Blogger, que el usuario posea esa letra en la memoria de su computador, de otra manera, no la reconocerá.

En Aquamarine: Es la imagen. Puedes sustituirla por la que tu quieras, como medida 32 x 32.

[2] El codigo HTML.

♦ Ve a la Edicion HTML de tu blog, y expandiendo los artilugios, busca la siguiente linea.

<div class='post-footer-line post-footer-line-3'>

Si no aparece, puedes hacerlo buscando esta.

<div class='post-footer-line post-footer-line-2'>

O simplemente esta.

<div class='post-footer'>

Luego, justo debajo de la que buscastes, pegaras el siguiente codigo.

    <b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='notas'>
<div class='suscripcion'> &#191;Tu primera vez en <a expr:href='data:blog.homepageUrl'><data:blog.title/></a>?
</div>

Quizás quieras <a href='http://feeds.feedburner.com/frikibloggeo'>suscribirte</a> o <a href='http://feedburner.google.com/fb/a/mailverify?uri=TntByStc' target='_blank'>Recibir las nuevas noticias a tu correo.</a>
</div>
</b:if>

Para entender el codigo

En Rojo: Es el texto dentro del recuadro, puedes personalizarlo si quieres.

En Azul: Sustituir frikibloggeo por tu direccion de feedburner, sustituir TntByStc por la tuya propia.

¿Como saber cual es mi codigo de suscripcion por correo electronico (TntByStc)?

[1] Ve a Feedburner

[2] Si no tienes activa la suscripcion por correo electronico en tu blog, haz clic en la pestaña publicize > Email Suscription > Activate.

[3] Si ya la tienes activa, entra a publicize > Email Suscription.

[4] Alli te aparecera un codigo HTML igual o similar a este.

<form style="border:1px solid #ccc;padding:3px;text-align:center;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=TUCLAVEESTARAAQUI', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p>Enter your email address:</p><p><input type="text" style="width:140px" name="email"/></p><input type="hidden" value="TUCLAVEESTARAAQUI" name="uri"/><input type="hidden" name="loc" value="en_US"/><input type="submit" value="Subscribe" /><p>Delivered by <a href="http://feedburner.google.com" target="_blank">FeedBurner</a></p></form>

En el codigo, puedes observar un frase marcada en naranja, si mueves el slide hacia la derecha, esa frase indica la localizacion de la clave de tu suscripcion por email, y la cual usaras para sustituir la del codigo del recudro de suscripcion.

[3] Guarda los cambios y mira como quedo.

Agregar enlaces de suscripcion atractivos en tu sidebar

noreply@blogger.com (.::: Anthony :::.) — Sat, 17 Apr 2010 00:01:00 PDT

Siempre lo he dicho y asi lo reiterare, los enlaces de suscripcion de un blog, nunca deben faltar en tu blog, si tienes por monton, siempre sera mucho mejor.

Que un usuario se suscriba a tu blog, es algo muy importante, tan importante como quemar tu feed en feedburner, mientras mas suscriptores tengas, mas pocisionamiento, ayuda a aumentar el pagerank de tu blog, y hacer que google te tome en cuenta a la hora de las busquedas, ya que hacer que un usuario se suscriba, demuestra a los robots cuan interesante y de calidad es el contenido publicado en tu blog.

Este widget, es igual al que ves en la imagen, pero esa es solo una previsualizacion de su apariencia, para verlo funcionando puedes visitar este blog de pruebas.

[1] Entra a Blogger > Diseño > Edicion HTML

[2] Buscar la etiqueta </head>

[3] Justo antes de esta, pegar el siguiente codigo

<style type='text/css'>

#hsection{border:4px solid #D3D3D3;background-color:#e9e9e9;}
#hsection:hover{border:4px solid #BABABA;background-color:#e9e9e9;}

#sectionmy .sectionmy2 h2.subscription { border:0; margin:0; padding:6px 0 0 55px; height:42px; font-size:16px;font-family:&quot;Segoe UI&quot;,Calibri,&quot;Myriad Pro&quot;,Myriad,&quot;Trebuchet MS&quot;,Helvetica,Arial,sans-serif;
font-weight:bold; }

#sectionmy .sectionmy2 h2.rss { background:url(http://2.bp.blogspot.com/_4HKUHirY_2U/S209wcnxO5I/AAAAAAAAAw4/I7aEXRVYR8s/RSS.png) no-repeat top left; }

#sectionmy .sectionmy2 h2.email { background:url(http://3.bp.blogspot.com/_4HKUHirY_2U/S209s4_wFoI/AAAAAAAAAww/8VovLp1Yxlg/EmailRSS.png) no-repeat top left; }

#sectionmy .sectionmy2 h2.twitter { background:url(http://4.bp.blogspot.com/_4HKUHirY_2U/S209oJTU3UI/AAAAAAAAAwo/28dTiLvxvDQ/twitter.png) no-repeat top left; }

#sectionmy .sectionmy2 .subscription a { color:#252e28; text-decoration:none; }

</style>

En VERDE: Es el grosor del borde

En NARANJA: Es el color del borde del recuadro

En VIOLETA: Es el color de fondo del recuadro

En AZUL: Es el color al que cambia el borde al color el mouse sobre el recuadro

En ROJO: Son las imagenes, puedes sustituirlas por las tuyas si quieres.

[4] Añade un nuevo gadget HTML/Javascript y pega el siguiente codigo.

<div id="hsection">
<div id="sectionmy">
<div class="sectionmy2">

<h2 class="subscription rss"><a href="URL DE TU FEED">SUSCRIBETE VIA RSS</a></h2>

<h2 class="subscription email"><a href="URL DE LA SUSCRIPCION POR EMAIL DE FEEDBURNER">SUSCRIBETE VIA EMAIL</a></h2>

<h2 class="subscription twitter"><a href="TU URL DE TWITTER">SIGUEME EN TWITTER</a></h2>

</div></div>
</div>

[5] Guarda los cambios.

Mostrar un Slide con tus entradas Favoritas con jQuery

noreply@blogger.com (.::: Anthony :::.) — Fri, 16 Apr 2010 22:35:18 PDT

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

Mostrar el codigo

<script type='text/javascript'>
//<![CDATA[

eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('(6($){$.1g.1w=6(o){o=$.1f({r:n,x:n,N:n,17:q,J:n,L:1a,16:n,y:q,u:12,H:3,B:0,k:1,K:n,I:n},o||{});8 G.R(6(){p b=q,A=o.y?"15":"w",P=o.y?"t":"s";p c=$(G),9=$("9",c),E=$("10",9),W=E.Y(),v=o.H;7(o.u){9.1h(E.D(W-v-1+1).V()).1d(E.D(0,v).V());o.B+=v}p f=$("10",9),l=f.Y(),4=o.B;c.5("1c","H");f.5({U:"T",1b:o.y?"S":"w"});9.5({19:"0",18:"0",Q:"13","1v-1s-1r":"S","z-14":"1"});c.5({U:"T",Q:"13","z-14":"2",w:"1q"});p g=o.y?t(f):s(f);p h=g*l;p j=g*v;f.5({s:f.s(),t:f.t()});9.5(P,h+"C").5(A,-(4*g));c.5(P,j+"C");7(o.r)$(o.r).O(6(){8 m(4-o.k)});7(o.x)$(o.x).O(6(){8 m(4+o.k)});7(o.N)$.R(o.N,6(i,a){$(a).O(6(){8 m(o.u?o.H+i:i)})});7(o.17&&c.11)c.11(6(e,d){8 d>0?m(4-o.k):m(4+o.k)});7(o.J)1p(6(){m(4+o.k)},o.J+o.L);6 M(){8 f.D(4).D(0,v)};6 m(a){7(!b){7(o.K)o.K.Z(G,M());7(o.u){7(a<=o.B-v-1){9.5(A,-((l-(v*2))*g)+"C");4=a==o.B-v-1?l-(v*2)-1:l-(v*2)-o.k}F 7(a>=l-v+1){9.5(A,-((v)*g)+"C");4=a==l-v+1?v+1:v+o.k}F 4=a}F{7(a<0||a>l-v)8;F 4=a}b=12;9.1o(A=="w"?{w:-(4*g)}:{15:-(4*g)},o.L,o.16,6(){7(o.I)o.I.Z(G,M());b=q});7(!o.u){$(o.r+","+o.x).1n("X");$((4-o.k<0&&o.r)||(4+o.k>l-v&&o.x)||[]).1m("X")}}8 q}})};6 5(a,b){8 1l($.5(a[0],b))||0};6 s(a){8 a[0].1k+5(a,\'1j\')+5(a,\'1i\')};6 t(a){8 a[0].1t+5(a,\'1u\')+5(a,\'1e\')}})(1x);',62,96,'||||curr|css|function|if|return|ul|||||||||||scroll|itemLength|go|null||var|false|btnPrev|width|height|circular||left|btnNext|vertical||animCss|start|px|slice|tLi|else|this|visible|afterEnd|auto|beforeStart|speed|vis|btnGo|click|sizeCss|position|each|none|hidden|overflow|clone|tl|disabled|size|call|li|mousewheel|true|relative|index|top|easing|mouseWheel|padding|margin|200|float|visibility|append|marginBottom|extend|fn|prepend|marginRight|marginLeft|offsetWidth|parseInt|addClass|removeClass|animate|setInterval|0px|type|style|offsetHeight|marginTop|list|jCarouselLite|jQuery'.split('|'),0,{}))

//]]>
</script>

<script type='text/javascript'>
//<![CDATA[

/*
* Copyright (c) 2009 Simo Kinnunen.
* Licensed under the MIT license.
*
* @version 1.02
*/
var Cufon=(function(){var m=function(){return m.replace.apply(null,arguments)};var x=m.DOM={ready:(function(){var C=false,E={loaded:1,complete:1};var B=[],D=function(){if(C){return}C=true;for(var F;F=B.shift();F()){}};if(document.addEventListener){document.addEventListener("DOMContentLoaded",D,false);window.addEventListener("pageshow",D,false)}if(!window.opera&&document.readyState){(function(){E[document.readyState]?D():setTimeout(arguments.callee,10)})()}if(document.readyState&&document.createStyleSheet){(function(){try{document.body.doScroll("left");D()}catch(F){setTimeout(arguments.callee,1)}})()}q(window,"load",D);return function(F){if(!arguments.length){D()}else{C?F():B.push(F)}}})(),root:function(){return document.documentElement||document.body}};var n=m.CSS={Size:function(C,B){this.value=parseFloat(C);this.unit=String(C).match(/[a-z%]*$/)[0]||"px";this.convert=function(D){return D/B*this.value};this.convertFrom=function(D){return D/this.value*B};this.toString=function(){return this.value+this.unit}},addClass:function(C,B){var D=C.className;C.className=D+(D&&" ")+B;return C},color:j(function(C){var B={};B.color=C.replace(/^rgba\((.*?),\s*([\d.]+)\)/,function(E,D,F){B.opacity=parseFloat(F);return"rgb("+D+")"});return B}),fontStretch:j(function(B){if(typeof B=="number"){return B}if(/%$/.test(B)){return parseFloat(B)/100}return{"ultra-condensed":0.5,"extra-condensed":0.625,condensed:0.75,"semi-condensed":0.875,"semi-expanded":1.125,expanded:1.25,"extra-expanded":1.5,"ultra-expanded":2}[B]||1}),getStyle:function(C){var B=document.defaultView;if(B&&B.getComputedStyle){return new a(B.getComputedStyle(C,null))}if(C.currentStyle){return new a(C.currentStyle)}return new a(C.style)},gradient:j(function(F){var G={id:F,type:F.match(/^-([a-z]+)-gradient\(/)[1],stops:[]},C=F.substr(F.indexOf("(")).match(/([\d.]+=)?(#[a-f0-9]+|[a-z]+\(.*?\)|[a-z]+)/ig);for(var E=0,B=C.length,D;E<B;++E){D=C[E].split("=",2).reverse();G.stops.push([D[1]||E/(B-1),D[0]])}return G}),hasClass:function(C,B){return RegExp("(?:^|\\s)"+B+"(?=\\s|$)").test(C.className)},quotedList:j(function(E){var D=[],C=/\s*((["'])([\s\S]*?[^\\])\2|[^,]+)\s*/g,B;while(B=C.exec(E)){D.push(B[3]||B[1])}return D}),recognizesMedia:j(function(G){var E=document.createElement("style"),D,C,B;E.type="text/css";E.media=G;try{E.appendChild(document.createTextNode("/**/"))}catch(F){}C=g("head")[0];C.insertBefore(E,C.firstChild);D=(E.sheet||E.styleSheet);B=D&&!D.disabled;C.removeChild(E);return B}),removeClass:function(D,C){var B=RegExp("(?:^|\\s+)"+C+"(?=\\s|$)","g");D.className=D.className.replace(B,"");return D},supports:function(D,C){var B=document.createElement("span").style;if(B[D]===undefined){return false}B[D]=C;return B[D]===C},textAlign:function(E,D,B,C){if(D.get("textAlign")=="right"){if(B>0){E=" "+E}}else{if(B<C-1){E+=" "}}return E},textDecoration:function(G,F){if(!F){F=this.getStyle(G)}var C={underline:null,overline:null,"line-through":null};for(var B=G;B.parentNode&&B.parentNode.nodeType==1;){var E=true;for(var D in C){if(!k(C,D)||C[D]){continue}if(F.get("textDecoration").indexOf(D)!=-1){C[D]=F.get("color")}E=false}if(E){break}F=this.getStyle(B=B.parentNode)}return C},textShadow:j(function(F){if(F=="none"){return null}var E=[],G={},B,C=0;var D=/(#[a-f0-9]+|[a-z]+\(.*?\)|[a-z]+)|(-?[\d.]+[a-z%]*)|,/ig;while(B=D.exec(F)){if(B[0]==","){E.push(G);G={};C=0}else{if(B[1]){G.color=B[1]}else{G[["offX","offY","blur"][C++]]=B[2]}}}E.push(G);return E}),textTransform:(function(){var B={uppercase:function(C){return C.toUpperCase()},lowercase:function(C){return C.toLowerCase()},capitalize:function(C){return C.replace(/\b./g,function(D){return D.toUpperCase()})}};return function(E,D){var C=B[D.get("textTransform")];return C?C(E):E}})(),whiteSpace:(function(){var B={inline:1,"inline-block":1,"run-in":1};return function(E,C,D){if(B[C.get("display")]){return E}if(!D.previousSibling){E=E.replace(/^\s+/,"")}if(!D.nextSibling){E=E.replace(/\s+$/,"")}return E}})()};n.ready=(function(){var B=!n.recognizesMedia("all"),E=false;var D=[],H=function(){B=true;for(var K;K=D.shift();K()){}};var I=g("link"),J=g("style");function C(K){return K.disabled||G(K.sheet,K.media||"screen")}function G(M,P){if(!n.recognizesMedia(P||"all")){return true}if(!M||M.disabled){return false}try{var Q=M.cssRules,O;if(Q){search:for(var L=0,K=Q.length;O=Q[L],L<K;++L){switch(O.type){case 2:break;case 3:if(!G(O.styleSheet,O.media.mediaText)){return false}break;default:break search}}}}catch(N){}return true}function F(){if(document.createStyleSheet){return true}var L,K;for(K=0;L=I[K];++K){if(L.rel.toLowerCase()=="stylesheet"&&!C(L)){return false}}for(K=0;L=J[K];++K){if(!C(L)){return false}}return true}x.ready(function(){if(!E){E=n.getStyle(document.body).isUsable()}if(B||(E&&F())){H()}else{setTimeout(arguments.callee,10)}});return function(K){if(B){K()}else{D.push(K)}}})();function s(C){var B=this.face=C.face;this.glyphs=C.glyphs;this.w=C.w;this.baseSize=parseInt(B["units-per-em"],10);this.family=B["font-family"].toLowerCase();this.weight=B["font-weight"];this.style=B["font-style"]||"normal";this.viewBox=(function(){var E=B.bbox.split(/\s+/);var D={minX:parseInt(E[0],10),minY:parseInt(E[1],10),maxX:parseInt(E[2],10),maxY:parseInt(E[3],10)};D.width=D.maxX-D.minX;D.height=D.maxY-D.minY;D.toString=function(){return[this.minX,this.minY,this.width,this.height].join(" ")};return D})();this.ascent=-parseInt(B.ascent,10);this.descent=-parseInt(B.descent,10);this.height=-this.ascent+this.descent}function f(){var C={},B={oblique:"italic",italic:"oblique"};this.add=function(D){(C[D.style]||(C[D.style]={}))[D.weight]=D};this.get=function(H,I){var G=C[H]||C[B[H]]||C.normal||C.italic||C.oblique;if(!G){return null}I={normal:400,bold:700}[I]||parseInt(I,10);if(G[I]){return G[I]}var E={1:1,99:0}[I%100],K=[],F,D;if(E===undefined){E=I>400}if(I==500){I=400}for(var J in G){if(!k(G,J)){continue}J=parseInt(J,10);if(!F||J<F){F=J}if(!D||J>D){D=J}K.push(J)}if(I<F){I=F}if(I>D){I=D}K.sort(function(M,L){return(E?(M>I&&L>I)?M<L:M>L:(M<I&&L<I)?M>L:M<L)?-1:1});return G[K[0]]}}function r(){function D(F,G){if(F.contains){return F.contains(G)}return F.compareDocumentPosition(G)&16}function B(G){var F=G.relatedTarget;if(!F||D(this,F)){return}C(this)}function E(F){C(this)}function C(F){setTimeout(function(){m.replace(F,d.get(F).options,true)},10)}this.attach=function(F){if(F.onmouseenter===undefined){q(F,"mouseover",B);q(F,"mouseout",B)}else{q(F,"mouseenter",E);q(F,"mouseleave",E)}}}function u(){var C=[],D={};function B(H){var E=[],G;for(var F=0;G=H[F];++F){E[F]=C[D[G]]}return E}this.add=function(F,E){D[F]=C.push(E)-1};this.repeat=function(){var E=arguments.length?B(arguments):C,F;for(var G=0;F=E[G++];){m.replace(F[0],F[1],true)}}}function A(){var D={},B=0;function C(E){return E.cufid||(E.cufid=++B)}this.get=function(E){var F=C(E);return D[F]||(D[F]={})}}function a(B){var D={},C={};this.extend=function(E){for(var F in E){if(k(E,F)){D[F]=E[F]}}return this};this.get=function(E){return D[E]!=undefined?D[E]:B[E]};this.getSize=function(F,E){return C[F]||(C[F]=new n.Size(this.get(F),E))};this.isUsable=function(){return !!B}}function q(C,B,D){if(C.addEventListener){C.addEventListener(B,D,false)}else{if(C.attachEvent){C.attachEvent("on"+B,function(){return D.call(C,window.event)})}}}function v(C,B){var D=d.get(C);if(D.options){return C}if(B.hover&&B.hoverables[C.nodeName.toLowerCase()]){b.attach(C)}D.options=B;return C}function j(B){var C={};return function(D){if(!k(C,D)){C[D]=B.apply(null,arguments)}return C[D]}}function c(F,E){var B=n.quotedList(E.get("fontFamily").toLowerCase()),D;for(var C=0;D=B[C];++C){if(i[D]){return i[D].get(E.get("fontStyle"),E.get("fontWeight"))}}return null}function g(B){return document.getElementsByTagName(B)}function k(C,B){return C.hasOwnProperty(B)}function h(){var B={},D,F;for(var E=0,C=arguments.length;D=arguments[E],E<C;++E){for(F in D){if(k(D,F)){B[F]=D[F]}}}return B}function o(E,M,C,N,F,D){var K=document.createDocumentFragment(),H;if(M===""){return K}var L=N.separate;var I=M.split(p[L]),B=(L=="words");if(B&&t){if(/^\s/.test(M)){I.unshift("")}if(/\s$/.test(M)){I.push("")}}for(var J=0,G=I.length;J<G;++J){H=z[N.engine](E,B?n.textAlign(I[J],C,J,G):I[J],C,N,F,D,J<G-1);if(H){K.appendChild(H)}}return K}function l(C,J){var B=n.getStyle(v(C,J)).extend(J);var D=c(C,B),E,H,G,F,I;for(E=C.firstChild;E;E=G){H=E.nodeType;G=E.nextSibling;if(H==3){if(F){F.appendData(E.data);C.removeChild(E)}else{F=E}if(G){continue}}if(F){C.replaceChild(o(D,n.whiteSpace(F.data,B,F),B,J,E,C),F);F=null}if(H==1&&E.firstChild){if(n.hasClass(E,"cufon")){z[J.engine](D,null,B,J,E,C)}else{arguments.callee(E,J)}}}}var t=" ".split(/\s+/).length==0;var d=new A();var b=new r();var y=new u();var e=false;var z={},i={},w={enableTextDecoration:false,engine:null,forceHitArea:false,hover:false,hoverables:{a:true},printable:true,selector:(window.Sizzle||(window.jQuery&&function(B){return jQuery(B)})||(window.dojo&&dojo.query)||(window.Ext&&Ext.query)||(window.$$&&function(B){return $$(B)})||(window.$&&function(B){return $(B)})||(document.querySelectorAll&&function(B){return document.querySelectorAll(B)})||g),separate:"words",textShadow:"none"};var p={words:/[^\S\u00a0]+/,characters:"",none:/^/};m.now=function(){x.ready();return m};m.refresh=function(){y.repeat.apply(y,arguments);return m};m.registerEngine=function(C,B){if(!B){return m}z[C]=B;return m.set("engine",C)};m.registerFont=function(D){var B=new s(D),C=B.family;if(!i[C]){i[C]=new f()}i[C].add(B);return m.set("fontFamily",'"'+C+'"')};m.replace=function(D,C,B){C=h(w,C);if(!C.engine){return m}if(!e){n.addClass(x.root(),"cufon-active cufon-loading");n.ready(function(){n.addClass(n.removeClass(x.root(),"cufon-loading"),"cufon-ready")});e=true}if(C.hover){C.forceHitArea=true}if(typeof C.textShadow=="string"){C.textShadow=n.textShadow(C.textShadow)}if(typeof C.color=="string"&&/^-/.test(C.color)){C.textGradient=n.gradient(C.color)}if(!B){y.add(D,arguments)}if(D.nodeType||typeof D=="string"){D=[D]}n.ready(function(){for(var F=0,E=D.length;F<E;++F){var G=D[F];if(typeof G=="string"){m.replace(C.selector(G),C,true)}else{l(G,C)}}});return m};m.set=function(B,C){w[B]=C;return m};return m})();Cufon.registerEngine("canvas",(function(){var b=document.createElement("canvas");if(!b||!b.getContext||!b.getContext.apply){return}b=null;var a=Cufon.CSS.supports("display","inline-block");var e=!a&&(document.compatMode=="BackCompat"||/frameset|transitional/i.test(document.doctype.publicId));var f=document.createElement("style");f.type="text/css";f.appendChild(document.createTextNode((".cufon-canvas{text-indent:0;}@media screen,projection{.cufon-canvas{display:inline;display:inline-block;position:relative;vertical-align:middle;"+(e?"":"font-size:1px;line-height:1px;")+"}.cufon-canvas .cufon-alt{display:-moz-inline-box;display:inline-block;width:0;height:0;overflow:hidden;text-indent:-10000in;}"+(a?".cufon-canvas canvas{position:relative;}":".cufon-canvas canvas{position:absolute;}")+"}@media print{.cufon-canvas{padding:0;}.cufon-canvas canvas{display:none;}.cufon-canvas .cufon-alt{display:inline;}}").replace(/;/g,"!important;")));document.getElementsByTagName("head")[0].appendChild(f);function d(p,h){var n=0,m=0;var g=[],o=/([mrvxe])([^a-z]*)/g,k;generate:for(var j=0;k=o.exec(p);++j){var l=k[2].split(",");switch(k[1]){case"v":g[j]={m:"bezierCurveTo",a:[n+~~l[0],m+~~l[1],n+~~l[2],m+~~l[3],n+=~~l[4],m+=~~l[5]]};break;case"r":g[j]={m:"lineTo",a:[n+=~~l[0],m+=~~l[1]]};break;case"m":g[j]={m:"moveTo",a:[n=~~l[0],m=~~l[1]]};break;case"x":g[j]={m:"closePath"};break;case"e":break generate}h[g[j].m].apply(h,g[j].a)}return g}function c(m,k){for(var j=0,h=m.length;j<h;++j){var g=m[j];k[g.m].apply(k,g.a)}}return function(ah,H,Z,D,L,ai){var n=(H===null);if(n){H=L.alt}var J=ah.viewBox;var p=Z.getSize("fontSize",ah.baseSize);var X=Z.get("letterSpacing");X=(X=="normal")?0:p.convertFrom(parseInt(X,10));var K=0,Y=0,W=0,F=0;var I=D.textShadow,U=[];if(I){for(var ag=I.length;ag--;){var O=I[ag];var T=p.convertFrom(parseFloat(O.offX));var R=p.convertFrom(parseFloat(O.offY));U[ag]=[T,R];if(R<K){K=R}if(T>Y){Y=T}if(R>W){W=R}if(T<F){F=T}}}var al=Cufon.CSS.textTransform(H,Z).split(""),B;var o=ah.glyphs,E,r,ac;var h=0,v,N=[];for(var ag=0,ae=0,ab=al.length;ag<ab;++ag){E=o[B=al[ag]]||ah.missingGlyph;if(!E){continue}if(r){h-=ac=r[B]||0;N[ae-1]-=ac}h+=v=N[ae++]=~~(E.w||ah.w)+X;r=E.k}if(v===undefined){return null}Y+=J.width-v;F+=J.minX;var C,q;if(n){C=L;q=L.firstChild}else{C=document.createElement("span");C.className="cufon cufon-canvas";C.alt=H;q=document.createElement("canvas");C.appendChild(q);if(D.printable){var ad=document.createElement("span");ad.className="cufon-alt";ad.appendChild(document.createTextNode(H));C.appendChild(ad)}}var am=C.style;var Q=q.style;var m=p.convert(J.height);var ak=Math.ceil(m);var V=ak/m;var P=V*Cufon.CSS.fontStretch(Z.get("fontStretch"));var S=h*P;var aa=Math.ceil(p.convert(S+Y-F));var t=Math.ceil(p.convert(J.height-K+W));q.width=aa;q.height=t;Q.width=aa+"px";Q.height=t+"px";K+=J.minY;Q.top=Math.round(p.convert(K-ah.ascent))+"px";Q.left=Math.round(p.convert(F))+"px";var A=Math.ceil(p.convert(S))+"px";if(a){am.width=A;am.height=p.convert(ah.height)+"px"}else{am.paddingLeft=A;am.paddingBottom=(p.convert(ah.height)-1)+"px"}var aj=q.getContext("2d"),M=m/J.height;aj.scale(M,M*V);aj.translate(-F,-K);aj.lineWidth=ah.face["underline-thickness"];aj.save();function s(i,g){aj.strokeStyle=g;aj.beginPath();aj.moveTo(0,i);aj.lineTo(h,i);aj.stroke()}var u=D.enableTextDecoration?Cufon.CSS.textDecoration(ai,Z):{};if(u.underline){s(-ah.face["underline-position"],u.underline)}if(u.overline){s(ah.ascent,u.overline)}function af(){aj.scale(P,1);for(var x=0,k=0,g=al.length;x<g;++x){var y=o[al[x]]||ah.missingGlyph;if(!y){continue}if(y.d){aj.beginPath();if(y.code){c(y.code,aj)}else{y.code=d("m"+y.d,aj)}aj.fill()}aj.translate(N[k++],0)}aj.restore()}if(I){for(var ag=I.length;ag--;){var O=I[ag];aj.save();aj.fillStyle=O.color;aj.translate.apply(aj,U[ag]);af()}}var z=D.textGradient;if(z){var G=z.stops,w=aj.createLinearGradient(0,J.minY,0,J.maxY);for(var ag=0,ab=G.length;ag<ab;++ag){w.addColorStop.apply(w,G[ag])}aj.fillStyle=w}else{aj.fillStyle=Z.get("color")}af();if(u["line-through"]){s(-ah.descent,u["line-through"])}return C}})());Cufon.registerEngine("vml",(function(){var e=document.namespaces;if(!e){return}e.add("cvml","urn:schemas-microsoft-com:vml");e=null;var b=document.createElement("cvml:shape");b.style.behavior="url(#default#VML)";if(!b.coordsize){return}b=null;var g=(document.documentMode||0)<8;document.write(('<style type="text/css">.cufon-vml-canvas{text-indent:0;}@media screen{cvml\\:shape,cvml\\:rect,cvml\\:fill,cvml\\:shadow{behavior:url(#default#VML);display:block;antialias:true;position:absolute;}.cufon-vml-canvas{position:absolute;text-align:left;}.cufon-vml{display:inline-block;position:relative;vertical-align:'+(g?"middle":"text-bottom")+";}.cufon-vml .cufon-alt{position:absolute;left:-10000in;font-size:1px;}a .cufon-vml{cursor:pointer}}@media print{.cufon-vml *{display:none;}.cufon-vml .cufon-alt{display:inline;}}</style>").replace(/;/g,"!important;"));function c(h,i){return a(h,/(?:em|ex|%)$|^[a-z-]+$/i.test(i)?"1em":i)}function a(k,l){if(/px$/i.test(l)){return parseFloat(l)}var j=k.style.left,i=k.runtimeStyle.left;k.runtimeStyle.left=k.currentStyle.left;k.style.left=l.replace("%","em");var h=k.style.pixelLeft;k.style.left=j;k.runtimeStyle.left=i;return h}var f={};function d(o){var p=o.id;if(!f[p]){var m=o.stops,n=document.createElement("cvml:fill"),h=[];n.type="gradient";n.angle=180;n.focus="0";n.method="sigma";n.color=m[0][1];for(var l=1,i=m.length-1;l<i;++l){h.push(m[l][0]*100+"% "+m[l][1])}n.colors=h.join(",");n.color2=m[i][1];f[p]=n}return f[p]}return function(aj,K,ad,G,O,ak,ab){var o=(K===null);if(o){K=O.alt}var M=aj.viewBox;var q=ad.computedFontSize||(ad.computedFontSize=new Cufon.CSS.Size(c(ak,ad.get("fontSize"))+"px",aj.baseSize));var aa=ad.computedLSpacing;if(aa==undefined){aa=ad.get("letterSpacing");ad.computedLSpacing=aa=(aa=="normal")?0:~~q.convertFrom(a(ak,aa))}var C,r;if(o){C=O;r=O.firstChild}else{C=document.createElement("span");C.className="cufon cufon-vml";C.alt=K;r=document.createElement("span");r.className="cufon-vml-canvas";C.appendChild(r);if(G.printable){var ag=document.createElement("span");ag.className="cufon-alt";ag.appendChild(document.createTextNode(K));C.appendChild(ag)}if(!ab){C.appendChild(document.createElement("cvml:shape"))}}var ap=C.style;var V=r.style;var m=q.convert(M.height),am=Math.ceil(m);var Z=am/m;var T=Z*Cufon.CSS.fontStretch(ad.get("fontStretch"));var Y=M.minX,X=M.minY;V.height=am;V.top=Math.round(q.convert(X-aj.ascent));V.left=Math.round(q.convert(Y));ap.height=q.convert(aj.height)+"px";var v=G.enableTextDecoration?Cufon.CSS.textDecoration(ak,ad):{};var J=ad.get("color");var ao=Cufon.CSS.textTransform(K,ad).split(""),B;var p=aj.glyphs,H,s,af;var h=0,P=[],W=0,x;var z,L=G.textShadow;for(var ai=0,ah=0,ae=ao.length;ai<ae;++ai){H=p[B=ao[ai]]||aj.missingGlyph;if(!H){continue}if(s){h-=af=s[B]||0;P[ah-1]-=af}h+=x=P[ah++]=~~(H.w||aj.w)+aa;s=H.k}if(x===undefined){return null}var A=-Y+h+(M.width-x);var an=q.convert(A*T),ac=Math.round(an);var S=A+","+M.height,n;var N="r"+S+"ns";var y=G.textGradient&&d(G.textGradient);for(ai=0,ah=0;ai<ae;++ai){H=p[ao[ai]]||aj.missingGlyph;if(!H){continue}if(o){z=r.childNodes[ah];while(z.firstChild){z.removeChild(z.firstChild)}}else{z=document.createElement("cvml:shape");r.appendChild(z)}z.stroked="f";z.coordsize=S;z.coordorigin=n=(Y-W)+","+X;z.path=(H.d?"m"+H.d+"xe":"")+"m"+n+N;z.fillcolor=J;if(y){z.appendChild(y.cloneNode(false))}var al=z.style;al.width=ac;al.height=am;if(L){var u=L[0],t=L[1];var F=Cufon.CSS.color(u.color),D;var R=document.createElement("cvml:shadow");R.on="t";R.color=F.color;R.offset=u.offX+","+u.offY;if(t){D=Cufon.CSS.color(t.color);R.type="double";R.color2=D.color;R.offset2=t.offX+","+t.offY}R.opacity=F.opacity||(D&&D.opacity)||1;z.appendChild(R)}W+=P[ah++]}var Q=z.nextSibling,w,E;if(G.forceHitArea){if(!Q){Q=document.createElement("cvml:rect");Q.stroked="f";Q.className="cufon-vml-cover";w=document.createElement("cvml:fill");w.opacity=0;Q.appendChild(w);r.appendChild(Q)}E=Q.style;E.width=ac;E.height=am}else{if(Q){r.removeChild(Q)}}ap.width=Math.max(Math.ceil(q.convert(h*T)),0);if(g){var U=ad.computedYAdjust;if(U===undefined){var I=ad.get("lineHeight");if(I=="normal"){I="1em"}else{if(!isNaN(I)){I+="em"}}ad.computedYAdjust=U=0.5*(a(ak,I)-parseFloat(ap.height))}if(U){ap.marginTop=Math.ceil(U)+"px";ap.marginBottom=U+"px"}}return C}})());

//]]>
</script>

<script type='text/javascript'>
//<![CDATA[

/*
* jQuery Easing v1.1 - http://gsgd.co.uk/sandbox/jquery.easing.php
*
* Uses the built in easing capabilities added in jQuery 1.1
* to offer multiple easing options
*
* Copyright (c) 2007 George Smith
* Licensed under the MIT License:
*   http://www.opensource.org/licenses/mit-license.php
*/

jQuery.easing = {
easein: function(x, t, b, c, d) {
return c*(t/=d)*t + b; // in
},
easeinout: function(x, t, b, c, d) {
if (t < d/2) return 2*c*t*t/(d*d) + b;
var ts = t - d/2;
return -2*c*ts*ts/(d*d) + 2*c*ts/d + c/2 + b;
},
easeout: function(x, t, b, c, d) {
return -c*t*t/(d*d) + 2*c*t/d + b;
},
expoin: function(x, t, b, c, d) {
var flip = 1;
if (c < 0) {
flip *= -1;
c *= -1;
}
return flip * (Math.exp(Math.log(c)/d * t)) + b;
},
expoout: function(x, t, b, c, d) {
var flip = 1;
if (c < 0) {
flip *= -1;
c *= -1;
}
return flip * (-Math.exp(-Math.log(c)/d * (t-d)) + c + 1) + b;
},
expoinout: function(x, t, b, c, d) {
var flip = 1;
if (c < 0) {
flip *= -1;
c *= -1;
}
if (t < d/2) return flip * (Math.exp(Math.log(c/2)/(d/2) * t)) + b;
return flip * (-Math.exp(-2*Math.log(c/2)/d * (t-d)) + c + 1) + b;
},
bouncein: function(x, t, b, c, d) {
return c - jQuery.easing['bounceout'](x, d-t, 0, c, d) + b;
},
bounceout: function(x, t, b, c, d) {
if ((t/=d) < (1/2.75)) {
return c*(7.5625*t*t) + b;
} else if (t < (2/2.75)) {
return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
} else if (t < (2.5/2.75)) {
return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
} else {
return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
}
},
bounceinout: function(x, t, b, c, d) {
if (t < d/2) return jQuery.easing['bouncein'] (x, t*2, 0, c, d) * .5 + b;
return jQuery.easing['bounceout'] (x, t*2-d,0, c, d) * .5 + c*.5 + b;
},
elasin: function(x, t, b, c, d) {
var s=1.70158;var p=0;var a=c;
if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
if (a < Math.abs(c)) { a=c; var s=p/4; }
else var s = p/(2*Math.PI) * Math.asin (c/a);
return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
},
elasout: function(x, t, b, c, d) {
var s=1.70158;var p=0;var a=c;
if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
if (a < Math.abs(c)) { a=c; var s=p/4; }
else var s = p/(2*Math.PI) * Math.asin (c/a);
return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
},
elasinout: function(x, t, b, c, d) {
var s=1.70158;var p=0;var a=c;
if (t==0) return b;  if ((t/=d/2)==2) return b+c;  if (!p) p=d*(.3*1.5);
if (a < Math.abs(c)) { a=c; var s=p/4; }
else var s = p/(2*Math.PI) * Math.asin (c/a);
if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
},
backin: function(x, t, b, c, d) {
var s=1.70158;
return c*(t/=d)*t*((s+1)*t - s) + b;
},
backout: function(x, t, b, c, d) {
var s=1.70158;
return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
},
backinout: function(x, t, b, c, d) {
var s=1.70158;
if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
},
linear: function(x, t, b, c, d) {
return c*t/d + b; //linear
}
};

//]]>
</script>

<script type='text/javascript'>
//<![CDATA[

jQuery(document).ready(function() {
Cufon.replace('.blogname h2', { fontFamily: 'MankSans-Medium' });
Cufon.replace('.sidetitl,.blogname h1', { fontFamily: 'ChunkFive' });

});

//]]>
</script>


<style type='text/css'>
#slidearea{
height: 230px;
overflow: hidden;
position: relative;
width:680px;
background:#242424;
}
#gallerycover{
overflow: hidden;
margin:0px 0px;
}

.mygallery{
overflow: hidden;
position:relative;
}

.mytext img{
position:absolute;
left:10px;
top:10px;
padding:5px;
background:#515252;
border:1px solid #5e5e5e;
}

.mytext{
position:relative;
margin:0px 0px;
height:200px;
width:680px;
float:left;
display:inline;
line-height:20px;
color:#c4c4c4;
font-family: Tahoma,Georgia,century gothic,Verdana, sans-serif;
}

.mytext ul li{
height:200px;

}

.mytext a:link, .mytext  a:visited {
color:#fff;
}

.mytext h2 {
font: 18px Georgia,century gothic,Verdana, sans-serif;
margin:15px 0px 5px 310px;
font-weight:normal;
width:350px;
height:24px;
overflow:hidden;
}

.mytext p {
width:350px;
margin:0px 0px 5px 310px;
color:#6f6f6f;
}

.mytext h2 a:link, .mytext h2 a:visited {
color:#fff;
}
.slnav{
padding:3px 0px;
background:#000;

}
.prev{
float:left;
width:24px;
height:24px;
z-index:200;
margin-left:5px;
background:url(http://1.bp.blogspot.com/_4HKUHirY_2U/S2FVY1DGRHI/AAAAAAAAAtc/BZkCromQU-I/prev.png);
}

.next{
float:right;
width:24px;
height:24px;
z-index:200;
background:url(http://4.bp.blogspot.com/_4HKUHirY_2U/S2FVWGJQahI/AAAAAAAAAtU/l-hiX3uOqBo/nxt.png);
display:block;
}

</style>

Sube las imagenes de navegacion a tu propio servidor

[3] Ultimo paso, agregar el Slide. Por lo general, sugiero agregar este Slide es el crosscol de tu blog, a debajo de la cabecera, ya que es mas ancho que largo.

♦ Ve a Diseño > Agregar un gadget > HTML/Javascript

♦ Pega el siguiente codigo

♦ Guarda los cambios

He aqui el codigo.

<script type="text/javascript">
var $jx = jQuery.noConflict();
$jx(function() {
$jx(".mygallery").jCarouselLite({
btnNext: ".next",
btnPrev: ".prev",
visible: 1,
easing: "backout",
speed: 1000
});

});
</script>

<div id="slidearea">

<div id="gallerycover">
<div class="mygallery">
<ul>

<li>
<div class="mytext">
<h2><a href="URL-of-Post-1" title="#">Title-of-Post-1</a></h2>
<p>Slide 1 Description [...]</p>

<img src="Slide-1-Image-Address" alt=""  />
</div>
</li>


<li>
<div class="mytext">
<h2><a href="URL-of-Post-2" title="#">Title-of-Post-2</a></h2>
<p>Slide 2 Description [...]</p>

<img src="Slide-2-Image-Address" alt=""  />
</div>
</li>


<li>
<div class="mytext">
<h2><a href="URL-of-Post-3" title="#">Title-of-Post-3</a></h2>
<p>Slide 3 Description [...]</p>

<img src="Slide-3-Image-Address" alt=""  />
</div>
</li>


<li>
<div class="mytext">
<h2><a href="URL-of-Post-4" title="#">Title-of-Post-4</a></h2>
<p>Slide 4 Description [...]</p>

<img src="Slide-4-Image-Address" alt=""  />
</div>
</li>


<li>
<div class="mytext">
<h2><a href="URL-of-Post-5" title="#">Title-of-Post-5</a></h2>
<p>Slide 5 Description [...]</p>

<img src="Slide-5-Image-Address" alt=""  />
</div>
</li>

</ul>

<div class="clear"></div>

</div>
</div>

<div class="slnav">
<a href="#" class="prev"></a>
<a href="#" class="next"></a>
<div class="clear"></div>
</div>

</div>

Para entender el codigo

En Azul: Direccion de enlace a la entrada (URL)

En Naranja: Titulo de la entrada

En Violeta: Descripcion de la entrada

En Verde: Direccion de la imagen de la entrada

[5] Mira tu blog, y ve lo lindo que quedo.