tutoriales edicion html del blog

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'>

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

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


}

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 */

}


width: 220px;

float: right;



}

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;

...

}


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:


width: 150px;

float: right;

...

}

#newsidebar‐wrapper {

width: 150px;

float: left;


}

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='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;


}


float:right;

width:380px;


}

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 {


margin-left: 5px; /* margen izquierdo */

overflow: hidden;

width: 190px;

word-wrap: break-word;

}

#sidebar-izquierda {


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:




.......

</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 {



width:390px; /* el ancho */


}

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]



<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:




.......

</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 {


width: 390px; /* es ancha porque contendrá las dos sidebars */

}

#sidebar‐wrapper { /* es la original */


margin‐left: 5px; /* margen izquierdo */

overflow: hidden;

width: 190px;

word‐wrap: break‐word;

}

#sidebar‐nueva { /* es la nueva */


margin‐left: 5px; /* margen izquierdo */

overflow: hidden;

width: 190px;


}

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‐nueva">

<b:section class="sidebar" id="sidebarnueva" preferred="yes" />

</div>



.......

</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>


... 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]


... la sidebar ...

</div>


... 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:


<b:section class="sidebar" id="sidebar1" preferred="yes">

.......

</b:section>

</div>


<b:section class="main" id="main" showaddelement="no">

<b:widget id="Blog1" locked="true" title="Entradas del blog" type="Blog"/>

</b:section>

</div>


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


}

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


}

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;


width: 190px;




}

#main‐wrapper { /* el área de posts */


float: left;

margin: 0 10px;

overflow: hidden;

width: 560px;



}

#sidebar‐wrapper2 { /* la sidebar derecha */


float: left;

margin: 0; /* poner a cero */

overflow: hidden;

width: 190px;




}

#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; text-

align: 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;'>


style='float:left;'/>

</div>

<div id='footer-derecho' style='width: 30%; float: right; margin:0; text-

align: left;'>


style='float:right;'/>

</div>

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

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

transform: 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 != ""'> <h2><data:title/></h2> </b:if> <div class='widget-content'> <b:if cond='data:link != ""'> <a expr:href='data:link'> <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_img"' 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 + "_img"' expr:src='data:sourceUrl' expr:width='data:width'/> </b:if> <br/> <b:if cond='data:caption != ""'> <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 != ""'>

<a expr:href='data:link'>

<h2><data:title/></h2>

</a>

</b:if>

<div class='widget‐content'>

<b:if cond='data:link != ""'>


<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_img"'

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 + "_img"'

expr:src='data:sourceUrl' expr:width='data:width'/>

</b:if>

<br/>

<b:if cond='data:caption != ""'>


<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 + "="

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:español

2. Elige opciones adicionales:

Idiomas de traducción Todos los idiomas

Idiomas específicos

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:


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>




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


url(http://img514.imageshack.us/img514/9711/tabbedblue.png) no‐repeat right






.clear {clear:left}

/* Fin del menú */

/* Menú horizontal

‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ */



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


url(http://img27.imageshack.us/img27/945/tabbedgreen.png) no‐repeat right top;padding:5px

12px 4px 12px;color:#fff;}





.clear {clear:left}

/* Fin del menú */

/* Menú horizontal

‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ */



#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



url(http://img514.imageshack.us/img514/7015/tabbedpurple.png) no‐repeat right






.clear {clear:left}

/* Fin del menú */

/* Menú horizontal

‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ */



#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



url(http://img27.imageshack.us/img27/9168/tabbedred.png) no‐repeat right top;padding:5px

12px 4px 12px;color:#fff;}





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


}

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


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;



}

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



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;


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>





</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:


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;


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>




</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:


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;


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>



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


}

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>





</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:


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


}

#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ú</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 Barco Avión

Lunes Martes 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 café

Fila gris 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"


</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"


<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"


<param name="src" value="URLpelicula_MPG">

<param name="autoplay" value="false">

<param name="autoStart" value="0">

</object>

<object data="URLpeliculaAVI" type="video/x‐msvideo"


<param name="src" value="URLpelicula_AVI">


</object>

<object data="URLpelicula_WMV" type="video/x‐ms‐wmv"


<param name="src" value="URLpelicula_WMV">


</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. Primero accedemos a la pagina principal de Flickr donde entraremos al menu: "Tu" > "Tu cuenta" 2. Luego seleccionas la pestaña "Extendiendo Flickr" y das click a la opción "Tus Blog´s" para agregar nuestro blog de Blogger 3. Después tienes que confirmar las configuraciones de la plantilla de publicación de tu Blog

4. Y finalmente te va a aparecer un mensaje avisándote que se ha agregado exitosamente tu Blog, y podras elegir entre crear una plantilla de publicación personalizada, o regresar a tu página de Blog´s...

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-d-s/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 tutorial- Hojas 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 #CCFFFF #99FFFF #66FFFF #33FFFF #00FFFF

#FFFFCC #CCFFCC #99FFCC #66FFCC #33FFCC #00FFCC

#FFFF99 #CCFF99 #99FF99 #66FF99 #33FF99 #00FF99




#FFCCFF #CCCCFF #99CCFF #66CCFF #33CCFF #00CCFF

#FFCCCC #CCCCCC #99CCCC #66CCCC #33CCCC #00CCCC

#FFCC99 #CCCC99 #99CC99 #66CC99 #33CC99 #00CC99




#FF99FF #CC99FF #9999FF #6699FF #3399FF #0099FF

#FF99CC #CC99CC #9999CC #6699CC #3399CC #0099CC

#FF9999 #CC9999 #999999 #669999 #339999 #009999

#FF9966 #CC9966 #999966 #669966 #339966 #009966

#FF9933 #CC9933 #999933 #669933 #339933 #009933

#FF9900 #CC9900 #999900 #669900 #339900 #009900



#FF6699 #CC6699 #996699 #666699 #336699 #006699

#FF6666 #CC6666 #996666 #666666 #336666 #006666

#FF6633 #CC6633 #996633 #666633 #336633 #006633

#FF6600 #CC6600 #996600 #666600 #336600 #006600



#FF3399 #CC3399 #993399 #663399 #333399 #003399

#FF3366 #CC3366 #993366 #663366 #333366 #003366

#FF3333 #CC3333 #993333 #663333 #333333 #003333

#FF3300 #CC3300 #993300 #663300 #333300 #003300



#FF0099 #CC0099 #990099 #660099 #330099 #000099

#FF0066 #CC0066 #990066 #660066 #330066 #000066

#FF0033 #CC0033 #990033 #660033 #330033 #000033

#FF0000 #CC0000 #990000 #660000 #330000 #000000

tutoriales edicion html del blog

Documents