Modificando las plantillas (Tutorial 9: El orden)

Las páginas web se cargan en orden, en el orden en que están escritas; de arriba hacia abajo y de izquierda a derecha.

Es por eso que, cuando muchos preguntan cómo hacer que las entradas se carguen antes que la sidebar, la respuesta es simple: hay que inveritr el orden en que están colocadas en la plantilla; es decir, si tenemos esto:

<div id='sidebar-wrapper'>
  .......
</div>
<div id='main-wrapper'>
  .......
</div>

El DIV sidebar-wrapper se cargará antes que el DIV main-wrapper, sin importar cuales sean sus propiedades.

Entre esas propiedades, float es la que posiciona el rectángulo a la derecha o a la izquierda y lo normal, en ese caso, es que el primero flote a la izquierda y el segundo a la derecha:

#main-wrapper { float: left; }
#sidebar-wrapper { float: right; }

sidebar 1º

entradas 2º

da lo mismo si ambos flotan a la izquierda:

sidebar 1º

entradas 2º

o si ambos flotan a la derecha

sidebar 1º

entradas 2º

en todos estos casos, la sidebar se cargará primero porque el DIV está antes así que si queremos invertir esto, hay que cambiar su orden:

<div id='main-wrapper'>
  ....... esto se cargará primero sin importar el valor de float .......
</div>
<div id='sidebar-wrapper'>
  .......
</div>

y, si queremos que la sidebar se vea a la izquierda, hay que establecer el valor de float:

#main-wrapper { float: right; }
#sidebar-wrapper { float: left; }

entradas 1º

sidebar 2º

REFERENCIAS:17 Creative Icons to download

Agregar los íconos para compartir de Blogger sólo requiere que habilitemos la opción correspondiente en el elemento Blog y que verifiquemos que este código esté en alguna parte de la plantilla, dentro del includable llamado post:

<b:include data='post' name='shareButtons'/>

Esa sóla línea los agrega y, por defecto, está condicionada de este modo:

<div class='post-share-buttons'>
  <b:if cond='data:post.sharePostUrl'>
    <b:include data='post' name='shareButtons'/>
  </b:if>
</div>

Si no está, basta agregar eso allí donde quisiéramos mostrarlo, ya sea en el footer de las entradas o debajo de su título. El resto del código es añadido automáticamente por Blogger en todas las plantillas y los estilos también son cargados sin nuestra intervención. El resultado, será algo así:

Roudy nos aporta algo más; dice que es posible que, en lugar de mostar los íconos grises por defecto, basta agregar algo en el CSS de nuestra página para que se muestren en colores.

Como lo que vemos es una imagen de tipo sprite donde hay 20 botoncitos organizados en cuatro filas de cinco columnas, bastaría entonces cambiar la posición; por defecto de esos botones.

El estilo que pone Blogger es definido así: Ver/Ocultar [+]

.sb-email {background-position: 0 0 !important;}
.sb-blog {background-position: -21px 0 !important;}
.sb-twitter {background-position: -42px 0 !important;}
.sb-facebook {background-position: -63px 0 !important;}
.sb-buzz {background-position: -84px 0 !important;}

Así que, sabiendo que cada botón mide 21x22, podríamos "mover" la imagen y apuntar a alguna de las otras filas que en ese código es el valor 0; pondríamos entonces, esto: Ver/Ocultar [+]

.sb-email {background-position: 0 -22px !important;}
.sb-blog {background-position: -21px -22px !important;}
.sb-twitter {background-position: -42px -22px !important;}
.sb-facebook {background-position: -63px -22px !important;}
.sb-buzz {background-position: -84px -22px !important;}

donde -22px es la segunda fila, si quisiéramos mostrar la tercera pondríamos -44px y para la cuarta pondríamos -66px.

Claro que, si queremos que haya algún efecto hover, deberemos agregar las reglas, por ejemplo: Ver/Ocultar [+]

.
a.sb-email:hover {background-position: 0 -44px !important;}
a.sb-blog:hover {background-position: -21px -44px !important;}
a.sb-twitter:hover {background-position: -42px -44px !important;}
a.sb-facebook:hover {background-position: -63px -44px !important;}
a.sb-buzz:hover {background-position: -84px -44px !important;}

Otra alternativa para hover seria establecer la opacidad; esto lo podemos hacer con otras dos reglas:

a.share-button {
  opacity: .8;
  filter:alpha(opacity=80);
}
a.share-button:hover {
  opacity: 1;
  filter:alpha(opacity=100);
}

Y si se quieren más efectos, puden usarse sombras aunque aunque estos no se verán en Internet Explorer:

a.share-button:hover {
  -moz-box-shadow: 0 0 10px #2AA inset;
  -webkit-box-shadow:0 0 10px #2AA inset;
  box-shadow:0 0 10px #2AA inset;
}

Como la última fila es transparente, podemos usarla para generar botones relativamente distintos:

a.share-button:hover {
  -moz-box-shadow: 0 0 1px #FFF inset;
  -webkit-box-shadow: 0 0 1px #FFF inset;
  box-shadow: 0 0 1px #FFF inset;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
}
a.share-button:hover {
  -moz-box-shadow: 0 0 4px #FFF inset;
  -webkit-box-shadow: 0 0 4px #FFF inset;
  box-shadow: 0 0 4px #FFF inset;
}

La idea de tutorialzine.com no es sólo minimalista proque así llaman a este tipo de menú sino porque permite entender cómo funcionan determinadas propiedades CSS y cómo podemos combinarlas.

El HTML es sencillo y no tiene diferencias con tantos otros; es una lista a la que identificamos con un ID y en la que en cada item incluimos un enlace cuyo texto está dentro de otra etiqueta:

<ul id="navigationMenu">
  <li>
    <a class="home" href="#">
      <span>Home</span>
    </a>
  </li>
  .......
</ul>

¿Por qué usar la etiqueta SPAN y no poner directamente el texto? Justamente para poder combinar propiedades.

Necesitamos una imagen que usaremos de fondo y que será un sprite es decir, una serie de botoncitos todos iguales que se unen en una sola imagen; de esa manera, la carga será más rápida, usamos una sola imagen en lugar de varias. Para aplicarles un fondo a cada item de la lista, estos deben estar dimensionados y se deben tener  la propiedad overflow:hidden

En este caso, de izquierda a derecha, el primer botón estará en la posición 0, el segundo comienza en el pixel 38, el tercero en el 76, el cuarto en el 114 y el último en el 152; para calcular eso, simplemente vamos sumando anchos. Lo mismo ocurre cono los de abajo así que podemos usar background-position para posicionar el fondo y de ese modo, mostrar solo un pedacito de la imagen, basta usar esos valores colocándolos como negativos lo que desplazará la imagen original:

Empezamos entonces con las definiciones básicas; a los items de la lista se les da un tamaño fijo y se los separa un poco entres si; como las etiquetas LI son etiquetas de bloque, se verán una debajo de la otra:

#navigationMenu li {
  height: 39px;
  list-style: none;
  padding: 2px;
  width: 38px;
}

Cada item contiene un enlace que siempre usa la misma imagen y al que transformamos en bloque para poder dimensionarlo :

#navigationMenu a {
  background:url(URL_imagen) no-repeat;
  display:block;
  height:39px;
  position:relative;
  width:38px;
}

Ahora, definiremos el SPAN es decir el texto en si mismo al que posicionaremos de manera absoluta dentro del enlace y usando left, lo pondremos justo donde termina el botón pero, lo mantendremos oculto colocándole cero a su ancho:

#navigationMenu span {
  left: 38px;
  overflow: hidden;
  position: absolute;
  width: 0;
  /* le agregamos cualquier propiedad para las fuentes */
  color: #FFF;
  font-family: Arial, sans-serif;
  font-size: 18px;
  line-height: 39px;
  text-shadow: 2px 2px 1px #000;
}

Y ahora los efectos hover que funcionarán cuando ponemos el cursor encima:

#navigationMenu a:hover {
  text-decoration:none;
}

Le indicamos que, cuando pones el cursor sobre la etiqueta A, se muestre el contenido del SPAN que está adentro de ella:

#navigationMenu a:hover span {
  overflow: visible;
  padding: 0 20px;
  width:auto;
}

Sólo falta ubicar los botones de cada item que hemos identificado con clases así que:

#navigationMenu .home { background-position:0 0; }
#navigationMenu .home:hover { background-position:0 -39px;}
#navigationMenu .home span { background-color:#7DA315; }

#navigationMenu .about { background-position:-38px 0;}
#navigationMenu .about:hover { background-position:-38px -39px;}
#navigationMenu .about span{ background-color:#1E8BB4; }

#navigationMenu .services { background-position:-76px 0; }
#navigationMenu .services:hover { background-position:-76px -39px; }
#navigationMenu .services span{  background-color:#C86C1F; }

#navigationMenu .portfolio { background-position:-114px 0; }
#navigationMenu .portfolio:hover{ background-position:-114px -39px; }
#navigationMenu .portfolio span{ background-color:#D0A525; }

#navigationMenu .contact { background-position:-152px 0; }
#navigationMenu .contact:hover { background-position:-152px -39px; }
#navigationMenu .contact span{ background-color:#AF1E83; }

• Home
• Perfil
• Redes
• Portfolio
• Contacto

En el ejemplo original puede verse que también hay alguna propeidad de animación que sólo funcioanrá en Chrome/Safari así que por ahora, hasta que algunos otros navegadores comiencen a utilizarla, me abstengo de ella pero, puede agregarse sin problemas.

Esta es una propiedad de CSS poco difundida y lo que nos permite es controlar la forma en que los navegadores y sistemas operativos (Windows y Linux) muestran los textos cuando se utilizan determinado tipo de fuentes, haciendo hincapié en alguna característica.

La propiedad se llama text-rendering y puede tener cuatro valores diferentes:

optimizeSpeed enfatiza la velocidad, deshabilitando ciertas características de las fuentes
optimizeLegibility enfatiza la legibilidad y habilita esas características en desmedro de la velocidad
geometricPrecision en este momento, da el mismo resultado que utilizar optimizeLegibility
auto es el valor por defecto y en la práctica, utiliza optimizeSpeed para fuentes pequeñas (menos de 20 pixeles) y optimizeLegibility para el resto.

La propiedad puede ser utilizada en Firefox, Safari y Chrome y en la mayoría de los casos, el efecto es muy suti pero es más notable cuando se utilizan fuentes específicas como Calibri o Constantia que suelen estar instaladas en Windows.

Al margen de eso, siempre debemos tener en cuenta que eso que vemos nosotros no es necesariamente lo mismo que ven los demás ya que si no se tiene esa fuente instalada, el navegador mostrará la fuente definida como alternativa; por ejemplo:

font-family: Constantia, Arial, sans-serif;

Si no tenemos la fuente Constantia, el texto se mostrará en Arial y si tampoco tenemos esa (cosa bastante improbable) se mostrará con cualquiera de tipo sans-serif.

De allí que se hable de "fuentes seguras" que no son seguras porque no crean problemas sino porque son aquellas que están presentes en la enorme mayoría de los sistemas operativos que usamos:

• font-family: Arial, sans-serif;
• font-family: ‘Comic Sans MS’, cursive;
• font-family: Georgia, serif;
• font-family: Helvetica, sans-serif;
• font-family: Tahoma, sans-serif;
• font-family: ‘Times New Roman’, serif;
• font-family: ‘Trebuchet MS’, sans-serif;
• font-family: ‘Lucida Grande’, sans-serif;
• font-family: Verdana, sans-serif;

La lista la podemos ampliar un poco más pero no mucho:

• font-family: 'Arial Black’, sans-serif;
• font-family: ‘Courier New’, Courier, monospace;
• font-family: Garamond, serif;
• font-family: Geneva, sans-serif;
• font-family: Impact, sans-serif;
• font-family: ‘Lucida Console’, monospace;
• font-family: Palatino, serif;

Si queremos ser más sofisticados pero, a la vez, queremos que la fuente la vean todos, deberemos incrustarla o bien utilizar algunas de las que provee Google Font API.

REFERENCIAS:developer.mozilla.org

Añadir un gadget en Blogger es sencillo, en la primera pantalla de Diseño se muestran las secciones en que está dividido nuestro blog y basta hacer click en el enlace respectivo para que se abra la ventana que muestra los diferentes elementos; de allí en más, seguimos las instrucciones o completamos los datos y voilá. Podemos moverlo, editarlo, eliminarlo; no suele haber problemas y en la plantilla en si misma, se agrega una línea:

<b:widget id='NOMBRE' locked='false' title='TITULO' type='TIPO'/>

donde:
id='NOMBRE' varía según el tipo y se los identifica con un número
title='TITULO' es el texto que hayamos agregado en el cuadro correspondiente al crear el gadget
type='TIPO' es el tipo definido por Blogger mismo (Feed, BlogList, Label, etc)

El título no es obligatorio pero siempre es bueno ponerlo y, en todo caso, si no queremos que se muestre, conviene modificar el código de la plantilla misma para ocultarlo ¿Por qué conviene ponerlo? porque si no lo hacemos, en la pantalla de diseño nos resultará difícil identificar cual es cuál si es que tenemos varios del mismo tipo.

Para personalizar eso, lo que debemos hacer es marcar Expandir plantillas de artilugios y de ese modo, las etiquetas widget que permanecían contraidas se expandirán, mostrando su contenido. En general, veremos que comienzan con algo así:

<b:widget id='NOMBRE' locked='false' title='TITULO' type='TIPO'>
<b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != ""'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    .......
</b:widget>

Esa parte en negrita es el título así que si no queremos que se vea, simplemente, borramos esas líneas.

El contenido de cada etiqueta widget varía con el tipo; algunas pueden editarse, otras no.

Hay un gadget en particular que utilizamos mucho, es el llamado HTML/Javascript y es el que nos permite agregar cualquier tipo de código sin mayores restricciones. Ese gadget no es otra cosa que un mini editor y por lo tanto, es uno de los elementos más flexibles del sistema. Todo bien pero ... siempre hay un pero ... o varios peros.

Lo primero que debemos saber es que desde el punto de vista de la carga del blog, agregar códigos dentro de ese tipo de elemento es exactamente igual que agregarlo directamente en la plantilla aunque Blogger comete un error conceptual al establecer reglas de sintaxis diferentes para ambos. La más evidente es que en la platilla, debemos usar CDATA para que los scripts no se modifiquen o no nos volvamos locos cambiando caracteres y permutando comillas pero, en un gadget, esto no es necesario. Lo mismo ocurre con el uso de ciertos caracteres como & que en la plantilla están prohibidos, etc, etc.

Los gadgets también tienen otra limitación, cuando queremos hacer un backup de la plantilla usando la opción Descargar plantilla completa, el contenido de estos no es guardado y debemos hacerlo de manera manual; esto es particularmente molesto en el caso de los elementos HTML/Javascript. Entonces ¿para qué usamos gadgets de este tipo? Porque de ese modo, la plantilla nos parece menos densa y aparentemente, es más fácil encontrar cosas. De alguna manera, es una forma de barrer y guardar todo bajo la alfombra.

Pero, eso no es necesario, si queremos, podemos tener ambas cosas, usar el gadget y poner el código en la plantilla, para eso, simplemente creamos uno, le ponemos un titulo y algún contenido cualquiera ya que si no, no nos dejará guardarlo. Lo ubicamos y luego, vamos a la plantilla, expandimos todo y buscamos ese titulo. Veríamos algo así:

<b:widget id='HTMLXX' locked='false' title='MI TITULO' type='HTML'>
<b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != ""'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
  <b:include name='quickedit'/>
</b:includable>
</b:widget>

Con el título hacemos lo mismo, lo eliminamos o lo personalizamos a gusto.

La etiqueta <b:include name='quickedit'/> es la que agrega el ícono de edición que vemos en el blog cuando estamos logueados con nuestra cuenta de administradores y al igual que el título, si queremos, podemos eliminarla.

Lo que queda, es el contenido en si mismo que se agrega siempre en un DIV que no tiene propiedades de estilo predeterminadas así que podemos dejarlo y entonces, TODO se reduce a la etiqueta <data:content/> que es la que carga el contenido así que basta eliminarla para que nos quede un gadget vacio donde podemos agregar cualquier cosa, que se expandirá y contraera como cualquier otro y cuyo código será parte del backup si descargamos la plantilla.

<b:widget id='HTMLXX' locked='false' title='MI TITULO' type='HTML'>
<b:includable id='main'>
  <div class='widget-content'>
    ....... aquí coloco cualquier tipo de código .......
  </div>
  <b:include name='quickedit'/>
</b:includable>
</b:widget>

Como cualquier otra cosa, eso también podemos condicionarlo de tal modo que se vea en determinado tipo de páginas; por ejemplo, este gadget sólo se verá en las páginas individuales:

<b:widget id='HTMLXX' locked='false' title='MI TITULO' type='HTML'>
<b:includable id='main'>
  <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div class='widget-content'>
      ....... aquí coloco cualquier tipo de código .......
    </div>
    <b:include name='quickedit'/>
  </b:if>
</b:includable>
</b:widget>

Cambiando las condiciones podemos controlar las páginas y las variantes son muchas; aquí hay algunas:

<!-- esto sólo se verá en el home -->
<b:if cond='data:blog.homepageUrl == data:blog.url'>
  .......
</b:if>

<!-- esto NO se verá en el home -->
<b:if cond='data:blog.homepageUrl != data:blog.url'>
  .......
</b:if>

<!-- esto sólo se verá en las páginas estáticas -->
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
  .......
</b:if>

<!-- esto NO se verá en las páginas estáticas -->
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
  .......
</b:if>

<!-- esto sólo se verá en las páginas individuales -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  .......
</b:if>

<!-- esto NO se verá en las páginas individuales -->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
  .......
</b:if>

<!-- esto sólo se verá en las páginas de listas (etiquetas/archivos/etc) -->
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
  .......
</b:if>
</b:if>
</b:if>

REFERENCIAS:100+ Free High Quality Icon Sets for Web Designers and Developers

Countdown Calendar es un servicio que nos permit ingresar algunos datos y nos devuelve un código que genera un calendario de eventos con un contador que muestra el tiempo que falta para determinada fecha.

La página es bastante intuitiva y allí basta ir seleccionando las diferentes opcion para previsualizar el resultado e ir ajustando los detalles.

El resultado final es un código que podemos agregar por ejemplo, en cualquier elemento HTML.

Como lo que nos dan es un código HTML y un script, con un poco de esfuerzo, podemos cambiarlo por completo y adaptarlo a cualquier necesidad sin tener que limitarnos a lo que ellos proponen.

REFERENCIAS:Blogtecnia

Muchos utilizan jQuery y para ellos, New2WP muestra una forma simple de crear efectos de distino tipo; este, en particular, permite deslizar imagenes de tal modo que superponemos dos y cuando ponemos el cursor encima, se muestra la otra; es decir un efecto hover pero animado:

El script en si mismo es corto, agregamos jQuery antes de </head>:

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

Y debajo, la función:

<script type='text/javascript'>
//<![CDATA[
$(function() {
  $('.animar').hover(function() {
    $(this).children('.front').stop().animate({ "top" : "150px"}, 700);
  }, function() {
    $(this).children('.front').stop().animate({ "top" : "0px"}, 200);
  });
});
//]]>
</script>

Por último, un poco de CSS:

<stye>
.animar {
  cursor: pointer;
  height: 150px;
  overflow: hidden;
  position: relative;
  top: 0;
  width: 200px;
}
.animar img {
  height: 150px;
  left: 0;
  position: absolute;
  top: 0;
  width: 200px;
}
</stye>

Lo usaremos de este modo:

<div class="animar">
  <img src="URL_SEGUNDA_IMAGEN" />
  <img src="URL_PRIMERA_IMAGEN" class="front" />
</div>

Todo lo que debemos hacer es colocar dos imágenes dentro de un DIV con la clase animar y adentro, dos imágenes; la segunda de ellas tendrá la clase front y es la que se verá por defecto; como están posicionadas de forma absoluta, están superpuestas y la segunda, tapa la primera.

El tamaño de las imágenes del ejemplo es de 200x150 y el script buscará la imagen con la clase front y cambiará el valor de la propiedad top de tal forma que se "mueva" hacia abajo tanto como el alto de la imagen misma y de esa forma, se verá la otra que está debajo animando ese desplazamiento con una cierta velocidad (700 en este caso):

$(this).children('.front').stop().animate({ "top" : "150px"}, 700); // baja 150 pixeles

Al sacar el cursor de encima se restaura la posición a cero pero más rápidamente (200):

$(this).children('.front').stop().animate({ "top" : "0px"}, 200);

Lo mismo puede hacerse en cualquier dirección; esto desplaza la imagen hacia arriba:

$(this).children('.front').stop().animate({ "top" : "-150px"}, 700);  // sube 150 pixeles

Y estas dos, desplazarían la imagen horizontalmente ya que en lugar de top, usamos left:

// hacia la derecha:
$(this).children('.front').stop().animate({ "left" : "200px"}, 700);  // se mueve 200 pixeles a la derecha (valores positivos)
...
$(this).children('.front').stop().animate({ "left" : "0px"}, 200); });

// hacia la izquierda:
$(this).children('.front').stop().animate({ "left" : "-200px"}, 700);  // se mueve 200 pixeles a la izquierda (valores negativos)
...
$(this).children('.front').stop().animate({ "left" : "0px"}, 200); });

Mucho CSS pero no importa, leaverou.me muestra la forma de crear patterns sin imégens y aplicarlos como fondos a cualquier etiqueta de bloque aunque, claro, al hacer uso (y abuso) del CSS3, no será visible en Internet Explorer. De todos modos, es una nueva demostración de lo poderoso que pueden ser estas nuevas herramientas.

Esta sería la clase básica donde definimos el tamaño del pattern utilizando la propiedad background-size:

.stripes {
  -moz-background-size: 25px 25px;
  -webkit-background-size: 25px 25px;
  background-size: 25px 25px;
  height: 150px;
  margin: 0 auto;
  width: 600px;
}

Cada modelo tiene sus propias reglas y la longitud de ellas puede asustar. Las aplicamos, colocando la clase base y la clase del modelo en la etiqueta; por ejemplo:

<div class="horizontal stripes"></div>
<div class="vertical stripes"></div>
<div class="picnic stripes"></div>

.angled {
  background-color: #AC0;
  background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent),  to(transparent));
  background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
  background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
  background-image: linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
}

.angled-135 {
  background-color: #c16;
  background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent),  to(transparent));
  background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
  background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
  background-image: linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
}

.horizontal {
  background-color: #0ae;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));
  background-image: -moz-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
  background-image: -o-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
  background-image: linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
}

.vertical {
  background-color: #f90;
  background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));
  background-image: -moz-linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
  background-image: -o-linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
  background-image: linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
}

.checkered {
  background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, #555), color-stop(.25, transparent), to(transparent)),
  -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, #555), color-stop(.25, transparent), to(transparent)),
  -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, #555)),
  -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, #555));
  background-image: -moz-linear-gradient(45deg, #555 25%, transparent 25%, transparent),
  -moz-linear-gradient(-45deg, #555 25%, transparent 25%, transparent),
  -moz-linear-gradient(45deg, transparent 75%, #555 75%),
  -moz-linear-gradient(-45deg, transparent 75%, #555 75%);
  background-image: -o-linear-gradient(45deg, #555 25%, transparent 25%, transparent),
  -o-linear-gradient(-45deg, #555 25%, transparent 25%, transparent),
  -o-linear-gradient(45deg, transparent 75%, #555 75%),
  -o-linear-gradient(-45deg, transparent 75%, #555 75%);
  background-image: linear-gradient(45deg, #555 25%, transparent 25%, transparent), linear-gradient(-45deg, #555 25%, transparent 25%, transparent), linear-gradient(45deg, transparent 75%, #555 75%), linear-gradient(-45deg, transparent 75%, #555 75%);
}

.picnic {
  background-color:white;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, transparent), color-stop(.5, rgba(200, 0, 0, .5)), to(rgba(200, 0, 0, .5))),
  -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, transparent), color-stop(.5, rgba(200, 0, 0, .5)), to(rgba(200, 0, 0, .5)));
  background-image: -moz-linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),
  -moz-linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));
  background-image: -o-linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),
  -o-linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));
  background-image: linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),
  linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));
}

¿Un poco más sobre JSON? Es una pregunta retórica porque acá vamos con un poco más sobre JSON. En realidad, no sólo porque es una forma bastante cómoda de leer contenidos de la web sino porque en Blogger es uno de los pocos métodos que podemos implementar a la hora de acceder a ciertos datos.

No todas las webs poseen esa posibilidad pero, por lo general, los servicios más importantes permiten que usemos este sistema. Uno de ellos es Twitter y eso, lo hacemos accediendo a su API que es la misma que utilizan todos los widgets.

Cuando accedemos a la URL de ese API, lo que nos devuelve es una serie de datos ¿Qué datos? Una forma fácil de verlos es utilizar una de las heramientas de Json Format; allí en el cuadro Load JSON Data from URL podemos colocar la dirección que queremos verificar y al hacer click en Process, nos mostrará el resultado es decir, los datos a los que podemos acceder.

En este caso, pondremos esta URL:

http://api.twitter.com/1/users/show.json?screen_name=nombreusuario

donde reemplazaremos nombreusuario por el nombre de nuestra cuenta en Twitter así que, en mi caso, en el cuadro Formatted JSON Data se mostrará algo así:

{ "contributors_enabled" : false,
  "created_at" : "Wed Sep 10 05:57:39 +0000 2008",
  "description" : "Lo bueno de Twitter es que sirve para hablar solo ... y que no te tomen por loco ...",
  "favourites_count" : 14,
  "follow_request_sent" : false,
  "followers_count" : 1213,
  .......
  "name" : "vagabundia",
  "notifications" : false,
  .......
  "profile_image_url" : "http://a0.twimg.com/profile_images/59754928/Avatar90x90_normal.png",
  .......
  "screen_name" : "vagabundia",
  "show_all_inline_media" : false,
  "status" : { "contributors" : null,
    "coordinates" : null,
    "created_at" : "Wed Nov 03 03:00:12 +0000 2010",
    .......
    "text" : "BLOGGER:  tubePlayer: Nueva versión del reproductor http://goo.gl/fb/4FEeL",
    "truncated" : false
  },
  "statuses_count" : 3097,
  .......
  "url" : "http://vagabundia.blogspot.com/",
  "utc_offset" : -10800,
  "verified" : false
}

¿Muy raro? En realidad, no tanto si es que hemos entendido cómo funciona este coso. La primera palabra de cada línea es el nombre del dato y lo que está después de los dos puntos, es el dato en si mismo así que, "screen_name" : "vagabundia" significa que el nombre de mi cuenta está guardado en un dato llamado screen_name así que, podría llerlo con JavaScript; ese ytodos lod demás.

Vamos a verlo paso a paso; necesito llamar a ese API desde el blog así que pongo algo así antes de </body>, al final de mi plantilla para que se ejecute sin molestar al resto:

<script src="http://api.twitter.com/1/users/show.json?screen_name=nombreusuario&amp;alt=json-in-script&amp;callback=leerTwitter"></script>

Como en los ejemplos anteriores, coloco en callback, el nombre de la función que voy a utilizar para interpretar o manipular los datos leidos así que, antes de </head> (o antes de ese script), colocaré mi función:

<script type='text/javascript'>
//<![CDATA[
function leerTwitter(json) {
  // aquí es donde leeré los datos y haré algo con ellos
}
//]]>
</script>

¿Cómo sé cuáles son los datos? Es lo que nos mostró la herramienta así que, en esa función, la variable json contiene todo eso y accedemos a cada uno de ellos de este modo:

json.description contendrá la descripción de la cuenta
json.followers_count la cantidad de seguidores
json.screen_name es el nombre de lacuenta
json.statuses_count la cantidad de tweets enviados

Esos son faciles pero hay otros que tienen "subdatos", para leer esos, basta agregar un punto y seguir leyendo a sí que:

json.status.text contendrá el texto del último tweet que hayamos enviado

Sabiendo esto, entonces, puedo llenar al función para hacer algo y mostrar esos datos; por ejemplo:

<script type='text/javascript'>
//<![CDATA[
function leerTwitter(json) {
  var salida ="";
  salida += "<h5><img src='" + json.profile_image_url + "' />" + json.screen_name + "</h5>";
  salida += "<small>" + json.description + "</small><p>" + json.status.text + "</p>";
  document.getElementById("mitwitter").innerHTML = salida;
}
//]]>
</script>

o esta otra que mostrará la cantidad de seguidores:

<script type='text/javascript'>
//<![CDATA[
function leerTwitter(json) {
  var salida ="";
  salida += json.followers_count + "<small>seguidores</small>";
  document.getElementById("misseguidores").innerHTML = salida;
}
//]]>
</script>

En ambos casos, lo que necesitamos es un DIV o etiqueta con un ID así que alli donde querramos mostrarlo, pondremos:

<div id="mitwitter"></div>

o bien:

<div id="misseguidores"></div>

En resumen, el orden es siempre el mismo; primero la función, luego el DIV con el ID exclusivo donde se mostrarán los datos y por último, el script que carga el API.

Este script llamado sliderman.js es una solución aceptable aunque algo compleja para quienes quieren usar sliders de imágenes con algúna clase de efecto animado y no quieran agregar librerías externas de ninguna clase ya que es independiente de todas ellas. Si ya estamos usando una, es indistinto; funcionará con cualquiera porque no las utiliza.

En el sitio original podemos descargar el ZIP que contiene los demos y los archivos necesarios. Ellos muestran tres alternativas diferentes pero, el script es el mismo para todos y lo que variará será la forma en que lo utilicemos; eso, lo hacemos con parámetros personales, CSS y HTML así que las posibilidades son muchas.

Primero agregamos el script antes de </head>, ya sea subiéndolo a un servidor:

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

o poniendo el contenido del archivo directamente en la plantilla:

<script type='text/javascript'>
//<![CDATA[
  ... aquí ponemos el contenido del archivo sliderman.js ...
//]]>
</script>

Luego, el CSS que variará según sea el modelo; más adelante pueden ver los que he utilizado para estos ejemplos:

<style>
  ... aquí ponemos las reglas de estilo ...
</style>

El resto lo agregaremos donde querramos mostrar el slider, ya sea en un post o en un elemento HTML y tendremos la posibilidad de agregar varios sin inconvenientes en la misma página, identificando cada uno de ellos con un ID único.

Vamos al primer ejemplo donde utilizo imágenes de 500x375.

<style>
  #slider_container_1 { /* el rectángulo contenedor */
    background: #345;
    height: 375px;
    margin:0 auto;
    padding: 10px;
    width: 500px;
    -moz-border-radius: 10px 10px;
    -webkit-border-radius: 10px 10px;
    border-radius: 10px 10px;
  }
  #SliderName { /* el rectángulo con las imágenes */
    height: 375px;
    margin: auto;
    width: 500px;
  }
  .SliderNamePrev, .SliderNameNext { /* las flecha para ir hacia atrás (son imágenes de 24x24 */
    background: url() no-repeat center center;
    display: block;
    height: 24px;
    position: absolute;
    text-decoration: none;
    top: 155px;
    width: 24px;
  }
  .SliderNamePrev { /* la flecha para ir hacia atrás */
    background-image: url(URL_left.gif);
    left: 10px;
  }
  .SliderNameNext { /* la flecha para ir hacia adelante*/
    background-image: url(URL_right.gif);
    right: 10px;
  }
  .SliderNameDescription { /* el rectángulo con los textos */
    font-family: Verdana;
    font-size: 10px;
    padding: 5px;
    text-align: left;
  }
  #SliderNameNavigation {/* la barra de navegación inferior */
    background-color: #FFF;
    height: 28px;
    margin: 10px 0 0 0;
    text-align: center;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
  }
  /* los enlaces de la barra de navegación son imágenes */
  #SliderNameNavigation a:link, #SliderNameNavigation a:active, #SliderNameNavigation a:visited, #SliderNameNavigation a:hover{
    background: url(URL_nav.gif) no-repeat center center;
    font-size: 0px;
    line-height: 0px;
    margin: 0 2px;
    padding: 10px;
    text-decoration: none;
  }
  #SliderNameNavigation a.active:link, #SliderNameNavigation a.active:active, #SliderNameNavigation a.active:visited, #SliderNameNavigation a.active:hover{
    background: url(URL_nav_active.gif) no-repeat center center;
  }
</style>

<div id="slider_container_1">

  <!-- el DIV con las imágenes y las descripciones -->
  <div id="SliderName">
    <!-- la primera imagen que puede ser un enlace -->
    <a href="URL_a_alguna_parte"><img src="URL_imagen_1"/></a>
    <div class="SliderNameDescription">
      ... aquí ponemos el texto para la imagen 1 ...
    </div>
    <!-- la segunda imagen que puede no ser un enlace-->
    <img src="URL_imagen_2" />
    <div class="SliderNameDescription">
      ... aquí ponemos el texto para la imagen 2 ...
    </div>
    ... y seguimos agregando imágenes siempre con la misma estructura ...
  </div>

  <!-- el DIV con la barra de navegación inferior -->
  <div id="SliderNameNavigation"></div>

  <!-- y ahora, llamamos a al función -->
  <script type="text/javascript">
    // creamos el efecto dándole un nombre cualquiera (por ejemplo demo01)
    Sliderman.effect({name: 'demo01', cols: 10, rows: 5, delay: 10, fade: true, order: 'straight_stairs'});
    var demoSlider = Sliderman.slider({container: 'SliderName', width: 500, height: 375, effects: 'demo01',
      display: {
        pause: true, // el slider se detendrá al colocar el punterodel ratón encima de una imagen
        autoplay: 3000, // el tiempo entre imágenes (en milisegundos)
        always_show_loading: 200, // forzamos a que se muestre una imagen de loading
        description: {background: '#FFFFFF', opacity: 0.5, height: 50, position: 'bottom'}, // tamaño, ubicación y colores de los textos
        loading: {background: '#000000', opacity: 0.2, image: 'URL_loading.gif'}, // la imagen de loading
        buttons: {opacity: 1, prev: {className: 'SliderNamePrev', label: ''}, next: {className: 'SliderNameNext', label: ''}}, // los botones atrás y adelante
        navigation: {container: 'SliderNameNavigation', label: '&nbsp;'} // la barra de navegación
        }
      });
  </script>
</div>

¿Qué significa cada cosa? Hay que andar adivinando un poco aunque en la parte de documentación se explica más o menos de manera detallada.

El segundo ejemplo es similar pero un poco más simple ya que no se agregan textos ni navegación sin embargo, las imágenes se van cambiando utilizando efectos diversos.

<style>
  #slider_container_2 { /* el rectángulo contenedor */
    border: 1px #333 solid;
    height: 375px;
    margin:0 auto;
    width: 500px;
  }
  #SliderName_2 { /* el rectángulo con las imágenes */
    height: 375px;
    margin: auto;
    overflow: hidden;
    width: 500px;
  }
  .SliderNamePrev_2, .SliderNameNext_2 { /* las flecha para ir hacia atrás (son imágenes de 35x50 */
    display: block;
    height: 375px;
    position: absolute;
    text-decoration: none;
    top: 0;
    width: 50px;
  }
  .SliderNamePrev_2 { /* la flecha para ir hacia atrás */
    background: url(URL_left.png) no-repeat left center;
    left: 0;
  }
  .SliderNameNext_2 { /* la flecha para ir hacia adelante*/
    background: url(URL_right.png) no-repeat right center;
    right: 0;
  }
</style>

<div id="slider_container_2">

  <!-- el DIV con las imágenes -->
  <div id="SliderName_2" class="SliderName_2">
    <img src="URL_imagen_1" width="500" height="375"/>
    <img src="URL_imagen_2" width="500" height="375"/>
    ... y seguimos agregando imágenes siempre con la misma estructura ...
  </div>

  <!-- y ahora, llamamos a al función -->
  <script type="text/javascript">
    // creamos varios efectos
    demo2Effect1 = {name: 'myEffect21', top: true, move: true, duration: 400};
    demo2Effect2 = {name: 'myEffect22', right: true, move: true, duration: 400};
    demo2Effect3 = {name: 'myEffect23', bottom: true, move: true, duration: 400};
    demo2Effect4 = {name: 'myEffect24', left: true, move: true, duration: 400};
    demo2Effect5 = {name: 'myEffect25', rows: 3, cols: 9, delay: 50, duration: 100, order: 'random', fade: true};
    demo2Effect6 = {name: 'myEffect26', rows: 2, cols: 4, delay: 100, duration: 400, order: 'random', fade: true, chess: true};
    // los incializamos
    effectsDemo2 = [demo2Effect1,demo2Effect2,demo2Effect3,demo2Effect4,demo2Effect5,demo2Effect6,'blinds'];
    // los ejecutamos
    var demoSlider_2 = Sliderman.slider({container: 'SliderName_2', width: 500, height: 375, effects: effectsDemo2, display: {autoplay: 3000}});
  </script>
</div>

REFERENCIAS:Serie de fotografias de Gabriela Herman

BigImg es un servicio que nos facilita la tarea de agregar imágenes de gran tamaño en cualquier web. Ellos no alojan las imágenes pero basta entrar al sitio e indicar la dirección URL donde está alojada para que se genere un IFRAME que luego podemos insertar en cualquier entrada.

Una vez que agregamos la dirección, nos van mostrando diferentes opciones que son muy simples. Con primera establecemos el tamaño del IFRAME final que pude ser alguno de los ya predefinidos o bien cualquier otro. La segunda nos permite seleccionar la posición inicial de la imagen que por defecto es centrada. Por último, nos dan el código del IFRAME que debemos copiar y pegar en nuestro blog.

Eventualmente, si queremos, podemos enlazarlo directamente y la imagen se abrirá en una nueva ventana.

Haciendo click en el IFRAME, habilitamos y dehabilitamos las diferentes funciones con las cuales podemos desplazarnos por la imagen o bien hacer zoom con la rueda del ratón.

Aquí hay dos ejemplos:

imagen 1944x1296

imagen 3495 x 480

REFERENCIAS:blogtecnia

Cuando hablamos de JSON y las diferentes opciones para leer los datos de nuestro sitio o de cualquier otro, siempre nos referimos a los feeds y el feed por defecto de nuestro blog tiene la siguiente dirección:

http://miblog.blogspot.com/feeds/posts/default

no importa si usamos o no usamos Feedburner ya que este es un servicio que los "gerencia" pero el feed es siempre el mismo y lo genera Blogger.

Eventualmente, también se accede a él desde otra URL:

http://www.blogger.com/feeds/blogID/posts/default

blogID es un número que podemos ver en la  barra de recciones del navegador cuando accedemos al escritorio; por ejemplo:

http://www.blogger.com/posts.g?blogID=12345678

Los feeds de Blogger tienen un API y por lo tanto, podemos agregar parámetros (query) y, de ese modo, especificar lo que queremos que nos muestre, de este modo lo limitamos o filtramos ciertos datos.

La sintaxis para todos los parámetros ellos es siempre la misma, el primero se coloca antecediéndolo con el carácter ? y si hay más, se adicionan con el carácter & o &amp; si es que los ponemos directamente en la plantilla.

http://miblog.blogspot.com/feeds/posts/default?parametro=valor&amp;parametro=valor

En principio, el orden de esos parámetros es indistinto y el API de Blogger admite los siguiente:

alt indica el formato

• alt=atom es el formato por defecto
• alt=rss lo muestra en formato RSS 2.0
• alt=json lo muestra en formato JSON

estos otros se usa para leerlos mediante JavaScript:

• alt=json-in-script
• alt=atom-in-script
• alt=rss-in-script

y este otro, simplemente lo describe:

• alt=atom-service

category es el parámetro que nos permite leer una etiqueta individual

http://miblog.blogspot.com/feeds/posts/default?category=NOMBRE

o bien:

http://miblog.blogspot.com/feeds/posts/default/-/NOMBRE

a diferencia de otros API del mismo Google, en Blogger no parece haber forma de combinar etiquetas o excluirlas.

max-results establece la cantidad máxima de resultados a ser leidos (por defecto 25) y su valor máximo es 500. Esto devolvería las últimas cinco entradas:

http://miblog.blogspot.com/feeds/posts/default?max-results=5

y esto, las últimas 10 en la categoría NOMBRE:

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

orderby ordena los resultados y la verdad, las diferencias entre los valores parecen algo confusas; puede ser:

• lastmodified (es el valor por defecto)
• starttime
• updated

start-index nos permite cargar los datos a partir de un determinado lugar; por defecto, el valor es 1 y es el parámetro que podríamos utilizar para "paginar" algo:

esto leería las últimas 20 entradas:

http://miblog.blogspot.com/feeds/posts/default?start-index=1&amp;max-results=20

esto leería las 20 entradas siguientes:

http://miblog.blogspot.com/feeds/posts/default?start-index=21&amp;max-results=20

published-min y published-max establecen los límites entre fechas de publicación que deben ser escritas en formato RFC 3339 algo que no es sencillo de hacer aunque hay algunos scripts que nos ayudan. Esto, leería los feeds del mes de diciembre del 2010:

http://miblog.blogspot.com/feeds/posts/default?published-min=2010-12-01T00:00:00&amp;published-max=2010-12-31T23:59:59

updated-min, updated-max son similares a lo anterior pero, debe agregarse que el orden sea updated (sigo diciendo que no tengo idea de la diferencia):

http://miblog.blogspot.com/feeds/posts/default?updated-min=2010-12-01T00:00:00&amp;updated-max=2010-12-31T23:59:59&amp;orderby=updated

callback es utilizado cuando el prámetro alt es por json-in-script para indicar el nombre de la función a ser ejecutada

http://miblog.blogspot.com/feeds/posts/default?callback=mifuncion

Así como hay feeds pare entradas, también los hay para los comentarios y, ene se caso, la URL es la siguiente:

http://miblog.blogspot.com/feeds/comments/default

o bien:

http://www.blogger.com/feeds/blogID/comments/default

siendo válidos las mayorias de los parámetros anteriores.

Si quisiéramos leer los comentarios de una entrada específica deberíamos usar el ID del post que es el que vemos cuando lo editamos:

http://miblog.blogspot.com/feeds/1075572725338955545/comments/default

Los Plug-ins sociales son los que nos permiten agregar gadgets de diferente tipo que vinculan un blog con Facebook, sin importar si el nuestro sitio posee o no posee una página o si tenemos una cuenta.

Dos de ellos son muy similares, los llamados Recomendaciones y Actividad Reciente; el primero muestra a quienes han compartido entradas y el segundo, las últimas referencias encontradas. Ambos tienen la particularidad de ser visibles a todos los visitantes, sin importar si están están logueados o no.

Se pueden agregar del mismo modo, basta ir a la página de desarrolladores, colocar la URL de nuestro blog y seleccionear las opciones disponibles que no son muchas; luego, hacemos click en Get Code y usamos uno de ellos.

Obviamente, como son muy similares, agregar ambos es un poco redundante pero, en digital inspiration se les ha ocurrido una idea interesante: usar JavaScript para que se muestre uno de ellos de manera aleatoria así que, a veces veremos uno y a veces veremos otro.

Es simple. Si los vamos a colocar en la sidebar, copiamos los códigos de los IFRAMES que nos proporciona Facebook y luego, los ponemos de este modo:

<script type="text/javascript">
var fb = Math.random();
if (fb<.5){
  document.write(' ... aqui ponemos uno de los iframes ... ');
} else {
  document.write(' ... aqui ponemos al otro iframe ... ');
}
</script>

<script type="text/javascript">
var fb = Math.random();
if (fb<.5){
  document.write('<iframe src="http://www.facebook.com/plugins/recommendations.php?site=http%3A%2F%2Fvagabundia.blogspot.com%2F&amp;width=450&amp;height=300&amp;header=true&amp;colorscheme=dark" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:300px;" allowTransparency="true"></iframe>');
} else {
  document.write('<iframe src="http://www.facebook.com/plugins/activity.php?site=http%3A%2F%2Fvagabundia.blogspot.com%2F&amp;width=450&amp;height=300&amp;header=true&amp;colorscheme=dark&amp;recommendations=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:300px;" allowTransparency="true"></iframe>');
}
</script>