Dividir en columnas

Dividir en columnas el pie de página de cada entrada no difiere demasiado de dividir el footer del blog en columnas y hay muchos modos distintos de conseguirlo sin enfermarse en el intento.

La clave es encontrar cuál es el DIV contenedor de todo eso y la mala costumbre de darle diferentes nombres en plantillas adaptadas de otros sistemas puede hacer de esto una tarea complicada para quien comienza. Así, en general, se encuentra dentro de:

<b:includable id='post' var='post'>

y por defecto, tiene este codigo:

<div class='post-footer'>
  .......
</div>

Dentro de esto es probable que se vean otros sectores, que se mostrarán uno debajo del otro, diferentes cosas según sea nuestra configuración: nombre del autor, fecha de publicación, íconos para compartir, reacciones, etiquetas, etc.

Todo lo que allí está es opcional; pueden eliminarse cosas o agregarse otras sin restricciones y lo mejor, para probar, es agregarle otro footer y ver qué pasa y si eso que intentamos, realmente nos convence. En todo caso, luego, podemos mover el contenido a su nueva ubicación. Esa debería ser una regla básica: siempre, dentro de lo posible, lo mejor es no borrar nada hasta estar seguros.

Entonces, vamos a agregarle otro footer al que identificaremos con una clase CSS para poder darle las propiedades gráficas que nos gusten; en este caso, lo llamaré footerdemo pero, puede ser cualquier cosa.

Las propiedades las colocaremos siempre antes de </b:skin> y el HTML, justo antes del último </div> de ese includable:

    ... aquí el footer nuevo ...
  </div>
</b:includable>

.footerdemo {background-color: #000; clear: both; float: left; margin: 20px 0; width: 100%;}
.footerdivs {padding: 10px;}

<div class="footerdemo">
  <div class="footerdivs">
    ....... aquí irá el contenido .......
  </div>
</div>
<div style="clear:both;"></div>

Vestibulum ultrices auctor odio, in gravida ligula auctor id. Quisque tempor, enim eget interdum tristique, quam erat aliquet neque, sed rutrum tortor tortor eget est.

Con esto no veré nada del otro mundo, sólo un rectángulo con la clase footerdemo he agregado otro con la clase footerdivs para evitar problemas y en ese agregué alguna clase de contenido.

Ahora, dividiré ese rectángulo en dos partes iguales, es decir, el ancho total (100%) lo distribuyo, un 50% para la izquierda y otro 50% para la derecha; eso, debo decírselo al navegador así que agrego otras dos divs con dos clases nuevas:

.fdizquierda {float: left; width: 50%;}
.fdderecha {float: right; width: 50%;}

<div class="footerdemo">
  <div class="fdizquierda">
    <div class="footerdivs">
      ....... aquí irá el contenido de la izquierda .......
    </div>
  </div>
  <div class="fdderecha">
    <div class="footerdivs">
      ....... aquí irá el contenido de la derecha .......
    </div>
  </div>
</div>
<div style="clear:both;"></div>

Vestibulum ultrices auctor odio, in gravida ligula auctor id. Quisque tempor, enim eget interdum tristique, quam erat aliquet neque, sed rutrum tortor tortor eget est.

Vestibulum ultrices auctor odio, in gravida ligula auctor id. Quisque tempor, enim eget interdum tristique, quam erat aliquet neque, sed rutrum tortor tortor eget est.

Mientras mantenga mi aritmética aceitada, podría usar cualquier otra distribución 75% + 25% = 100%:

Vestibulum ultrices auctor odio, in gravida ligula auctor id. Quisque tempor, enim eget interdum tristique, quam erat aliquet neque, sed rutrum tortor tortor eget est.

Vestibulum ultrices auctor odio, in gravida ligula auctor id. Quisque tempor, enim eget interdum tristique, quam erat aliquet neque, sed rutrum tortor tortor eget est.

Uno a la derecha y otro a la izquierda es fácil porque para eso está float. Ahora, le agregaremos un tercero; los dos extremos son iguales (100% / 3 es más o menos 33%) ¿y el central? a ese, no lo dimensiono en absoluto y le digo al navegador que se las arregle o hago lo mismo, coloco el ancho y lo centro con la propiedad margin:

.fdizquierda {float: left; width: 33%;}
.fdderecha {float: right; width:33%;}
.fdcentro {margin: 0 auto; width: 33%;}

<div class="footerdemo">
  <div class="fdizquierda">
    <div class="footerdivs">
      ....... aquí irá el contenido de la izquierda .......
    </div>
  </div>
  <div class="fdderecha">
    <div class="footerdivs">
      ....... aquí irá el contenido de la derecha .......
    </div>
  </div>
  <div class="fdcentro">
      ....... aquí irá el contenido del centro .......
    </div>
  </div>
</div>
<div style="clear:both;"></div>

Vestibulum ultrices auctor odio, in gravida ligula auctor id. Quisque tempor, enim eget interdum tristique, quam erat aliquet neque, sed rutrum tortor tortor eget est.

Vestibulum ultrices auctor odio, in gravida ligula auctor id. Quisque tempor, enim eget interdum tristique, quam erat aliquet neque, sed rutrum tortor tortor eget est.

Vestibulum ultrices auctor odio, in gravida ligula auctor id. Quisque tempor, enim eget interdum tristique, quam erat aliquet neque, sed rutrum tortor tortor eget est.

Y lo haré, en ese orden, colocando el centro al final en el código HTML.

¿Quiero dividirlo en cuatro? También es posible, claro que, quedarán pequeños pero, el criterio es el mismo (100% / 4 =25%):

.fdizquierda1 {float: left; width: 25%;}
.fdizquierda2 {float: left; width: 25%;}
.fdderecha1 {float:right; width: 25%;}
.fdderecha2 {float: left; width: 25%;}

<div class="footerdemo">
  <div class="fdizquierda1">
    <div class="footerdivs">
      ....... aquí irá el contenido de la izquierda .......
    </div>
  </div>
  <div class="fdizquierda2">
    <div class="footerdivs">
      ....... aquí irá el contenido de la izquierda .......
    </div>
  </div>
  <div class="fdderecha1">
    <div class="footerdivs">
      ....... aquí irá el contenido de la derecha .......
    </div>
  </div>
  <div class="fdderecha2">
    <div class="footerdivs">
      ....... aquí irá el contenido de la derecha .......
    </div>
  </div>
</div>
<div style="clear:both;"></div>

Vestibulum ultrices auctor odio, in gravida ligula auctor id. Quisque tempor, enim eget interdum tristique, quam erat aliquet neque, sed rutrum tortor tortor eget est.

Vestibulum ultrices auctor odio, in gravida ligula auctor id. Quisque tempor, enim eget interdum tristique, quam erat aliquet neque, sed rutrum tortor tortor eget est.

Vestibulum ultrices auctor odio, in gravida ligula auctor id. Quisque tempor, enim eget interdum tristique, quam erat aliquet neque, sed rutrum tortor tortor eget est.

Vestibulum ultrices auctor odio, in gravida ligula auctor id. Quisque tempor, enim eget interdum tristique, quam erat aliquet neque, sed rutrum tortor tortor eget est.

Cuando se utilizan los plugins sociales de Facebook, uno puede elegir entre agregarlos como IFRAMEs o como scripts. Ellos recomiendan usar esto último ya que, con un cargador genérico, luego podemos agregar diferentes plugins con sólo una línea de código, usando el lenguaje propio de la red llamado XFBML.

Asi que ponemos esto después de <body> y nos olvidamos del asunto:

<div id='fb-root'/>
<script type='text/javascript'>
//<![CDATA[
window.fbAsyncInit = function() {
FB.init({appId: 'PROFILE_ID', status: true, cookie: true, xfbml: true});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/es_ES/all.js';
document.getElementById('fb-root').appendChild(e);
}());
//]]>
</script>

Allí, cambiamos PROFILE_ID por el número de identificación de nuestra cuenta en Facebook y ya podemos agregar los plugins con sencillez:

El botón Me Gusta:
<fb:like></fb:like>

Like-Box:
<fb:like-box profile_id="APP_ID"></fb:like-box>

Comment Box:
<fb:comments xid="APP_ID"></fb:comments>

Activity Feeds:
<fb:activity site="URL_elegida"></fb:activity>

Recommendations:
<fb:recommendations site="URL_elegida"></fb:recommendations>

Login:
<fb:login-button show-faces="true"></fb:login-button>

Live Stream:
<fb:live-stream event_app_id="APP_ID"></fb:live-stream>

Sin embargo, si optamos por este método, suele surgir un problema sobre el que han consultado y que afecta a Internet Explorer. Es fácil de detectar, lo que ocurre es que, simplemente, no funciona y no se ve nada de nada.

En principio, esto es fácil de solucionar porque en los foros de los desarrolladores de Facebook ya se ha publicado la respuesta. Lo que debemos hacer es modificar una etiqueta de nuestra plantilla; un etiqueta que normalmente, jamás tocamos así que debemos hacerlo con prudencia: la etiqueta HTML.

En una plantilla común, esta etiqueta dice esto:

<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

en una de las nuevas plantillas dice esto otro:

<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

En cualquiera de los dos casos, lo que debemos hacer es agregar lo siguiente:

xmlns:fb='http://www.facebook.com/2008/fbml' xmlns:og='http://opengraph.org/schema/

de tal forma que quedará así:

<html xmlns='http://www.w3.org/1999/xhtml'  xmlns:b='http://www.google.com/2005/gml/b'  xmlns:data='http://www.google.com/2005/gml/data'  xmlns:expr='http://www.google.com/2005/gml/expr'  xmlns:fb='http://www.facebook.com/2008/fbml'  xmlns:og='http://opengraph.org/schema/'>

o así:

<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml'  xmlns:b='http://www.google.com/2005/gml/b'  xmlns:data='http://www.google.com/2005/gml/data'  xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:fb='http://www.facebook.com/2008/fbml'  xmlns:og='http://opengraph.org/schema/'>

Lo interesante de algunas de estas librerías que se ponen de moda es que permiten hacer cosas raras y dejar volar la imaginación aunque el resultado sea poco práctico o de un uso muy limitado. Me parece que ese es el caso de un plugin para jQuery llamado Before/After que muestra dos imágenes de manera simultánea, permutando entre ambas con una barra que se desliza por encima.

Pero, mejor que contarlo, es verlo:

Hacer que funcione es bastante simple. Basta descargar el ZIP que ofrecen donde está todo lo necesario. Requerimos, obviamente, de jQuery y de su librería de efectos jQuery-UI y ambas, las podemos cargar desde el repositorio de Google:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>

Luego, el plugin en si mismo:

<script type="text/javascript" src="URL_beforeafter.js"></script>

Este último, también lo podemos agergar a la plantilla de manera directa:

<script type="text/javascript">
//<![CDATA[
... aquí copiamos y pehgamos el contenido del archivo jquery.beforeafter.js ...
//]]>
</script>

Como usa tres imágenes cuya url está definida para que funcione en algún servidor propio, lo mejor es que las alojemos en alguna parte (o en Blogger mismo), busquemos esas líneas y las cambiemos:

$(obj).prepend('<div id="dragwrapper'+randID+'"><div id="drag'+randID+'"><img width="8" height="56" alt="handle" src="'+o.imagePath+'handle.gif" title="Drag me left or right to see the before and after images" id="handle'+randID+'" /></div></div>'); // Create drag handle

reemplazamos eso por la URL de la imagen handle.gif

$(obj).append('<img src="'+o.imagePath+'lt-small.png" width="7" height="15" id="lt-arrow'+randID+'"><img src="'+o.imagePath+'rt-small.png" width="7" height="15" id="rt-arrow'+randID+'">');

reemplazamos eso por las URLs de las imágenes lt.png y rt.png

Para usarlo, creamos un DIV con un ID cualquiera y allí ponemos las dos imágenes:

<div id="miEfecto">
<div><img src="URL_imagenANTES" /></div>
<div><img src="URL_imagenDESPUES" /></div>
</div>

Hacemos que funcione, agregando esto, por ejemplo, antes de </head>:

<script> $(function(){ $('#miEfecto').beforeAfter(); }); </script>

Vamos a un ejemplo concreto, para usar las plantillas ultra-minimizadas; voy a agregar un slideshow de leigeber.com llamado TinySlideshow que no quiero tener en mi blog y que sólo quiero usar una vez así que en ese blog auxiliar, crearé un post al que pondré de título TinySlideshow y lo publicaré, así, vacio, sólo para obtener la URL que será:

http://miblog.blogspot.com/2010/08/tinyslideshow.html

Descargo el ZIP , lo descomprimo y veo que tiene muchas cosas. En las carpetas photos y thumbnails hay unas imágenes que forman parte del demo y en la carpeta images, las imágenes que utiliza el script. Vuelvo a editar mi entrada y subo todas esas imágenes a Blogger o si no quiero eso, las alojo en cualquier otro servidor.

Miro el demo descargado y abro el archivo index.html con el block de notas; lo edito, cambiando las URL de esas imagenes por la mias y voy a copiar y pegar parte de su contenido en mi entrada.

<ul id="slideshow">
.......
</ul>

<div id="wrapper">
.......
</div>

Todo eso, lo haré tal cual está, incluyendo saltos de línea. Debajo, pondré la llamada al script pero, esta parte la deberé poner toda en una sola línea porque sino, no funcionará:

<script type="text/javascript">
$('slideshow').style.display='none';
$('wrapper').style.display='block';
var slideshow=new TINY.slideshow("slideshow");
window.onload=function(){
slideshow.auto=true;
slideshow.speed=5;
slideshow.link="linkhover";
slideshow.info="information";
slideshow.thumbs="slider";
slideshow.left="slideleft";
slideshow.right="slideright";
slideshow.scrollSpeed=4;
slideshow.spacing=5;
slideshow.active="#fff";
slideshow.init("slideshow","image","imgprev","imgnext","imglink");
}
</script>

Llegado el caso, ese es el código que deberé editar si quiero hacer alguna modificación personal.

Publico la entrada y claro, si la veo, no pasará nada; ahora, vamos a nuestra plantilla especial y colocaremos el script directamente alli, junto con el CSS, condicionándolo adecuadamente.

Justo antes de </head> pondremos esto:

<b:if cond='data:blog.url == &quot;http://miblog.blogspot.com/2010/08/tinyslideshow.html&quot;'>
<style type='text/css'>
/* le agregaré esta definición para que los saltos de línea sean ignorados y evitar tener que escribir todo en una sóla línea */
br {display:none;}
.......
  /* aqui pegaremos el contenido del archivo style.css */
  /* donde deberemos cambiar las direcciones URL de las imágenes */
  /* left.gif, link.gif, right.gif, scroll-left.gif y scroll-right.gif */
</style>
<script type='text/javascript'>
//<![CDATA[
  ... aqui pegaremos el contenido del archivo script.js o del archivo compressed.js ...
//]]>
</script>
</b:if>

Y eso es todo. Ahora, si abro esa entrada, debería ver el slideshow funcionando pero claro, de poco me sirve si no puedo agregarlo a mi blog que es para lo que hice todo esto.

Lo hacemos de manera simple, usando una etiqueta IFRAME; sólo debemos conocer tres cosas, la URL (que es la de la entrada que acabamos de crear en el blog auxiliar), el ancho de la ventana que en este caso es el ancho del DIV #wrapper (506 pixeles) y el alto de la ventana que, vaya uno a saber cuál es así que ponemos algún valor y luego vamos ajustándolo a ojo:

<div align="center"><iframe style="width: 506px; height: 402px;" marginwidth="0" marginheight="0" allowtransparency="true" src="URL_entrada_tinyslideshow.html" align="middle" frameborder="0" scrolling="no"></iframe></div>

Si bien una plantilla ultra-super-minimizada nos permitiria tener páginas webs auxiliares simples y listas para poder agregar cualquier cosa, también es útil no minimizarla tanto y tener un blog auxiliar donde podamos crear entradas con "cosas raras"; esas cosas que suelen ser complicadas de poner en el nuestro porque se requieren scripts incompatibles o porque no tenemos ganas de agregarle cosas extras que sólo usaremos eventualmente y nos gustaría que la plantilla no se transforme en un enredo de códigos que apenas entendemos.

Siguiendo el mismo criterio de la entrada anterior, podemos crear un nuevo blog con el nombre y URL que nos guste y configurarlo adecuadamente.

Lo primero, será ir a la Configuración y en Básico, poner en NO las opciones de indexación:

¿Deseas añadir tu blog a nuestras listas? SíNo
¿Deseas permitir que los motores de búsqueda encuentren tu blog? Sí No

deshabilitamos los Comentarios:

Comentarios
Mostrar
Ocultar

y, eventualmente, los Feeds del sitio si es que no los utilizaremos:

Permitir feeds del blog Ninguno Corto Completo

Configurado todo adecuadamente, iremos a Diseño | Edición HTML y al final de la página, buscaremos el enlace para cambair la plantilla (que por defecto es una de las de nuevo diseño) por la plantilla por la mínima de Blogger.

Plantillas antiguas
Puedes utilizar todavía las plantillas antiguas para tu blog, pero no podrás acceder a muchas de las funciones nuevas como, por ejemplo, el Diseñador de plantillas.
Plantillas de diseño (lanzado en 2006) Seleccionar plantilla de diseño

Con eso, ya tenemos un blog nuevo y limpio. Ahora, nuevamente en Diseño | Edición HTML, expandimos los artilugios y borraremos todo sin compasión; lo reemplazaremos por una plantilla donde sólo tendremos los posts sin ningún tipo de agregado; ni títulos, ni fechas, ni footers ... nada de nada.

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<meta content='IE=8' http-equiv='X-UA-Compatible'/>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[
body {background:transparent;color:#333;font-family:Arial;font-size:14px;margin:0;padding:0;}
a:link, a:visited {color:#58A;outline:none;text-decoration:none;}
a:hover {color:#C60;outline:none;text-decoration:none;}
a img {border:none;outline:none;}
#outer-wrapper {margin:0;padding:0;}
#main-wrapper {margin:0;padding:0;}
.post {margin:0;padding:0;}
.post p,.post div {line-height:normal;margin:0;padding:0;}
body#layout #header {margin-left:0;margin-right:0;}
#navbar-iframe {height:0px;visibility:hidden;display:none;}
]]></b:skin>
</head>
<body>
<div id='outer-wrapper'>
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'>
<b:includable id='nextprev'/>
<b:includable id='shareButtons' var='post'/>
<b:includable id='backlinks' var='post'/>
<b:includable id='post' var='post'>
<div class='post'>
<a expr:name='data:post.id'/>
<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/>
</div>
</div>
</b:includable>
<b:includable id='status-message'/>
<b:includable id='comment-form' var='post'/>
<b:includable id='backlinkDeleteIcon' var='backlink'/>
<b:includable id='postQuickEdit' var='post'/>
<b:includable id='main' var='top'>
<div class='blog-posts'>
<b:loop values='data:posts' var='post'>
<b:include data='post' name='post'/>
</b:loop>
</div>
</b:includable>
<b:includable id='commentDeleteIcon' var='comment'/>
<b:includable id='feedLinks'/>
<b:includable id='feedLinksBody' var='links'/>
<b:includable id='comments' var='post'/>
</b:widget>
</b:section>
</div>
</div>
</body>
</html>

De ahora en más, tendremos un blog auxiliar donde podremos agregar cosas sin preocuparnos por compatibilidades ¿Cómo? La base de todo es usar condicionales para filtrar entradas individuales.

Como cada entrada publicada tiene una URL única, podemos condicionar la forma en que se mostrará esa entrada colocando algo así antes de </head>:

<b:if cond='data:blog.url == &quot;URL_entrada&quot;'>
<style type='text/css'>
  ... aqui pondremos cualquier estilo ...
</style>
<script type='text/javascript'>
//<![CDATA[
  ... aqui pondremos cualquier script ...
//]]>
</script>
</b:if>

Cada vez que creamos una entrada, haremos lo mismo así que tendremos una serie de bloques, no importa la cantidad, que sólo se ejecutarán en ciertas condiciones y de ese modo, nos desentendemos de procesos de carga, compatibilidades y problemas varios.

Blogger es un servicio de blogs, claro, eso no es novedad para nadie pero, a la vez es cualquier otra cosa que se nos ocurra ya que no necesitamos usar una plantilla y basta limpiarla para crear una página web tan normal o anormal como cualquier otra.

¿Qué hay que dejar y que hay que sacar? Pués, es sencillo, una plantilla mínima mínima ultra mínima tendría este código:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<b:skin>
</b:skin>
</head>
<body>
</body>
</html>

¿Qué veríamos? Nada. Una página en blanco a la que Blogger, de modo automático le agrega algunas hojas de estilo, la NavBar (que no se verá) y unos scripts que manejan los widgets aunque no tengamos ninguno.

A partir de ahí, cualquier cosa es posible y cualquier código es aceptable siempre y cuando repetemos las reglas de sintaxis.

¿Para que puede servir esto? Sólo es una herramienta alternativa, ni mejor ni peor que cualquier otra y el resto dependerá de la imaginación o las necesidades individuales.

Sin duda, Tynipic es de los sitios más utilizados para subir imágenes y videos pero, para algunos de nosotros, el correcto tiempo de verbo a utilizar sería el pasado porque es mucho mejor decir que ERA ya que ha dejado de serlo. Simplemente, no está disponible en algunos paises y si uno trata de acceder, aparece un mensaje que lo informa o no pasa nada y el navegador nos dice que es imposible conectarse.

Nadie lo avisó, nadie lo ha explicado, nadie ha pedido disculpas; quienes allí tenían sus imágenes las han perdido, tal vez pueden verlas, tal vez no, pero no pueden acceder a sus cuentas así que recuperar las cosas para cambiar de alojamiento es una tarea muy pero muy complicada.

El rumor dice que, como en ciertos paises, la cantidad de cuentas premium es escasa, han decidido bloquear el acceso por razones financieras, algo que es perfectamente razonable en este mundo de sumas y restas pero que podría haber sido realizado con la consideración necesaria ya que si alguien ofrece un servicio, gratuito o de pago, lo mínimo que se espera es que asuma la responsabilidad de sus decisiones y tenga la valentía de absorber sus errores de cálculo. Claro que esto es utópico y la web está llena de estos nuevos emprendedores que, probablemente, no durarían dos minutos en el mundo de los negocios reales.

Sea como sea, quienes están afectados necesitan alguna solución inmediata y lo tragicómico es que hay varias porque estos pseudo-empresarios, ni siquieran saben hacer las cosas mal.

La primera solución es obvia, usar alguna clase de proxy, ya sea instalando alguno de los tantos que hay en la web y que nos permiten navegar de manera anónima, ocultando la IP o camuflándola para que simule ser de alguno de los paises "privilegiados". Claro que esto es molesto y también puede ser lento, quién quiera intentarlo, acá hay dos de ellos: unblock8e6.com | hidemyass.com

Si tienen Opera instalado, basta activar la opción Turbo y listo ...

Otra alternativa es usar el mismo soft que promueve Tynipic para sincronizar nuestra PC con la cuenta. Lo descargamos, ya sea desde alguno de los enlaces que se pueden encontrar si lo buscamos en Google o bien entrando primero con un proxy y bajando el original.

Una vez instalado nos permitirá accede a nuestra cuenta y manejarla desde allí con comodidad. Lo único que no nos permitirá es eliminar imágenes.

Como adicional, con el mismo programa se pueden manejar cuentas de Photobucket, Facebook, Flickr, Picasa y MySpace.

No es nada del otro mundo, diría que no es muy amigable de usar pero, funciona perfectamente.