Agregar el FanBox de Facebook en el blog (sin bordes y un extra)

El FanBox o LikeBox de Facebook es esa cajita que muestra los avatares de las personas a las que les gusta determinada p?gina de Facebook.

Agregar el Fanbox en Blogger es bastante sencillo y no requiere quebrarse la cabeza con c?digos.

Primero entra a Facebook Developers .

Ah? agrega la URL de tu p?gina de Facebook, selecciona el ancho del gadget, color del tema, si deseas mostrar los avatares, la actividad reciente y la cabecera del gadget.

Ya que lo tengas listo da click en Get Code.

Aparecer? un c?digo para copiar; copia el c?digo que est? debajo de iframe.
Luego entra en Dise?o | A?adir gadget | HTML/Javascript y ah? pega el c?digo que copiaste.
Con eso ya tienes el Fanbox en tu blog.




Algunas veces la p?gina de Facebook anda medio loca y en el c?digo nos pondr? una altura de 62px con lo cual se ver? s?lo un rect?ngulo. Para arreglarlo s?lo cambia el alto (height) del c?digo en las dos veces que aparece:

<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fciudadblogger&amp;width=292&amp;colorscheme=light&amp;show_faces=true&amp;stream=false&amp;header=true&amp;height=289" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:289px;" allowTransparency="true"></iframe>

Con una altura de 289px ser? m?s que suficiente, pero si deseas mostrar m?s avatares entonces agrega una altura mayor.

Notar?s que el Fanbox tiene integrado unos bordes grises que no se ven nada est�ticos y adem?s debajo aparece el icono de Facebook con el texto Plug-in socialde Facebook.
Lo que haremos ahora ser? quitar esos bordes, el texto debajo, y aprovechando podemos modificar el color de fondo.
Para aplicar estos cambios agrega a tu c?digo lo que est? en color azul:

<div class='likeboxwrap'>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fciudadblogger&amp;width=292&amp;colorscheme=light&amp;connections=15&amp;stream=false&amp;header=true&amp;height=289" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:289px;" allowtransparency="true"></iframe>
</div>

<style type='text/css'>
div.likeboxwrap {
width:290px; /* Quitar 2px al ancho del gadget */
height:264px; /* Quitar 25px al alto del gadget */
background-color:#8A084B; /* Color de fondo del gadget */
overflow:hidden;
}
div.likeboxwrap iframe {margin:-1px}
</style>

Y el resultado ser? este:

Aqu? hay que tomar algunas cosas en consideraci?n:

Para poder aplicarle un color de fondo es necesario que tengas el tema light en el gadget y NO el dark.

Dentro del c?digo extra que hemos agregado hay unos estilos del ancho y alto del gadget; al ancho (width) del Fanbox le restaremos 2px para eliminar por completo el borde; y al alto (height) le restaremos 25px. Eso se cambia en donde se ha se?alado en color verde.

En algunos casos cuando el Fanbox sea m?s grande o cuando hayan elegido no mostrar la cabecera del FanBox entonces podr?an restarse otros valores del acho y alto, ya ser? cuesti?n de que cada uno modifique ese ancho y alto hasta que obtenga el mejor resultado.

Eliminar espacio superior en las plantillas nuevas

Muchos de los que usan las plantillas hechas a trav�s del Dise?ador de plantillas de Blogger eliminan la Barra de navegaci?n (navbar) y al hacerlo descubren que queda un espacio vac?o donde estaba la navbar y piensan que algo han hecho mal.

La realidad es que no han hecho nada mal ni se trata de un error, es simplemente que muchos de los dise?os de esas plantillas as? fueron hechas y pensadas, o sea que es parte de su dise?o original, s?lo que no hab?amos notado que exist?a ese espacio porque la navbar estaba encima y nos tapaba ese espacio.

CON LA NAVBAR

SIN LA NAVBAR

Bueno, sin importar si es parte del dise?o o no siempre me preguntan c?mo quitar ese espacio en la parte superior de la plantilla, y en realidad es muy sencillo, s?lo basta agregar un margen con valor negativo para que suba la estructura del blog.

S?lo hay que entrar en Dise?o | Edici?n de HTML y agregar antes de ]]></b:skin> lo siguiente:

.content {
margin-top:-30px !important;
}

Y con eso se habr? subido la estructura de la plantilla desapareciendo ese espacio en la parte superior.

Este ajuste aplica para las plantillas Sencillo, Et�reo, Travel y algunos de Picture Window que son las que tienen estos espacios vac?os.

En el segundo estilo de la plantilla Picture Window el espacio es mayor por lo que se deber? aplicar un margen de -60px.

Corazones con enlaces flotando en el blog

Ya faltan pocos d?as para celebrar el d?a de San Valent?n y el romance ya se siente en la atm?sfera. Y ya que andamos con la pasi?n en las venas por qu� no adornamos el blog con unos corazones flotando por la p?gina y que cada uno tenga un enlace a una red social o al feed del sitio, digo, para que adem?s de vagar por la p?gina tengan una utilidad.

Puedes ver estos corazones en este blog de pruebas.

Para agregarlos entra en Dise?o | Edici?n de HTML y antes de </head> agrega esto:

<script type='text/javascript'>
//<![CDATA[
/***********************************************
* Floating image script- By Virtual_Max
* Modified by Dynamic Drive for various improvements
***********************************************/

var vmin=2;
var vmax=5;
var vr=2;
var timer1;

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function Chip(chipname,width,height){
this.named=chipname;
this.vx=vmin+vmax*Math.random();
this.vy=vmin+vmax*Math.random();
this.w=width+20;
this.h=height;
this.xx=0;
this.yy=0;
this.timer1=null;
}

function movechip(chipname){
if (document.getElementById){
eval("chip="+chipname);
if (window.innerWidth || window.opera){
pageX=window.pageXOffset;
pageW=window.innerWidth-40;
pageY=window.pageYOffset;
pageH=window.innerHeight-20;
}
else if (document.body){
pageX=iecompattest().scrollLeft;
pageW=iecompattest().offsetWidth-40;
pageY=iecompattest().scrollTop;
pageH=iecompattest().offsetHeight-20;
}

chip.xx=chip.xx+chip.vx;
chip.yy=chip.yy+chip.vy;

chip.vx+=vr*(Math.random()-0.5);
chip.vy+=vr*(Math.random()-0.5);
if(chip.vx>(vmax+vmin)) chip.vx=(vmax+vmin)*2-chip.vx;
if(chip.vx<(-vmax-vmin)) chip.vx=(-vmax-vmin)*2-chip.vx;
if(chip.vy>(vmax+vmin)) chip.vy=(vmax+vmin)*2-chip.vy;
if(chip.vy<(-vmax-vmin)) chip.vy=(-vmax-vmin)*2-chip.vy;

if(chip.xx<=pageX){
chip.xx=pageX;
chip.vx=vmin+vmax*Math.random();
}
if(chip.xx>=pageX+pageW-chip.w){
chip.xx=pageX+pageW-chip.w;
chip.vx=-vmin-vmax*Math.random();
}
if(chip.yy<=pageY)
{chip.yy=pageY;
chip.vy=vmin+vmax*Math.random();
}
if(chip.yy>=pageY+pageH-chip.h)
{chip.yy=pageY+pageH-chip.h;
chip.vy=-vmin-vmax*Math.random();
}

document.getElementById(chip.named).style.left=chip.xx+"px";
document.getElementById(chip.named).style.top=chip.yy+"px";


chip.timer1=setTimeout("movechip('"+chip.named+"')",100);
}
}


function pagestart(){
//Aqu? le agregamos los IDs a las im?genes
corazon1=new Chip("corazon1",47,68);
corazon2=new Chip("corazon2",47,68);
corazon3=new Chip("corazon3",47,68);
corazon4=new Chip("corazon4",47,68);

//Aqu? indicamos cu?ntas im?genes hay programadas
movechip("corazon1");
movechip("corazon2");
movechip("corazon3");
movechip("corazon4");
}

if (window.addEventListener)
window.addEventListener("load", pagestart, false)
else if (window.attachEvent)
window.attachEvent("onload", pagestart)
else if (document.getElementById)
window.onload=pagestart
//]]>
</script>

Ahora pega despu�s de <body> lo siguiente:

<!-- Corazones flotando por la p?gina -->
<div id='corazon1' style='position:absolute; z-index:80; left: -500px; width:47px; height:68px;'>
<a href='http://facebook.com/usuario'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0sxUQVjfA83n4VpPP3ilagATpz8ipkQBY_tfi4-gdbb9JkaixdOiyaVtKZkfe-Bq0Kq9pmOelgT3SPSgdA1awchwzYy4N-cI52oyY5MgQ2d0lPGXBSap-IDQ54sm6Ixh2HWTs9CRRioM/'/></a>
</div>

<div id='corazon2' style='position:absolute; z-index:81; left: -500px; width:47px; height:68px;'>
<a href='http://twitter.com/usuario'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghkpw1BQUXoyIv4qOhbCxdfwO9jMizpfwGak__C0RmSaABH4Ine4tioToGTYj-p2kfm5Muz40obSJRvnEezRFOBE7DVv1BvHlwb18seTh7QKIcZUTL4xqopmIOY4v-9QxXbhQdby86zUc/'/></a>
</div>

<div id='corazon3' style='position:absolute; z-index:82; left: -500px; width:47px; height:68px;'>
<a href='http://nombre-de-mi-blog.blogspot.com/atom.xml'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgb83vdKQqT9371wKJZwvZ-4m-qiliCZvWLRme7Bx1UM0ye0HFKMhrkAcuoCe3tX9AuDKFqVLI4MvX6yb6sF8s-09eW2T-BG2VuQ5fqXjeGuemDEehPhid2k9A6GVS1g_7lAdsVyNjQ6xk/'/></a>
</div>

<div id='corazon4' style='position:absolute; z-index:83; left: -500px; width:47px; height:68px;'>
<a href='URL de cualquier enlace'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl46r88T8fdaLdqvP2Nbhzfz8L2D3vDolabJW35XOKMBC5ZIu7uhtSutEVUs26AAOyAXTh0QPmgusO-IM6153EjQKW21-wkRt8BwbfqOKxYbH3532ooCnX5No-WtTBZ_CC-QrdBktxhpI/'/></a>
</div>
<!-- Fin de Corazones flotando por la p?gina -->

Si usas una plantilla hecha con el Dise?ador de plantillas de Blogger entonces el c?digo anterior deber?s pegarlo despu�s de esta l?nea:

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

Ya s?lo agrega los nombres de usuario de Facebook y Twitter donde se indica en color rojo as? como el nombre de tu blog y el enlace a alg?n sitio que quieras.

Si deseas a?adir m?s corazones o im?genes busca esta parte del c?digo y agrega las l?neas en color verde como se indica:

//Aqu? le agregamos los IDs a las im?genes
corazon1=new Chip("corazon1",47,68);
corazon2=new Chip("corazon2",47,68);
corazon3=new Chip("corazon3",47,68);
corazon4=new Chip("corazon4",47,68);
corazon5=new Chip("corazon5",47,68);
corazon6=new Chip("corazon6",47,68);
corazon7=new Chip("corazon7",47,68);

//Aqu? indicamos cu?ntas im?genes hay programadas
movechip("corazon1");
movechip("corazon2");
movechip("corazon3");
movechip("corazon4");
movechip("corazon5");
movechip("corazon6");
movechip("corazon7");

Si te fijas en todas las l?neas se han cambiado los n?meros de manera consecutiva, por lo que si agregas m?s l?neas tambi�n deber?n seguir n?meros consecutivos.

Y luego, en la otra parte del c?digo se agregar?an los c?digos de las im?genes tambi�n tomando en cuenta el ID con en n?mero consecutivo:

<div id='corazon5' style='position:absolute; z-index:83; left: -500px; width:47px; height:68px;'>
<a href='URL del enlace'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl46r88T8fdaLdqvP2Nbhzfz8L2D3vDolabJW35XOKMBC5ZIu7uhtSutEVUs26AAOyAXTh0QPmgusO-IM6153EjQKW21-wkRt8BwbfqOKxYbH3532ooCnX5No-WtTBZ_CC-QrdBktxhpI/'/></a>
</div>

Seguramente nos hartaremos en poco tiempo de estos corazones, pero al menos durante el d?a de los enamorados quedar? ad hoc en el blog y los que somos m?s melosos lo dejaremos por m?s rato, ?Vive l'amour!

NOTA: En Internet Explorer no funciona.
?Otra opci?n?

Enmarcar y separar comentarios en Blogger

Los comentarios son una parte fundamental de un blog, pues en ellos se ve reflejada la opini?n de los lectores respecto a una entrada o nuestro sitio, por lo tanto es importante dedicarle un poco de nuestro tiempo para hacer de esta ?rea un espacio presentable, accesible y ordenado.

Y si de orden se trata entonces es necesario que cada comentario pueda identificarse donde empieza y d?nde termina, de lo contrario se convierte en un revuelto de letras del cual el lector puede salir huyendo. Veamos pues algunas formas de darle un poco de orden para delimitar el ?rea de cada comentario.

El primer m�todo es el m?s sencillo, y se trata de poner un borde debajo de los comentarios, esto es para separar cada comentario del blog de una forma simple pero efectiva.

Para agregar este separador sencillo s?lo entra en Dise?o | Edici?n de HTML y antes de
]]></b:skin> pega lo siguiente:

#comments-block .comment-footer {
border-bottom:1px solid #240B3B; /* Borde de los comentarios */
}
.comment-timestamp { /* Fecha de los comentarios */
font-style:italic;
font-size:9px;
}

Si usas los comentarios anidados entonces agrega lo siguiente:

.comments .comment-block {
padding-bottom:10px;
border-bottom:1px solid #240B3B; /* Borde de los comentarios */
}
.comments .comments-content .datetime { /* Fecha de los comentarios */
font-style:italic;
font-size:9px;
}

Podemos hacer lo mismo pero que el separador de comentarios sea una imagen.

En ese caso el c?digo que has de pegar es el siguiente:

#comments-block .comment-footer {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqhSOaGizSaaZD4aKIIM3M0CnGfn30W8HqSEjIlOGVy1yY8Gl3muTwPLL7fGZHUNqujZgTeDsC6tp_EEtKb0A7VKv5IuGeRSjU1mVq_wwUNenEQM270k9RFL0EYu3mMI73rNsQW86_aQs/);
background-repeat:no-repeat;
background-position:center bottom;
height:70px;
}
.comment-timestamp { /* Fecha de los comentarios */
font-style:italic;
font-size:9px;
}

Y si usas los comentarios anidados deber?s usar este c?digo:

.comments .comment-block {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqhSOaGizSaaZD4aKIIM3M0CnGfn30W8HqSEjIlOGVy1yY8Gl3muTwPLL7fGZHUNqujZgTeDsC6tp_EEtKb0A7VKv5IuGeRSjU1mVq_wwUNenEQM270k9RFL0EYu3mMI73rNsQW86_aQs/);
background-repeat:no-repeat;
background-position:center bottom;
padding-bottom:20px;
height:70px;
}
.comments .comments-content .datetime { /* Fecha de los comentarios */
font-style:italic;
font-size:9px;
}

La URL que est? en color azul es la imagen que puedes cambiar por la que gustes, s?lo recuerda que en el height deber?s establecer la altura de la imagen m?s unos 20px m?s, por ejemplo, si el alto de la imagen es de 50px entonces el valor ser? de 70px
Esto es ?nicamente para que la imagen no se encime a la fecha de los comentarios.

Pero igual podemos darle m?s estilos a cada comentario, por ejemplo enmarcar los comentarios a?adiendo un color de fondo y un borde (No aplica para comentarios anidados).

Para conseguir este tipo de estilo marca la casilla Expandir plantillas de artilugios ah? mismo en Dise?o | Edici?n de HTML y busca esta l?nea:

<b:loop values='data:post.comments' var='comment'>

Debajo de ella agrega esto:

<div class='comentarios-cb'>

Luego busca un poco m?s abajo el siguiente </b:loop> que encuentres y justo arriba de �l agrega esto:

</div>

Ahora antes de ]]></b:skin> pega lo siguiente:

.comentarios-cb {
background:#E6E6E6; /* Color de fondo */
border-top:1px solid #240B3B; /* Borde superior */
border-bottom:1px solid #240B3B; /* Borde inferior */
margin-bottom:20px;
}
.comment-body {
padding:10px;
color:#000; /* Color de los comentarios */
}
.comment-timestamp { /* Fecha de los comentarios */
font-style:italic;
font-size:9px;
padding-right:10px;
padding-left:10px;
}
#comments-block .comment-footer {
margin-bottom:5px;
}
#comments-block .avatar-image-container {
float:left;
position:static;
margin-right:15px;
margin-left:5px;
margin-top:5px;
}

?Y c?mo se ver?a con bordes redondeados?

El procedimiento es el mismo que el anterior s?lo que el c?digo que habremos de pegar antes de ]]></b:skin> ser? este:

.comentarios-cb {
background:#E6E6E6; /* Color de fondo */
border:1px solid #240B3B; /* Borde */
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
margin-bottom:20px;
}
.comment-body {
padding:10px;
color:#000; /* Color de los comentarios */
}
.comment-timestamp { /* Fecha de los comentarios */
font-style:italic;
font-size:9px;
padding-right:10px;
padding-left:10px;
}
#comments-block .comment-footer {
margin-bottom:5px;
}
#comments-block .avatar-image-container {
float:left;
position:static;
margin-right:15px;
margin-left:5px;
margin-top:5px;
}

(Los bordes redondeados en Internet Explorer no funcionan con CSS)

En cualquiera de los casos se puede cambiar el color de fondo, borde, etc. en las partes que tienen anotaciones en color verde.

La /* Fecha de los comentarios */ puede cambiarse de formato en Configuraci?n | Comentarios | Formato de hora de los comentarios.
Pero de igual modo podemos ocultarla, s?lo basta con agregar debajo de .comment-timestamp { esto:

display:none;

S?lo ten en cuenta que si ocultas la fecha tambi�n se ocultar? el icono para eliminar los comentarios.

En estos dos ?ltimos estilos se especifica el ?rea donde se cambia el color de los comentarios, ah? se pueden a?adir otros estilos como el tama?o de la letra, tipo de fuente, etc.
En el caso de los dos primeros m�todos s?lo basta con agregar a ese c?digo este otro fragmento para darle formato al texto de los comentarios:

.comment-body {
color:#000; /* Color de los comentarios */
}

Haciendo algunas de estas modificaciones los comentarios se ver?n m?s ordenados y ser?n m?s f?ciles de identificar y leer por los lectores.

FanBox para Twitter que muestra los seguidores con efecto deslizante

AVISO
La API de Twitter cambi? y ahora requiere autenticaci?n para obtener los datos de los seguidores, por tal motivo �ste y los dem?s fanbox para Twitter han dejado de funcionar. Si me entero de una soluci?n u otra alternativa lo publicar� de inmediato.

Aunque hace unos meses vimos c?mo agregar un fanbox de Twitter usando un script bastante sencillo y ?til, ahora veremos c?mo hacer lo mismo, es decir, veremos c?mo mostrar los seguidores de Twitter pero usando jQuery, el cual le a?ade un efecto deslizante a las im?genes de los seguidores de Twitter haciendo que el gadget se vea mucho m?s atractivo.

Para no complicarnos con el procedimiento vamos a agregar todo dentro de un gadget para as? ahorrarnos un poco de tiempo.
S?lo entra en Dise?o | Elementos de la p?gina | A?adir un gadget | HTML/Javascript, ah? pega este c?digo:

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

<script type="text/javascript" src="http://twitter-friends-widget.googlecode.com/files/jquery.twitter-friends-1.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#friends').twitterFriends({
debug:1
,username:'usuario'
,header:'<a href=\'_tp_\'><img src=\'_ti_\'/></a><h2>_fo_ SEGUIDORES!</h2>'
,friends:0
,user_animate:'width'
,users:40
,users_max:100
,loop:1
,user_image:36
});
});
</script>

<div style="width:100%">
<div id="friends"></div>
</div>

<style>
div.twitter-friends{}
div.tf-header{
border:silver 1px solid;
overflow:hidden;
margin:0 0 1px 0;
background-color:#0B243B; /* Color de fondo del t?tulo */
}
div.tf-header img{
margin:1px;
float:left;
width:36px;
height:36px;
border:0;
}
div.tf-header h2{
line-height:32px;
font-weight:bolder;
display:block;
margin:3px;
padding-left:5px;
float:left;
font-size:14px;
letter-spacing:.1em ;
color:#FFF; /* Color del texto */
}
div.tf-users{
height:180px; /* Alto del gadget */
border:silver 1px solid;
overflow:hidden;
background-color:#eaeaea; /* Color de fondo del gadget */
}
div.tf-users a{
display:block;
float:left;
}
div.tf-users img{ }
div.tf-info{
text-align:right;
display:none;
}
</style>

Ahora veamos la cuesti?n de personalizar el gadget.

usuario es tu nombre de usuario de Twitter sin el @
friends:0 con el valor en 0 muestra a tus seguidores, con el valor en 1 muestra a quienes t? sigues.
user_animate:'width' es el efecto con el que aparecen los avatares; los efectos que se pueden usar son width, height, opacity
users:40 es el n?mero de seguidores a mostrar en cada aparici?n.
users_max:100 es el m?ximo total de seguidores a mostrar.
loop:1 indica si se vuelven a mostrar los seguidores, para que s?lo se muestren una vez se cambia a 0
user_image:36 es el ancho y alto de los avatares

El gadget ocupar? el 100% del contenedor donde se coloque, si se le quiere dar un ancho espec?fico se cambia el 100% que est? en negrita por un valor en pixeles, por ejemplo 290px

Ten en cuenta que dependiendo del ancho y alto del gadget es el n?mero de seguidores que debes mostrar, y de igual debes cambiar la medida de los avatares para que se ajuste al ancho de tu gadget.

En color verde he puesto las anotaciones sobre los colores y otras ?reas que se pueden personalizar.

Aunque se puede manipular el n?mero de seguidores que se mostrar?n, el gadget s?lo muestra los ?ltimos 100 que te siguen en Twitter. O sea que puedes cambiar ese dato por un n?mero menor a 100 pero no mayor a �l.

Y recuerda que, funciona con jQuery as? que si tienes Scriptaculous, Prototype o Mootools no funcionar?.

Y tambi�n que, si ya tienes la versi?n 1.4.2 de jQuery entonces no ser? necesario agregar la primera l?nea del c?digo.

NOTA: Los avatares tienen el enlace al perfil de Twitter de los seguidores, en mi ejemplo no funciona porque lo he puesto en un iframe.

V?a | More Tech Tips

Cooliris: galer?a de im?genes en el blog

Hace un par de a?os prob� una aplicaci?n para Firefox llamada Cooliris la cual hace que las im?genes se muestren en forma de pared 3D de manera bastante llamativa.

Lo que no sab?a era que tambi�n pod?amos crear galer?as para mostrarlas en el blog hasta que Tapestryworkerman me pregunt? c?mo pod?a agregar Cooliris en Blogger, as? que me puse a indagar un poco y descubr? que es muy sencillo agregar estas galer?as en el blog o sitio Web.

Usa la barra azul para desplazarte por las im?genes

Esta pared de im?genes en 3D puede usarse con las fotos de Facebook, Flickr, Picasa, e incluso con los videos de YouTube.

Como somos usuarios de Blogger entonces ya tenemos una cuenta en Picasaweb as? que haremos la galer?a ah?.

Lo primero es crear una galer?a p?blica en Picasaweb, ah? subimos las im?genes que queremos a?adir a la galar?a pero debemos cerciorarnos que ninguna imagen contenga acentos, e?es o caracteres especiales en el nombre de la foto.

Ya que lo hemos hecho copiamos la URL que aparece en la barra de direcciones del navegador, que ser? algo como esto:

https://picasaweb.google.com/Usuario/NombredelaGaleria#

Ahora nos dirigimos a Cooliris Express. Ah? selecciona Picasa, elige from a specific album y en la celda de abajo pega la URL que copiaste previamente de tu ?lbum de Picasa.

Pero he aqu? algo importante, a la URL que colocamos debemos quitarle la letra s que se encuentra despu�s de http

https://picasaweb.google.com/Usuario/NombredelaGaleria#

Si no se hace entonces aparecer? un mensaje diciendo que la URL no es v?lida.

ACTUALIZACI?N: (20-ene-2012) En algunos casos no es necesario eliminar la letra s de la URL del ?lbum, de hecho, puede ser indispensable que aparezca esa letra para que la galer?a pueda mostrarse correctamente.

Luego presionamos OK y aparecer?n ya las im?genes, si todo est? bien damos click en Customize.

En Wall name escribimos el nombre de la galer?a, en Number of rows el n?mero de filas, y en Themes elegimos el tema de fondo.

En la pesta?a Advanced Options puedes elegir un color de fondo por si no te gust? uno de los temas predeterminados o bien, colocar la URL de la imagen del fondo que prefieras.

Igual puedes elegir si deseas que se muestren otras opciones como la de los botones para compartir, bot?n de buscar, etc.

Ya que lo tengas listo a tu entero gusto da click en Publish. Te preguntar? si deseas guardar tu galer?a, si lo haces puedes conectar tu cuenta de Google o Facebook para que se guarde tu galer?a, pero si no quieres guardarla no importa.

En seguida te dar? un c?digo para copiar, ese c?digo lo puedes pegar en una entrada o bien, entra en Dise?o | Elementos de la p?gina | A?adir un gadget, selecciona HTML/Javascript y ah? pega el c?digo de tu galer?a.

En el caso de los videos de YouTube el procedimiento es similar, elige la opci?n YouTube, selecciona From a user, pega la URL del usuario de YouTube y listo.

Algunas caracter?sticas de estas galer?as es que adem?s de su interfaz tan din?mica y elegante que tiene, ofrece opciones para compartir la im?genes en las redes sociales y ver las im?genes en pantalla completa, lo cual a m? me parece muy bien. Recuerda que:El ?lbum de tus fotos de Picasaweb debe ser p?blico y no privado. Los nombres de las im?genes que subas no deben contener acentos, e?es o cualquier caracter especial. Debes cambiar https por http en la URL del ?lbum de Picasa. Sitio Web | Cooliris

C?mo reducir el tama?o del feed

Bajar de peso no s?lo es indicado para los que tenemos unos kilitos de m?s, sino tambi�n para aquellos que tienen demasiadas entradas en el blog.

?A qu� me refiero? Cuando un blog tiene m?s de 500 entradas o cuando la mayor?a de las entradas tienen mucho contenido entonces el peso del feed se vuelve muy grande y este puede dejar de funcionar si lo tenemos administrado en Feedburner, incluso aparecer? este mensaje en nuestra cuenta de Feedburner:

"Your feed filesize is larger than 512K. You need to reduce its size in order for FeedBurner to process it. Tips for controlling feed file size with Blogger can be found in Tech Tips on FeedBurner Forums, our support site."

La raz?n es simple, Feedburner s?lo procesa 512 kilobytes de nuestro feed, pasados de ese tama?o simplemente ya no mostrar? m?s actualizaciones. Y aunque pueda parecernos descabelladamente injusto lo cierto es que como ellos mismos argumentan, el feed es ?nicamente para mostrar actualizaciones de las entradas, no es un archivo del blog.

Una forma de saber cu?nto pesa nuestro feed es abrir en el navegador el feed

http://nombre-de-mi-blog.blogspot.com/feeds/posts/default

Y desde el Archivo del navegador guardar la p?gina con extensi?n XML. Ya guardada podemos ver las propiedades del archivo y ah? dir? cu?nto pesa.

?Tenemos que crear otro feed si ya sobrepasamos los 512K?

No, s?lo tenemos que editar la direcci?n del feed en Feedburner, esto se hace entrando a tu cuenta de Feedburner y haciendo click en Editar detalles de Feed.

Ah? eliminamos la direcci?n de feed que tengamos y la remplazamos por esta:

http://tublog.blogspot.com/feeds/posts/default?max-results=10

Como ves lo ?nico que hemos hecho es agregar un par?metro al final que indica que el m?ximo de entradas a mostrar ser? de 10 entradas; las ?ltimas por supuesto.

De esta forma el feed habr? bajado de peso (aparentemente) y podr? mostrar de nuevo las actualizaciones del blog.

Esa cantidad de 10 entradas se puede modificar por otro valor dependiendo de qu� tantas entradas publiques tan seguido y qu� tan largas sean �stas.

Otra forma m?s sencilla de saber el peso de tu feed es entrar a Web Sniffer e ingresar la direcci?n del feed de Feedburner, por ejemplo:

http://feeds.feedburner.com/Nombre-de-tu-feed

Y abajo veremos el peso que tiene.