Friki Bloggeo

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.

Colocar iconos a los enlaces externos segun su tipo

noreply@blogger.com (.::: Anthony :::.) — Wed, 14 Apr 2010 22:54:33 PDT

Hace mucho tiempo que viendo algunos blogs de Blogger, he notado que en algunos enlaces externos presentes en el, siempre hay un icono, diferenciando el tipo de enlace o la extensión a la que pertenece, entoces, me pregunte, ¿Eso lo haran de forma manual o automatica?, aplicando codigos CSS se puede hacer de forma automatica, reconociendo el blog a que extension pertenece identificando si el link termina en formatos como .zip, o .rar, etc.

En la imagen, puedes ver una vista previa rapida de como quedarian, el icono flotando a la izquierda del texto, pero a continuacion, antes de comenzar a axplicarte, te doy una vista previa con los enlaces funcionando...

Los siguiente enlaces son de muestra, y por lo tanto, no tienen funcion alguna, asi que mejor evita dale clicks.

Ahora si, comienzo con los codigos.

[1] como aplicarlo

Te explico, como aplicarlo y luego te muestro el codigo. Para aplicarlo solo basta con crear un enlece normal, es decir:

<a href='http://Archivo.zip'>Archivo.zip</a>

Como puedes notar, remarque en la direccion el formato del archivo, ".zip", al tu colocar la direccion entera, y que esta termine en ese formato, tu blog reconocera automaticamente que icono debe colocar justo antes del enlace, asimismo, ocurrira con los demas formatos.

codigos

[1] Para .zip

a[href $='.zip']{ padding-left: 18px; background: transparent url(http://bp0.blogger.com/_Zuzii37VUO4/Rh1xnUrQooI/AAAAAAAAAhc/wU0nM7M_Ebo/s1600/icono_zip.gif) no-repeat center left; }

[2] Para .rar

a[href $='.rar']{

padding-left: 18px;

background: transparent
url(http://2.bp.blogspot.com/_ANAc3M1UV3E/S8ZGH-nSa1I/AAAAAAAAA78/KNB-YnYRcWA/s1600/rar.png) no-repeat center
left;
}

[3] Para .css

a[href $='.css']{

padding-left: 18px;

background: transparent
url(http://bp2.blogger.com/_Zuzii37VUO4/Rh2GS0rQopI/AAAAAAAAAhk/4QyZEOVo2L8/s1600/icono_css.gif) no-repeat center
left;
}

[4] Para .txt

a[href $='.txt']{

padding-left: 18px;

background: transparent
url(http://bp2.blogger.com/_Zuzii37VUO4/Rh2JS0rQoqI/AAAAAAAAAhs/8cn9Frf0DqE/s1600/icono_textoplano.gif) no-repeat
center left;
}

[5] Para una direccion de correo

a[href ^="mailto:"] {

padding-left: 18px;

background: transparent url(http://2.bp.blogspot.com/_ANAc3M1UV3E/S8ZGIHppJ6I/AAAAAAAAA8E/pI5hrQ9HR1I/s1600/1271284939_mail.png)
no-repeat center left;

}

[6] Para un enlace externo

Este si es distinto a los demas, ya que no se aplica de la misma manera... Para agregar esto, debes usar el siguiente codigo.

<a class='linkexterno' href='Direccion'>Nombre</a>

Ahora el codigo

.linkexterno {

background: transparent
url(http://bp1.blogger.com/_Zuzii37VUO4/Rimp_xN7pfI/AAAAAAAAAmM/kp9QQ5bj-nc/s1600/icono-link-externo.png) no-repeat
center left;

padding-left: 14px;

}

Todos ellos antes de ]]></b:skin>

Esta no es la unica forma en la que puedes colocarle iconos a los enlaces, si te puedes fijar bien en el codigo, puedes editarlo a tu modo, con solo cambiar la imagen, y el formato coloreado en el codigo, coloca el tuyo propio, como .exe o .png, entre otros, solo es cuestion de prestar atencion

Google Black para ahorrar energia.

noreply@blogger.com (.::: Anthony :::.) — Tue, 13 Apr 2010 09:51:37 PDT

Sé que esto no tiene nada que ver con blogs, pero si sabes lo que es importante para nuestro planeta, pues debes leer esta entrada. Google Black o Google Negro, es una copia del navegador original de Google y optimizado por este, pero con el objetivo de que este ayude a ahorrar energia, considerando de que la pagina tiene alrededor de mas de 200 millones de visitas mundialmente, el ahorro de energia seria importantisimo para el planeta.

Segun estadisticas, un google negro representaria un ahorro diario de 3 millones de Kilowatts, equivalente a 75.000 dolares si lo traducimos a dinero.

Esta no es la unica pagina que puede ofrecer este servicio, tambien se han visto propuestas como Negroogle, y Google Dark, esta pagina no tiene nungun cambio mas que el fondo es en negro, ofrece lo mismos resultados y la efectividad de google, ahorrar energia y de una vez abaratas el recibo de la electricidad, y si tienes la configuracion de tu monitor en modo ahorro de energia o Stand-by, pues mucho mejor...

Recuerda que en este planeta vivimos todos, y todos debemos conservarlo.

Enlaces de Navegacion no aparecen: La solucion

noreply@blogger.com (.::: Anthony :::.) — Sat, 10 Apr 2010 20:41:23 PDT

Con algunas plantillas para Blogger me ha pasado que a veces los enlaces de navegacion se pierden, en todo el proceso de modificacion de la plantilla para personalizarla, y sin saber por que motivo entre tantos ocurre esto. Nunca debes omitir estos enlaces ya que son impredecibles para la navegación de las entradas de tu blog, si no existen, tus lectores solo podrán ver las entradas publicadas en la pagina principal. Cuando hablo de los enlaces de navegacion me refiero a estos.

Segun Oloblogger, las causas que producen esto, puedes ser muchas, pero se pueden destarcar dos que quizas podrian ser el causante en tu blog.

[1] El primer posible motivo podria deberse a que el diseñador de plantillas que descargastes pudo haber considerado que estos enlaces no eran necesarios en tu blog, y lo omitió ocultandolo en la plantilla, para corregir esto, buscamos el siguiente codigo.

#blog-pager-newer-link {
float: left;
}
#blog-pager-older-link {
float: right;
}
#blog-pager {
height:0px;
width:0px;
display:none;
text-align:center;
margin:0px auto;
}

Si puedes observar el codigo, veras que el pedazo marcado en color verde posee una altura (height) de "0px", es decir; nada. Lo mismo para con la anchura (width), y en la linea donde dice Display, el cual es la propiedad que define si el artlugio tendra visibilidad o no, se puede observar "none", que significa que no tendra visibilidad. Para corregir esto, basta con solo borrar las lineas en el codigo marcadas en verde, guardas la plantilla y listo.

[2] La otra posible causa puede ser el solapamiento de una capa sobre otra, interpretando la accion de modo que hace que los enlaces de navegacion se oculten, los enlaces nunca se han ido de tu plantilla, alli estan.

Lo primero que debes hacer es entrar a la Edicion HTML de tu plantilla, marcar la casilla Expandir plantillas de artilugios y buscar la siguiente linea.

<b:include name='nextprev'/>

Si ese codigo se encuentra dentro de tu plantilla, pues efectivamente se podria presentar el caso de solapamiento en tu blog.

Si aun no estas seguro si el codigo se encuentra en tu plantilla, puedes acceder a tu blog, ver el codigo fuente del mismo,y visualiza tu idem interpretado. Buscaras la linea Blog-pager dentro del codigo y comprueba si efectivamente la linea se encuentra dentro de tu plantilla.

Para corregirlo debemos insertar una linea de codigo que evite algun Float que pueda causar el solapamiento entre las capas de las entradas y los enlaces de navegacion. Te explico como hacerlo. Visualiza el siguiente codigo.

...
</b:loop>
<b:if cond='data:numPosts != 0'>
&lt;/div&gt;&lt;/div&gt;
</b:if>
<data:adEnd/>
</div>
<div style='clear:both;'/>

<!-- navigation -->
<b:include name='nextprev'/>

<!-- feed links -->
<b:include name='feedLinks'/>

<b:if cond='data:top.showStars'>
...

La linea en verde es el codigo que debes insertar para evitar esto, el codigo sobrante es solo de referencia, quizas no aparezca en tu plantilla. Estos son los dos casos que generan la mayor veces el ocultamiento de los enlaces de navegacion, si ninguno de los dos te funcionan, pues buscaremos cualquier otra solucion.