English French Spain Portuguese Japanese Chinese Simplified

01 junio 2010

Editar entradas desde Windows Live Writer

Cuando instalamos Windows Live, nos viene en el paquete Writer, un procesador de texto fácil y cómodo para editar las entradas para Blogger.
Lo primero que tenemos que hacer es abrir el procesador de texto writer y en la barra de herramientas pinchar en Blogs>Agregar cuenta de blog .

1
Nos aparece un asistente para la configuración y nos pregunta:
¿Qué servidor de blog usas? y pinchamos en Otros servicios de blog.
2
Ahora nos dice: Agregar una cuenta de blog:
donde en Dirección web de tu blog, le pondremos la URL de nuestro blog, y el nombre de usuario y la contraseña que utilizamos en el blog.
3
A continuación empezará la configuración de la cuenta de blog, que tardará unos segundos.
5
Cuando termine pinchas en finalizar y ya puedes utilizar el editor de texto de writer para crear la entrada para tu blog.
Mientras vayas escribiendo es aconsejable pinchar en Guardar Borrador Local de vez en cuando por si fallara el programa y se perdiera todo.
Como podéis ver  la interfaz es muy completa. Podemos subir las imágenes, cambiarles el tamaño, la posición, crearle un margen o una sombra, etc...
Crear tablas con un par de clics,añadir enlaces y lo más importante y que muchas veces no prestamos la debida atención y luego sale el texto como sale,  si pinchamos en Herramientas, encontraremos Revisar Ortografía y nos irá corrigiendo las faltas , siempre preguntando primero si queremos hacer el cambio.
Una vez todo en su sitio solo queda pinchar en Publicar borrador en blog y automáticamente envía una copia al blog.
Cuando termina la trasferencia ya la tenemos en nuestro blog , y lo encontraremos en Editar entradas como cualquier entrada creada con Blogger y en borrador, para aplicarle una vista previa antes de publicar.
También se puede  enviar directamente desde writer a la entrada del blog, aunque yo no lo hago hasta no darle el último vistazo.

15 agosto 2009

Ocultar del sidebar parte del perfil

Como todos saben , llega un momento que la barra lateral de nuestro blog empieza a
alargarse demasiado.
En mi caso Mis datos personales, sin el perfil, ocupaba más de 500px de longitud.
La solución, crear un enlace que cuando lo pinchemos nos lleve a nuestro perfil y ocultarlo de nuestro sidebar completamente
Ver mi perfil
o , como en mi caso, dejar la foto, el nombre y procedencia :
1
y crear un botón en la barra de navegación o en cualquier sitio que nos lleve a nuestros datos personales:
2
Para la segunda opción , en DISEÑO- Edición de HTML,
4
como siempre, guarda la plantilla y seguidamente activar la casilla
Expandir artilugios.
Vamos bajando en nuestra plantilla hasta encontrar el siguiente código:
5
en el cual os señalo en amarilla donde colocar <!-- -->
que nos sirve para ocultar la parte de código sin eliminarla.
Guardamos la plantilla.
Ahora en el mismo escritorio pinchamos en ver perfil
6
y guardamos la URL de la ventana de BLOGGER que se abrirá con todos nuestros datos para , posteriormente colocarla en el enlace de nuestro botón.
Muy simple, pero a mí me gusta el resultado .

31 julio 2009

AÑADIR ZONAS EDITABLES

Si tenemos una plantilla con una barra lateral
como esta y queremos añadir zonas editables y fijas
2
Abrimos la plantilla y buscaremos este trozo de código
1
y cambiamos ‘no’ por ’ yes ‘ en los dos apartados.
3
Guardamos la plantilla y el resultado es el siguiente.
4
Hemos ganado dos zonas para ir añadiendo gadgets, aparte de la
que ya teníamos en la barra lateral y la del pie de la página.
Pero debemos tener presente que estos gadgets estarán siempre fijos encima de las
entradas del blog.
5
Igualmente procederemos si la plantilla dispone de dos barras
laterales y queremos añadir zonas editables en la cabecera y al principio de las entradas.
Yo particularmente dejé la página como fija , no dejo mostrarse ninguna entrada, para ello he creado un enlace a las entradas y en CONFIGURACIÓN lo dejé en MOSTRAR ENTRADAS :0

17 junio 2009

ENTRADAS(Cambiar el color del fondo)

Es muy simple cambiar el color al fondo de nuestra entradas.
2
Lo primero será abrir en DISEÑO, Edición de HTML.
El siguiente paso es de los más importantes tanto para el caso que nos ocupa
como para cualquier otro cambio que tengamos que hacer a la plantilla:
3
Como podéis ver se trata de realizar una copia de seguridad, por si metemos la pata.
1
Dentro de EDITAR PLANTILLA, buscaremos el siguiente código:
#main { padding-top: 22px; padding-$endSide: 8px; padding-bottom: 0; padding-$startSide: 8px; background: url( http://www.blogblog.com/thisaway_rose/bg_content.gif) repeat-x $startSide top; }
Como podéis ver se encuentra la URL del fondo que tiene por defecto.
Abrimos la página en internet y la guardamos como fondo en imágenes.
Ahora se trata de abrir la imagen con el gimp, photoshop, etc…
y con las medidas de esa imagen creaís la vuestra.(fijaros que es un gif, por lo tanto esta indexado y tendréis
que cambiar a modo RGB para poder hacerle cambios)
Yo simplemente le he cambiado el color de fondo y contorneado 1px. con un color parecido.
Cuando lo tengáis , volvéis a modo indexado y lo guardáis como gif.
Subir la imagen y la URL que genere copiar y sustituirla en la plantilla, eliminando la antigua.
4
Falta muy poco, pero importante.
Como podéis ver en el código por defecto pone casi al final repeat-x (esto quiere decir que se repetirá la imagen
en sentido horizontal), pero como nuestras entradas no tienen todas la misma longitud, nos interesa que se nos
repita la imagen, tanto horizontal como verticalmente.
Por lo tanto tenemos que cambiar este por repeat ( que no se os olvide)
Solo nos falta GUARDAR PLANTILLA.

03 mayo 2009

EL GIMP(Cambiar color de barra sidebar de plantilla thisaway rose)

Después de que en el blog de la informática se ha explicado la forma de cambiar el color a varias plantillas de bogger, os voy a comentar la plantilla THISAWAY ROSE y sus variantes, ya que es completamente distinta la forma de hacerlo.
 Este es el código que encontraremos en EDICIÓN DE HTML- EDITAR PLANTILLA

#sidebar-wrapper { display: inline; /* fixes a strange ie margin bug */ float: $endSide; margin-top: 0; text-align: center; margin-$endSide: 3px; margin-bottom: 0; margin-$startSide: 0; width: 220px; color: $textColor; line-height: 1.4em; font-size: 90%; background: url( http://i41.tinypic.com/xpateq.gif) repeat-x $startSide top; 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 */
}

 Como pueden ver en esta plantilla si que disponemos de background con una url descargada desde un un alojamiento de imágenes. (la url que os aparece no es la misma que veis , porque yo ya la he cambiado).
 Lo primero que he hecho ha sido conocer las medidas de esta barra vertical abriendo la dirección y la he guardado en imágenes.
Tiene 5pixeles de ancho y lo abro con El Gimp cambio el tamaño de 5x1500 y a modo RGB porque en modo indexado no se deja cambiar el color.

Aprovecho para deciros que El gimp tiene la cualidad de guardar los 12 últimos colores utilizados por si volvemos a usarlo.
 Le cambio el color de fondo y le doy un contorno de 1 px con un tono un poco más oscuro. Lo vuelvo a guardar como gif y lo subo a un servidor de imágemes , yo utilizo este y me gusta.
 El url que genere lo copio y lo sustituyo por el que os he puesto en color rojo. Guardamos y ya está . Si tenéis dos sidebar como en mi plantilla, pegáis la misma url a las dos.
 Como podéis ver al darle un contorno queda un efecto de rayado bastante original.
 
IR ARRIBA