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:
www.elperrodepapel.com
1
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:
elperrodepapel@gmail.com
¡Estaré encantada de saber de ti!
Un fuerte abrazo y ¡feliz aprendizaje!
Celia
www.elperrodepapel.com
2
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.
3
www.elperrodepapel.com
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.
www.elperrodepapel.com
7
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.
8 ¡Ya tenemos nuestro Blog registrado! Ahora vamos a personalizarlo.
www.elperrodepapel.com
Vamos a empezar a dar forma a nuestro Blog. Para ello vamos a: Plantilla ďƒ Personalizar
13 Y entramos en el DiseĂąador de Plantillas de Blogger.
www.elperrodepapel.com
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.
14
* 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.
www.elperrodepapel.com
Volvemos a Blogger y seleccionamos: Entradas Entrada Nueva.
19 Nos aparecerá el siguiente panel de redacción de entradas:
www.elperrodepapel.com
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.
20 Cuando hayamos revisado el texto, procederemos a darle formato.
www.elperrodepapel.com
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…
35
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.
www.elperrodepapel.com
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.
39
Nosotros vamos a diseñar la página Sobre Mí, de vital importancia en los Blogs.
www.elperrodepapel.com
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.
40
www.elperrodepapel.com
Vamos a seguir personalizando el diseño avanzado de nuestro blog con nuestras páginas ya publicadas y visibles.
48 Ya podemos personalizar el aspecto de las pestañas de nuestro menú.
www.elperrodepapel.com
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.
49
www.elperrodepapel.com
Nos aseguramos de tener Color de fondo y Color del borde transparentes en el Dise単ador de Plantillas.
54 Guardamos los cambios y volvemos a Blogger. Seleccionamos Plantilla y vamos a Editar HTML.
www.elperrodepapel.com
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.
www.elperrodepapel.com
58
Habrás notado que la barra de navegación superior resta profesionalidad al Blog, así que vamos a eliminarla para mejorar la estética.
74
Para ello vamos a Diseño y seleccionamos Editar la Barra de navegación.
www.elperrodepapel.com
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.
81
Abrimos en Paint un documento de 960 x 250 píxeles (250 píxeles es el alto aproximado que suele quedar bien).
www.elperrodepapel.com
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.
www.elperrodepapel.com
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
86
www.elperrodepapel.com
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.
88
www.elperrodepapel.com
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í:
95
Y ahora la imagen queda perfectamente integrada en nuestro blog.
www.elperrodepapel.com
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. www.elperrodepapel.com
96
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.
102
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.
www.elperrodepapel.com
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.
www.elperrodepapel.com
103
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
109
www.elperrodepapel.com
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.
113
Ahora vamos a configurar nuestro feed.
www.elperrodepapel.com
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:
114
Pinchamos en Ver las estadísticas y obtener más información. Y entramos automáticamente en Feedburner.
www.elperrodepapel.com
Cuando empecemos a tener seguidores, podemos verlos entrando en Feedburner, pinchando encima del nombre de nuestro blog y seleccionando Analyze.
129
www.elperrodepapel.com
Desde Diseño podemos añadir otros gadgets interesantes.
130
A través de este gadget nuestros lectores pueden seguir nuestro blog.
www.elperrodepapel.com
Publicamos un comentario de prueba en nuestra entrada de prueba. Este es el formato predeterminado de las plantillas simples de Blogger.
134 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.
www.elperrodepapel.com
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:
146
C贸digo 2: .comments .comment .comment-actions a { Modificando -> background: #CEE3F6;
Cambiamos el color de fondo de los botones Eliminar/Responder
www.elperrodepapel.com
Modificando ď&#x192; color: #848484; Cambiamos el color de la letra de los botones Eliminar/Responder
147
www.elperrodepapel.com
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.
153
www.elperrodepapel.com
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>
154
Justo encima, debajo del código de comentarios personalizados, con cuidado de no comernos ninguna llave, pegamos el siguiente código:
www.elperrodepapel.com
Ya sabes cómo hacerlo ¿verdad? Este es el resultado si copias mi código sin modificarlo: Sin ratón ->
Con ratón ->
162
¿Y si hacemos lo mismo con la fecha?
www.elperrodepapel.com
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 ->
164 Con ratón ->
www.elperrodepapel.com
¡¡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!
elperrodepapel@gmail.com
Un fuerte abrazo, ¡y feliz día!
Celia ♥
www.elperrodepapel.com
165