Google, el principal buscador de internet, tiene un mirror. Literalmente hablando.
Imágenes en el Header |
Hay muchas formas de personalizar el HEADER (cabecera) de Blogger Beta, tanto con textos como con imágenes. Lo más importante, es la imaginación, las técnicas son muy simples.
Para empezar debemos comprender qué el HEADER, como cualquier elemento de la plantilla, está formado por bloques DIV, áreas rectangulares definidas en las declaraciones de estilo que poseen ciertas propiedades (ancho, alto, márgenes, color de fondo) y que están uno dentro del otro, separados por una cierta distancia (padding):
el DIV externo:
300 x 90 : padding 20 pixeles
el DIV interno
260 x 50 : padding 20 pixeles
En el caso del Header, al DIV externo se lo identifica (atributo ID) como #header-wrapper y al interno #header. Dentro de este último se insertan el texto del título (generalmente dentro de un tag H1) y el texto de la descripción.
El #header-wrapper tiene, por defecto un ancho definido (width:...px) y, dependiendo de la plantilla, un borde (border:...), un color de fondo (background: #...) o una imagen (background: url(...)). Cualquiera de estos datos puede ser personalizado.
Si lo que queremos es agregar o cambiar la imagen existente, podemos utilizar una imagen completa que abarque todo su ancho lo que significa que deberíamos saber cuál es el tamaño necesario (ancho y alto en pixeles) y luego, agregar o modificar la declaración correspondiente:
El #header-wrapper tiene, por defecto un ancho definido (width:...px) y, dependiendo de la plantilla, un borde (border:...), un color de fondo (background: #...) o una imagen (background: url(...)). Cualquiera de estos datos puede ser personalizado.
Si lo que queremos es agregar o cambiar la imagen existente, podemos utilizar una imagen completa que abarque todo su ancho lo que significa que deberíamos saber cuál es el tamaño necesario (ancho y alto en pixeles) y luego, agregar o modificar la declaración correspondiente:
#header-wrapper {
.......
background: url(URL_imagen) no-repeat;
.......}También podemos utilizar un imagen en mosaico (tile), repitiéndola en sentido horizontal, vertical o en ambos sentidos:
| repeat-x | repeat-y | repeat |
|---|---|---|
background: url(URL_imagen) repeat-x;
background: url(URL_imagen) repeat-y;
background: url(URL_imagen) repeat;
Mediante rutinas JavaScript es posible cambiar, aspectos de la página, modificando el estilo de los elementos. Si queremos utilizar diferentes imágenes que cambien aleatoriamente, deberemos modificar la propiedad background. Para esto, antes que nada, deberíamos tener subidas las imágenes a ser utilizadas y luego, agregar el siguiente codigo justo antes del tag </head>:
<script type="text/javascript">
var imagen=new Array();
// lista de imágenes a utilizar
imagen[0]="URL_imagen0";
imagen[1]="URL_imagen1";
imagen[2]="URL_imagen2";
// ....... todas las que se quieran
imagen[7]="URL_imagen7";
// numeradas a partir del cero y en forma consecutiva
var alea=Math.round(Math.random()*CANTIDAD);
// donde CANTIDAD = último número de orden (en este caso, 7)
document.write("<style>");
document.write("#header-wrapper {background:url("+imagen[alea]+") no-repeat;}");
document.write("</style>");
</script>
var imagen=new Array();
// lista de imágenes a utilizar
imagen[0]="URL_imagen0";
imagen[1]="URL_imagen1";
imagen[2]="URL_imagen2";
// ....... todas las que se quieran
imagen[7]="URL_imagen7";
// numeradas a partir del cero y en forma consecutiva
var alea=Math.round(Math.random()*CANTIDAD);
// donde CANTIDAD = último número de orden (en este caso, 7)
document.write("<style>");
document.write("#header-wrapper {background:url("+imagen[alea]+") no-repeat;}");
document.write("</style>");
</script>
NOTA: si usamos imágenes es mosaico, debemos cambiar no-repeat por repeat-x si se quiere repetir horizontalmente, repeat-y si se quiere repetir verticalmente, o repeat si se quiere reptir en ambas direcciones.
Esta variante de la rutina anterior, cambiará la imagen dependiendo de la hora en que se abre la página web:
Esta variante de la rutina anterior, cambiará la imagen dependiendo de la hora en que se abre la página web:
<script type="text/javascript">
var imagen=new Array();
// lista de imágenes a utilizar
imagen[0]="URL_imagen0";
imagen[1]="URL_imagen1";
imagen[2]="URL_imagen2";
imagen[3]="URL_imagen3";
imagen[4]="URL_imagen4";
imagen[5]="URL_imagen5";
// la cantidad depende de como dividamos las 24 horas
var now = new Date();
var hours = now.getHours();
var alea=0
// ... en este caso, hay 6 divisiones
if (hours>0) {alea=0;} // de 0 a 4
if (hours>4) {alea=1;} // de 4 a 8
if (hours>8) {alea=2;} // de 8 a 12
if (hours>12) {alea=3;} // de 12 a 16
if (hours>16) {alea=4;} // de 16 a 20
if (hours>20) {alea=5;} // de 20 a 24
document.write("<style>");
document.write("#header-wrapper {background:url("+imagen[alea]+") no-repeat;}");
document.write("</style>");
</script>
var imagen=new Array();
// lista de imágenes a utilizar
imagen[0]="URL_imagen0";
imagen[1]="URL_imagen1";
imagen[2]="URL_imagen2";
imagen[3]="URL_imagen3";
imagen[4]="URL_imagen4";
imagen[5]="URL_imagen5";
// la cantidad depende de como dividamos las 24 horas
var now = new Date();
var hours = now.getHours();
var alea=0
// ... en este caso, hay 6 divisiones
if (hours>0) {alea=0;} // de 0 a 4
if (hours>4) {alea=1;} // de 4 a 8
if (hours>8) {alea=2;} // de 8 a 12
if (hours>12) {alea=3;} // de 12 a 16
if (hours>16) {alea=4;} // de 16 a 20
if (hours>20) {alea=5;} // de 20 a 24
document.write("<style>");
document.write("#header-wrapper {background:url("+imagen[alea]+") no-repeat;}");
document.write("</style>");
</script>
POST-EDICION: si alguien quiere ver un buen ejemplo en acción, Migoz de Los orientales, tiene una página donde implementó el script (fuera de Blogger) y se tomó el trabajo de dividir el día en 24 horas.
Tres trucos simples |
1. Para quitar la barra superior en Blogger Beta basta copiar y pegar el siguiente código inmediatamente antes del tag </head>;:
<style type="text/css">
#navbar-iframe {
height:0px;
visibility:hidden;
display:none;
}
</style>
#navbar-iframe {
height:0px;
visibility:hidden;
display:none;
}
</style>
2. Para agregar un vínculo en cada post que permita ir al inicio de la página, buscar en la plantilla la siguiente entrada y agregar el código resaltado.
<b:includable id='post' var='post'>3. Esta es una buena idea de purplemoggy Quisiera agregar otro widget Archivo. Quiero tener uno de tipo desplegable (HIERARCHY) y otro de tipo DROP-MENU o FLAT. Blogger no me lo permite. Cuando queremos agregar un elemento a la página, la opción está deshabilitada. La solución es muy sencilla.
.......
<a href='javascript:scroll(0,0)' title='INICIO'>Ir al inicio</a>
<!-- quickedit pencil -->
<b:include data='post' name='postQuickEdit'/>
.......
</b:includable>
Ir a la parte de Diseño Edición HTML de la plantilla y, para trabajar con más comodidad, dejar desmarcada la opción Expandir Widgets. Buscar la siguiente línea:
Cambiar el ID por cualquier otro (lo obvio es BlogArchive2) y el título (para poder localizarla rápidamente). Quedaría algo así:
Este truco, permite duplicar cualquier widget que tenga características de único (Header, Profile, etc). En todos los casos, basta copiar el existente, pegarlo en cualquier parte y cambiar el ID.
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>seleccionarla, copiarla y pegarla donde se quiera (aconsejo ponerla ahí mismo, luego podremos reubicarla).
Cambiar el ID por cualquier otro (lo obvio es BlogArchive2) y el título (para poder localizarla rápidamente). Quedaría algo así:
<b:widget id='BlogArchive2' locked='false' title='Blog Archive' type='COPIA'/>Una vez guardada la plantilla, vamos a la parte de Diseño Agregar y quitar elementos y allí estará, podremos arrastarla y ponerla donde se nos ocurra y luego, editarla para seleccionar de qué tipo será, etc.
Este truco, permite duplicar cualquier widget que tenga características de único (Header, Profile, etc). En todos los casos, basta copiar el existente, pegarlo en cualquier parte y cambiar el ID.
RapidRip or not to bit |
Lo vi hoy en Mocosoft y en Nit's, ambos recomiendan una web para descargar desde Rapidshare al instante, sin esperas, sin usuario y sin contraseña. Además, dicen que permite descargas simultáneas. La página es RapidRip.
Yo no logré nada pero me parece que es un problema personal, no les gustará mi cara, mi PC tendrá alguna enfermedad infecciosas, que sé yo. Jamás en la vida logré bajar un bit, ni un uno ni un cero, NADA.
Por las dudas, si a alguien le sirve, ahí está. Sin embargo, no puedo dejar de preguntarme por qué tanta gente usa esos servicios. Un misterio. Sería mejor que confiaran en la vieja mulita, un animal noble que jamás los va a dejar de a pié.
Yo no logré nada pero me parece que es un problema personal, no les gustará mi cara, mi PC tendrá alguna enfermedad infecciosas, que sé yo. Jamás en la vida logré bajar un bit, ni un uno ni un cero, NADA.
Por las dudas, si a alguien le sirve, ahí está. Sin embargo, no puedo dejar de preguntarme por qué tanta gente usa esos servicios. Un misterio. Sería mejor que confiaran en la vieja mulita, un animal noble que jamás los va a dejar de a pié.
Noviembre ni fu ni fa |
El 11 es un número bobo. No tiene la utilidad del 12 y su docena ni la importancia del 10, base de todo un sistema. Está en el medio y, como todo lo que se queda en el medio termina aplastado.Enero es la vacaciones, febrero es corto, en marzo empiezan las clases, abril Pascuas, mayo el 25, junio la bandera, julio la independencia, agosto el día del niño, septiembre la primavera, octubre Juán Domingo, diciembre las fiestas. Noviembre ..... noviembre es el patito feo. No pasa nada.
De este lado del mundo ya no es primavera pero tampoco es verano, imagino que, del otro lado, ya no es otoño pero tampoco invierno. Un mes ni fu ni fa.
Conversión online |
Media Converter es un sitio donde pueden convertirse archivos de música, documentos, imágenes y vídeo de un formato a otro.
La conversión es online y gratuita, no hace falta registrarse. Lo he probado y es altamente recomendable. Por ejemplo, un AVI de 5 MB fue convertido en MPG en unos 15 minutos.
Entre muchos otros, admite archivos 7Z CAB RAR ZIP, vídeo ASF AVI FLV MOV MPG OGM SWF WMV, imágenes BMP GIF ICO JPG PNG TGA TIF WMF, audio WAV MP3 OGG MPC WMA, de texto HTML RTF PDF PS CSV y todo tipo de documentos de Microsoft Office, Open Office, Word Perfect, dBase, etc, etc, etc. Impresionante.
La conversión es online y gratuita, no hace falta registrarse. Lo he probado y es altamente recomendable. Por ejemplo, un AVI de 5 MB fue convertido en MPG en unos 15 minutos.
Entre muchos otros, admite archivos 7Z CAB RAR ZIP, vídeo ASF AVI FLV MOV MPG OGM SWF WMV, imágenes BMP GIF ICO JPG PNG TGA TIF WMF, audio WAV MP3 OGG MPC WMA, de texto HTML RTF PDF PS CSV y todo tipo de documentos de Microsoft Office, Open Office, Word Perfect, dBase, etc, etc, etc. Impresionante.
Favicon en Blogger |
Se llama Favicon (Favorites icon), a esa pequeña imagen que aparece en la barra de direcciones del navegador, en los marcadores (favoritos) y en los títulos de las páginas.
Para empezar, se necesita tener la imagen. Si bien algunos navegadores aceptan cualquier formato, otros sólo admiten el formato ICO (icono). Para crear el archivo podemos utilizar cualquier programa. Lo ideal, sería que contuviera dos imágenes, una de 32x32 y otra de 16x16. Si esto no es posible, deberíamos optar por la de 16x16, los resultados no será óptimos pero nada es perfecto.
Otra manera, la más simple (yo usé esta) es convertir una imagen en icono mediante algún servicio online como Chami que nos permite subir cualquier imagen desde la PC, sin limitaciones de tamaño o formato y crea los archivos necesarios.
Una vez que tenemos el archivo (que deberemos llamar favicon.ico) deberemos subirlo a la web. Esto puede ser complicado ya que Blogger no admite este tipo de imágenes y tampoco lo hace la mayoría de los servicios gratuitos. Personalmente, usé Fileden, es el único que encontré. Si alguien sabe de otro, avise.
Finalmente, una vez subido el archivo ICO, tomamos nota de la dirección URL en donde se encuentra alojado y debemos ir a la plantilla de Blogger para agregar el código necesario en el encabezado de la plantilla, entre los tags <head> y </head>, antes del tag <title>. Una plantilla típica empezaría así:
Una vez hecho esto, guardamos la plantilla y listo.
NOTA: acuérdense de forzar la recarga de la página (Ctrl + F5) y, si es necesario, borren los temporales de internet para evitar que se siga leyendo desde la caché.
Otra manera, la más simple (yo usé esta) es convertir una imagen en icono mediante algún servicio online como Chami que nos permite subir cualquier imagen desde la PC, sin limitaciones de tamaño o formato y crea los archivos necesarios.
Una vez que tenemos el archivo (que deberemos llamar favicon.ico) deberemos subirlo a la web. Esto puede ser complicado ya que Blogger no admite este tipo de imágenes y tampoco lo hace la mayoría de los servicios gratuitos. Personalmente, usé Fileden, es el único que encontré. Si alguien sabe de otro, avise.
Finalmente, una vez subido el archivo ICO, tomamos nota de la dirección URL en donde se encuentra alojado y debemos ir a la plantilla de Blogger para agregar el código necesario en el encabezado de la plantilla, entre los tags <head> y </head>, antes del tag <title>. Una plantilla típica empezaría así:
<?xml version="1.0" ....... >Debido a una limitación de Internet Explorer, ambas instrucciones son necesaria, una se usa para los favoritos y la otra para la barra de direcciones.
<!DOCTYPE html ....... >
<html ....... >
<head>
<b:include data='blog' name='all-head-content'/>
<link href='URL_icono' rel='shortcut icon' type='image/x-icon'/>
<link href='URL_icono' rel='icon' type='image/x-icon'/>
<title><data:blog.pageTitle/></title>
Una vez hecho esto, guardamos la plantilla y listo.
NOTA: acuérdense de forzar la recarga de la página (Ctrl + F5) y, si es necesario, borren los temporales de internet para evitar que se siga leyendo desde la caché.
