Paginas aleatorias Crea tu Blog en Blogger

www.elperrodepapel.com

1

Hola, soy Celia, de El Perro de Papel, me encanta el Diseño Gráfico y

aplicarlo a los Blogs. Por eso y porque muchos de vosotros me habéis pedido

un curso sencillo para personalizar vuestros blogs, me he decidido a lanzar este

ebook.

A lo largo de este manual aprenderás a crear un Blog desde cero,

conectarlo a una página de Google Plus y personalizarlo para adaptarlo a la

imagen que quieras ofrecer a tus visitantes.

Vamos a usar funciones muy básicas, usando la plantilla Simple de Blogger,

añadiendo algunos de los widgets más interesantes y aplicando algunos

cambios sencillos a la plantilla HTML.

Al finalizar el ebook serás capaz de diseñar un Blog como éste en muy poco

tiempo:

http://www.elperrodepapel.com/


2

Este curso no se centra en programas de diseño, por lo que he usado Paint

para hacer las diferentes ilustraciones. Dentro de unos meses lanzaré un

nuevo curso más centrado en el Diseño Gráfico donde usaremos InkScape, un

programa profesional de diseño vectorial de descarga gratuita, para darle un

diseño mucho más profesional a nuestra bitácora.

Si te surge alguna duda a lo largo del curso, puedes escribirme a:

[email protected]

¡Estaré encantada de saber de ti!

Un fuerte abrazo y ¡feliz aprendizaje!

Celia


3

Antes de comenzar con tu Blog, hay una serie de cuestiones que tienes que

tener en cuenta. Si vas a compartir contenido propio y original, seguramente tus

visitantes querrán contactar contigo, ya sea para pedirte consejo, consultarte

dudas o simplemente saber algo más de ti. Por ese motivo, es muy buena idea

crear una cuenta de correo electrónico específica para el Blog.

Desde esa cuenta, crearemos nuestro Blog y perfil en las redes sociales, así

tendremos todo unificado y nos resultará todo mucho más sencillo. Es

recomendable usar GMAIL ya que, como Blogger y Google Plus, pertenece a

Google y nos facilitará la conexión entre los diferentes servicios.

Para ello buscamos GMAIL en el buscador de Google. Seleccionamos Crear

una Cuenta.


7

Una vez creada nuestra cuenta en Gmail, vamos a abrir nuestro Blog en Blogger.

Para ello entramos en el siguiente enlace: www.blogger.com/

Con nuestra cuenta de Gmail.

En el panel de inicio, seleccionamos Nuevo Blog.

Seleccionamos la Plantilla Sencilla de Blogger.


8

Elegimos el título que queramos para nuestro Blog y en Dirección

añadimos la URL, a veces la que queremos ya está registrada y tenemos que

probar hasta dar con una libre que se adapte a nuestras necesidades.

¡Ya tenemos nuestro Blog registrado! Ahora vamos a personalizarlo.


13

Vamos a empezar a dar forma a nuestro Blog.

Para ello vamos a: Plantilla Personalizar

Y entramos en el Diseñador de Plantillas de Blogger.


14

Desde esta opción modificamos el fondo de nuestro Blog.

Podemos elegir entre los diferentes fondos predeterminados de Blogger o subir

uno propio. En mi Blog podéis encontrar un montón de fondos que podéis usar,

podéis utilizarlos libremente, tanto para un Blog personal como comercial, son

de libre uso.

* Si me permites darte un consejo, el color que más favorece a un Blog es el

blanco. Facilita la lectura y resulta mucho más cómodo centrar la atención en el

contenido, sin entretenerse en la decoración adicional. Un blog con un fondo

demasiado colorido o decorado, puede molestar al lector y afectar

negativamente a la usabilidad y optimización ya que las visitas que

perdamos, aumentarán nuestro índice de rebote indicándole a Google que

algo marcha mal en nuestro Blog.


19

Volvemos a Blogger y seleccionamos: Entradas Entrada Nueva.

Nos aparecerá el siguiente panel de redacción de entradas:


20

Vamos a ver las opciones principales detenidamente para crear nuestra primera

entrada. Como veis, gracias a que tenemos integrado Google Plus, al redactar

nuestras entradas, podemos mencionar a cualquiera de nuestros contactos en

dicha red social.

Teniendo activado Redactar (arriba a la izquierda), escribimos el texto. En mi

caso es una presentación de este curso.

Cuando hayamos revisado el texto, procederemos a darle formato.


35

Ahora sí, vamos a personalizar nuestro diseño desde el Diseñador de Plantillas

teniendo nuestra entrada publicada para poder usarla como referencia a la

hora de escoger los diferentes tipos de letra, colores, etc…

El tipo de letra y el color del texto principal de nuestro Blog (el que

aparecerá en las entradas y páginas).

Es recomendable que sea un tipo de letra legible, sin florituras, de un color

que no sea excesivamente claro, para facilitar la lectura. Si usamos un rosa

pastel y un tipo de letra demasiado decorada… los visitantes pueden salir

espantados de nuestra página incluso antes de terminar de leer la entrada.


39

Blogger ha actualizado la forma de crear páginas. Ahora es similar a la edición

de entradas y podemos hacerlo desde Páginas – Página Nueva.

Nosotros vamos a diseñar la página Sobre Mí, de vital importancia en los Blogs.


40

A todos nos gusta saber con quién estamos hablando. Si añadimos una breve

descripción de quiénes somos, conseguiremos que el visitante confíe un poco

más en nosotros. Lo mismo sucede con las fotos. Un blog sin información del

autor o forma de contacto, suele generar cierta desconfianza.

Yo voy a incluir una foto que ya tengo subida a mi Blog personal, para ello, he

seleccionado subir imagen desde una URL, he copiado el enlace de la

imagen de mi Blog y lo he pegado en la ruta de la imagen a subir.


48

Vamos a seguir personalizando el diseño avanzado de nuestro blog con

nuestras páginas ya publicadas y visibles.

Ya podemos personalizar el aspecto de las pestañas de nuestro menú.


49

Recuerda elegir un tipo de letra legible, la misión de nuestro menú superior es

ayudar a nuestras nuevas visitas a navegar por nuestro blog.

Es recomendable que el color de fondo sea transparente, ya que

estéticamente favorece mucho la imagen de nuestro Blog.


54

Nos aseguramos de tener Color de fondo y Color del borde transparentes

en el Diseñador de Plantillas.

Guardamos los cambios y volvemos a Blogger.

Seleccionamos Plantilla y vamos a Editar HTML.


58

Ahora vamos a centrar los títulos de nuestras entradas.

Para ello, buscamos:

h3.post-title, .comments h4

Y antes de la llave de cierre pegaremos el siguiente código:

text-align: center;

Tal y como aparece en esta imagen:

Comprobamos en Vista Previa que está correcto y guardamos los cambios.


74

Habrás notado que la barra de navegación superior resta profesionalidad

al Blog, así que vamos a eliminarla para mejorar la estética.

Para ello vamos a Diseño y seleccionamos Editar la Barra de navegación.


81

Como comentábamos al principio de este manual, aquí no vamos a hablar

sobre programas de diseño, por lo que he usado Paint para diseñar los

diferentes gráficos que he usado.

Paint es un programa muy sencillo y básico, pero puede servirnos para

empezar a diseñar las diferentes ilustraciones para nuestro Blog, ya que nos

permite trabajar usando los píxeles como unidad de medida.

Para diseñar nuestra cabecera primero necesitamos las medidas. Para ello

vamos al Diseñador de Plantillas de Blogger y elegimos Ajustar Ancho.

Necesitamos la medida del Blog Completo.

Abrimos en Paint un documento de 960 x 250 píxeles (250 píxeles es el alto

aproximado que suele quedar bien).


82

Paint nos ofrece diferentes formas prediseñadas que podemos usar para

decorar nuestra cabecera. Además, podemos cambiar el tipo de contorno y

relleno.

El efecto crayón queda bastante bien, simula estar coloreado a mano.


86

Para mejorar la estética de nuestro Blog, vamos a ver cómo centrar las

pestañas del menú.

Vamos a insertar un sencillo código en nuestra plantilla HTML.

.PageList {text-align:center !important;}

.PageList li {display:inline !important; float:none !important;}

Usaremos el buscador interno de nuestra plantilla HTML para encontrar el

código que aplica el formato a nuestro menú superior de páginas:

/* Tabs


88

El objetivo de todo Blog es el de crear una comunidad, es decir, un lugar

donde tanto el autor como los visitantes se sientan cómodos y se animen a

comentar, compartir y opinar con total confianza.

Para ello, primero vamos a facilitar a nuestros lectores la posibilidad de

comentar. Yo tengo desactivada la casilla de verificación, es un rollo tener

que escribir las dichosas palabras cada vez que vas a dejar un comentario, al

segundo fallo, no lo intento más. Y es una pena, podemos perder comentarios

valiosos y hacer que nuestro lector se vaya con un mal sabor de boca.

En Configuración – Entradas: podemos elegir el máximo de entradas que se

verán en la página principal.


95

Ahora se vería perfectamente:

Si queremos eliminar el borde punteado, volvemos a plantilla HTML, buscamos el

mismo código de antes y eliminamos:

border: 4px dotted #F7819F;

El código quedaría así:

Y ahora la imagen queda perfectamente integrada en nuestro blog.


96

Hay otras opciones importantes a tener en cuenta a la hora de configurar

nuestro Blog. Entre ellas, una de las más importantes, es establecer

correctamente nuestra franja horaria, sobre todo si tenemos pensado

programar nuestras entradas para que se publiquen de manera automática.

Ruta: Configuración – Idioma y Formato

Nos aseguramos de tener marcado en Idioma: español

Y en Zona Horaria, buscaremos nuestra franja correspondiente, en mi caso es

GMT+01 Madrid.

Las siguientes opciones nos permiten elegir como queremos que se vea la fecha

encima de cada una de nuestras entradas.

Con este sencillo cambio ya podemos programar nuestras entradas sin

problema.


102

Tras el último cambio en el algoritmo de Google, el contenido compartido en

las redes sociales se considera contenido de calidad. Cuantos más “me

gusta”, “+1” y tweets obtengan tus artículos, mayor reputación online tendrás a

los ojos de Google.

Por ello es de vital importancia incluir los iconos para que te sigan en las

redes sociales en el sidebar de tu blog. Vamos a ver cómo hacerlo.

Para diseñarlo, tomamos la medida de la barra lateral del blog en el

Diseñador de Plantillas.

Con esa medida como referencia, abrimos un nuevo documento en Paint para

diseñar nuestro primer icono. En mi caso son de 260 x 100 pixels.


103

Este es mi diseño en Paint, como ves, a pesar de ser un programa muy sencillo,

pueden dibujarse cosas chulas.

Diseñamos iconos para todas las redes sociales que tengamos. Ahora vamos a

instalarlos en el sidebar del blog.

Para ello, en Diseño, añadimos una nueva Imagen.


109

En Diseño – Añadir un Gadget – Lo básico

Encontramos los gadgets de Google Plus que podemos integrar directamente

en nuestro blog.

♥ Botón +1


113

Si tienes un blog, tienes un feed. El feed de tu blog se encarga de enviar las

entradas en un lenguaje comprensible para Google para que sean indexadas

y, si has habilitado la suscripción por correo electrónico, envía los emails a tus

suscriptores con el nuevo contenido publicado.

Podemos añadirlo desde Diseño – Añadir gadget – Seguir por correo

electrónico.

Ahora vamos a configurar nuestro feed.


114

Modificamos el título del banner animando a nuestros lectores a suscribirse para

recibir nuestras actualizaciones.

La URL de tu feed es:

http://feeds.feedburner.com/urldetublog

Tal y como aparece la mía en la imagen inferior:

Pinchamos en Ver las estadísticas y obtener más información. Y entramos

automáticamente en Feedburner.


129

Cuando empecemos a tener seguidores, podemos verlos entrando en

Feedburner, pinchando encima del nombre de nuestro blog y seleccionando

Analyze.


130

Desde Diseño podemos añadir otros gadgets interesantes.

A través de este gadget nuestros lectores pueden seguir nuestro blog.


134

Publicamos un comentario de prueba en nuestra entrada de prueba.

Este es el formato predeterminado de las plantillas simples de Blogger.

Para personalizarlo vamos a nuestra Plantilla HTML y buscamos:

]]></b:skin>

Encima de esta etiqueta se añaden los estilos para los diferentes elementos de

nuestro blog.


146

Vamos a analizar algunas opciones para personalizar los colores:

Código 1: .comments .comments-content {

Modificando -> background: #FFFFFF url();

Cambiamos el color del fondo del contenedor, por ejemplo:

Código 2: .comments .comment .comment-actions a {

Modificando -> background: #CEE3F6;

Cambiamos el color de fondo de los botones Eliminar/Responder


147

Modificando color: #848484;

Cambiamos el color de la letra de los botones Eliminar/Responder


153

Dedícale un poco de tiempo a este código, experimenta con él en tu blog de

pruebas y cuando tengas el resultado esperado, impleméntalo en tu Blog tal y

como hemos visto.

Es importante hacer los cambios en un blog de prueba ya que en Vista Previa

no se ve, solo podemos comprobar que la plantilla no tiene errores, guardar y,

posteriormente, ver los cambios que hemos hecho en el Blog visualizando los

comentarios.


154

Una vez hayas creado todas las páginas que necesitas y hayas situado el menú

en la zona superior del blog, vamos a darle formato.

Para ello vamos a la plantilla HTML de nuestro blog y buscamos de nuevo el

mismo código que para implementar la personalización de los comentarios:

]]></b:skin>

Justo encima, debajo del código de comentarios personalizados, con cuidado

de no comernos ninguna llave, pegamos el siguiente código:


162

Ya sabes cómo hacerlo ¿verdad?

Este es el resultado si copias mi código sin modificarlo:

Sin ratón ->

Con ratón ->

¿Y si hacemos lo mismo con la fecha?


164

Lo que hemos hecho es añadir un estilo nuevo para cuando el cursor pase

por encima de nuestra fecha. Haz los cambios que quieras, comprueba en

Vista Previa que todo está correcto. Y después de guardar te quedará más o

menos así:

Sin ratón ->

Con ratón ->


165

¡¡Enhorabuena!! Si has puesto en práctica todo lo que te he contado en este

manual, ¡estoy segura de que ya eres capaz de “jugar” con tu plantilla,

personalizar tus nuevos gadgets y experimentar con nuevos códigos!

Hemos visto códigos básicos (colores, efectos al pasar el ratón, redondeo de

esquinas, marcos, añadir colores de fondo…) que pueden aplicarse a un

montón de elementos de tu plantilla.

Nos hemos dejado muchas cosas en el tintero, pero creo que mi objetivo:

aprender a crear tu blog desde cero, ¡se ha cumplido si estás leyendo esta

página!

Quiero darte las gracias por tu confianza, espero que disfrutes aprendiendo y

experimentando, pues es la mejor manera de aprender, intentándolo y

equivocándonos (no olvides practicar en tu blog de pruebas, ¡no vayamos a

liarla con la plantilla!) y, si es necesario, haz una copia de seguridad de tu

plantilla antes de hacer cambios, al menos hasta que veas que te manejas con

cierta soltura, ¡para evitar sustos innecesarios!

Y cualquier duda, ¡ya sabes dónde encontrarme!

[email protected]

Un fuerte abrazo, ¡y feliz día!

Celia ♥

https://www.facebook.com/groups/325678737567757/

Paginas aleatorias Crea tu Blog en Blogger

Documents

Transcript of Paginas aleatorias Crea tu Blog en Blogger