Cómo crear un álbum o galería de fotos con Blogger y Flickr

Supongo que todos aquí conocemos algún servicio onLine para estar publicando fotografías diariamente con su respectiva descripción, y así tus amigos podrán estar dejando lindos comentarios en el libro de visitas sobre cada foto...
Ya habrán recordado algunas paginas que ofrecen este tipo de servicios ( ...Como por ejemplo MetroFlog, Flodeo y/o FotoLog, entre otros mas )...
Pero entre las tantas desventajas que hay, es que no tienes posibilitad de personalizar tu "Blog", todos tienen el mismo diseño básico, no son muy agradables... etc

Por lo que mostrare como... De una manera sencilla personalizar Blogger, para que en ayuda de Flickr puedas crear una muy practica galería ( ...Ademas de bonita ), arme un ejemplo de como puede ser el Resultado Final...
Y tan solo necesitas:..

• Una cuenta de Google
  
• Blog de Blogger ( nombre.blogspot.com )
  
• Una cuenta de Flickr

NOTA: Si te falta alguna de las cuentas, puedes crear una... Ya que en ambos casos son gratis y no es muy difícil adquirirlas...
NOTA: No importa si tienes la versión clásica de blogger, aun así funcionara este Tip... Aun cuando en Flickr dice que necesitas la nueva version BETA.

PROCEDIMIENTO

Una vez que tienes las cuentas y el Blog, el procedimiento es muy sencillo:

1. Primero accedemos a la pagina principal de Flickr donde entraremos al menu: "Tu" > "Tu cuenta"
   
2. Luego seleccionas la pestaña "Extendiendo Flickr" y das click a la opción "Tus Blog´s" para agregar nuestro blog de Blogger
   
3. Después tienes que confirmar las configuraciones de la plantilla de publicación de tu Blog
   
4. Y finalmente te va a aparecer un mensaje avisándote que se ha agregado exitosamente tu Blog, y podras elegir entre crear una plantilla de publicación personalizada, o regresar a tu página de Blog´s...
   
   • NOTA: Desde aquí ya puedes ir a publicar tus fotos, y debería aparecer una opción que dice "Enviar esto al Blog"... Pero hasta aquí lo hecho es muy fácil y nada fuera de lo común...
   
   
   
5. Vamos a entrar en: "Elige un diseño para tu plantilla de publicación", donde van a aparecer varias opciones preestablecidas, y podrás elegir la que mas te agrade
   
   • NOTA: Simplemente recomiendo la opción de "500px, y en propia linea"...
   
   
6. Después de elegida la plantilla, vas a poder elegir entre usar esa plantilla o personalizarla, obviamente vamos a elegir en "Personalizar", por lo que va aparecer el código HTML que se utilizara para publicar en nuestro Blog:

   Código :

   <style type="text/css">
   .flickr-photo { border: solid 2px #000000; }
   .flickr-yourcomment { }
   .flickr-frame { text-align: left; padding: 3px; }
   .flickr-caption { font-size: 0.8em; margin-top: 0px; }
   </style>
   
   <div class="flickr-frame">
      <a href="{photo_url}" title="photo sharing"><img src="{photo_src}" class="flickr-photo" alt="" /></a><br />
      <span class="flickr-caption">[[string:by2:<a href="{photo_url}">{photo_title}</a>:<a href="{uploader_profile}">{uploader_name}</a>]]</span>
   </div>  
   
   <p class="flickr-yourcomment">
      {description}
   </p>

   
   
   
   • NOTA: El gran inconveniente de este código, es que sera introducido por cada foto en la entrada donde las publiques... Y si después quieres hacer un cambio de tamaño, posición o algo que después se te ocurra en el Blog, o en las fotos ( ...Ya sea por diseño, gusto, usabilidad, etc ), tendrías que hacerlo en cada foto por separado ( ...De una en una ), dando mucha lata al hacerlo... Por lo que mejor habrá que solucionarlo desde ahora:...
   
   
   
7. En la ventana del código HTML que apareció, vas a dejar únicamente el siguiente codigo:

   Código :

   <div class="flickr-frame">
       <center><img src="{photo_src}" class="flickr-photo" alt="" /></center>
       <img alt="flickr" src="http://www.flickr.com/images/flickr_logo_blog.gif"/><p />
       <br/><p class="flickr-yourcomment"> {description} </p>
   </div>

   
   
   
8. Y en la plantilla HTML de tu blog, vas a agregar entre las configuraciones que ya tienes el siguiente código:
   

   Código :

   .flickr-photo { border: solid 2px #000000; }
   .flickr-yourcomment { font-size: 1.2em;}
   .flickr-frame { text-align: justify; padding: 3px; }
   .flickr-caption { font-size: 0.8em; margin-top: 0px; }

   
   
   • NOTA: Recuerda que esto va dentro de <head> y </head>...
   
   

¿Y que conseguimos de todo esto?... Nada mas ni nada menos que independizar nuestro Blog del formateo de Flickr, ahora cuando quieras editar el código o personalizar aun mas las configuraciones de las fotos en tus post´s... Solo debes modificar el código que agregaste en tu plantilla del Blog.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.