INTRODUCCION    Edicion html del blogger   

Es recomendable que personalices tu Blog al máximo, que lo hagas resaltar entre otros blogs. Evidentemente,  esto se consigue con un buen contenido, pero la impresión visual es casi tan importante a la hora de que alguien  se  detenga  y  observe.  Y  también  es  un  regalo  del  autor  del  blog  hacia  sus  lectores,  una  expresión  de  su  personalidad y gustos, y un requisito indispensable para conseguir lo que llamamos UN BLOG CON ESTILO.    Para cualquier modificación, siempre hay que entrar por "Plantilla‐‐>Edición de HTML". A continuación y por si  las flys, ¡GUARDA TU PLANTILLA ACTUAL!, usando "Descargar plantilla completa". Esta utilidad te permite grabar  un fichero con la configuración actual, que podrás recuperar en caso de desastre mediante "Cargar una plantilla  desde tu archivo de disco duro".    Antes de grabar las modificaciones, siempre puedes hacer "Vista previa" para comprobar que todo va bien y  que las novedades a la plantilla funcionan correctamente, pero no obstante es muy conveniente salvar el trabajo  hecho hasta la fecha.       

                 

 

1.  EDICION DE PLANTILLA   
Blogger por defecto solo permite añadir algunos elementos de página que aparecen en ciertas secciones de la  estructura principal del Blog, es decir, cuando accedemos a la sección de Plantilla> Elementos de Página nos  encontramos con algo como ésto:   

 

 

Lo  que  haremos  será  desbloquear  algunas  opciones  ocultas  que  nos  permitirán  añadir  más  elementos  en  distintas  nuevas  zonas  de  la  estructura,  para  ello  iremos  a  Plantilla>  Edición  de  HTML  (antes  que  nada,  descargémonos  la  plantilla  original  como  copia  de  seguridad),  alli  clic  en  la  opción  “Expandir  plantillas  de  artilugios”  y  luego  (usando  CTRL+F)  buscaremos  todos  los  textos  html  para  sustituirlos  como  se  muestra en los tutoriales  siguientes:     

1.1.  

Añadir widgets en cualquier parte de la plantilla  

Blogger viene ahora con un intuitivo sistema para añadir elementos en la plantilla sin tener que bucear entre  líneas de aburrido e incomprensible código. Sin embargo a veces nos apetece poner scripts, imágenes o lo que  queramos en zonas que Blogger no permite. Estas zonas suelen ser la cabecera del blog y la columna de los  posts.    Para poder poner códigos, imágenes, scripts de títulos y citas aleatorias y más cosas que más adelante veremos,  lo primero es decirle a blogger que nos lo permita. Para ello vamos a la plantilla y hacemos una copia de la misma  por si luego tenemos problemas.    Primero veamos como añadir código en la cabecera (Header). Buscamos en la plantilla una línea de código como  esta:  <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>    Y la sustituimos por esta otra:  <b:section class='header' id='header' maxwidgets='5' showaddelement='yes'>    De esta manera ahora podremos añadir hasta 5 widgets en la cabecera y además nos lo mostrará desde la  pantalla de diseño.  Ahora hacemos lo mismo en la zona de Posts (Main). Buscamos la siguiente cadena:  <b:section class='main' id='main' showaddelement='no'>    y la sustituímos por esta otra:  <b:section class='main' id='main' maxwidgets='5' showaddelement='yes'>    Ahora tenemos habilitados hasta 5 widgets para ubicar justo encima de los posts (sólo del primero mostrado, no  uno encima de cada post). 

         

 

1.2.  

Cambiar el ancho de las columnas 

Lo primero que me molestó de la plantilla original (en mi caso Mínima Black) es el desperdicio  de espacio tan grande que había. Incluso en resolución de 800x600, sobraba hueco por todas  partes. Para aprovechar más la pantalla, se pueden cambiar los parámetros de anchura total,  del cuerpo de las entradas y de la barra lateral.  A continuación, la parte del código fuente dónde hay que modificar los datos. Sólo hay que  tener en cuenta que el ancho total no puede ser más grande que la suma de los anchos del  cuerpo principal y de la barra lateral (o de las columnas que se hagan para los que tengan 3...o  más). Las medidas vienen en pixels (px). Se pueden hacer pruebas con distintas combinaciones  de anchos, ‐haciendo "Vista previa" antes de "Guardar plantilla" definitivamente. 

 
/* Outer‐Wrapper 

‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ */  #outer‐wrapper {  width: 740px; <‐‐ Ancho total  margin:0 auto;  padding:10px;  text‐align:left;  font: $bodyfont;  }    #main‐wrapper {  width: 490px; <‐‐ Ancho cuerpo principal página  float: left;  word‐wrap: break‐word; /* fix for long text breaking sidebar float in IE */  overflow: hidden; /* fix for long non‐text content breaking IE sidebar float */  }    #sidebar‐wrapper {  width: 220px; <‐‐ Ancho barra lateral  float: right;  word‐wrap: break‐word; /* fix for long text breaking sidebar float in IE */  overflow: hidden; /* fix for long non‐text content breaking IE sidebar float */  } 

 
Con las medidas reseñadas (740, 490 y 220) se aprovecha un 95% del espacio para resoluciones de 800x600.  Para resoluciones mayores, evidentemente quedan huecos, pero de esta manera la web será cómodamente  visible en todas las configuraciones. 

  

 

 

1.3.

Como agregar una sidebar en una plantilla blogger 

Agregar una nueva sidebar a una plantilla Blogger es una de las preguntas más comunes entre  lo usuarios de la plataforma para blogs de Google. Agregar una segunda sidebar varia en  complejidad de acuerdo al diseño que se trate, así, mientras algunas solo requieran cambiar  unas lineas de css, otras necesitarán de una remodelación total que tal vez hagan más  conveniente cambiar de diseño.  A grandes rasgos el proceso es el siguiente:  1. Analizar la estructura y estilos de la plantilla.  2. Agregar un nueva zona editable, es decir, la nueva zona para agregar los gadgets.  3. Modificar estilos.  Para seguir sin problema este y cualquier tutorial que implica hacer cambios en la estructura de  un blog o sitio web es muy recomendable saber algo de html y css. Entonces:  Analizar la estructura y estilos de la plantilla 

La mayoría de las plantillas, y especialmente las de Blogger, tienen una estructura muy similar,  un header (cabecera) con título y descripción, un contenedor con la columna principal y una  sidebar (barra lateral) y un footer (píe de página) con créditos y otra información.  Para este caso, es de interés el contenedor, donde se encuentra el contenido y la sidebar,  desde el código de Blogger (Diseño / Edición HTML) este se ve como: 
<div id='content‐wrapper'>    <div id='main‐wrapper'>      <b:section class='main' id='main' showaddelement='no'> 

                    </div>   

  <b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>    </b:section>  </div>  <div id='sidebar‐wrapper'>    <b:section class='sidebar' id='sidebar' preferred='yes'>      <!‐‐ Código de los gadgets o widgets del sidebar ‐‐>    </b:section>    </div> 

Varía un poco de plantilla en plantilla, pero generalmente es muy similar a lo anterior. Tanto  main‐wrapper (columna principal) como sidebar‐wrapper (contenedor del sidebar) están  definidos por estilos css que determinan su ancho, fondo y otras características. Así que lo  primero será averiguar estas características buscando algo como: 
#main‐wrapper {  float:left;  width:620px;  /*.... otros atributos ... */  }  #sidebar‐wrapper {  float:right;  width:300px;  /*.... otros atributos ... */  } 

Nota: Seguramente no los encontraran juntos ni exactamente igual y en algunas ocasiones, más  de una vez.  Aquí es importante ver los anchos (width) de cada elemento, pues para agregar una nueva  barra hay que cambiar la distribución. Al sumar los anchos del código de ejemplo se tiene un  total de 920px, el cual será el espacio disponible para el contenedor principal y las sidebars.   

1.4.  

Agregar una segunda Sidebar en el blog  

#outer-wrapper - Define el blog entero. #main-wrapper Define la columna principal. #sidebar-wrapper - Define la sidebar. Para insertar una nueva Sidebar necesitaremos agregar algunos códigos y a

su vez hacer algunas modificaciones en el blog. Esto prácticamente resulta para las siguientes plantillas de Blogger: Todas las Minima (Dark, Blue, Ochre, Lefty, Stretch, Lefty Stretch), Denim, Dotsdark 1. En la plantilla tenemos que ubicar lo siguiente:
/* Outer‐Wrapper  ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ */  #outer‐wrapper {  width: 660px;  margin:0 auto;  padding:10px;  text‐align:left;  font: $bodyfont;  }    #main‐wrapper {  width: 410px;  float: left;  word‐wrap: break‐word; /* fix for long text breaking sidebar float in IE */  overflow: hidden; /* fix for long non‐text content breaking IE sidebar float */  }    #sidebar‐wrapper {  width: 220px;  float: right;  word‐wrap: break‐word; /* fix for long text breaking sidebar float in IE */  overflow: hidden; /* fix for long non‐text content breaking IE sidebar float */  } 

2. Tendremos que modificar el width (ancho) del #outer‐wrapper, el width (ancho) del #main‐ wrapper y el width (ancho) de la #sidebar‐wrapper, para poder agregar la nueva sidebar.  Además hay que agregarle un margen hacia la izquierda (margen‐left) para que haya un espacio  entre la nueva sidebar y la columna principal.    Ejemplo: 

  #outer‐wrapper {  width: 750px;  ...  }  #main‐wrapper {  width: 400px;  margin‐left: 20px;  ...  }  #sidebar‐wrapper {  width: 150px;  float: right;  ...  }   

3. Después de haber modificado el ancho del blog entero, de la columna principal y de la  sidebar, agregamos una declaración o código para la nueva sidebar (lo que esta en azul agregas  a tu blog) después de: 
  #sidebar‐wrapper {  width: 150px;  float: right;  ...  }    #newsidebar‐wrapper {  width: 150px;  float: left;  word‐wrap: break‐word; /* fix for long text breaking sidebar float in IE */  } 

4. Ahora necesitamos hacer algunos cambios en el cuerpo de la plantilla. Tendrás que buscar el  div con el id content‐wrapper y de ahí tienes que agregar algunas líneas de código para que  funcione.   Después de: 
<div id="content‐wrapper">  <div id="crosscol‐wrapper" style="text‐align:center">  <b:section class="crosscol" id="crosscol" showaddelement="no" />   </div> 

 

Agregar lo siguiente:
<div id='newsidebar‐wrapper'>  <b:section class='sidebar' id='newsidebar' preferred='yes'>  <b:widget id='NewProfile' locked='false' title='About Me' type='Profile'/>  </b:section>  </div> 

5. Para que veas los cambios haces clic en Vista Previa y si crees que has hecho bien las  modificaciones, simplemente clic en Guardar Plantilla. 

1.5.  

Agregar un nueva zona editable. 

Agregar una nueva zona editable en blogger es muy sencillo, estas están definidas por  elementos “section” que al incluirlos en el código ya pueden contener gadgets (elementos de  página). El código de una nueva zona editable es algo como: 
<b:section class='sidebar' id='sidebar2' preferred='yes'></b:section>   

Y para agregar una nueva zona editable, solo hay que agregar este código justo después de la  zona editable existente: 
<div id='content‐wrapper'>    <div id='main‐wrapper'>      <b:section class='main' id='main' showaddelement='no'>      <b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>      </b:section>    </div>      <div id='sidebar‐wrapper'>      <!‐‐ Zona editable existente ‐‐>      <b:section class='sidebar' id='sidebar' preferred='yes'>        <!‐‐ Código de los gadgets o widgets del sidebar ‐‐>      </b:section>          <!‐‐ Nueva zona editable ‐‐>      <b:section class='sidebar' id='sidebar2' preferred='yes'></b:section>        </div>  </div>   

 

Hay que tener cuidado que el ID de la nueva zona, no exista en otro elemento “section”, es por  eso que en el ejemplo aparece como “sidebar2″. La clase puede repetirse y en el caso de los  sidebars hasta es conveniente que lo haga. Como es una zona nueva, no necesita tener código  de gadgets, estos se integraran automáticamente cuando agreguemos un nuevo gadgets desde  “Elementos de página”.  Con esto ya hay una zona editable pero como no la plantilla no esta preparada seguramente se  deformaría, así que falta hacer algunos cambios.   

1.6.  

Modificar estilos. 

Ya sabemos el ancho total disponible y tenemos la zona editable, así que hay que cambiar  determinar el ancho de cada elemento. Siguiendo el ejemplo; main‐wrapper se reduce a 540px  y sidebar‐wrapper el ahora contenedor de ambas sidebars se aumenta a 380px. Quedando los  estilos como sigue: 
#main‐wrapper {  float:left;  width:540px;  /*.... otros atributos ... */  }  #sidebar‐wrapper {  float:right;  width:380px;  /*.... otros atributos ... */  } 

De esto modo el espacio disponible para ambas sidebars es de 380px. Lo más comun es ambas  tengan el mismo ancho, es decir que ocupen el 50% cada una. A partir de lo IDs de cada zona  editable definimos el ancho de cada una y su ubicación (derecha – izquierda) dentro del  contenedor sidebar‐wrapper, agregando los estilos: 
  #sidebar {  width:50%;  float:left;  /*.... otros atributos que consideres necesarios: padding, margin, etc ... */  }  #sidebar2 {  width:50%;  float:right;  /*.... otros atributos que consideres necesarios: padding, margin, etc ... */  } 

Con esto ya se tiene 2 sidebars de un ancho de 190px cada una, capaces de soportar gadgets.  Observaciones  Algunas plantillas pueden tener problemas al cambiar el ancho del sidebar o el contenedor  principal, sobre todo aquellas basadas en imágenes fijas que obviamente no cambian de  tamaño al reducirse el ancho. En tal caso se pueden editar las imágenes con photoshop para  adaptarlas al nuevo ancho.  Conclusión  En general esto proceso puede ser complicado, sobre todo si no se tiene nociones suficientes  de css o la plantilla tiene una maquetación ‐estructura‐ compleja. Para tal caso queda aprender  css o buscar una plantilla con 3 columnas y personalizarla. 

1.7.

Estructura de blog 

  Continuando con la idea de modificar la estructura de una plantilla, hasta acá tenemos el  esquema tradicional de un blog, encabezado, las entradas a la izquierda, la sidebar a la derecha  y un pie de página. La ubicación de entradas y sidebar es fácilmente modificable ¿queremos  invertirlas? basta invertir la flotación de ambos rectángulos [VER EJEMPLO] 
 

      #main‐wrapper {    .......    float: right; /* cambiamos left por right */  }    #sidebar‐wrapper {    .......    float: left;  /* cambiamos right por left */  }    La sidebar que hemos creado es muy ancha y eso no es casualidad ya que ahora que tenemos todo preparado  vamos a agregar otras debajo de ella siguiendo el mismo esquema . Para esto, ya no sólo tendremos que  modificar el CSS sino agregar código pero, lo haremos de la manera simple, sin expandir los artilugios para que no  nos de un ataque al ver tanta cosa escrita.    Si vamos hasta casi el final de la plantilla, lo que veremos es algo así: 
<div id="sidebar‐wrapper">    <b:section class="sidebar" id="sidebar" preferred="yes">      .......    </b:section>  </div> 

allí en el medio aparecerán cosas como:  <b:widget ....... /> 

Que son cada uno de los elementos que tenemos en la sidebar y que no tocaremos. Lo que  haremos es copiar el código sin eso y lo pegaremos dos veces debajo de </b:section> para crear  dos nuevas sidebar. Luego, les cambiaremos los nombres y quedará algo así:    <div id="sidebar‐area">    <div id="sidebar‐wrapper">      <b:section class="sidebar" id="sidebar" preferred="yes">        .......      </b:section>    </div>    <div id="sidebar‐derecha">      <b:section class="sidebar" id="sidebarderecha" preferred="yes" />    </div>    <div id="sidebar‐izquierda">    <b:section class="sidebar" id="sidebarizquierda" preferred="yes" />    </div>  </div> 
 

Pero, fíjense que todas están dentro de otro DIV. Es que para evitar problemas indeseados  vamos a utilizar un viejo truco que siempre nos saca de apuro: cuando haya varios rectángulos  flotando que no podemos o no sabemos controlar, coloquemos todos ellos en un contenedor,  en otro rectángulo más grande así que "envolvemos" las tres sidebars en un DIV al que en un  rapto de originalidad llamé sidebar‐area.    Es muy importante tener en cuenta que a las dos angostas, aunque sean iguales, debemos  colocarles atributos id con nombres diferentes ya que en una pagina web, los ids son nombres  únicos, no puede haber dos iguales. Por el contrario, las clases pueden ser las mismas y por eso  no la cambiaremos ya que las características de los elementos será la misma (por supuesto, si  queremos que se vean diferentes, les pondremos tambien clases diferentes y deberemos  definirlas).    Nuevamente, vamos al CSS y agregamos las definiciones de estilo para estas dos sidebars que  serán casi iguales que las de sidebar‐wrapper (la superior, la que quedará ancha). Ambas  flotarán a la derecha y la suma de sus anchos no deberá superar los 390 pixeles que es el ancho  de la superior así que le daremos a cada una un poco menos de la mitad para separarlas entre si  con un margen:   
190 + 5 + 5 + 190 = 390 
#sidebar-area { float: right; /* flota a la derecha */

width: 390px; /* es tan ancha como la sidebar superior */ } #sidebar-derecha { float: right; /* flota a la derecha */ margin-left: 5px; /* margen izquierdo */ overflow: hidden; width: 190px; word-wrap: break-word; } #sidebar-izquierda { float: right; /* flota a la derecha */ margin-right: 5px; /* margen derecho */ overflow: hidden; width: 190px; word-wrap: break-word; }

  Guardo la plantilla y, para que se vea algo de lo modificado puedo hacer dos cosas, o le agrego  elementos (es lo que se verá en el ejemplo) o bien, le agrego a lo anterior un par de  definiciones:  background‐color: red;height: 300px;Con height le damos una altura y con background‐color un  color de fondo; esas dos propiedades luego se pueden eliminar [VER EJEMPLO]     

  ¿Y si nuevamente, en lugar de querer ese esquema, se nos ocurre poner todo del otro lado, invertimos los  valores de la flotación de main‐wrapper y de sidebar‐area. Lo que está como left lo ponemos como right y  viceversa.   

1.8.
 

SIDEBARS 

Con todo lo que hemos modificado, no tendremos problemas en agregar otra sidebar ancha  debajo de las anteriores, utilizando siempre el mismo criterio, dándole un ID único que, en este  caso será sidebar‐inferior.    El haber "envuelto" todo dentro de un contenedor (sidebar‐area)es lo que nos va a permitir  que todo quede "encolumnado" sino, las flotaciones son impredescibles: 
 

   

Agregamos entonces, la nueva sidebar y este sería el código completo: 
<div id="sidebar‐area">    <div id="sidebar‐wrapper">      <b:section class="sidebar" id="sidebar" preferred="yes">        .......      </b:section>    </div>    <div id="sidebar‐derecha">      <b:section class="sidebar" id="sidebarderecha" preferred="yes">        .......      </b:section>    </div>    <div id="sidebar‐izquierda">      <b:section class="sidebar" id="sidebarizquierda" preferred="yes">        .......      </b:section>    </div>    <div id="sidebar‐inferior">      <b:section class="sidebar" id="sidebarinferior" preferred="yes" />    </div>  </div>   

Y tendrá las mismas propiedades que sidebar‐wrapper: 
#sidebar‐inferior {    float: right; /* flota a la derecha */ 

  overflow: hidden; /* fix for long non‐text content breaking IE sidebar float */    width:390px; /* el ancho */     word‐wrap: break‐word; /* fix for long text breaking sidebar float in IE */  }   

Guardamos y eso es todo, todo habrá quedado acomodado correctamente [VER EJEMPLO]    Y al igual que en la entrada anterior, si queremos cambiar todo de lado, basta invertir los  valores de las flotaciones de main‐wrapper y de sidebar‐area. 
 

   

Y así podemos seguir una y otra vez, repitiendo los códigos, uno debajo del otro, combunando  anchas con angostas con la única precausión de darle a cada una un ID único [VER EJEMPLO] 
<div id="sidebar‐area">      <div id="sidebar‐wrapper">      <b:section class="sidebar" id="sidebar" preferred="yes" />    </div>    <div id="sidebar‐derecha">      <b:section class="sidebar" id="sidebarderecha" preferred="yes" />    </div>    <div id="sidebar‐izquierda">      <b:section class="sidebar" id="sidebarizquierda" preferred="yes" />    </div>    <div id="sidebar‐inferior">      <b:section class="sidebar" id="sidebarinferior" preferred="yes" />    </div>      <div id="sidebar‐wrapper2">      <b:section class="sidebar" id="sidebar2" preferred="yes" />    </div>    <div id="sidebar‐derecha2">      <b:section class="sidebar" id="sidebarderecha2" preferred="yes" /> 

  </div>    <div id="sidebar‐izquierda2">      <b:section class="sidebar" id="sidebarizquierda2" preferred="yes" />    </div>    <div id="sidebar‐inferior2">      <b:section class="sidebar" id="sidebarinferior2" preferred="yes" />    </div>    </div> 

 

1.9.

FLOTACIONES 

  Ya agregamos columnas a la derecha, a la izquierda, dobles, simples, las mezclamos, podemos  seguir  poniendo  todas  las  que  se  nos  ocurra  pero  la  realidad  es  que  solemos  ser  menos  exquisitos y nos limitamos a una o dos así que simplifiquemos el proyecto, hagamos de cuenta  que  empezamos  con  el  Modelo  original  de  la  Plantilla  Mínima  y  queremos  agregar  sólo  una  segunda sidebar.    Ampliamos  el  ancho  general  de  outer‐wrapper,  header‐wrapper  y  footer‐wrapper  a  980  pixeles y el de main‐wrapper a 560 pixeles exactamente igual que en el primer tutorial y ahora  disponemos de los 390 pixeles restantes para dividirlos en dos sidebars.    Por defecto, sólo tenemos una columna en la plantilla así que le agregamos el código de la  segunda, copiándolo y pegándolo: 
<div id="sidebar‐area">    <div id="sidebar‐wrapper">      <b:section class="sidebar" id="sidebar" preferred="yes">        .......      </b:section>    </div>    <div id="sidebar‐nueva">      <b:section class="sidebar" id="sidebarnueva" preferred="yes" />    </div>  </div>  Y el CSS que sólo es una variación de los anteriores:  #sidebar‐area {    float: right; /* flota a la derecha */    width: 390px; /* es ancha porque contendrá las dos sidebars */  } 

  #sidebar‐wrapper { /* es la original */    float: right; /* flota a la derecha */    margin‐left: 5px; /* margen izquierdo */    overflow: hidden;    width: 190px;    word‐wrap: break‐word;  }    #sidebar‐nueva { /* es la nueva */    float: right; /* flota a la derecha */    margin‐left: 5px; /* margen izquierdo */    overflow: hidden;    width: 190px;    word‐wrap: break‐word;  }   

Guardamos y ya está, tenemos dos sidebars, una al lado de la otra [VER EJEMPLO]    Tal como lo hemos agregado, la original (sidebar‐wrapper) será la que está más a la derecha del  blog; si quisiéramos que fuera la otra, deberíamos invertir el orden del código:   
<div id="sidebar‐area">    <div id="sidebar‐nueva">      <b:section class="sidebar" id="sidebarnueva" preferred="yes" />    </div>    <div id="sidebar‐wrapper">      <b:section class="sidebar" id="sidebar" preferred="yes">        .......      </b:section>    </div>  </div>   

Para invertir la posición y colocar las sidebars a la derecha basta invertir la flotación de main‐ wrapper y de sidebar‐area:   

    Y bueno, sí, ya sé, falta una tercera opción, nos gusta complicarnos la vida y queremos poner  una a la derecha y otra a la izquierda. Para eso, debemos cambiar el esquema, olvidarnos del  contenedor sidebar‐area y hacerlas flotar en diferentes direcciones.   

                Pero, aquí debemos entender algo, los navegadores van "dibujando" la página web de manera  secuencial, es decir, crean los famosos rectángulos en un cierto orden, leyendo de arriba hacia  a abajo y la flotación sólo es una propiedad. A ver si puedo mostrarlo, veamos este código: 
<div id="main‐wrapper">    ... el área de posts ...  </div>    <div id="sidebar‐wrapper">    ... la sidebar ...  </div>   

main‐wrapper puede flotar a la derecha o a la izquierda, lo mismo puede ocurrir con sidebar‐ wrapper. Es más, ambas pueden flotar hacia el mismo lado y, en todos los casos, el elemento  que  contiene  los  posts se  mostrará  primero,  a la  izquierda  o  a  la  derecha  de  la  pantalla  pero  primero,  cuando  se  complete  su  carga  se  mostrará  la  sidebar  [VER  EJEMPLO]    Si se invierte el orden, la sidebar se cargará primero pero el resultado final, será el mismo [VER  EJEMPLO] 
<div id="sidebar‐wrapper">    ... la sidebar ...  </div>    <div id="main‐wrapper">    ... el área de posts ...  </div>   

Cuando colocamos dos elementos flotantes, uno hacia la derecha (right) y otro hacia la  izquierda (left), todo es sencillo de entender pero, cuando hacemos que ambos floten en la  misma dirección, se nos queman lo papeles y hay que ponerse a pensar y eso es justo lo que no  hacen los navegadores y tampoco deben hacerlo.    El navegador lee la instrucción que le dice, cree un rectángulo de tal dimensión a la izquierda de  la pantalla. Obedientemente, lo hace y luego, se olvida del tema así que sigue con la siguiente  instrucción que le dice: cree OTRO rectángulo de cierta dimensión y colóquelo a la izquierda  ¿de la pantalla? No, a la izquierda del espacio que le dejó el rectángulo anterior y si no entra,  pafffff lo coloca debajo.  En resumen, si dos elementos flotan a la izquierda, el primero aparecerá a la izquierda pero el  segundo se mostrará a la derecha. Si dos elementos flotan a la derecha, el primero aparecerá a  la derecha y el segundo a la izquierda ¡Cosa de magia!  Así que, para poner una sidebar a cada lado de los posts, deberíamos reordenar el código:   
<div id="sidebar‐wrapper1">    <b:section class="sidebar" id="sidebar1" preferred="yes">      .......    </b:section>  </div>    <div id="main‐wrapper">    <b:section class="main" id="main" showaddelement="no">      <b:widget id="Blog1" locked="true" title="Entradas del blog" type="Blog"/> 

  </b:section>  </div>    <div id="sidebar‐wrapper2">    <b:section class="sidebar" id="sidebar2" preferred="yes">      .......    </b:section>  </div>  Y el CSS:  #sidebar‐wrapper1 {    float: left; /* flota a la izquierda */    overflow: hidden;    width: 190px;    word‐wrap: break‐word;  }    #main‐wrapper {    float: left; /* flota a la izquierda */    margin: 0 10px; /* la separación entre los bloques */    overflow: hidden;    width: 560px;  }    #sidebar‐wrapper2 {    float: left; /* flota a la derecha */    overflow: hidden;    width: 190px;    word‐wrap: break‐word;  }   

La separación entre los tres rectángulos lo controlamos con el margen de todos ellos o, como  en el ejemplo, con la propiedad margin del rectángulo central, el que contiene los posts   

1.10.  

COLUMNAS 

Da la casualidad que, mientras iba armando esta entrada, fueron varias las preguntas sobre el  mismo tema y es, sin duda, uno de esos temas aparentemente extraños que parecen causar  dolores de cabeza. Se trata de tener un diseño con columnas e igualar sus alturas.    Hace un tiempo, la solución era mostrada en La Bloguería así que vamos a a usar sus  explicaciones y ponerlas en práctica, basándonos en una de las variantes del tutorial anterior. 

  Allí, se mostraba algo así:   

    Es decir, un blog con tres columnas (sidebar izquierda, posts, sidebar derecha) pero, en  realidad, esta soluciòn funcionará con cualquier otro diseño.  ¿Cuál es el problema?  Los contenedores (y casi todas la etiquetas) tienen un particularidad, podemos definir su ancho  (width) pero cuando queremos definir su altura (height) las cosas se complican porque para  calcular esa altura deberíamos conocer su contenido y calcularlo, aunque sea a ojo pero, como  los blogs son dinámicos, eso es imposible así que, las columnas tomarán diferentes alturas,  unas más cortas, unas más largas; podemos fijarlas pero, en ese caso, o quedarán espacios  vacios o parte del contenido quedará oculto o aparecerá una barra de desplazamiento vertical.   

    Si utilizamos una plantilla sin fondos ni bordes, es un tema irrelevante pero si los tenemos, el  efecto de las columnas desiguales puede molestarnos     Entonces, ¿cómo crear columnas de la misma altura sin que importe el contenido de estas? 

  Como dice Vane, hay soluciones varias y para todos los gustos:  1. crear  columnas  falsas  utilizando  imágenes  tiene  la  desventaja  de  requerir  de  esas  imágenes extras   2. establecer la propiedad height al 100% no funciona en todos los navegadores   3. utilizar JavaScript tiene resultados dudosos, y claro, no funcioanrá si JavaScript está  deshabilitado.  Así que vamos con el cuarto método que me parece más efectivo y para aplicarlo, sólo  requerimos agregar unas pocas propiedades CSS.    Buscaremos cada una de las definiciones de las columnas y a todas ellas les agregaremos un  padding (un relleno) de un valor muy alto, el máximo posible (32768 pixeles) y eso creará  columnas larguísimas y para compensar esta locura, le agregaremos un margen negativo  inverso:    padding‐bottom: 32768px;  margin‐bottom: ‐32768px;      Para que estos desarreglos se oculten, el contendor principla tendrá que incluir la propiedad  overflow: hidden. En el ejemplo, estas serían las definiciones de estilo:   
#sidebar‐wrapper1 { /* la sidebar izquierda */    background‐color: aliceBlue; /* un color para el ejemplo */    float: left;    margin: 0; /* poner a cero */    overflow: hidden;    padding‐bottom: 32768px;    width: 190px;    word‐wrap: break‐word;    margin‐bottom: ‐32768px;    padding‐bottom: 32768px;  }    #main‐wrapper { /* el área de posts */    background‐color: aliceBlue; /* un color para el ejemplo */    float: left;    margin: 0 10px;    overflow: hidden; 

  width: 560px;    margin‐bottom: ‐32768px;    padding‐bottom: 32768px;  }    #sidebar‐wrapper2 { /* la sidebar derecha */    background‐color: aliceBlue; /* un color para el ejemplo */    float: left;    margin: 0;  /* poner a cero */    overflow: hidden;    width: 190px;    word‐wrap: break‐word;    margin‐bottom: ‐32768px;    padding‐bottom: 32768px;  }    #content‐wrapper {    overflow: hidden;  }   

Lo prudente sería que, primero, coloquemos los márgenes en cero y luego aplicáramos los  márgenes gigantes a todas las columnas que tengamos, eso es todo, con estos pequeños  cambios, no debería haber problemas en igualar la longitud de las columnas                                   

1.11.   

Columnas en el Footer 

Hace unos días veíamos una forma de dar utilidad al footer, le añadíamos opción para añadir  gadgets y a modo decorativo una imagen de fondo. Adelantaba que si la idea era añadir varios  gadgets lo mejor era crear divisiones de forma que el contenido quedara ordenado.    Para empezar lo que haremos será añadir las siguientes líneas de código justo antes de  ]]></b:skin>    #footer‐columna‐contenedor {  clear:both;  }  .footer‐columna {  padding: 10px;  }  Luego dejaremos el footer libre de gadgets si es que los tenemos, podemos hacer dos cosas  arrastrarlos a la sidebar provisionalmente o copiar las líneas de código pertenecientes a cada  gadget y pegarlas en el bloc de notas para más tarde volver a añadirlos.    Las líneas de código empiezan todas con b:widget más o menos así:      <b:widget id='BlogArchive1' locked='false' title='Archivo del blog' type='BlogArchive'/>    Una vez dejamos el footer libre buscamos al final de la plantilla lo siguiente:    <div id='footer‐wrapper'>  <b:section class='footer' id='footer' showaddelement='yes'/>  </div>    De no tener la opción de añadir gadgets sería algo así:    <div id='footer‐wrapper'>  <b:section class='footer' id='footer'/>  </div>    En ambos casos lo que haremos será sustituir la línea en negrita por lo siguiente: 

<div id='footer-columna-contenedor'> 

 
<div id='footer-izquierdo' style='width: 30%; float: left; margin:0; textalign: left;'>  <b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>  </div> 

 
<div id='footer-centro' style='width: 40%; float: left; margin:0; text-align: left;'>  <b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>  </div> 

 
<div id='footer-derecho' style='width: 30%; float: right; margin:0; textalign: left;'>  <b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>  </div> 

 
<div style='clear:both;'/> 

 
<div id='footer-bottom' style='text-align: center; padding: 10px; texttransform: none;'> 

 
<b:section class='footer' id='col-bottom' preferred='yes'/> 

 
</div> 

 
<div style='clear:both;'/> 

 
</div>

Miramos en vista previa para ver si es posible guardar los cambios y si es así guardamos. En plantilla de diseño lo veremos de esta forma.

Ahora vamos a personalizar ese nuevo espacio.  Vamos otra vez justo antes de ]]></b:skin> y añadimos lo siguiente:
  #col1{  background:#000;  margin: 5px;  padding: 5px;  border: 1px solid #fff;  }  #col1 h2{  background:#000;  margin: 0.0em 0 .5em;  padding: 4px 3px;  text‐align: center;  font‐size: 90%;  color:#fff;  }  #col2{  background:#000;  margin: 5px;  padding: 5px;  border: 1px solid #fff;  }  #col2 h2{  background:#000;  margin: 0.0em 0 .5em;  padding: 4px 3px;  text‐align: center;  font‐size: 90%;  color:#fff; 

}  #col3{  background:#000;  margin: 5px;  padding: 5px;  border: 1px solid #fff;  }  #col3 h2{  background:#000;  margin: 0.0em 0 .5em;  padding: 4px 3px;  text‐align: center;  font‐size: 90%;  color:#fff;  }

Nos familiarizamos con los estilos intentando conocer a qué parte corresponde cada uno para  poder personalizarlos. Contenido footer izquierdo col1 footer centro col2 footer derecho col3 Títulos footer izquierdo col1 h2 footer centro col2 h2 footer derecho col3 h2 Con background estamos añadiendo color de fondo, en border añadimos estilos al borde y  utilizamos color para el color del texto.    Guardamos los cambios y en plantilla de diseño añadimos esos gadgets que tenemos en espera  o los que pensamos añadir.El resultado sería algo así.

Un poco triste y aburrido ¿verdad? vamos a darle un poco de vidilla pero primero le daremos  color a ese fondo, buscamos las primeras líneas que añadimos y le damos color. #footer-columna-contenedor { background:#000; clear:both; } Podemos eliminar el color de fondo y borde de los gadgets y añadir una imagen en su lugar. #footer-columna-contenedor { background-image:url('url-de-tu-imagen'); clear:both; } Se puede seguir jugando... 
 

1.12.  

Imagen de fondo en tu web o blog 

El fondo de una web es uno de los elementos más importantes, siempre esta presente y casi  siempre tiene mucho espacio destinado. En este artículo básico te mostraremos como manejar  el fondo de tu web o blog con una imagen. Lo primero es saber que la forma correcta de  colocar una imagen de fondo es por medio de las hojas de estilo CSS, modificando la etiqueta  <body> con la propiedad “background” (fondo). Sabiendo esto, la modificación de etiqueta  “body” se hace en tu archivo .css o del espacio de tu web destinado a la hoja de estilos, por  ejemplo:   
body {  background:#ffffff url(http://www.tu‐sitio.com/fondo‐web.jpg) top left no‐repeat fixed;  }Color 

  Lo primero que tenemos en background es el color de fondo, en este caso #ffffff, que es el  código de color, aqui puedes modificarlo con el que mejor valla con tu web y cuando pones una  imagen de fondo no fija, será el color que se muestre fuera del espacio de la imagen y mientras  carga.    Ruta  “url()” es la ubicación de la imagen que deseamos tener como fondo entre los parentesis. 

  Ubicación  “top” y “left” dan la ubicación a la imagen de fondo y puede tomar los valores: top, right, bottom, left y center.    Frecuencia  “no‐repeat” nos indica que no se repetirá la imagen, esta propiedad también puede tener los valores:  repeat – Este es el valor por default, sino especificas nada, tu imagen de fondo siempre se repetirá.  repeat‐x – repite el fondo sólo de forma horizontal.  repeat‐y – repite el fondo sólo de forma vertical.  no‐repeat – no repite el fondo, este solo tendra el tamaño que la imagen tenga.    Visualización  “fixed” nos indica que tendremos el fondo fijo y esta propiedad también puede tener los valores:  scroll – Este es el valor por default, sino especificas nada, tu imagen de fondo siempre se movera junto con el  texto.  fixed – Fija el fondo, al moverse el contenido, no se mueve la imagen de fondo.    En el caso del nuevo blogger, estas propiedades siempre van antes de:  ></b:skin>    El Código HTML para cambiar el fondo del blog es así:    <pre></table></table><table background="URL de la imagen "><tr><td><div><table  style="display: auto"></pre>   Cómo utilizarlo, es sensillo:  1) Agrega una nueva entrada de blog (siempre debe ser el blog mas reciente el ke tenga este  codigo ok)  2) Pasa a modo <HTML> (haciendo clic sobre <html> en la barra de herramientas del Blog).  3) Borra <DIV></DIV>, eso aparece por defecto.  4) Copia el codigo HTML (el codigo que aparece en Naranja.)  5) Completa el campo URL de la imagen (Remplazala por la direccion de la imagen que deseas  como fondo. Ejm: http://msnblog.iespana.es/image/d3xfondo.jpg)  Para conseguir la URL de la imagen de tu gusto seguro ke lo consigues en google ... o subes a  alguna pagina de hospedaje de archivos como filelodge, fileden, myfilehut,etc.  Para guardar nuestras imágenes en la red uso http://www.imageshack.us/ te tienes que  registrar y es gratis 

 Ejemplo:  Así te quedaría con la URL del ejem:  <pre></table></table><table  background="http://msnblog.iespana.es/image/d3xfondo.jpg"><tr><td><div><table  style="display: auto"></pre>     6) Guarda el blog y listo. Ya tienes un fondo personalizado en todo el módulo Blog ...suerte!     Importante: Ya vi que hay muchas dudas con respecto a porque le aparece inactiva el botón  publicar, pues esto es debido a que le falta un título al blog que estas creando.          

    1.13.
 

Flash en el encabezado Blogger  

Ya se ha comentado en el Blog, cómo incrustar Flash en una entrada de Blogger. Ahora vamos a  ver cómo se puede cologar un SWF en el encabezado.   Básicamente  lo  que  hay  que  hacer  es  eliminar  la  cabecera  que  tenemos  por  defecto  y  sustituirla por un gadget HTML con el código para incluir el SWF que queramos. Pasos a seguir:    1.‐ Entra en tu cuenta de Blogger.  2.‐ Accede al diseño y a Edición HTML.  3.‐ Haz una copia de seguridad de tu plantilla, por si acaso. (Ver cómo) (Muy importante por si  metemos la pata)  4.‐ Asegúrate que la casilla Expandir plantillas de artilugos, NO ESTÁ SELECCIONADA. 

    5.‐  Ahora  debemos  buscar  la  parte  que  gestiona  la  cabecera  del  Blog.  Se  encuentra  en  la  ventana de código que está justo debajo de expandir  plantillas  de  artilugios. Busca el código  siguiente:    <div id='header‐wrapper'>  <b:section class='header' id='header' maxwidgets='1'>  <b:widget id='HTML1' locked='true' title='' type='HTML'/>  </b:section>  </div>  6.‐ Donde dice locked='true' debemos sustituirlo por locked='false'. De esta forma nos  permitirá borrar nuestra cabecera por defecto. Una vez cambiado, volvemos al diseño y a  pestaña elementos de página. Ahora al editar la cabecera, nos aparecerá la opción de eliminar.    7.‐ Una vez eliminada solo debemos incluir un nuevo gadget a la cabecera. Al hacerlo podemos  elegir entre varios (incluido la antigua cabecera que será la última opción). En nuestro caso, lo  que tenemos que seleccionar es HTML/Javascript.      8.‐ Por último, en este gadget HTML debemos escribir el código:    <object data='DIRECCIÓN DEL SWF' height='XXX' id='movie' type='application/x‐shockwave‐ flash' width='YYY'>  <param name='movie' value='DIRECCIÓN DEL SWF'>  <param name='wmode' value='transparent'/>  <param name='allowScriptAccess' value='always'/>  </param>  </object> 

Donde debéis sustituir donde dice DIRECCIÓN DEL SWF por la dirección donde tengáis alojado  el flash que queréis como cabecera. También debéis sustituir XXX e YYY por el valor del alto y  ancho en píxeles, respectivamente, del flash que queréis usar.    Con este sistema, podemos sustituir nuestra cabecera no solo por un Flash, sino por cualquier  otro elemento que queremos incluir a través del código HTML.   

1.14.

Gadgets de imágenes para enlaces.  

  Ariane de Templates Novo Blogger tiene un gusto exquisito para diseñar plantillas, por si eso  fuera poco también tiene la amabilidad de explicar como podemos conseguir los mismos trucos  o efectos que ella aplica en sus plantillas.  Hace unos días nos mostraba la forma de usar gadgets de imágenes para enlazar entradas del  blog, aunque también podemos crear enlaces externos consiguiendo un atractivo y funcional  menú. Ejemplo de Ariane.  Para los ejemplos se ha utilizado la plantilla Minima de Blogger si nuestra plantilla es distinta se  recomienda hacer la prueba en otro blog para evitar posibles errores. 
 

Lo primero que haremos será habilitar el croscoll para añadir nuevos gadgets, buscamos en  plantilla Edición de HTML. 
  <div id='crosscol‐wrapper'>  <b:section class='crosscol' id='crosscol' showaddelement='no'/>  </div> 

» Donde dice no lo sustituimos por yes    Luego buscamos #outer‐wrapper y sustituimos el ancho (width) por 900px. 
#outer‐wrapper {  width: 900px;   

Una vez dimos la anchura suficiente nos situamos justo antes de ]]></b:skin> para añadir  los estilos de los nuevos gadgets de imágenes. 
#crosscol-wrapper{ margin: 0 auto; padding: 15px; float:left;

border:1px solid #2e2e2e; /* color y grosor del borde que rodea el contenido del gadget */ background: #111; /* color de fondo del contenido del gadget*/ } .crosscol h2{ margin: 0px; padding: 0px 0px 0px; text-align:left; /* alineación del título */ height: 25px; /*altura del espacio título */ color: #ccc; /* color de fuente del título */ font-size: 18px; /*tamaño de fuente del título */ font-weight:bold; text-transform:uppercase; letter-spacing:-1px; } .crosscol .widget{ margin: 0px 2px 0px; /*separación entre los gadgets */ padding: 5px; width: 200px; /*ancho de cada gadget */ height:220px; /* alto de cada gadget */ float:left; /* flotación a la izquierda (importante)*/ border: 1px solid #2e2e2e; /*color borde de cada gadget*/ background: #212121; /* color fondo de cada gadget */ } .crosscol .widget img { margin: 0px; padding: 0px;

width: 200px; /* ancho de la imagen */ height:160px; /* alto de la imagen */ float:left; border:1px solid #2e2e2e; /* color borde de imágenes */ } .crosscol .widget img:hover{ border:1px solid #fa01e6; /* color borde en estado hover */ } .crosscol .widget-content{ margin: 0px; padding:3px 0 0; /* distancia entre el texto y la imagen */ color:#ccc; /* color de fuente del texto */ font-size: 97%; /* tamaño fuente del texto*/ text-align:justify; /* alineación del texto */ } body#layout #crosscol{ margin: 0 auto; padding: 0 0 0; width: 900px; float:left; }     El  siguiente  paso  será  editar  un  nuevo  gadget  en  el  espacio  que  habilitamos  para  el  crosscol,  escogeremos para añadir imagen.

 

 

  » Donde Título añadiremos el título de nuestro gadget.  » En Pie de foto es el sitio donde añadiremos texto o breve descripción.  » El espacio de Enlace lo utilizaremos para añadir la url del sitio donde seremos dirigidos al clicar sobre  la imagen, puede ser una entrada en concreto o cualquier sitio externo.  » El mismo proceso lo repetimos hasta añadir cuatro imágenes.  Guardamos  los  cambios  para  no  perderlos  y  esta  vez  si  vamos  a  marcar  para  expandir  la  plantilla  de  artilugios y buscamos:  <b:section class='crosscol' id='crosscol' showaddelement='yes'>    "A continuación encontraremos 4 veces el siguiente código"    <b:widget id='Image4' locked='false' title='Ejemplo 4' type='Image'>  <b:includable id='main'>  <b:if cond='data:title != &quot;&quot;'>  <h2><data:title/></h2>  </b:if>  <div class='widget-content'>  <b:if cond='data:link != &quot;&quot;'>  <a expr:href='data:link'>  <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_img&quot;' expr:src='data:sourceUrl' expr:width='data:width'/>  </a> 

<b:else/>  <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_img&quot;' expr:src='data:sourceUrl' expr:width='data:width'/>  </b:if>  <br/>  <b:if cond='data:caption != &quot;&quot;'>  <span class='caption'><data:caption/></span>  </b:if>  </div>  <b:include name='quickedit'/>  </b:includable>  </b:widget>    » Los cuatro códigos pertenecen a los cuatro gadgets añadidos, uno por cada imagen.  » En lugar de title='Ejemplo 4' pondría title='título de tu gadget'    Modificaremos cada una de esas cuatro partes de forma que eliminamos lo marcado en color rojo y  añadimos lo marcado en color verde.    <b:widget id='Image4' locked='false'title='título de tu gadget' type='Image'>  <b:includable id='main'>  <b:if cond='data:title != &quot;&quot;'>  <a expr:href='data:link'>  <h2><data:title/></h2>  </a>  </b:if>  <div class='widget‐content'>  <b:if cond='data:link != &quot;&quot;'>  <a expr:href='data:link'>  <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_img&quot;'  expr:src='data:sourceUrl' expr:width='data:width'/>  </a>  <b:else/>  <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_img&quot;'  expr:src='data:sourceUrl' expr:width='data:width'/>  </b:if>  <br/>  <b:if cond='data:caption != &quot;&quot;'>  <a expr:href='data:link'>  <span class='caption'><data:caption/></span>  </a>  </b:if> 

</div>  <b:include name='quickedit'/>  </b:includable>  </b:widget>    El resultado de seguir estos pasos podéis verlo haciendo click en la imagen.   

                                   

  1.15.

Crear ventanas PopUp 

Las ventanas PopUp son esas ventanas que se abren aparte del sitio web que estamos viendo, y si  bien tienen muy mala fama porque generalmente están llenas de publicidad que no queremos  ver y que no solicitamos, ahora puedes reivindicarlas dándoles funciones útiles como abrir un  formulario, una foto, un texto, etc. 
Primero hay que ir a Diseño > Edición de HTML y pegar antes de </head> lo siguiente:  <script language="JavaScript">  <!‐‐ script para ventanas PopUp ‐‐>    <!‐‐ Begin  function popUp(URL) {  day = new Date();  id = day.getTime();  eval("page" + id + " = window.open(URL, '" + id + "',  'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,  width=500,height=300,left = 390,top = 250');");  }  // End ‐‐>  </script> 

Puedes cambiar estos valores si quieres mostrar lo siguiente:  Toolbar (barra de herramientas)  Scrollbars (barras de desplazamiento)  Location (barra de direcciones)  Statusbar (barra de estado)  Menubar (barra de menú)  Resizable (modificar tamaño de la ventana)   Sólo cambia el 0 por un 1 si es que quieres mostrar algo de lo anterior. El tamaño de la ventana  lo puedes cambiar donde dice width (ancho) y height (alto).    Ahora en una entrada o elemento HTML/Javascript hay que poner lo siguiente:
<a href="javascript:popUp('URL del documento')">Abrir ventana PopUp</a> 

  Sólo cambia la URL del documento por la dirección donde tengas alojada la imagen, el  formulario o la página que se vaya a abrir en la ventana PopUp.  Abrir ventana PopUp      También puedes hacer que se abra mediante un botón cambiando lo anterior por eso: 
<form>  <input type=button value="Abrir ventana PopUp" onClick="javascript:popUp('URL del documento')">  </form>  Principio del formulario  O incluso con una imagen:  <a href="javascript:popUp('URL del documento')"><img src="URL de la imagen" /></a> 

    NOTA: Los ajustes para mostrar la barra de direcciones, barra de estado, etc. en muchos  exploradores no funciona así que es posible que se abra sin mostrar ninguna opción de las  anteriores. 

1.16.  

Abrir videos en ventana emergente (Popup)  

Algunas plantillas son un poco ajustadas y al poner videos estos se salen del post, y aunque  podemos editar el tamaño de la pantalla del video en ocasiones el video no se aprecia igual que  en su tamaño original, así que una buena solución para esto es abrir los videos en una ventana  emergente, o sea en una ventana PopUp.  ¿Cómo funciona? Lo que haremos será sustituir el video por una imagen que al darle click se  abra una pequeña ventana para ver el video.    Sólo usa este código dentro del post: 
<a title="Ver video" href="javascript:void(0);"  onclick="window.open('http://www.youtube.com/v/DnzuKKG6‐AA&autoplay=1', 'popup', 'left=390,  top=200, width=425, height=344, toolbar=0, resizable=1')"><img 

src="http://dl.getdropbox.com/u/647003/CiudadBlogger/Iconos/playvideoicon.gif" title="Ver video"  /></a> 

Ahora cambia la URL del video de YouTube, ten en cuenta que sólo debes cambiar la última  parte de la dirección, o sea las letras que están en rojo, de lo contrario se abrirá toda la ventana  de YouTube. Fíjate en este ejemplo: 

Este código está programado para que el video se reproduzca automáticamente al abrirse la  ventana, si deseas que se reproduzca hasta que el usuario le de click en Play entonces elimina  esta parte: &autoplay=1  Puedes cambiar la URL de la imagen por otra, yo he hecho esta y puedes usarla si gustas. Para  ver cómo queda haz click en la imagen. 

 

1.17. Mensaje tipo Post‐it para el blog 

  Para colocar un mensaje tipo Post‐it en tu blog sólo entra a Diseño > Elementos de la página >  Añadir un gadget > HTML/Javascript y pega ahí lo siguiente: 
<style>  <!‐‐  #postit{width:300px; height:100px; padding:5px; position:absolute; background‐color:yellow;  border:1px solid black; visibility:hidden; z‐index:50; cursor:hand; color: #000;} 

‐‐>  </style>    <div id="postit" style="left:200px;top:50px">  <div align="right"><b><a href="javascript:closeit()"><font face="Arial" size="1">[CERRAR]</font>  <img valign="middle" src="http://dl.getdropbox.com/u/647003/CiudadBlogger/Iconos/CloseIcon‐ small.png"/></a></b></div>    <!‐‐AQUI VA EL MENSAJE‐‐>  <br/>  Aquí va el mensaje que se mostrará cuando alguien ingrese al blog.  Para más trucos y tutoriales visita <a href="http://ciudadblogger.com">Ciudad Blogger</a>    <!‐‐FIN DEL MENSAJE‐‐>      <script>    //Post‐it only once per browser session? (0=no, 1=yes)  //Specifying 0 will cause postit to display every time page is loaded  var once_per_browser=0    ///No need to edit beyond here///    var ns4=document.layers  var ie4=document.all  var ns6=document.getElementById&&!document.all    if (ns4)  crossobj=document.layers.postit  else if (ie4||ns6)  crossobj=ns6? document.getElementById("postit") : document.all.postit      function closeit(){  if (ie4||ns6)  crossobj.style.visibility="hidden"  else if (ns4)  crossobj.visibility="hide"  }    function get_cookie4(Name) {  var search = Name + "=" 

var returnvalue = "";  if (document.cookie4.length > 0) {  offset = document.cookie4.indexOf(search)  if (offset != ‐1) { // if cookie4 exists  offset += search.length  // set index of beginning of value  end = document.cookie4.indexOf(";", offset);  // set index of end of cookie4 value  if (end == ‐1)  end = document.cookie4.length;  returnvalue=unescape(document.cookie4.substring(offset, end))  }  }  return returnvalue;  }    function showornot(){  if (get_cookie4('postdisplay')==''){  showit()  document.cookie4="postdisplay=yes"  }  }    function showit(){  if (ie4||ns6)  crossobj.style.visibility="visible"  else if (ns4)  crossobj.visibility="show"  }    if (once_per_browser)  showornot()  else  showit()      </script>    <script language="JavaScript1.2">    //drag drop function for ie4+ and NS6////  /////////////////////////////////   

function drag_drop(e){  if (ie4&&dragapproved){  crossobj.style.left=tempx+event.clientX‐offsetx  crossobj.style.top=tempy+event.clientY‐offsety  return false  }  else if (ns6&&dragapproved){  crossobj.style.left=tempx+e.clientX‐offsetx  crossobj.style.top=tempy+e.clientY‐offsety  return false  }  }    function initializedrag(e){  if (ie4&&event.srcElement.id=="postit"||ns6&&e.target.id=="postit"){  offsetx=ie4? event.clientX : e.clientX  offsety=ie4? event.clientY : e.clientY    tempx=parseInt(crossobj.style.left)  tempy=parseInt(crossobj.style.top)    dragapproved=true  document.onmousemove=drag_drop  }  }  document.onmousedown=initializedrag  document.onmouseup=new Function("dragapproved=false")    </script></div><div class="clear"/></div> 

  En la primera parte del código (la que está en color verde) puedes cambiar el color de fondo, el  color de la letra, el tamaño del cuadro, etc.  Tu mensaje debes ponerlo cambiando lo que está en color rojo, puedes usar negritas, cursiva,  links, etc.    Si quieres que el aviso aparezca sólo una vez por sesión cambia donde dice:  var once_per_browser=0    Y modifica el 0 por 1, de lo contrario el mensaje aparecerá cada vez que recargue la página o se  abra otra página dentro del mismo blog.  Así de sencillo puedes avisar a tus lectores de lo que creas importante. 

1.18.  

Traduce tu sitio web instantáneamente a otros idiomas 

Añade el traductor de sitios web de Google a tus páginas web para que los usuarios que visiten  el sitio puedan obtener una traducción automática de esas páginas de forma instantánea.  Puedes añadir el traductor de Google rápida y fácilmente mediante el siguiente procedimiento:  1. Selecciona el idioma de la página web: 2. Elige opciones adicionales:  Idiomas de traducción   Todos los idiomas  Idiomas específicos
   

español

 

3. Copia este fragmento de código y pégalo en tu página web:  <div id="google_translate_element"></div><script>  function googleTranslateElementInit() {    new google.translate.TranslateElement({      pageLanguage: 'es'    }, 'google_translate_element');  }  </script><script  src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></sc ript>             

1.19.

Como poner menú horizontal 

Una pregunta muy recurrente es cómo crear un menú horizontal en Blogger. Si bien hay varios  tipos  de  menú  que  podemos  emplear  este  me  parece  muy  sencillo  de  instalar  y  muy  vistoso  pues da un efecto de resaltado al pasar el mouse sobre el menú.    Primero entra a Diseño > Edición de HTML y pega antes de ]]></b:skin> lo siguiente:  /* Menú horizontal  ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ */  #menu ul { margin:0; list‐style:none;}  #menu li {display:inline;margin:0;padding:0;}  #menu a {  float:left;background:url(http://lh5.ggpht.com/_qgZA1ny_dAs/SlimLLGQf4I/AAAAAAAAB‐ g/YKI9AdhUdng/lefttabbed.png) no‐repeat left top;margin:0 1.5px 0 1.5px;padding:0 0 0  4px;text‐decoration:none;}  #menu a span {float:left;display:block; background:  url(http://img148.imageshack.us/img148/8764/tabbedlarge.png) no‐repeat right  top;padding:5px 12px 4px 12px;color:#fff;}  #menu a span {font: bold 12px Arial, Helvetica, sans‐serif; color:#000; float:none;}  #menu a:hover span {color:#fff;}  #menu a:hover {background‐position:0% ‐27px;}  #menu a:hover span {background‐position:100% ‐27px;}  .clear {clear:left}  /* Fin del menú */    Ahora busca esta etiqueta:  <div id='content‐wrapper'>    Y pega debajo de ella esto: 

<!‐‐ Menú horizontal ‐‐>  <div id='menu'>  <ul>  <li><a href='URL del enlace'><span>Título 1</span></a></li>  <li><a href='URL del enlace'><span>Título 2</span></a></li>  <li><a href='URL del enlace'><span>Título 3</span></a></li>  <li><a href='URL del enlace'><span>Título 4</span></a></li>  </ul>  </div>    Sólo debes cambiar los datos que están en rojo por los tuyos. Puedes agregar las pestañas que  quieras, sólo añádelas antes de </ul>.  Las  pestañas  que  he  hecho  son  de  color  gris,  si  no  te  gustan  puedes  quitar  las  dos  URL  que  están  dentro  de  #menu  a  y  #menu  a  span  y  usar  el  color  de  fondo  que  quieras.  El color y tamaño de la letra lo puedes cambiar dentro de #menu a span {font:  Este menú quedará debajo de la cabecera, si quieres moverlo a otro lugar entonces sólo pega el  último  código  en  un  elemento  HTML/Javascript  y  arrástralo  donde  mejor  te  apetezca.  Para  ver  el  ejemplo  funcionando  haz  click  aquí.  Para  obtener  botones  de  otros  colores  visita  este post.    En  otro  post  expliqué  cómo  poner  un  menú  horizontal  en  el  blog.  Vi  en  varios  blogs  que  lo  implementaron pero el color gris del menú no combina con la plantilla de su blog. Así que hice  más botones de distintos colores para que tengan más variedad en el diseño.   Todos tienen el mismo efecto que cambia de color al pasar el mouse sobre él. Las indicaciones  son las mismas del post anterior, sólo hay que cambiar el código que va antes de ]]></b:skin>  por uno de los siguientes, dependiendo del que más les guste:        /* Menú horizontal  ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ */  #menu ul { margin:0; list‐style:none;} 

#menu li {display:inline;margin:0;padding:0;}  #menu a {  float:left;background:url(http://lh3.ggpht.com/_dsEG33PDaHw/Sk0PpgVjCmI/AAAAAAAAABo/ 1ngE9K8oKUM/s128/lefttabbed‐blue.PNG) no‐repeat left top;margin:0 1.5px 0 1.5px;padding:0  0 0 7px;text‐decoration:none;}  #menu a span {float:left;display:block; background:  url(http://img514.imageshack.us/img514/9711/tabbedblue.png) no‐repeat right  top;padding:5px 12px 4px 12px;color:#fff;}  #menu a span {font: bold 12px Arial, Helvetica, sans‐serif; color:#000; float:none;}  #menu a:hover span {color:#fff;}  #menu a:hover {background‐position:0% ‐27px;}  #menu a:hover span {background‐position:100% ‐27px;}  .clear {clear:left}  /* Fin del menú */      /* Menú horizontal  ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ */  #menu ul { margin:0; list‐style:none;}  #menu li {display:inline;margin:0;padding:0;}  #menu a {  float:left;background:url(http://lh5.ggpht.com/_dsEG33PDaHw/Sk0Ppu0JhrI/AAAAAAAAABs/t0 vZPWdFl38/s128/lefttabbed‐green.PNG) no‐repeat left top;margin:0 1.5px 0 1.5px;padding:0 0  0 7px;text‐decoration:none;}  #menu a span {float:left;display:block; background:  url(http://img27.imageshack.us/img27/945/tabbedgreen.png) no‐repeat right top;padding:5px  12px 4px 12px;color:#fff;}  #menu a span {font: bold 12px Arial, Helvetica, sans‐serif; color:#000; float:none;}  #menu a:hover span {color:#fff;}  #menu a:hover {background‐position:0% ‐27px;}  #menu a:hover span {background‐position:100% ‐27px;}  .clear {clear:left}  /* Fin del menú */ 

    /* Menú horizontal  ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ */  #menu ul { margin:0; list‐style:none;}  #menu li {display:inline;margin:0;padding:0;}  #menu a {  float:left;background:url(http://lh4.ggpht.com/_dsEG33PDaHw/Sk0PpoN4alI/AAAAAAAAABw/8 ednVAn295Q/s128/lefttabbed‐purple.PNG) no‐repeat left top;margin:0 1.5px 0 1.5px;padding:0  0 0 7px;text‐decoration:none;}  #menu a span {float:left;display:block; background:  url(http://img514.imageshack.us/img514/7015/tabbedpurple.png) no‐repeat right  top;padding:5px 12px 4px 12px;color:#fff;}  #menu a span {font: bold 12px Arial, Helvetica, sans‐serif; color:#000; float:none;}  #menu a:hover span {color:#fff;}  #menu a:hover {background‐position:0% ‐27px;}  #menu a:hover span {background‐position:100% ‐27px;}  .clear {clear:left}  /* Fin del menú */      /* Menú horizontal  ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ */  #menu ul { margin:0; list‐style:none;}  #menu li {display:inline;margin:0;padding:0;}  #menu a {  float:left;background:url(http://lh3.ggpht.com/_dsEG33PDaHw/Sk0Pps0fcVI/AAAAAAAAAB0/H N5FX_MoRMU/s128/lefttabbed‐red.PNG) no‐repeat left top;margin:0 1.5px 0 1.5px;padding:0  0 0 7px;text‐decoration:none;}  #menu a span {float:left;display:block; background:  url(http://img27.imageshack.us/img27/9168/tabbedred.png) no‐repeat right top;padding:5px  12px 4px 12px;color:#fff;}  #menu a span {font: bold 12px Arial, Helvetica, sans‐serif; color:#000; float:none;} 

#menu a:hover span {color:#fff;}  #menu a:hover {background‐position:0% ‐27px;}  #menu a:hover span {background‐position:100% ‐27px;}  .clear {clear:left}  /* Fin del menú */      /* Menú horizontal  ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ */  #menu ul { margin:0; list‐style:none;}  #menu li {display:inline;margin:0;padding:0;}  #menu a {  float:left;background:url(http://lh5.ggpht.com/_dsEG33PDaHw/Sk0PpvhhHeI/AAAAAAAAAB4/‐ BK98lkjqZs/s128/lefttabbed‐yellow.PNG) no‐repeat left top;margin:0 1.5px 0 1.5px;padding:0 0  0 7px;text‐decoration:none;}  #menu a span {float:left;display:block; background:  url(http://img34.imageshack.us/img34/5144/tabbedyellow.png) no‐repeat right  top;padding:5px 12px 4px 12px;color:#fff;}  #menu a span {font: bold 12px Arial, Helvetica, sans‐serif; color:#000; float:none;}  #menu a:hover span {color:#fff;}  #menu a:hover {background‐position:0% ‐27px;}  #menu a:hover span {background‐position:100% ‐27px;}  .clear {clear:left}  /* Fin del menú */ 
 

1.20. Si quieres añadir este menú para tu blog de blogger como  este debemos hacer lo siguiente:   
    1) Vamos a Diseño  2) Elementos de página  3) Añadir un gadget  4) HTML/Javascript 

5) Pegamos el siguiente código:    <style>#MainMenu  {  height:27px;  background: #FFFFFF;  margin:0;  border‐style: solid;  border‐color:#9AB6D2;  border‐top‐width:0;  border‐right‐width:0;  border‐bottom‐width:3px;  border‐left‐width:0;  }  #tab  {  margin:0;  top:0;  }  #tab ul  {  margin:0;  padding:0;  list‐style:none;  float:left;  }  #tab li  {  display:inline;  float:left;  margin:0 1px 0 0 ;  padding:0;  }  #tab a  {  background: url("http://img222.imageshack.us/img222/461/bright115ow7.gif") no‐repeat right  top;  margin:0; 

padding:0;  text‐decoration:none;  border:0;  display:block;  float:left;  }  #tab a span  {  display:block;  background:url("http://img233.imageshack.us/img233/1986/bleft115rc5.gif") no‐repeat left  top;  padding:0 22px 0 22px;  font‐family:Arial, Helvetica, sans‐serif;  font‐size:11;  color:#FFFFFF;  font‐weight:bold;  line‐height:27px;  }  #tab a:hover,#tab li.item_active a  {  background‐position:right bottom;  border‐color:;  }  #tab a:hover span,#tab li.item_active a span  {  background‐position:left bottom;  color:#016599;  font‐weight:bold;  font‐style:normal;  text‐decoration:none;  }  .dropmenudiv  {  position:absolute;  top:0;  float:left;  display:block;  visibility:hidden; 

border‐style: solid;  border‐color:#9AB6D2;  border‐top‐width:0;  border‐right‐width:0;  border‐bottom‐width:3px;  border‐left‐width:0;  background: #FFFFFF;  color:#FFFFFF;  z‐index:100;  text‐decoration:none;  padding:0;  }  .dropmenudiv ul  {  margin:0;  padding:0;  list‐style:none;  }  .dropmenudiv li  {  display:inline;  margin:0;  padding:0;  }  .dropmenudiv a:link, .dropmenudiv a:visited  {  width:180px;  margin:0 1px 0 0 ;  padding:0;  display:block;  border:0 solid ;  color:#FFFFFF;  background:url("http://img233.imageshack.us/img233/1986/bleft115rc5.gif") no‐repeat left  top;  font‐weight:bold;  font‐style:normal;  text‐decoration:none;  } 

.dropmenudiv a span  {  float:left;  display:block;  line‐height:27px;  background:url("http://img222.imageshack.us/img222/461/bright115ow7.gif") no‐repeat right  top;  padding:0 22px 0 22px;  font‐family:Arial, Helvetica, sans‐serif;  font‐size:11;  color:#FFFFFF;  }  .dropmenudiv a span  {  float:none;  }  .dropmenudiv a:hover  {  border:0 solid ;  background‐position:left bottom;  font‐weight:bold;  font‐style:normal;  text‐decoration:none;  color:#016599;  }  .dropmenudiv a:hover span  {  background‐position:right bottom;  color:#016599;  font‐weight:bold;  }    </style>  <div id="MainMenu">  <div id="tab">  <ul>  <li class="item_active"><a  href="http://www.URLDETUBLOG.com"><span>CONTACTO</span></a></li> 

</ul>  </div>  </div>        Si queremos añadir otra pestaña como la de CONTACTO como por ejemplo Quiénes somos,  después del código de color verde tendríamos que pegar lo siguiente:  <li class="item_active"><a href="http://www.URLDETUBLOG.com"><span>Quiénes  somos</span></a></li> 

  1.21. Si  te  gustan  lo  menús  verticales,  elegantes,  con  tonos  grises y efectos al pasar el ratón, el menú Grey drop quizás te  interese... 

DEMO    Es muy sencillo de instalar, simplemente debes seguir atentamente los pasos :‐D      Diseño>Edición HTML>expandimos artilugios      Busca la etiqueta ]]></b:skin> y encima pégale este código:  /* ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐Greydrop‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ */   

#Greydrop a, #Greydrop a:visited {  text‐align:center;  position:relative;  text‐decoration:none;  display:block;  background:transparent url(http://i88.servimg.com/u/f88/12/78/97/76/grey_110.gif)  repeat‐x scroll 0 0;  color:#ffffff;  font‐weight: bold;  width:10em;  font‐family:'Trebuchet MS',Trebuchet,Helvetica,Arial,Verdana,Sans‐Serif;  border:2px solid #fff;  border‐color: #cccccc #7d7d7d #7d7d7d #cccccc;  padding:0.25em;  margin:0.5em auto;  }    #Greydrop a:hover {  top:1px;  border‐color: #cccccc #7d7d7d #7d7d7d #cccccc;  font‐family:'Trebuchet MS',Trebuchet,Helvetica,Arial,Verdana,Sans‐Serif;  Font‐weight: bold;  color:#ffffff;  background:transparent url(http://i88.servimg.com/u/f88/12/78/97/76/grey_210.png)  repeat‐x scroll 0 0;  }    /* Final‐Greydrop‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ */  Guarda cambios.    Diseño>Elementos de página>Añadir gadget (elemento de página)>html‐javascript    Pega este código:  <div id="Greydrop">  <a href="URL DEL ENLACE">TITULO</a>  <a href="URL DEL ENLACE">TITULO</a>  <a href="URL DEL ENLACE">TITULO</a>  <a href="URL DEL ENLACE">TITULO</a> 

<a href="URL DEL ENLACE">TITULO</a>  </div>  Sustituye URL DEL ENLACE por la dirección (URL) del enlace del blog o web, por ejemplo:  http://google.es    Sustituye TITULO por el título de tu enlace, por ejemplo: Google    Si necesitas más pestañas para colocar más enlaces simplemente debes añadir más líneas  como esta:  <a href="URL DEL ENLACE">TITULO</a>  Si por el contrario, quieres menos enlaces, solo tienes que borrar alguna línea.    Ten en cuenta que no importa dónde pongas la nueva línea pero siempre debe quedar  antes del cierre </div>  En el balcón de Jaime he descubierto este magnífico menú para blogger. Se trata de otro  magnífico menú para tu blogspot para que puedas crear un orden en tu blog para colocar  las entradas que consideres más importantes o para crear una ruta de navegación para tus  lectores.  

¿Quieres ver este menú en movimiento? ¡Clic aquí!      Para poner este menú en tu blog sigue los siguientes pasos:    1) Vamos a Diseño  2) Edición de HTML  3) Busca ]]></b:skin> (teclea Ctrl + F para buscar más rápido)  4) Justo arriba de ]]></b:skin> pega el siguiente código:     

Código a copiar/pegar/* Menu Green Bubble  ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ */  #Greenbubble {  padding:0;  width:150px;  margin:10px 0 0 10px;  }    #Greenbubble ul {  float:right;  margin:0;  padding:0;  list‐style‐image:none;  list‐style‐position:outside;  list‐style‐type:none;  }  #Greenbubble li a {  display:block;  margin:0 0 10px;  background:transparent  url(http://1.bp.blogspot.com/_blABMJBbYJs/Sz0Cvn1zuVI/AAAAAAAAHp8/ySCdum92lkI /S1600‐R/greenbubble.png) no‐repeat scroll 0 0;  background‐position: ‐22;  color: #ffffff;  font‐family: Tahoma;  font‐size: 13px;  height: 21px;  padding: 2px 0 0 30px;  width: 122px;  }  #Greenbubble li a:hover {  color:#FFFFFF;  font‐family: Tahoma;  font‐size: 13px;  height: 21px;  text‐decoration:none;  background‐position: 0px ‐23px;  }    /* Fin menu Green Bubble 

‐‐‐‐‐‐‐‐‐‐‐ */    5) Clica en vista previa y si no hay ningún problema, guarda tu plantilla.   6) Ahora ves a Diseño‐>Elementos de página‐>Añadir un gadget‐>HTML/Javsscript. En él  pega el siguiente código:    <div id="Greenbubble">  <ul>  <li><a href="URL DE LA PAGINA" >TITULO</a></li>  <li><a href="URL DE LA PAGINA" >TITULO</a></li>  <li><a href="URL DE LA PAGINA" >TITULO</a></li>  <li><a href="URL DE LA PAGINA" >TITULO</a></li>  </ul>  </div>      Sustituye URL DE LA PAGINA por la URL correspondiente de la página o entrada que  quieras enlazar. Después en TITULO pon el nombre que desees dar a ese enlace.     Para añadir más enlaces, fíjate en la estructura y añade esta línea:  <li><a href="URL DE LA PAGINA" >TITULO</a></li>    1.22.  Menu Flotante 

Este menú es verdaderamente cómodo y su instalación no es muy complicada.  Se trata de una barra de navegación con un buscador incluido que permanece fija en la  parte inferior del blog.          >DEMO  Diseño>edición HTML>expandimos artilugios   

Busca la etiqueta ]]></b:skin> y encima pega estos bloques de CSS que darán estilo al  menú:    /*‐‐ Comienzo menu flotante ‐‐*/  #menuflotante {  float:left;  width: 1256px;  padding: 3px;  background:transparent  url(http://1.bp.blogspot.com/_blABMJBbYJs/SqMHAWryvrI/AAAAAAAAGsY/BTtJWVael5E /S1600‐R/0.jpg) repeat‐x scroll left top;  position:fixed;bottom:0px;  height:23px;  }    #menuflotante li {  float:left;  display:block;  background:url(http://4.bp.blogspot.com/_blABMJBbYJs/SqMGKDpipBI/AAAAAAAAGsQ/ p_k2IAgRcy4/S1600‐R/3.jpg) no‐repeat right 8px;  padding:2px 20px 0;  }    #menuflotante ul {  margin:0;  padding:0;  line‐height:normal;  list‐style:none;  }    #menuflotante a:hover {  padding‐top: 2px;  color: #009999;  }    #menuflotante a {  display:block;  float:left;  text‐decoration:none; 

font:12px Arial;  color:#FFFFFF;  }    #menuflotante .current_page_item {  margin:0;  color:#FFFFFF;  }    #search‐box {  height: 17px;  width: 214px;  background:transparent;  color: #009999;  border: 2px groove #cccccc;  }    #search‐btn{  background: transparent;  border: 1px groove #cccccc;  color: #ffffff;  }    #search‐btn:hover{  background: #009999;  }    #search‐btn:active{  background: #006b6b;  }    /*‐‐ Fin menu flotante ‐‐*/  Ahora localiza la etiqueta <body> y justo encima pega estas líneas:  <!‐‐ Comienzo menu flotante ‐‐>  <div id='menuflotante'>  <ul><li class='current'><a expr:href='data:blog.homepageUrl'>Inicio</a></li>  <li><a href='URL DE TU PAGINA'>TITULO</a></li>  <li><a href='URL DE TU PAGINA'>TITULO</a></li> 

<li><a href='URL DE TU PAGINA'>TITULO</a></li>  </ul>  <div class='buscadormenu'><form action='/search' id='searchthis' method='get'  style='display:inline;'><input id='search‐box' name='q' title='Escribe aquí tu consulta'  type='text'/>  <input id='search‐btn' type='submit' value='Buscar'/></form></div>  </div>  <!‐‐ Fin menu flotante ‐‐>  Sustituye:    URL DE TU PAGINA: por la dirección de tu web o blog.    TITULO: por el título de tu web o blog.    Haz vista previa para comprobar que todo va bien y guarda cambios para terminar.  1.23. Menú vertical  Gracias a César he descubierto este otro menú vertical para blogger que aunque se  parece al que ya os expliqué anteriormente se convierte en otra muy buena opción para tu  blog.   

    Para instalar este menú debes hacer lo siguiente:    1) Vamos a Diseño  2) Edición de HTML  3) Busca ]]></b:skin> (teclea Ctrl + F para buscar más rápido)  4) Justo arriba de ]]></b:skin> pega el siguiente código:    /* Menu nav  ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ */    #nav,#nav li { 

margin: 0;  padding: 0;  list‐style: none;  }    #nav a {  width: 140px;  height: 27px;  background: url(http://img46.imageshack.us/img46/2955/menunav.gif) no‐repeat;   color: #666;  display: block;  font: bold 12px/22px Arial, sans‐serif;  text‐decoration: none;  text‐indent: 14px;  }    #nav a:hover {  background‐position: 0 ‐27px;  color: #900;  text‐decoration: none;  }    Código a copiar/pegar      5) Clica en vista previa y si no hay ningún problema, guarda tu plantilla.   6) Ahora ves a Diseño‐>Elementos de página‐>Añadir un gadget‐>HTML/Javsscript. En él  pega el siguiente código:    <ul id="nav">  <li><a href="#">Título</a></li>  <li><a href="#">Título</a></li>  <li><a href="#">Título</a></li>  <li><a href="#">Título</a></li>  <li><a href="#">Título</a></li>  </ul>    Código a copiar/pegar     

Sustituye cada # por el enlace de la entrada que quieras enlazar en este menú.     Si deseas añadir o eliminar enlaces en el menú, fíjate en la estructura. Elimina o añade esta  línea:    <li><a href="#">Título</a></li>    ¿Qué modificaciones puedes hacer? Pues poca cosa, a menos que decidas cambiar la imagen  de fondo (http://img46.imageshack.us/img46/2955/menunav.gif) por otra que hagas.  Debes tener en cuenta que si empleas otra imagen deberás adaptar el tamaño width  (ancho) y height (alto).  Aquí os presentamos un menú muy sencillo y útil que puedes poner en tu blog fácilmente.    

    Puedes ver un ejemplo del menú en funcionamiento aquí.  

Sólamente añadimos un nuevo Elemento HTML ↑ encima de la zona de entradas  (preferiblemente) y en él ponemos el siguiente código:  <div id="menuarriba">      <ul id="navi1">       <li><a href="#">Inicio</a></li>      <li><a href="#">Acerca de</a></li>      <li><a href="#">Enlazar</a></li>      <li><a href="#">Contacto</a></li>  </ul>  </div>    <style type="text/css">  #navi1 { 

 

    margin:0px;      padding:0px;    }  #navi1 li {  ‐moz‐border‐radius‐topleft:15px;  ‐moz‐border‐radius‐topright:15px;  ‐moz‐border‐radius‐bottomleft:0px;  ‐moz‐border‐radius‐bottomright:0px;  ‐webkit‐border‐top‐left‐radius:15px;  ‐webkit‐border‐top‐right‐radius:15px;  ‐webkit‐border‐bottom‐left‐radius:0px;  ‐webkit‐border‐bottom‐right‐radius:0px;  background:url(http://i825.photobucket.com/albums/zz180/latrucoteca/Degradad omini‐1.png);          color:#000000;          margin:5px;          padding:3px;          width: 100px;          border:1px solid black;          text‐align:center;          list‐style:none;          font‐family: Segoe UI, Arial;          font‐size: 14px;         float:left;      }  #navi1 li:hover {  ‐moz‐border‐radius‐topleft:20px;  ‐moz‐border‐radius‐topright:20px;  ‐moz‐border‐radius‐bottomleft:0px;  ‐moz‐border‐radius‐bottomright:0px;  ‐webkit‐border‐top‐left‐radius:20px;  ‐webkit‐border‐top‐right‐radius:20px;  ‐webkit‐border‐bottom‐left‐radius:0px;  ‐webkit‐border‐bottom‐right‐radius:0px;  background:url(http://i825.photobucket.com/albums/zz180/latrucoteca/Degradad omini‐1.png);          color:#000000;          border:1px solid black;  } 

#navi1 li a:hover {          color: #ffffff;          font‐style: Italic;          text‐decoration: none;   }   #navi1 a {           color: #ffffff;           font‐weight: bold;   }  </style>  Tras Guardar, debes modificar la siguiente parte:    <li><a href="#">Inicio</a></li>      <li><a href="#">Acerca de</a></li>      <li><a href="#">Enlazar</a></li>      <li><a href="#">Contacto</a></li>  Las palabras en rojo, por el título que desees que salga, y el asterisco, por la URL de la  página o sección a la que quieres enlazar.  También puedes agregar una línea más después de los que ya hay presentes, es decir, un  botón más en el menú:  <li><a href="#">Otro título más</a></li>  Y así ya podrás disponer de un sencillo pero atractivo menú para organizar más a fondo tu  blog.  Notas:    · En Mozilla Firefox, Safari y Google Chrome, el menú tiene la propiedad de estar  redondeado, pero en Internet Explorer, desafortunadamente no, aunque no queda menos  elegante.  · Si algún título demasiado largo no encaja bien, prueba a eliminar width: 100px; , o a poner  un numero mayor.             

                         

1.24.  

Convertir etiquetas en botones  

Con  CSS  y  algo  de  imaginación,  se  pueden  generar  bastantes  efectos  quasi‐profesionales.  En  este caso vamos a convertir la lista simple de categorías que nos proporciona Blogger, en unos  botones que nos llevan a los posts de cada etiqueta.   

En primer lugar, accedemos por Elementos de Página y añadimos un Nuevo Elemento, tipo  Etiquetas. No importa si ya tenemos otro. Podemos probar como queda este, manipularlo y  luego borrar este o el anterior que tuviéramos. Lo mejor es ponerle un título que no tengamos,  para localizar mejor el código HTML que se generará en nuestra plantilla y que tendremos que  modificar después. Pongamos que le llamamos "pruebabotones".   Ahora nos vamos a Diseño, Edición de HTML y expandimos Plantillas de Artilugios. En cualquier 

lugar, antes de ]]></b:skin>, insertamos la siguiente clase, que será la que le de aspecto de  botonera a las etiquetas.
<b:widget id='Label4' locked='false' title='pruebabotones' type='Label'>  <b:includable id='main'>  <b:if cond='data:title'>  <h2><data:title/></h2>  </b:if>  <div class='widget‐content' id='botlista'>  <!‐‐ <ul> BORRAR ‐‐>  <b:loop values='data:labels' var='label'>  <!‐‐ <li> BORRAR ‐‐>  <b:if cond='data:blog.url == data:label.url'>  <span expr:dir='data:blog.languageDirection'><data:label.name/></span>  <b:else/>  <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/>  (<data:label.count/>)</a>  </b:if>  <!‐‐ <span dir='ltr'>(<data:label.count/>)</span> BORRAR ‐‐>  <!‐‐ </li> BORRAR ‐‐>  </b:loop>  <!‐‐ </ul> BORRAR ‐‐>    <b:include name='quickedit'/>  </div>  </b:includable>  </b:widget>   

Hay que eliminar todas las líneas en gris, marcadas con comentarios BORRAR y añadir las  instrucciones en verde: id='botlist' y (<data:label.count/>). Con eso, teneis funcionando  vuestras etiquetas.    Si quereis que no aparezca entre parentesis el número de post de cada categoría, teneis que  borrar el segundo de los indicados en el anterior párrafo (data:label.count).    Una vez comprobeis que funciona, ya podeis cambiar colores, bordes, fondos, posiciones.  Sustituir background‐color:#990000; por background:url (URL_imagenfondo); da unos  resultados espectaculares.   

1.25.
 

Menús desplegables 
Para aprovechar espacio Los menús desplegables tienen la ventaja de ocupar  muy poco espacio y esto puede generar más espacio para otros gadgets.  Crearlo es muy sencillo, sólo hay que abrir un elemento HTML/Javascript y  ahí pegar el código.  Conviene que lo copies primero en un bloc de notas y lo edites, colocando la  URL y los nombres que correspondan a tus enlaces.Una vez listo, lo guardas  en el blog.  Cada vez que quieras agregar una nueva página simplemente agregas otra  línea de URL y Nombre, cuidando de cerrar bien el código. 

  <select onchange="if(options[selectedIndex].value){location = options[selectedIndex].value}"  class="desplegable" name="menu" size="1"><option selected/>Seleccionar...<option value=""/>‐ ‐ ‐ ‐  ‐ ‐ ‐ ‐ ‐ ‐  <option value="URL de la página"/>Título del menú  <option value="URL de la página"/>Título del menú  <option value="URL de la página"/>Título del menú  <option value="URL de la página"/>Título del menú  <option value="URL de la página"/>Título del menú</select> 

  Reemplaza la URL de la página que quieras enlazar (o las propias etiquetas de tu blog) y coloca  los nombres.  Quedaría así:                                             
Seleccionar...

 

Si quieres colocarle colores de fondo deberás abrir tu plantilla HTML , buscar esta partecita  ]]></b:skin> y justito antes pegar este complemento, en donde puedes elegir color de letras y  color de fondo (background‐color) para que combine con tu página. Te dejo una página con  Tabla de colores para que elijas el que mejor se adapte. Tabla de colores acá.  Complemento para color de letras y fondo del menú:  .desplegable {background‐color: #ccc;color: #000;}     Puedes ver este menú en el sector derecho ‐ abajo, en mi blog personal. 

1.26. Como poner emoticonos en comentarios de blogger

Aquí les traigo un script que permite introducir emoticonos en los comentarios de blogger. Antes de nada quiero comentaros que para que el script funcione correctamente, deberemos tener los comentarios incrustados en el post.

¿Cómo funciona?

Se trata de un script que recibe todo el texto de nuestro comentario, busca una serie de caracteres y lo sustituye por la imágen que está asignada. También añadiremos una leyenda en la parte superior justo antes de la caja donde escribiremos el comentario, para que nuestros visitantes sepan en todo momento coo poner el emoticon que deseen.

¿Cómo añadirlo en nuestro blog?

Lo primero que debemos hacer es añadir justo antes de la etiqueta

</body> el siguiente código:

<b:if cond='data:blog.pageType == "item"'> <script src='http://agudovk.googlepages.com/Emoticonos.js' type='text/javascript'/> <script type='text/javascript'> emoticonComentario(); </script> </b:if>

De está manera hemos añadimos el script que sustituira los caracteres por emoticonos. El siguiente paso será colocar la leyenda, para ello buscamos la etiqueta

<iframe allowtransparency='true' y justo encima pegamos el siguiente código html:

<table width='400px'>  <tr>  <td colspan='10'>Emoticonos en blogger</td>  <td colspan='3'><a href='http://ayudaparamiweb.com'><img  src='http://agudovk.googlepages.com/ayudaweb.png' style='border:0;'/></a></td>  </tr>  <tr>  <td><img src='http://agudovk.googlepages.com/com‐smile.gif'/></td>  <td><img src='http://agudovk.googlepages.com/com‐cry.gif'/></td>  <td><img src='http://agudovk.googlepages.com/com‐sad.gif'/></td>  <td><img src='http://agudovk.googlepages.com/com‐tongue.gif'/></td>  <td><img src='http://agudovk.googlepages.com/com‐lol.gif'/></td>  <td><img src='http://agudovk.googlepages.com/com‐oops.gif'/></td>  <td><img src='http://agudovk.googlepages.com/com‐blink.gif'/></td>  <td><img src='http://agudovk.googlepages.com/com‐neutral.gif'/></td>  <td><img src='http://agudovk.googlepages.com/com‐secreto.gif'/></td> 

<td><img src='http://agudovk.googlepages.com/com‐sorpresa1.gif'/></td>  <td><img src='http://agudovk.googlepages.com/com‐sorpresa2.gif'/></td>  <td><img src='http://agudovk.googlepages.com/com‐mad.gif'/></td>  <td><img src='http://agudovk.googlepages.com/com‐confuso.gif'/></td>  </tr>  <tr>  <td>:)</td>  <td>:'(</td>  <td>:(</td>  <td>:P</td>  <td>:D</td>  <td>:$</td>  <td>;)</td>  <td>:‐I</td>  <td>:‐X</td>  <td>:o</td>  <td>:O</td>  <td>O</td>  <td>:/</td>  </tr>  </table>

Pues ya está, a partir de ahora vuestros comentarios disfrutarán de graciosos emoticonos que animarán un poco más vuestro blog.                           

2. EDICION DE ENTRADAS  o POST  DEL BLOG 
 

2.1.
 

Cómo dejar una entrada siempre arriba del blog? 

A veces queremos darle al blog una apariencia de página web por lo que muchos desean tener  un post inicial de bienvenida o explicativo el cual quieren que siempre esté arriba de todos los  posts.  Como sabemos, Blogger ordena los posts por orden de fecha, del más reciente al más antiguo,  por lo que siempre que escribamos un nuevo post éste ocupará la primera posición, es decir,  estará hasta arriba de todos los posts, así que cada vez que escribamos un post nuevo se va  hasta arriba de todas las entradas.  ¿Entonces cómo hacer para dejar un post específico siempre hasta arriba?  Simple, usaremos la misma técnica que usamos para cambiar el orden de entradas, sólo que  nos adelantaremos en el tiempo.  Primero redacta tu entrada que quieres dejar hasta arriba del blog.  Cuando hayas terminado publícala como lo harías normalmente.  Ahora haz click en Editar entrada y abajo del editor de entradas, junto al espacio para agregar  las etiquetas haz click en Opciones de entrada.  Ahora en Fecha y hora de la entrada cambia el año de la fecha por el año 2025, por ejemplo, si  la entrada la publicaste el día 24/09/09 cámbiala por 24/09/25   

  Listo, de estar forma esa entrada estará siempre hasta arriba de las demás entradas (hasta el  año 2025), así aunque publiques una nueva entrada ese post estará siempre arriba, no se  moverá, a menos claro, que publiques un post con una fecha más adelantada. Cuando llegue el  año 2025 sólo cámbiala de nuevo por el año 2050. 
 

Ojo, recuerda que primero debes publicar la entrada con la fecha normal, de lo contrario la estarías  programando para que se publique el año 2025   

2.1.  

Dos columnas en las entradas de tu blog  

Presento una forma sencilla de copia y pega para organizar el texto de las entradas de vuestro  blog en dos columnas una a la izquierda y otra a la derecha. Lo he probado en blogger pero es  posible que funcione en otras plataformas de blogs. Cortesia de Webmasters Deluxe.   Solo tienes que copiar el código y pegarlo en la vista HTML de tu editor de entradas y sustituir  el texto que está entre las etiquetas por el contenido de cada una de las columnas. Sirve  tambien para organizar otros contenidos como imagenes o listas de enlaces. En este caso la  medida de las columnas está al 45%, pero esa cifra se puede variar por ejemplo una al 30% y  otra al 60% por ejemplo como veremos. Si sabes algo de CSS puedes modificar otros  parametros para personalizar las columnas a tu gusto o de una manera que se integre con el  diseño o los colores de tu blog:  
<div style="float: left; WIDTH: 45%">Este es el Texto de la Columna de la Izquierda</div> <div  style="float: right; WIDTH: 45%">Este es el Texto de la Columna de la  Derecha</div><divstyle="clear:></div> 

 
 

2.2.

Entradas con imagen de fondo

http://ciudadblogger.com/2009/04/entradas-con-imagen-de-fondo.html

Podemos darle un estilo muy personalizado a nuestras entradas con una imagen de fondo  como esta que estoy publicando. Para tener este efecto en el texto de nuestras entradas sólo  usamos el siguiente código dentro del post:    <table bordercolor="#000000" cellspacing="5"  cellpadding="5" width="100%"  background="http://URL de la imagen de  fondo" border="0"><tbody><tr><td><p>Aquí  va el texto de la entrada. Si desean agregar una  imagen encima de la imagen de fondo sólo  agregan la siguiente etiqueta y dentro de ella  la URL de la imagen. <img style="float:right;  margin:5px 5px 5px 5px;cursor:pointer;  cursor:hand;width: 200px; height: 183px;" src="http://URL de la segunda imagen" border="0"  alt="" /> y aquí continua el texto de la entrada.</p></td></tr></tbody></table> 

  Ahí pueden ver dónde deben escribir el texto de la entrada, y en caso de que deseen usar una  foto encima de la imagen de fondo sólo agregan la etiqueta correspondiente como se explica  en el código. Si no desean una imagen encima entonces eliminan esa etiqueta.  En bordercolor pueden modificar el ancho del borde de la imagen, sino desean que tenga el  borde lo dejan en cero como está.  El margen entre la imagen y el texto lo pueden modificar en cellspacing y cellpadding.  La posición de la segunda foto pueden cambiarla en float; cambian right si la desean a la  derecha; left, a la izquierda o center si la quieren centrada.  El tamaño de la segunda imagen lo modifican con width (ancho) y height (alto).  Les recomiendo que usen una imagen de fondo que no dificulte la lectura de la entrada. De  igual modo elijan una imagen que sea del tamaño adecuado al tamaño del post, ya que una  foto muy chica se repetirá muchas veces hasta ocupar el espacio.  Que se diviertan personalizando sus posts 

 

2.3.

Como cambiar el fondo a todas las entradas del blog 

Para que puedas poner un fondo especial a todos tus blogs, haz lo siguiente: 1. Agrega una entrada 2. Haz click en el boton <HTML> y pon este codigo:
<pre></table></table><table background="AQUI VA LA URL DE TU IMAGEN"><tr><td><div><table style="display: auto"></pre>

 

2.4.

Cambiar el color de fondo de un post o entrada  

En un foro me pareció encontrar de casualidad la pregunta de cómo cambiar el color de fondo  de un post o entrada en una plantilla de blogger. Trataré de explicarlo aquí resumidamente.    Debes ir a la Opción "Plantilla", luego a "Editar en HTML" y ahí tendrás que definir una variable  como lo defino a continuación(al inicio de Variable Name, omito el signo "<" sólo por  problemas a la hora de publicar el post): 

/* Variable definitions ==================== Variable name="bgcolor" description="Page Background Color" type="color" default="#fff" value="#e6e6e6"> Variable name="bgcolorpost" description="Ppst Background Color" type="color" default="#000" value="#ffffff (puedes poner el valor del color que desees)"> Y luego en la sección de "Posts" llamamos a esta variable definida como sigue: /* Posts ----------------------------------------------h2.date-header { margin:1.5em 1.5em .5em; } .post { background:$bgcolorpost; margin:.5em 0 1.5em; border-bottom:1px dotted $bordercolor; padding-bottom:1.5em; padding-top:0.5em; border:1px solid $bordercolor; } Y listo, así de sencillo. Incluso con tu variable ya definida, podrás cambiar fácilmente el color del fondo del post desde "Plantilla" >> "Fuentes y colores"

2.5.

Cambiar color fondo del post

  Cambiar color fondo del post; de esto trata este truco y nada  más sencillo que en Edición Html incluir el código que os  facilito a continuación;  Una vez insertado os dirigiis a redactar el post , pinchais dos 

veces para seleccionar le fondo y ya podéis redactar vuestro  post.  Con este método podreis ir variando el fondo de vuestros  posts sin necesidad de tocar la plantilla.  Deberéis tener en cuenta que para poder modificar el color  debereis cambiar el código en td bgcolor="#CC0000"  cambiando el valor alfanúmerico por el que hayais  seleccionado, pòdeis conseguir estos códigos aqui 

<table  width="486"  border="0">  <tr>      <td  bgcolor="#CC0000">Aquí  el  texto  que  vayais  a  introducir  </td>   </tr></table>         

  2.6.   Insertar tablas en entradas 

El código básico para insertar una tabla es el siguiente: <table border="1" cellpadding="4"><tbody> <tr><td>Mesa</td> <td>Silla</td> <td>Cama</td></tr> <tr><td>Carro</td> <td>Barco</td> <td>Avión</td></tr> <tr><td>Lunes</td> <td>Martes</td> <td>Miércoles</td></tr> </tbody></table>

El resultado es este:

Mesa

Silla

Cama

Carro Lunes

Barco Martes

Avión Miércoles

Nótese que las tres primeras palabras forman la primera fila, luego las otras tres forman la segunda fila y las tres últimas la tercera fila. Si deseas insertar una fila más agrega esta parte antes de </tbody></table> <tr><td>Palabra 1</td> <td>Palabra 2</td> <td>Palabra 3</td></tr>

  Del mismo modo si quisieras que cada fila tuviera más celdas entonces agrega las que quieras  añadiendo las palabras entre las etiquetas <td> </td> antes de cada </tr>    Ya teniendo claro esto, ahora podemos personalizar las tablas añadiendo unos atributos.  El borde de la tabla es el más delgado, si lo quieres más grueso cambia border="1" por un  número más alto, si lo dejas en "0" se quedará sin borde. 

<table border="5" cellpadding="4">  <tbody><tr><td>Tabla con borde "5"</td></tr>  </tbody></table> 

    Para cambiar el color del borde de la tabla añadimos después de <table el atributo  bordercolor="green" el color lo puedes cambiar, por ejemplo "red" 
<table  border="2"  bordercolor="green"  cellpadding="4">  <tbody><tr><td>Tabla  con  borde  verde</td></tr>  </tbody></table> 

    Si quieres usar un color de fondo en toda la tabla agrega bgcolor="yellow" después de <table. El  color lo puedes cambiar. 

<table  border="2"  bgcolor="yellow"  cellpadding="4">  <tbody><tr><td>Tabla  con  fondo  amarillo</td></tr>  </tbody></table> 

    Este efecto también lo puedes agregar sólo a las celdas que quieras para que cada fila tenga  distintos colores. Para hacer eso se usa el mismo atributo, pero en vez de ponerlo después de  <table lo pones después de la etiqueta <tr por ejemplo: 
Fila café Fila gris  Fila café Fila gris 

    Este fue el código para hacer eso: 
<table border="1" cellpadding="6">  <tbody><tr bgcolor="brown">  <td>Fila café</td><td>Fila café</td></tr>  <tr bgcolor="grey">  <td>Fila gris</td><td>Fila gris</td></tr>  </tbody></table> 

    También puedes poner una imagen de fondo en la tabla, para lograr eso agrega  background="URL de la imagen" después de <table. Yo he puesto una imagen animada (.gif) en  el ejemplo.  Tabla con fondo de imagen Tabla con fondo de imagen 

<table background="URL de la imagen" border="1" cellpadding="4">  <tbody><tr><td>Tabla con fondo de imagen</td>  <td>Tabla con fondo de imagen</td></tr>  </tbody></table> 

    Como verás después de entender el código básico todo lo demás resulta fácil. De cualquier  modo puedes probar los resultados y variaciones en un blog de pruebas antes de publicarlo. 

2.7.

Poner separadores entre las entradas

Los separadores entre posts (dividers) hacen que se delimite el área visual entre cada post lo cual lo hace más presentable y organizado.

Poner el separador es de lo más sencillo, sólo entra en Diseño > Edición de HTML, marca la casilla  Expandir plantillas de artilugios y busca esta línea:  <b:include data='post' name='post'/>  Justo debajo de ella pega lo siguiente:  <center><img src='URL de la imagen'/></center>    Sólo cambia lo que está en rojo por la URL de la imagen de tu separador. Así se simple tendrás un  separador de entradas en tu blog. 

  En  Smashing  Magazine  tienen  más  de  100  separadores  que  ponen  a  tu  disposición  de  muchos  diseñadores  y  que  son  de  uso  libre.  Puedes  escoger  el  que  más  te  guste  y  guardarlo  o  puedes  descargar el pack con todos los diseños de los separadores.    Si no te convencen las imágenes y te gustan los diseños más simples puedes optar por poner una  línea  de  color; para ello puedes usar el atributo <hr /> al cual se le pueden agregar estilos para hacerlos más
llamativos. Si te decides por esta forma entonces el código que deberás pegar será este:

<hr style="align:center; background:#000000; border:0px; height:5px; width:60%;" /> En background:#000000; puedes modificar el código del color que prefieras, en height:5px; la altura de la línea (en pixeles) y en width:60%; el ancho de la línea (en porcentaje). Estos son algunos ejemplos de los separadores con distintos colores:

<hr style="align:center; background:#0080FF; border:0px; height:5px; width:60%;" />

<hr style="align:center; background:#FF0080; border:0px; height:5px; width:60%;" />

<hr style="align:center; background:#FFFF00; border:0px; height:5px; width:60%;" />

2.8.  

Agrandar imagen al pasar el mouse  

Anteriormente vimos cómo agrandar una imagen al pasar el mouse sobre ella, para ello agregamos unos  estilos a la plantilla y un pequeño código en la entrada. Esta vez haremos el mismo efecto de  ampliar la imagen pero con un código mucho más sencillo y corto.  Este es el ejemplo: 

    Tan sólo debes usar el siguiente código dentro de tus entradas: 
<img src="URL de la imagen" onmouseover="this.width=400;this.height=300;"  onmouseout="this.width=100;this.height=80;" width="100" height="80" /> 

  

Sólo debes cambiar la URL de la imagen (en su tamaño normal)  El primer width y height son las medidas a las que se va agrandar la imagen al pasar el cursor,  width es el ancho y height es el alto.  Los width y height que están en color verde son el ancho y alto de la imagen en tamaño  pequeño, es decir, el thmbnail. 

 
   
Donde quieras que se vea el botón de descarga del archivo, cambiá a modo de "Edición de html" (en lugar de "Redactar") y añadí el código del botón/enlace siguiendo este modelo:

<a href="http://direcciondeldocumento.doc" target="_blank"><img  src="http://direcciondelaimagen.png"/></a> 

       

               
 

2.9.

Animación flash 

Para poder insertar animacion flash en sus blogs, primero que todo, tendran que tenerla  alojada en algun servidor online (Link your files/Boxstr) o sacarla de alguna pagina que tenga  flash. Para hacer esto ultimo debes utilizar Mozilla Firefox y la extension llamada “Video  downloader” ya que de ahi podremos conseguir la URL de la animacion.  Luego, en donde quieran ver la animacion, deberan aplicar este codigo, claro sustituyendo los  elementos esenciales:    <div align="center">  <embed src="http://DIRECCIONDELAANIMACION"; quality="high"  pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x‐ shockwave‐flash" width="350" height="300">  </embed>  </div>  En blogger suele aparecer el error “Su HTML no es aceptable”, para solucionar esto hay que  seleccionar la casilla que pone debajo de ese error (Stop showing HTML errors for this post), y  se publicará sin problemas  ANIMACION FLASH EN ENTRADAS 
A continuación, abra su editor de Blogger, y swith al modo "HTML". a continuación, agregue el código siguiente a cualquiera de las secciones en la entrada:

<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google‐src‐text"  style="direction: ltr; text‐align: left"><embed src=http://album.dvd‐photo‐ slideshow.com/flash/flower.swf quality=high width=320 height=240 align=middle  allowScriptAccess=sameDomain type=application/x‐shockwave‐flash  pluginspage=http://www.macromedia.com/go/getflashplayer></embed></span> <embed src =  http://album.dvd‐photo‐slideshow.com/flash/flower.swf calidad = ancho alto = 320 height = 

240 align = allowScriptAccess media type = sameDomain = application / x‐shockwave‐flash  pluginspage = http : / / www.macromedia.com / go / getflashplayer> </ embed></span>  Repleace el enlace del archivo swf "http://album.dvd‐photo‐slideshow.com/flash/flower.swf"  en el código anterior con la tuya propia.  Tienes que cambiar el width = "320" height = "240" los  datos también si el flash no es de 320x240 en tamaño.    4) Enviar su título y ya está!    

2.10.
 

Como insertar videos con código valido 

<object width="425" height="350"      type="application/x‐shockwave‐flash"      data="http://www.youtube.com/v/PsRkU7FV4aw">   <param name="movie" value="http://www.youtube.com/v/PsRkU7FV4aw" />   <param name="wmode" value="transparent" />  </object>   

2.11.  

Insertar archivos de Flash (SWF): 

Si bien Blogger no permite guardar archivos de vídeo, es posible subirlos a algún servidor  externo y luego incrustarlos en un post. La forma más común de insertar un archivo de Flash es  utilizar un código como este: 
  <object classid="clsid:d27cdb6e‐ae6d‐11cf‐96b8‐444553540000"  codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5, 0,0,0"  width="ancho_movie" height="alto_movie">  <param name="movie" value="URL_archivoSWF" />  <embed src="URL_archivoSWF" type="application/x‐shockwave‐flash"  pluginspage="http://www.macromedia.com/go/getflashplayer"  width="ancho_movie" height="alto_movie">  </embed>  </object>   

Como el tag object es usado por Internet Explorer y el tag embed por los otros navegadores lo  lógico es agregar ambas instrucciones. Los parámetros mínimos son estos:    src contiene la ubicación del archivo SWF 

width y height normalmente son el ancho y el alto de la película (en pixeles) pero puede  ingresarse cualquier otro valor o un porcentaje (width="100%")  classid y type indican el tipo de formato a incrustar  codebase si es necesario, indica dónde descargar el plugin necesario para visualizar el archivo    Hay una serie de parámetros no que no son esenciales y que pueden agregarse, ya sea como un  atributo dentro dentro del tag embed o como una nueva instrucción en object:  <param name="paramName" value="paramValue" />  bgcolor (#rrggbb): establece el color de fondo (valor hexadecimal)  menu (true, false): habilita o deshabilita el menú contextual  quality (low, medium, high): calidad de salida de la película  scale (showall, noborder, exactfit): forma en que se escalará respecto al bloque HTML  wmode (transparent, opaque): establece si el fondo será transparente    Hay otra grupo de parámetros que pueden ser requeridos pero dependen de la forma en que  fué creado el archivo SWF, file (url), autostart (true, false), etc.    

2.12.

Insertar archivos de QuickTime (MOV): 

    La estructura del código es similar a los anteriores: 
<object classid="clsid:02BF25D5‐8C17‐4B23‐BC80‐D3488ABDDC6B"  codebase="http://www.apple.com/qtactivex/qtplugin.cab"  width="ancho_movie" height="alto_movie">  <param name="src" value="URL_archivoMOV" />  <param name="pluginspage" value="http://www.apple.com/QuickTime/download/" />  <param name="cache" value="true" />  <embed src="URL_archivoMOV" width="ancho_movie" height="alto_movie"  pluginspage="http://www.apple.com/QuickTime/download/indext.html"  bgcolor="#000000">  </embed>  </object>   

Y alguno de los parámetros adicionales son:    controller (true, false): define si se muestran los controles para la ejecución (agregar 16 pixeles  a height)  autoplay (true, false): determina si comienza inmediatamente se espera que se oprima play en 

los controles  bgcolor (#rrggbb): establece el color de fondo (valor hexadecimal)     

2.13.

Insertar otros formatos de vídeo: 

    ¿Y qué pasa con otro tipo de formato? Es común insertar vídeos de Google o Youtube que no  son otra cosa que proyectores de Flash que cargan un formato de vídeo especial (FLV). Sin  embargo, hay otros formatos muy comunes que también pueden insertarse. Para cualquier  archivo multimedia, la estructura general sigue siendo la misma, sólo se necesitan el tag object  y, eventualmente, el tag embed: 
  <object data="URLpeliculaMPG" type="video/mpeg"  width="ancho_movie" height="alto_movie">  <param name="src" value="URLpelicula_MPG">  <param name="autoplay" value="false">  <param name="autoStart" value="0">  </object>    <object data="URLpeliculaAVI" type="video/x‐msvideo"  width="ancho_movie" height="alto_movie">  <param name="src" value="URLpelicula_AVI">  <param name="autoStart" value="0">  </object>    <object data="URLpelicula_WMV" type="video/x‐ms‐wmv"  width="ancho_movie" height="alto_movie">  <param name="src" value="URLpelicula_WMV">  <param name="autoStart" value="0">  </object>   

La teoría dice que eso es suficiente, que no es necesario indicar un atributo classid ya que type  le indica al navegador de qué se trata y es este el que decide el plugin a usar. En la práctica,  esto es cierto sólo en parte por lo que es mejor probar, ver y decidir. 
 

  En todos los casos, una página que incluya multimedia, debería incluir advertencias y vínculos  que indiquen la necesidad de poseer determinados plugins para ser vista en forma correcta. Por  ejemplo:  Esta película está en formato QuickTime. Download QuickTime plugin 
 

Un método más simple de incluir contenido multimedia es crear vínculos simples. De esta  manera, el contenido no forma parte de la página (no tarda en ser cargado) y el usuario puede  decidir si ejecuta o no el archivo: 
<a href="URLpelicula">   

Cómo visualizar documentos PDF en web? 
El 02.10.09, en Experimentos, por alpoma 

En ocasiones se desea incorporar en un blog, o en cualquier tipo de web, un documento PDF o similar. No consiste el objetivo en añadir un enlace que nos lleve al documento por medio de descarga o a la necesidad de abrir un programa lector adecuado. La cuestión está en convertir el documento de tal forma que se pueda visualiza de forma directa en la web, sin necesidad de descarga ni de programas añadidos, sin salir del navegador. Google Docs cuenta con una utilidad que, al menos personalmente, me parece de lo más útil, además de sencillo en su manejo. Estas cosas se comprenden mejor con ejemplos, así que vamos con uno muy simple. Tomemos este blog, y pongamos que deseo que pueda leerse un PDF en un post de forma directa, ¿cómo hacerlo? En primer lugar, accederemos a Google Docs Viewer. En su sencillo interface podremos añadir, por ejemplo, el URL del documento que deseamos “convertir” en visualizable de forma directa en el blog. De momento, los formatos de documento utilizables son PDF, Power Point y archivos TIFF. Supongo que, en un futuro más o menos cercano, se implementarán mejoras,

como el soporte para documentos Word, por ejemplo. Manos a la obra, tenemos interés en un documento PDF que se aloja en: http://www.alpoma.net/gautier.pdf Lo que haremos será introducir la dirección en Google Docs Viewer y, como resultado, obtendremos algo así:

Como puede verse, se ofrecen diversas opciones a la hora de trabajar con el documento, como insertar un enlace directo al mismo dentro de Google Reader, obtener un enlace adecuado para su envío por correo electrónico o, lo que aquí nos interesaba, el código HTML del iframe correspondiente al visor del documento para insertar en el blog. No habrá más que copiar y pegar el código a la hora de elaborar el artículo y, ya está (se pueden modificar diversos parámetros, como el tamaño del iframe). He aquí el resultado con el documento PDF mencionado.

  Incrusta cualquier PDF en una página web 
  

Ubuntu Software Store (Screencast)   La imagen de la semana: tienes un virus en tu iPhone   Portada 

6 comentarios
Víctor Pimentel 20 de septiembre de 2009  

Google añadió el año pasado soporte para PDF a su suite Google Docs, procesando los documentos para mostrarlos en una página web, sin flash ni nada. El truco que os voy a enseñar se basa en ese visor/conversor, de tal forma que podremos incrustar un PDF en una página web de manera muy sencilla y totalmente nativa para el navegador. Para hacer eso, tenemos que modificar y poner este código allá dónde queramos que aparezca el PDF:
<iframe src="http://docs.google.com/gview?url=http://victorpimentel.com/stuff/rubik.p

df&embedded=true" style="width:500px; height:375px;" frameborder="0"></iframe>

La URL a modificar será http://victorpimentel.com/stuff/rubik.pdf, y tienes que reemplazarla por la dirección dónde está tu PDF. Una vez hecho eso, te quedará algo así (dale a Leer Más): Otros servicios como Scribd ofrecen resultados similares, pero casi todos nos obligan a subir el documento a sus servidores. Este truco funciona con cualquier PDF subido a cualquier página web, así que en la mayoría de los casos será más rápido si apuntas este código para cuando lo necesites. Como bonus, también funciona con presentaciones Powerpoint en PPT.
  embedded=true 

 

 

<iframe src="URL del doc "  style="width:600px; height:300px;"  frameborder="0"></iframe>   

2.14. Como ocultar la fecha del post en Blogger 
Alguien me pregunto como eliminar la fecha de los post, y al estar buscando encontré a Ayuda para el blog, donde explica muy bien como ocultar la fecha de los post(entradas) . 1.-En el siguiente ejemplo, el código a cambiar de la plantilla era: /* Posts----------------------------------------------*/ h2.date-header { margin:1.5em 0 .5em; } 2.-Al que se le agrego, para que no muestre la fecha: /* Posts----------------------------------------------*/ h2.date-header { margin:1.5em 0 .5em; visibility:hidden; }

Click para ver ejemplos:

1.-Con fecha

2.- Sin fecha

Publicado por ICARO NOCTURNO a las 9:15:00 PM

 

2.15.

Cómo usar un favicon en blogger

Un favicon es un icono o logotipo que se puede asociar a una página web, y que algunos navegadores muestran en sus barras de dirección o lista de favoritos. Algunos favicons famosos son el de Wikipedia , o el de Yahoo! .

Blogger también permite poner favicons a tu blog. Los pasos para hacerlo son bastante sencillos: 1. Crea una imagen, más o menos cuadrada, con el logotipo que quieras usar como favicon de tu blog. Si usas Windows, lo más sencillo es que abras el Paint y lo dibujes. También puedes usar una imagen ya existente. Yo he creado la siguiente imagen para convertir en favicon de Gran Isla:

2. Una vez que tengas generada la imagen con tu logotipo, necesitas convertirla a un icono de 16x16 píxeles. Si generas un icono con formato .ico podrá ser visible tanto en Internet Explorer como en Firefox, mientras que si generas tu icono en cualquier otro formato gráfico (.png, .jpg, .gif, etc.) sólo podrá ser visible en Firefox (y en otros buenos navegadores como Opera, Konqueror, etc.) pero no en Internet Explorer. En nuestro caso, yo he usado la web FavIcon from Pics para generar mi favicon. Simplemente tienes que introducir tu imagen original en el campo "Source Image", presionar el botón "Generate FavIcon.ico" y obtendrás un fichero .zip con tu favicon en varios formatos (incluye .png y .ico). Para nuestro blog, usaremos el formato .png. 3. Una vez generado tu favicon, necesitas subirlo a un servidor desde el que pueda ser cargado por tu blog. Lo más sencillo es que lo subas a tu cuenta de Flickr o cualquier otro servicio que permita guardar ficheros. Otro truquillo con blogger consiste en iniciar un nuevo artículo en tu blog, incluir la imagen de tu favicon (y subirla al servidor de blogger), luego copiar la dirección en la que blogger ha guardado tu imagen y cancelar la edición del post. Así tendrás alojado tu favicon directamente en los servidores de blogger.

4. Por último, necesitas incluir el favicon en la plantilla de tu blog. Abre el código de tu plantilla, e introduce las siguientes líneas de código entre las etiquetas <head> y </head>:
<link rel="icon" href="DIRECCION_DE_TU_FAVICON" type="image/png">  <link rel="shortcut icon" href="DIRECCION_DE_TU_FAVICON" type="image/png">

Et voilà! La próxima vez que accedas a tu blog, deberías ver un iconito en la barra de direcciones de tu navegador. Ojo! Si usas Internet Explorer no lo verás, al menos en las versiones actuales. ¿La solución? Esta:
       

2.16. 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. 2. 3. Primero accedemos a la pagina principal de Flickr donde entraremos al menu: "Tu" > "Tu cuenta" Luego seleccionas la pestaña "Extendiendo Flickr" y das click a la opción "Tus Blog´s" para agregar nuestro blog de Blogger 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... o 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 o 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:...

 

1.

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> 

2.

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; } 

o

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. 

           

Blogger - Añadir archivos DOC, PDF, PPT, PPS, XLS y otros al blog  
Para añadir documentos en formatos DOC, PPT/PPS, XLS, PDF, TXT, RTF, ODT y  similares en un blog,  es preciso alojarlos en un servicio de alojamiento (hosting) externo a Blogger.   Se explican aquí dos tipos de alternativas, complementarias. 

A. Publicar archivos mediante Google Docs.

Primero, hay que registrase en el producto Google Docs (ver http://www.google.com/google-ds/hpp/hpp_es.html para una visita guiada y acceder al servicio), con los mismos datos que se utilizan para acceder a Gmail. Una vez registrado, puede comenzarse a subirse archivos en los siguientes formatos y con los siguientes límites de tamaño:

  

Documentos (máximo 500 MB): HTML, TXT, DOC, RTF, ODT, SXW Presentaciones (hasta 10 MB desde el equipo, 2 MB desde Internet y 500 KB por correo electrónico): PPT, PPS -ver nota 1 de este tutorialHojas de cálculo (máximo 1 MB): CVS, XLS, ODS

Es decir, aún NO pueden subirse archivos en formato PDF.

Accediendo a Google Docs, se suben los archivos desde el equipo, desde una URL donde se aloja el archivo o se envía por correo electrónico. Se comienza por clickear en la solapa Subir y se selecciona qué archivo se sube; puede modificarse el nombre del archivo, si fuese preciso.

1. Subir archivo a Google Docs:

(click en las imágenes con el botón secundario del mouse para ver a tamaño original sin salirse de esta página)

Luego de clickear en Subir, se abre una ventana que muestra los tipos de archivo que pueden subirse, los límites de tamaño y las opciones de subida. Cuando se seleccionó el archivo a subir y desde dónde se carga (el equipo o una URL), se clickea en el botón Subir archivo.

2. Formato y tamaños aceptados:

Concluida la subida del archivo, se muestra una ventana donde se visualiza el archivo cargado -en este ejemplo, un DOC (Word)-. Como Google Docs permite crear y editar documentos de tipo "Documentos", "Presentaciones" y "Hojas de cálculo", puede modificarse el documento original desde esta ventana de visualización. Tal como ha sido subido o editado, para publicar en el blog hay que clickear en la solapa Publicar.

3. Visualización del archivo subido:

Se abre entonces una ventana "Publicar este documento". Si es la primera vez que se utiliza Google Docs para publicar archivos en un blog, es necesario configurar los datos de la cuenta del blog. En las restantes ocasiones, no es preciso configurar estos datos, salvo que se cambien los datos de la cuenta o se quiera publicar en otro blog diferente al que se configuró por primera vez; simplemente, se clickea en el botón Publicar en blog. Para configurar la publicación en el blog, hay que clickear sobre el enlace cambiar la configuración de tu sitio de blogs.

4. Publicar el archivo en el blog:

Al clickear en ese enlace, se abre una ventana "Configuración de sitio de blogs", donde hay que completar los items: * Servicio de blogs existente: Las opciones son "Proveedor alojado (como Blogger, etc.)" y "Mi propio servidor/personalizado". Como la mayoría de los usuarios aloja su blog en el proveedor Blogger.com, que es el primero que aparece en el menú desplegable, basta con dejarlo en esa opción. * Configuración del blog existente: Hay que completar el nombre de usuario, la contraseña, que son los mismos que se utilizan para acceder al blog, y la ID o título del blog; si ese usuario administra sólo uno, se verá ése; si administra más, debe anotar el título del blog donde quiere que se publique el archivo como entrada. Completados estos campos, conviene clickear en el botón Probar, a fin de confirmar que todos los campos fueron completados correctamente. Si se indica que la prueba resultó correcta, se clickea en el botón Aceptar a fin de publicar ese archivo en el blog indicado.

5. Configuración de sitio de blogs:

Tras clickear en Aceptar, una nueva ventana indica que "Este documento se ha publicado en tu blog". El archivo puede eliminarse del blog cuando se quiera, desde el botón Eliminar del blog, y, si se efectúa algún cambio en la edición del archivo desde Google Docs, puede publicarse la actualización clickeando en Volver a publicar la entrada. Si se editó la entrada, se clickea en la ventana "Editar" el

botón Guardar. Resta clickear en el botón Cerrar documento y ver cómo ha quedado en el blog.

6. Archivo publicado en el blog:

Para ver cómo ha quedado esa publicación, se accede como usualmente al blog. Si se trata de un archivo de texto, se verá completo en la entrada, salvo que se haya configurado la plantilla para que muestren entradas expandibles. En cuanto a las presentaciones (Power Point, por ejemplo) o a las hojas de cálculo (Excel, por ejemplo), se verán en un tamaño similar a los videos insertados desde YouTube o Google Video. Si estas entradas quedasen algo anchas y se recortaran -sucede en algunas plantillas-, ver la nota 2 de este tutorial.

7. Vista del archivo como entrada en un blog:

Desde luego, pueden asignarse etiquetas a una entrada así creada y editarla en el mismo blog.

Adicionalmente, se pueden crear documentos on line, de tipo "documento", "hoja de cálculo" y "presentaciones", que luego pueden guardarse en la computadora con distintos formatos: con el archivo abierto, clickear en "Archivo" y elegir "Exportar como" (las opciones son HTML, Word, RTF, PDF, TXT, Open Office; noten que es una buena manera de crear PDFs desde otros formatos de archivo, de paso).

Nota 1: Las "Presentaciones" creadas con Google Docs son, todavía, algo rudimentarias en comparación con  programas especializados en crear presentaciones. Tener presente que no pueden descargarse a la computadora  como archivos PPT o PPS: se descargan únicamente como archivos HTML.

Nota 2: El tamaño de los objetos como presentaciones, hojas de estilo y otros puede modificarse si se edita la  entrada en modo "Edición HTML". Allí se ven dos atributos: width (ancho) y height (alto). Cuando el bloque de  entradas de una plantilla tiene un ancho inferior o igual al del objeto, éste se ve recortado. Una solución es  modificar el valor del ancho, quitándole algunos pixeles; así, si el valor es 425px y el objeto se ve recortado, se  empieza por quitar 10 pixeles y se anota 415. Se realiza una vista previa de la entrada y se ajusta cuanto fuese 

preciso. En las presentaciones (tipo Power Point: PPT o PPS), conviene ajustar ambos valores, ancho y alto, para  que las imágenes de la presentación no se muestren deformadas, usando el mismo procedimiento que para  modificar el valor de "widht".

B. Publicar archivos mediante otros servicios hostlinks.

B.1. Scribd:

Puede verse una explicación con imágenes clickeando AQUÍ (y descargarse, si se quiere).

Formatos que pueden subirse: DOC, PPT, PPS, XLS, PDF, PS, PDT, ODP, SXW, SWI, TXT, RTF, JPG, JPEG, PNG, GIF, etc. Puede descargarse como un archivo WORD, PDF o TXT.

1. Registrarse en el servicio de Scribd: Click en el botón Sign Up Now. Se abre una ventana "Log in" en la que hay que completar el nombre de usuario, una contraseña y una dirección de correo electrónico. Luego, se clickea en el botón Signup.

2. Luego de registrarse, se sube el/los archivos clickeando en el botón Click to Upload. (También pueden subirse archivos desde una URL.) Al clickear en ese botón, se abre una ventana para seleccionar qué archivo/s se subirá/n desde el equipo. Cuando se selecciona el archivo y se acepta, se muestra una ventana con el nombre del archivo y opciones de edición: modificar el título, añadir una breve descripción del archivo, añadir etiquetas, marcarlo como privado (en ese caso, nadie salvo quien lo subió lo podrá ver), marcar como contenido adulto, asignarle una categoría (Artes, Ciencias, Informática, etc.). Una vez completados estos campos de edición, se publica el archivo clickeando en el botón Publish.

3. El proceso de publicación lleva unos momentos, ya que el archivo se convierte al formato en que se publicará en Scribd (un archivo Flash). Finalizado ese proceso de conversión, se ve un aviso que indica "Converted" y, contiguamente, un enlace "view here" para ver el archivo, opciones de edición y el código para insertarlo en el blog.

4. Luego de clickear en "view here", se abre una ventana donde se muestra el archivo publicado que, de manera similar, se verá en el blog, y opciones para descargarlo (como archivo PDF, Word o TXT), enviar por correo electrónico, vista a pantalla completa, etc. Entre estas opciones, hay una Embed donde se arroja el código que hay que copiar para pegar en una entrada del blog, en modo de edición "Edición en HTML" (no en modo "Redactar"). El código se copia completo y se pega en la entrada del blog, donde se titula como se quiera.

5. Contiguo a "Embed" y el código a copiar y pegar, hay un enlace "(advenced)"que, si se clickea, permite otras opciones de edición, como cambiar el tamaño del elemento, herramienta útil ya que, en la mayoría de los blogs, el ancho asignado al bloque de las entradas es igual o inferior al del archivo publicado. Si se angosta el ancho ("width") a 410 o 400 pixeles (medida estándar para la mayoría de las plantillas), el archivo no se verá cortado en su margen derecho. Luego de cambiar el valor de "width" o ancho, se clickea en el botón Resize y la página muestra un código adaptado a este tamaño para añadir el archivo como entrada en el blog ("Embed code"), que hay que copiar y pegar, como se explicó en el punto anterior.

6. La solapa My Docs muestra todos los archivos que se publicaron y permite editarlos en cualquier momento; por ejemplo, si se quiere que pasen de ser públicos a privados (sólo lo ve el usuario que subió el archivo), si no se permite que se descarguen, etc. Además, hay un enlace "advanced" que permite otras opciones de edición interesantes si se clickea en él: entre otras, el idioma del archivo, el tipo de licencia o derechos que se le atribuyen (desde "Dominio público" a "Todos los derechos reservados (c)"), en qué formatos puede descargarse el archivo, si se permite o no su impresión.

7. Una vez publicado en el blog, el archivo se verá con los controles que se muestran en la página de Scribd: avanzar, retroceder, zoom, cuadro de búsqueda, pantalla completa, impresión. La interfase es realmente dúctil.

B.2. Slideshare:

Puede verse una explicación con imágenes clickeando AQUÍ (y descargarse, si se quiere).

Formatos que pueden subirse: PPT, PPS, PDF y ODP Puede descargarse como un archivo PDF

1. Registrarse en el servicio de Slideshare: Click en el enlace "Signup". Se introduce una dirección de correo electrónico, un nombre de usuario y una contraseña.

2. Luego de registrarse, se clickea en la solapa Upload. Allí hay un botón Browse and select files, para buscar y seleccionar el/los archivo/s a subir desde la computadora. Se clickea en ese botón y se selecciona el archivo a cargar.

3. Una vez subido, se abre una ventana que indica que su "slideshow (su presentación) Nombre del archivo" comenzó a convertirse a otro formato y que enseguida estará publicado. Hay un enlace "here" para ver el estado de la publicación, ya que lleva unos momentos la conversión del formato original al formato que utiliza el servicio (lo convierte a un archivo Flash).

4. Se muestra una ventana donde pueden editarse varios campos, como el título de archivo (si se quisiera modificar el título original), la privacidad (quién puede ver el archivo), en qué idioma está, si está permitido descargarlo, un campo para introducir una breve descripción de ese archivo. Completados estos campos, se clickea en el botón Publish (Publicar).

5. Para ver los archivos que se subieron, se clickea en la solapa My Slidespace, donde se muestran todos los archivos que se subieron y se ofrece la posibilidad de editarlos, clickeando sobre el nombre del archivo o en el botón Edit Slideshow.

6. La ventana que se muestra al clickear sobre el título del archivo muestra el archivo ya publicado en Slideshare que, de similar manera, se verá en el blog, y opciones como compartir por email, ver el archivo a pantalla completa, descargar el archivo a la computadora. Debajo del título del archivo, entre otras opciones, hay un código "Embed in your blog" que es el que hay que copiar para pegar en una entrada del blog, en el modo de edición "Edición HTML". Otra opción para publicar en el blog se encuentra debajo de la ventana donde se muestra el archivo, donde dice "Post" y se muestran iconos de diversos servicios, entre ellos, la B de Blogger. Si se clickea ese icono, se abre una ventana "Post to Blogger" (Publicar en Blogger), en la que hay que completar los datos de usuario de Blogger (la cuenta de correo electrónico que se usa para acceder al blog), la contraseña de Blogger, el título del blog; luego, se clickea en el botón Post. Adicionalmente, hay una opción para que el archivo se publique en la barra lateral ("Post to Sidebar"), ya que por defecto se publicará como entrada.

7. Otras opciones de edición incluyen: disponible o no su descarga para los lectores, tipos de derecho del archivo -entre Público y Todos los derechos reservados-, una opción para que nadie salvo uno pueda ver ese archivo pero que, sin embargo, arroje un código para poder insertar el archivo en el blog, entre otras.

8. La solapa Widgets permite agregar uno o varios archivos ("slideshows") en tamaño pequeño en la barra lateral. Se configura el elemento (cuáles archivos van a mostrarse, con qué título y etiquetas), se clickea en Preview para ver cómo quedará ese elemento y, una vez configurado, se muestra, abajo, el código añadir este elemento, que hay que copiar y pegar en el blog como "Elemento de página" > "Añadir elemento de página" --> "Html/Javascript".

Nota: Material creado originalmente por friendly y recuperado por Gerard, Guía de Google.

                 

3. WEB‐SAFE COLOR CHART 
This is a table displaying what are known as "web safe" colors. Now that nearly all computers,  monitors and browsers display true color, this list servers as a simple reference more than a  guideline.   
#FFFFFF  #FFFFCC  #FFFF99  #FFFF66  #FFFF33  #CCFFFF  #CCFFCC  #CCFF99  #CCFF66  #CCFF33  #99FFFF #99FFCC #99FF99 #99FF66 #99FF33 #66FFFF #66FFCC #66FF99 #66FF66 #66FF33 #33FFFF  #33FFCC  #33FF99  #33FF66  #33FF33  #00FFFF #00FFCC #00FF99 #00FF66 #00FF33

#FFFF00  #FFCCFF  #FFCCCC  #FFCC99  #FFCC66  #FFCC33  #FFCC00  #FF99FF  #FF99CC  #FF9999  #FF9966  #FF9933  #FF9900  #FF66FF  #FF66CC  #FF6699  #FF6666  #FF6633  #FF6600  #FF33FF  #FF33CC  #FF3399  #FF3366 

#CCFF00  #CCCCFF  #CCCCCC  #CCCC99  #CCCC66  #CCCC33  #CCCC00  #CC99FF  #CC99CC  #CC9999  #CC9966  #CC9933  #CC9900  #CC66FF  #CC66CC  #CC6699  #CC6666  #CC6633  #CC6600  #CC33FF  #CC33CC  #CC3399  #CC3366 

#99FF00 #99CCFF #99CCCC #99CC99 #99CC66 #99CC33 #99CC00 #9999FF #9999CC #999999 #999966 #999933 #999900 #9966FF #9966CC #996699 #996666 #996633 #996600 #9933FF #9933CC #993399 #993366

#66FF00 #66CCFF #66CCCC #66CC99 #66CC66 #66CC33 #66CC00 #6699FF #6699CC #669999 #669966 #669933 #669900 #6666FF #6666CC #666699 #666666 #666633 #666600 #6633FF #6633CC #663399 #663366

#33FF00  #33CCFF  #33CCCC  #33CC99  #33CC66  #33CC33  #33CC00  #3399FF  #3399CC  #339999  #339966  #339933  #339900  #3366FF  #3366CC  #336699  #336666  #336633  #336600  #3333FF  #3333CC  #333399  #333366 

#00FF00 #00CCFF #00CCCC #00CC99 #00CC66 #00CC33 #00CC00 #0099FF #0099CC #009999 #009966 #009933 #009900 #0066FF #0066CC #006699 #006666 #006633 #006600 #0033FF #0033CC #003399 #003366

#FF3333  #FF3300  #FF00FF  #FF00CC  #FF0099  #FF0066  #FF0033  #FF0000 

#CC3333  #CC3300  #CC00FF  #CC00CC  #CC0099  #CC0066  #CC0033  #CC0000 

#993333 #993300 #9900FF #9900CC #990099 #990066 #990033 #990000

#663333 #663300 #6600FF #6600CC #660099 #660066 #660033 #660000

#333333  #333300  #3300FF  #3300CC  #330099  #330066  #330033  #330000 

#003333 #003300 #0000FF #0000CC #000099 #000066 #000033 #000000