30/6/12

Cómo cambiar el favicon de tu blogger

El favicon es ese pequeño icono con la letra B de Blogger que está en la barra de direcciones o en las pestañas de nuestro navegador. El icono en sí no es feo, pero es el mismo que llevan por defecto todos los blogs de Blogger, por lo que si queremos personalizar un poco más el blog no está de más que lo modifiquemos a nuestro gusto.

Lo primero será crear nuestro propio favicon. Para ello debemos saber que es un icono de 16×16 píxeles y tiene que tener el formato .ico.
Así que tendremos que crear una imagen de 16×16 píxeles y luego pasarla a ese formato. Para ello podemos utilizar cualquiera de estas dos webs que nos transforman nuestra imagen al formato deseado: Web Script Lab o Dynamic Drive. Con el icono ya en el formato adecuado tendremos que alojarlo en alguna web, por ejemplo en nuestro Dropbox o Fileden o SkyDrive.
Lo siguiente será ir a “Diseño” – “Edición de HTML” y tenemos que buscar la línea donde ponga:
<head>
Justo debajo de ella pegaremos lo siguiente:
<link href=’url_imagen.ico’ rel=’shortcut icon’ type=’image/x-icon’/>
<link href=’url_imagen.ico’ rel=’icon’ type=’image/x-icon’/>
Deberemos cambiar donde pone “url_imagen.ico” por la dirección de nuestro icono.
Y sin más, de una manera tan fácil ya tendremos nuestro favicon propio, a nuestro gusto y totalmente personalizado.

Fuente: Bloguismo

¿Cómo poner una imagen de fondo en el blog?

1. Ir a diseño de la plantilla. Después clic en Edición de HTML (no Expandir plantillas de artilugios) y buscas lo siguiente:

body {
background:$bgcolor;
...
}

2. Tendrás que agregar después de background:$bgcolor lo siguiente (lo que está de color azul):

body {
background:$bgcolor url(http://Aquí la direción de la imagen) fixed no-repeat top left;
...
}

Explicación:
- El valor no-repeat, la imagen no se repite. Además podemos cambiarlo por otros valores como repeat-x, repetirá la imagen horizontalmente mientras que el valor repeat-y, repetirá la imagen verticalmente y si se especifica repeat, la imagen se repetirá horizontal y verticalmente.
- El valor fixed, la imagen se desplazará con el contenido o será fija.
- El valor top left, la posición de la imagen.

Nota: La imagen debe ser grande, tipo wallpaper, el cual tienen un ancho de 1024 pixeles (px) y un alto de 685 px aproximadamente.


Ver ejemplo aquí.

Fuente: Ayuda para el blog

25/6/12

Colocar y ajustar una imagen en la cabecera del blog en las nuevas plantillas



¡Hola, que tal!; en este ocasión, te voy a compartir algo muy básico y útil a la hora de personalizar tu blog. Se trata de colocar y ajustar una imagen en la cabecera, cosa que he visto que causa problemas en los blogs.

Es muy importante saber la medida de la imagen que quieres colocar, claro que dependerá de los resultados que busques pero, suponiendo que quieras que la imagen abarque el ancho disponible de la cabecera, es posible usar una imagen más grande, o igual que el ancho del blog completo, para obtener resultados satisfactorios.

Para saber cuanto mide el ancho del blog completo (mismo que tú determinas en las nuevas plantillas), debes ir a Diseñador de plantillas►Ajustar ancho, y ver el valor que tienes definido para Blog completo. Eso te dará una idea de la imagen que puedes usar y servirá de base para hacer los ajustes.


Subir la imagen a la cabecera en las nuevas plantillas

Vamos a suponer que ya tienes una imagen lista para usar, (puedes encontrar muchas aquí ) entonces, la vas a subir así:

Paso 1:Ve a diseño►Elementos de la páginas, y haz click en editar en la sección que corresponde a la cabecera.



Paso 2: Asegurate de marcar la opción reducir hasta ajustar, si la imagen es más grande o igual que el ancho del blog completo.



También, selecciona las opción para la ubicación de la imagen, de las opciones que permite, como:
  • Detrás del título y la descripción
  • En lugar del título y la descripción
  • Colocar la descripción después de la imagen
Paso 3: Sube la imagen, ya sea desde una carpeta de tu computadora, o escribiendo la URL del enlace de la imagen en la opción que dice: Desde la web.



Paso 4: Finalmente guarda los cambios.


Importante saber que...

En algunos casos, las cosas no se ven igual en todos los navegadores, y aquí los problemas son visibles si la imagen es más grande o igual que el ancho del blog, y no seleccionas la opción de reducir hasta ajustar antes de subir la imagen.

    Si por ejemplo, colocas esta imagen que mide 980px., en lugar del título y la descripción, y el ancho del blog completo también mide 980px...


    ...al no marcar la casilla de reducir hasta ajustar, la imagen se verá incompleta en Firefox y Google Chrome...


    ...y aunque dependiendo de la imagen no puede ser notorio el problema en esos navegadores, en Internet Explorer, para no perder la costumbre, las cosas se verán peor:


    Y entre más grande sea la imagen,  más se va a salir o desbordar la imagen hacia la derecha, hasta llegar a provocar una barra de desplazamiento en el fondo del monitor si se excede el ancho de la resolución de pantalla del usuario; como no queremos que eso pase, marca siempre la casilla de reducir hasta ajustar antes de subir la imagen ;) .

    13/6/12

    Cómo poner una imagen flotante en blogger

     Pequeño tutorial sobre cómo poner una imagen flotante en blogger

    1. Vas a DISEÑO-Elementos de la página.

    2. Agregas un nuevo gadget  HTML y pegas en él el siguiente código:

    <a style="display:scroll;position:fixed;bottom:0px;right:0px;" href="URL DE LA PAGINA "/><img src="LINK DE IMAGEN" /></a>

    3.-Guardas y listo!

    Nota: Puedes ver la imágen flotante en mi blog, aqui abajo en la esquina derecha, espero haberte ayudado.