Panoramio es un sitio donde los usuarios pueden explorar el mundo a través de fotografias subidas por los miembros de la comunidad. Hace tiempo fue comprado por Google y en estos días, Blogger in Draft ha anunciado que hay un API que nos permite integrar un widget a cualquier blog.
A decir verdad, el código final es bastante simple de insertar, sólo hay que copiar y pegar pero todas las explicaciones están en ingles y, aunque son amplias, pueden ser un poco confusas; a diferencia de otros, no he visto (o no he encontrado) que haya algún tipo de página que nos ayude a seleccionar los parámetros; de todos modos, puede intentarse usar lo que ellos llaman Templates es decir, widgets prediseñados y hay cuatro de ellos: photo, slideshow, list y photo_list ; con eso vamos armando la URL necesaria para luego, insertar un IFRAME:
A decir verdad, el código final es bastante simple de insertar, sólo hay que copiar y pegar pero todas las explicaciones están en ingles y, aunque son amplias, pueden ser un poco confusas; a diferencia de otros, no he visto (o no he encontrado) que haya algún tipo de página que nos ayude a seleccionar los parámetros; de todos modos, puede intentarse usar lo que ellos llaman Templates es decir, widgets prediseñados y hay cuatro de ellos: photo, slideshow, list y photo_list ; con eso vamos armando la URL necesaria para luego, insertar un IFRAME:
http://www.panoramio.com/wapi/template/photo.html?opcion1&opcion2&opcion3 ...
http://www.panoramio.com/wapi/template/slideshow.html?opcion1&opcion2&opcion3 ...
http://www.panoramio.com/wapi/template/list.html?opcion1&opcion2&opcion3 ...
http://www.panoramio.com/wapi/template/photo_list.html?opcion1&opcion2&opcion3 ...
La primera opción es la unica obligatoria y la más importante: el tipo de fotos a mostrar y para eso, podemos seleccionar un usuario (user=IDusuario), una categoría (tag=categoria) o simplemente seleccionamos alguna palabra genérica como set=all, set=public, set=recent. Algunos ejemplos:
http://www.panoramio.com/wapi/template/photo.html?tag=sea
http://www.panoramio.com/wapi/template/slideshow.html?user=98350
http://www.panoramio.com/wapi/template/list.html?set=public
http://www.panoramio.com/wapi/template/photo_list.html?set=recent
El resto de las opciones definen la forma de mostrar el widget y son optativas:
- width y height establecen el tamaño
- bgcolor es el color de fondo (formato hexadecimal donde reemplazamos el caracter # por %23; por ejemplo, %23FFFFFF es el color blanco)
- columns y rows son la cantidad de columnas y filas en los widgets de tipo lista
- orientation indica si se las listas se mostrarán de manera vertical u horizontal
- list_size es la cantidad de imágenes en el widget de tipo photo_list
- position es la posición de la foto en el widget de tipo photo_list
- delay es el tiempo del efecto en el widget de tipo slideshow
Así que, seguimos agregando las opciones para construir la URL final:
http://www.panoramio.com/wapi/template/photo.html?tag=sea&bgcolor=%23101921
http://www.panoramio.com/wapi/template/slideshow.html?user=98350&opcion2&delay=1.5
http://www.panoramio.com/wapi/template/list.html?set=public&width=280&height=140&rows=2&columns=4&orientation=horizontal
http://www.panoramio.com/wapi/template/photo_list.html?set=recent&position=right&list_size=8&bgcolor=%23223344
Ya está, ahora, podemos insertar el IFRAME:
<iframe src="la_URL_generada" allowtransparency="true" frameborder="0" scrolling="no" marginwidth="0" marginheight="0" width="valor" height="valor"></iframe>
WIDGET PHOTO
<iframe src="http://www.panoramio.com/wapi/template/photo.html?tag=sea&bgcolor=%23101921" frameborder="0" width="400" height="400" allowtransparency="true" frameborder="0" scrolling="no" marginwidth="0" marginheight="0"></iframe>
WIDGET SLIDESHOW
<iframe src="http://www.panoramio.com/wapi/template/slideshow.html?user=98350&delay=1.5&bgcolor=%23101921" allowtransparency="true" frameborder="0" scrolling="no" marginwidth="0" marginheight="0" width="400" height="400"></iframe>
WIDGET LIST
<iframe src="http://www.panoramio.com/wapi/template/list.html?set=public&width=280&height=140&rows=2&columns=4&orientation=horizontal&bgcolor=%23101921" allowtransparency="true" frameborder="0" scrolling="no" marginwidth="0" marginheight="0"></iframe>
WIDGET PHOTO LIST
<div style="-moz-border-radius:10px;-moz-box-shadow:0 0 10px #DDD inset;background-color:#234;border:2px solid #ABC;height:425px;margin:0 auto;padding:15px 15px 0;width:425px;"><iframe src="http://www.panoramio.com/wapi/template/photo_list.html?set=recent&position=right&list_size=8&bgcolor=%23223344" width="425" height="410" allowtransparency="true" frameborder="0" scrolling="no" marginwidth="0" marginheight="0"></iframe></div>
REFERENCIAS:Dicas Blogger
8 comentarios:
Huyyy qué bonito Jmiur, me gusta mucho el slidehow :)
Te hago una pregunta fuera del tema total, hoy me he desperato ante que las gallinas, veo en Mozilla todo cambiado, softonic? buscar web, jugar, tv gratis. Eso lo ha incluído, o es algo venido del más allá?
J.Miur Genial por tu plantilla.Me gustaria si me puedes indicar como has hecho para poner la flechita hacia abajo para abrir y expandir las entradas y posteriormente a la inversa para cerrarlas, en vez del +y-.ya que el resto de la plantilla ya la tengo.Gracias por tu ayuda
Graciela: ¿Cómo es eso, Graciela? ¿Dónde ves eso?
J.Guti: Simplemente, cambias el texto del enlace por una imagen cualquiera usando la etiqueta IMG.
Malina: Es un servicio que tiene bastante tiempo online y Google lo compro hace unpar de años si mal no recuerdo. Creo que si, que se pueden crear diferentes albums y en el post he puesto varios juntos sin problema, son independientes. No conozco los detalles porque no tengo cuenta en Panoramio.
Lo de las fuentes se puede pero no se puede; puedes definir las fuentes de este modo:
body {font-family:Trebuchet MS,Trebuchet,sans-serif;}
a, a:visited, a:link {font-family:Trebuchet MS,Trebuchet,sans-serif;}
h1, h2, h3, h4, h5, h6 {font-family:Trebuchet MS,Trebuchet,sans-serif;}
para abarcar todo pero, aún así, si luego, hay alguna definición posterior, también deberás cambiarla. Podrías probar agregarle a esas tres que te digo, la palabra !Important:
body {font-family:Trebuchet MS,Trebuchet,sans-serif !important;}
a, a:visited, a:link {font-family:Trebuchet MS,Trebuchet,sans-serif !important;}
h1, h2, h3, h4, h5, h6 {font-family:Trebuchet MS,Trebuchet,sans-serif !important;}
Así, salvo que haya otro !important posterior, fuerzas ese cambio.
Lo de no resumir ciertas entradas, creo que es posible. no sé exactamente cómo es la plantilla así que sólo te doy la idea. Lo que deberías hacer ese eso, condicionarlas y eso es lo "complicado" o engorroso ya que vas a tener que repetir muchas veces los códigos pero, el condicional sería este:
<b:if cond='data:blog.url == "DIRECCION_URL_DEL_POST"'>
... esto sólo se ejecutará en este post y nada más que en este post ...
</b:if>
No será sencillo pero, es posible, Malina. Paciencia :D
Te envié un correo, no recuerdo lo que me dijiste cuando tuve otro problemita parecido. Volver al día anterior, no recuerdo.
Está todo muy loco, blogger era mejor con la vista previa anterior, ahora carga el blog para hacerlo! bueno no me voy a quejar por éstas pavadas...aunque...pensándolo Hoy estoy quejosa :)
Recibido el mail. Creo que ya todo está normal. Siga quejándose que eso evita la úlcera :D
Muchas gracias! chuchi cuchi jajaja todo solucionado :P
Úlcera, por ahora no ha aparecido acidéz.
:D :D
¿Quiere dejar un comentario?
recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...
Nota: sólo los miembros de este blog pueden publicar comentarios.
Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.
Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...