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

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: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 ... */
}
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;
}

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

.......
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">
.......
</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>
<b:section class="sidebar" id="sidebarderecha" preferred="yes">
.......
</b:section>
</div>
<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>
<b:section class="sidebar" id="sidebarderecha" preferred="yes" />
</div>
<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;
}
#col2 h2{
background:#000;
padding: 4px 3px;
font‐size: 90%;
color:#fff;
}
#col3{
background:#000;
margin: 5px;
padding: 5px;
}
#col3 h2{
background:#000;
padding: 4px 3px;
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

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"'
</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:if cond='data:title != ""'>
</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"'
</a>
<b:else/>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_img"'
</b:if>
<br/>
<b:if cond='data:caption != ""'>
<span class='caption'><data:caption/></span>
</a>
</b:if>
</div>
</b:includable>
</b:widget>

El resultado de seguir estos pasos podéis verlo haciendo click en la imagen.

1.15. Crear ventanas PopUp
Las ventanas PopUp son esas ventanas que se abren aparte del sitio web que estamos viendo, y si
bien tienen muy mala fama porque generalmente están llenas de publicidad que no queremos
ver y que no solicitamos, ahora puedes reivindicarlas dándoles funciones útiles como abrir un
formulario, una foto, un texto, etc.
Primero hay que ir a Diseño > Edición de HTML y pegar antes de </head> lo siguiente:
<script language="JavaScript">
<!‐‐ script para ventanas PopUp ‐‐>

<!‐‐ Begin
function popUp(URL) {
day = new Date();
id = day.getTime();
eval("page" + id + " = window.open(URL, '" + id + "',
'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,
width=500,height=300,left = 390,top = 250');");
}
// End ‐‐>
</script>
Puedes cambiar estos valores si quieres mostrar lo siguiente:
Toolbar (barra de herramientas)
Scrollbars (barras de desplazamiento)
Location (barra de direcciones)
Statusbar (barra de estado)
Menubar (barra de menú)
Resizable (modificar tamaño de la ventana)

Sólo cambia el 0 por un 1 si es que quieres mostrar algo de lo anterior. El tamaño de la ventana
lo puedes cambiar donde dice width (ancho) y height (alto).

Ahora en una entrada o elemento HTML/Javascript hay que poner lo siguiente:
<a href="javascript:popUp('URL del documento')">Abrir ventana PopUp</a>

Sólo cambia la URL del documento por la dirección donde tengas alojada la imagen, el
formulario o la página que se vaya a abrir en la ventana PopUp.
Abrir ventana PopUp

También puedes hacer que se abra mediante un botón cambiando lo anterior por eso:
<form>
<input type=button value="Abrir ventana PopUp" onClick="javascript:popUp('URL del documento')">
</form>
Principio del formulario
O incluso con una imagen:
<a href="javascript:popUp('URL del documento')"><img src="URL de la imagen" /></a>

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

Algunas plantillas son un poco ajustadas y al poner videos estos se salen del post, y aunque
podemos editar el tamaño de la pantalla del video en ocasiones el video no se aprecia igual que
en su tamaño original, así que una buena solución para esto es abrir los videos en una ventana
emergente, o sea en una ventana PopUp.
¿Cómo funciona? Lo que haremos será sustituir el video por una imagen que al darle click se
abra una pequeña ventana para ver el video.

Sólo usa este código dentro del post:
<a title="Ver video" href="javascript:void(0);"
onclick="window.open('http://www.youtube.com/v/DnzuKKG6‐AA&autoplay=1', 'popup', 'left=390,
top=200, width=425, height=344, toolbar=0, resizable=1')"><img
src="http://dl.getdropbox.com/u/647003/CiudadBlogger/Iconos/playvideoicon.gif" title="Ver video"
/></a>
Ahora cambia la URL del video de YouTube, ten en cuenta que sólo debes cambiar la última
parte de la dirección, o sea las letras que están en rojo, de lo contrario se abrirá toda la ventana
de YouTube. Fíjate en este ejemplo:
Este código está programado para que el video se reproduzca automáticamente al abrirse la
ventana, si deseas que se reproduzca hasta que el usuario le de click en Play entonces elimina
esta parte: &autoplay=1
Puedes cambiar la URL de la imagen por otra, yo he hecho esta y puedes usarla si gustas. Para
ver cómo queda haz click en la imagen.

1.17. Mensaje tipo Post‐it para el blog

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

<div id="postit" style="left:200px;top:50px">
<div align="right"><b><a href="javascript:closeit()"><font face="Arial" size="1">[CERRAR]</font>
<img valign="middle" src="http://dl.getdropbox.com/u/647003/CiudadBlogger/Iconos/CloseIcon‐
small.png"/></a></b></div>

<!‐‐AQUI VA EL MENSAJE‐‐>
<br/>
Aquí va el mensaje que se mostrará cuando alguien ingrese al blog.
Para más trucos y tutoriales visita <a href="http://ciudadblogger.com">Ciudad Blogger</a>

<!‐‐FIN DEL MENSAJE‐‐>

<script>

//Post‐it only once per browser session? (0=no, 1=yes)
//Specifying 0 will cause postit to display every time page is loaded
var once_per_browser=0

///No need to edit beyond here///

var ns4=document.layers
var ie4=document.all
var ns6=document.getElementById&&!document.all

if (ns4)
crossobj=document.layers.postit
else if (ie4||ns6)
crossobj=ns6? document.getElementById("postit") : document.all.postit

function closeit(){
if (ie4||ns6)
crossobj.style.visibility="hidden"
else if (ns4)
crossobj.visibility="hide"
}

function get_cookie4(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie4.length > 0) {
offset = document.cookie4.indexOf(search)
if (offset != ‐1) { // if cookie4 exists
offset += search.length
// set index of beginning of value
end = document.cookie4.indexOf(";", offset);
// set index of end of cookie4 value
if (end == ‐1)
end = document.cookie4.length;
returnvalue=unescape(document.cookie4.substring(offset, end))
}
}
return returnvalue;
}

function showornot(){
if (get_cookie4('postdisplay')==''){
showit()
document.cookie4="postdisplay=yes"
}
}

function showit(){
if (ie4||ns6)
crossobj.style.visibility="visible"
else if (ns4)
crossobj.visibility="show"
}

if (once_per_browser)
showornot()
else
showit()

</script>

<script language="JavaScript1.2">

//drag drop function for ie4+ and NS6////
/////////////////////////////////

function drag_drop(e){
if (ie4&&dragapproved){
crossobj.style.left=tempx+event.clientX‐offsetx
crossobj.style.top=tempy+event.clientY‐offsety
return false
}
else if (ns6&&dragapproved){
crossobj.style.left=tempx+e.clientX‐offsetx
crossobj.style.top=tempy+e.clientY‐offsety
return false
}
}

function initializedrag(e){
if (ie4&&event.srcElement.id=="postit"||ns6&&e.target.id=="postit"){
offsetx=ie4? event.clientX : e.clientX
offsety=ie4? event.clientY : e.clientY

tempx=parseInt(crossobj.style.left)
tempy=parseInt(crossobj.style.top)

dragapproved=true
document.onmousemove=drag_drop
}
}
document.onmousedown=initializedrag
document.onmouseup=new Function("dragapproved=false")

</script></div><div class="clear"/></div>

En la primera parte del código (la que está en color verde) puedes cambiar el color de fondo, el
color de la letra, el tamaño del cuadro, etc.
Tu mensaje debes ponerlo cambiando lo que está en color rojo, puedes usar negritas, cursiva,
links, etc.

Si quieres que el aviso aparezca sólo una vez por sesión cambia donde dice:
var once_per_browser=0

Y modifica el 0 por 1, de lo contrario el mensaje aparecerá cada vez que recargue la página o se
abra otra página dentro del mismo blog.
Así de sencillo puedes avisar a tus lectores de lo que creas importante.
1.18. Traduce tu sitio web instantáneamente a otros idiomas

Añade el traductor de sitios web de Google a tus páginas web para que los usuarios que visiten
el sitio puedan obtener una traducción automática de esas páginas de forma instantánea.
Puedes añadir el traductor de Google rápida y fácilmente mediante el siguiente procedimiento:
español
1. Selecciona el idioma de la página web:
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 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;}
url(http://img34.imageshack.us/img34/5144/tabbedyellow.png) no‐repeat right
.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:if cond='data:title'>
</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 ‐‐>

</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.
Seleccionar...
Quedaría así:
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


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

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Tutoriales Edicion HTML Del Blog

Uploaded by

Copyright:

Available Formats

INTRODUCCION

Para insertar una nueva Sidebar necesitaremos agregar algunos códigos y a

Se puede seguir jugando...

background: #111; /* color de fondo del contenido del gadget*/

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

margin: 0px 2px 0px; /*separación entre los gadgets */

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 {

height:160px; /* alto de la imagen */

border:1px solid #2e2e2e; /* color borde de imágenes */

.crosscol .widget img:hover{

border:1px solid #fa01e6; /* color borde en estado hover */

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

1.16. Abrir videos en ventana emergente (Popup)

1.26. Como poner emoticonos en comentarios

script funcione correctamente, deberemos tener los comentarios incrustados en el post.

visitantes sepan en todo momento coo poner el emoticon que deseen.

¿Cómo añadirlo en nuestro blog?

<b:if cond='data:blog.pageType == "item"'>

Pues ya está, a partir de ahora vuestros comentarios disfrutarán de

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

Y luego en la sección de "Posts" llamamos a esta variable definida como sigue:

2.5. Cambiar color fondo del post

Mesa Silla Cama

Lunes Martes Miércoles

<table border="2" bordercolor="green" cellpadding="4">

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

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

A continuación, abra su editor de Blogger, y swith al modo "HTML". a continuación, agregue

En ocasiones se desea incorporar en un blog, o en cualquier

La URL a modificar será http://victorpimentel.com/stuff/rubik.pdf, y tienes que reemplazarla

1.-En el siguiente ejemplo, el código a cambiar de la plantilla era:

2.-Al que se le agrego, para que no muestre la fecha:

Click para ver ejemplos:

2.- Sin fecha

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

famosos son el de Wikipedia , o el de Yahoo! .

 Una cuenta de Google

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

A. Publicar archivos mediante Google Docs.

Primero, hay que registrase en el producto Google Docs (ver http://www.google.com/google-d-

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

1. Subir archivo a Google Docs:

3. Visualización del archivo subido:

4. Publicar el archivo en el blog:

5. Configuración de sitio de blogs:

6. Archivo publicado en el blog:

height: 25px; /altura del espacio título /

font-size: 18px; /tamaño de fuente del título /

margin: 0px 2px 0px; /separación entre los gadgets /

width: 200px; /ancho de cada gadget /

border: 1px solid #2e2e2e; /color borde de cada gadget/