CREAR TU PRIMER BLOG

Transcripción

1

2

3 Si ya tienes un blog, puede que la teoría de este primer tema ya la conozcas. Aun así, nunca está de más hacer un breve repaso de todas las opciones de configuración que nos ofrece Blogger. Si es tu primera vez ánimo! En un par de minutos, tendrás configurado tu primer blog en blogger. 1 CREAR TU PRIMER BLOG Primero vamos a comprobar que el nombre que queremos no está cogido. Esto es muy sencillo, solo tenemos que poner el nombre de nuestro futuro blog en el navegador, seguido de blogspot.com He probado con un nombre simpático: mimamamemima.blogspot.com Existe, aunque vemos que lleva sin actualizarse desde el 2003.

4 2 Aquí tenemos dos opciones: Buscar otro dominio que esté libre y encaje con nuestra idea. Intentar contactar con la bloguera para preguntarle si puede eliminar el blog (de buenas maneras, claro, nada de exigencias, si ella no lo usa y no piensa volver a escribir en él, puede que no le importe) Pinchando en Ver Todo mi Perfil... vemos que no hay forma de contacto posible... Otra opción sería intentar ver si es posible solicitar la baja de ese blog, aunque al estar asociado a una cuenta de gmail, que esté activo o no, no da derecho a eliminarlo sin consentimiento del autor. Pero siempre puedes pedir consejo en el Foro de Productos de Google. Seguiremos probando hasta conseguir encontrar un nombre que coincida con nuestro tema y esté disponible. Conseguido!!

5 3 Antes de registrarlo, vamos a crear una cuenta de gmail asociada con el mismo nombre, desde la cual registraremos el blog, para tenerlo todo organizadito. Puedes hacerlo en una nueva ventana, así no cierras la pestaña de registro del nuevo blog. Puedes hacerlo desde aquí: Crear Gmail Seleccionaremos Crear una cuenta, abajo del todo, en azul

6 4 IMPORTANTE: Vamos a enlazar nuestro blog a Google Plus para mejorar la indexación de nuestras entradas, así que es básico utilizar nuestro nombre y apellidos reales.

7 5 Elegimos nuestra foto de perfil asociada a nuestra cuenta de Google. Las fotos reales, de caras, personas reales, generan mayor confianza que las fotos de logotipos o dibujitos... Es solo un consejo. Si quieres que tus lectores confíen en ti desde el principio, da la cara. Cuenta creada satisfactoriamente!

8 6 Ahora volvemos a la pestaña de registro de Blogger y vamos a registrar nuestro blog con esa dirección de correo electrónico asociado a nuestra nueva cuenta de Google Plus.

9 Asegúrate de elegir la plantilla SENCILLO, es con la que vamos a trabajar a lo largo del curso. 7 Ya hemos registrado nuestro blog. Estamos preparados para empezar a configurarlo.

10 CONFIGURAR TU PRIMER BLOG --> LO BÁSICO < Elegimos CONFIGURACIÓN del desplegable de la derecha El título ya lo tenemos, ahora vamos a añadir una descripción para nuestro nuevo blog. En este punto, estaría genial que tuviésemos ya nuestra temática, perfil de lectores y palabras claves bien definidos. Puedes descargar este Mini Ebook gratuito que te ayudará con este tema. Pincha en la imagen y es tuyo.

11 9 Cuando tengamos nuestra descripción optimizada, guardamos los cambios. 3.- PRIVACIDAD. Muy importante si acabamos de empezar nuestro blog y no queremos que nadie lo vea hasta que esté terminado.

12 Si seleccionamos NO en ambas opciones, tu blog de momento no aparecerá en los buscadores ni será indexado. 4.- PERMISOS. En esta parte, podemos: Añadir autores a nuestro blog. Por ejemplo, en El Perro de Papel, actualmente tengo tres autores invitados: Lou de Marketing para Bloggers, Max de Wordpresteando y Silvia de Handmade para Bloggers. 10 Solo tendríamos que pinchar en Añadir autores e introducir su dirección de , recibirán un correo con una invitación a participar en el blog y solo tendrán acceso a la publicación de entradas. Cuando la invitación haya sido aceptada, desaparecerá de pendientes.

13 Crear un blog privado o público. 11 Público: opción por defecto. Todo el mundo que tenga el enlace, puede leer el contenido de tu blog. Privada: solo autores del blog. Solo tienen acceso a las publicaciones aquellas personas que hayas añadido como autores del blog. Muy práctico para un blog destinado a trabajo en equipo, donde todos pueden publicar nuevas entradas con los avances de los diferentes proyectos en grupo. Privada: solo estos lectores. Estás apuntado a mi Blog Privado? Antes tenía esta opción activada. El blog solo era visible para los lectores que recibían invitación desde esta opción. Pero Blogger tiene un límite de lectores invitados, el verano pasado eran 100. Este blog tiene activada esa opción. Solo los que habéis recibido invitación para entrar podéis leer las publicaciones desde la cuenta que habéis aceptado la invitación.

14 --> ENTRADAS Y COMENTARIOS <-- El alma de todo blog que se precie. Después de todo, un blog está creado para compartir información. Las entradas las ponemos nosotros y los comentarios nuestros lectores. 12 Vamos a ponerles fácil la tarea de comentar!

15 1.- Entradas: CURSO DISEÑA TU BLOG EN BLOGGER CONMIGO 13 Mostrar un máximo de: aquí seleccionamos el número de entradas que queremos que aparezcan en nuestra página principal. En Blogger aparecen 7 por defecto. Plantilla de las entradas: la firma de nuestras entradas. Podemos poner un texto sencillo o añadir una imagen. Aparecerá al final de todas nuestras entradas. Nosotros vamos a añadir una imagen.

16 Esta es la mía: CURSO DISEÑA TU BLOG EN BLOGGER CONMIGO 14 a) Picasa es el servicio de alojamiento de imágenes de Google y es el que vamos a usar para insertar nuestra imagen al final de nuestras entradas. Si tienes cuenta de Google, tienes cuenta de Picasa. Vamos a entrar: Entrar en Picasa Si has seguido los pasos que hemos visto hasta ahora, ese enlace te llevará a tu cuenta Picasa y te redireccionará directamente a tus albums de fotos asociados a tu cuenta de Google. b) Subimos nuestra imagen seleccionando Subir Fotos. Elegimos la foto de nuestra firma.

17 15 Podemos crear un nuevo álbum o añadirla a uno ya existente. Yo siempre creo un nuevo álbum para los gráficos externos de diseño.

18 Hacemos clic fuera del desplegable para cerrarlo y pinchamos en Listo. Abajo a la izquierda, para cargar las imágenes. Como hemos conectado todos nuestros productos de Google, al finalizar la subida nos da la opción de compartirlo en Google Plus. Seleccionamos OMITIR. De momento, no queremos que nadie vea nuestros diseños. 16 Si no ves tu álbum, refresca la ventana de tu navegador pulsando F5 y aparecerá inmediatamente.

19 c) Entramos en nuestro nuevo álbum. 17 MUY IMPORTANTE: Hacemos clic en nuestra imagen, para verla a tamaño real. Nos situamos sobre ella, clic con el botón derecho del ratón y seleccionamos: Copiar Url. Ya estamos listos para insertarla como firma de nuestras entradas!

20 d) Volvemos al panel de administración de Blogger. En plantilla de las entradas escribimos el siguiente código: <img src="url DE NUESTRA IMAGEN"/> 18 Si lo guardamos así, cuando abramos una nueva entrada aparecerá directamente nuestra firma y tendremos que bajar con el Intro un par de veces para poder empezar a escribir. Vamos a ahorrarnos esas pulsaciones añadiendo unos espacios en blanco arriba de nuestra firma. <br/> <br/> <img src="url DE NUESTRA IMAGEN"/> Ahora sí! Guardamos la configuración, en el botón naranja de arriba a la derecha. Y vamos a comprobar que, efectivamente, aparece nuestra firma por defecto.

21 e) Vamos a la opción Entradas del menú de la izquierda y pinchamos en el botón naranja: Entrada nueva. 19 Ahí la tenemos! Configurada por defecto para aparecer en todas y cada una de las entradas que publiquemos a partir de ahora en nuestro blog. Pinchamos en Cerrar, ya que de momento no queremos publicar ninguna entrada, y vamos a seguir configurando nuestro blog.

22 2.- Comentarios. Estas son las opciones que ofrece Blogger. Vamos a verlas una a una. 20

23 a) Ubicación de los comentarios. 21 Debajo de la entrada --> La más recomendable. El formulario de comentarios aparece al final de nuestras entradas, facilitando a nuestros lectores la posibilidad de compartir con nosotros lo que piensan. Página completa --> Al pinchar en comentarios, se abre una nueva página. Es decir, saca al lector de nuestro blog, de manera que si quiere volver a ver la entrada para comentar, tiene que cambiar de una ventana a otra. Trabajo adicional nada recomendable. Ventana emergente --> La odio. Sí, odio las ventanas emergentes. Si seleccionamos esta opción, nuestro formulario de comentarios se abrirá en una ventanita pequeña dentro de nuestro blog, además de ser poco profesional y afear el diseño, también hace que nuestro lector tenga que trabajar con dos ventanas para comentar. Ocultar --> Elimina la opción de dejar comentarios en el blog. Para bitácoras como ésta, de cursos online o tiendas, es la más recomendable. De hecho, es la que está activa en este blog, para comentar y compartir, tenemos el grupo de facebook, donde está todo mucho más organizadito a modo de foro.

24 b) Quien Puede Comentar. 22 Cualquiera --> Recuerda que nuestro objetivo es que nuestros lectores puedan comentar sin problema, por ello, vamos a facilitarles el trabajo. Al seleccionar esta opción no hace falta que sean usuarios de gmail ni registrarse para comentar. Usuario registrado --> Necesitan registrarse para comentar. Usuario con cuentas de Google --> Solo los usuarios de gmail pueden comentar. Solo los miembros de este blog --> Exclusivamente para autores y administradores del blog, el resto no pueden dejar comentarios. c) Moderación de Comentarios. Yo aconsejo no utilizar la moderación de comentarios, a todos nos gusta ver nuestro comentario publicado nada más enviarlo al blog verdad?

25 d) Mostrar verificación de palabras. 23 La odiada caja de verificación con dos palabras la mayoría de las veces ilegibles. Siguiendo la dinámica de facilitar a nuestros seguidores la opción de comentar, seleccionaremos NO mostrarla en nuestro blog. e) Mostrar backlinks. Esta opción nos permite mostrar los enlaces desde otras webs/blogs a nuestras entradas. f) Mensaje del formulario de comentarios. En este apartado podemos añadir el mensaje que queremos que se vea junto a nuestra caja de comentarios, para animar a nuestras visitas a opinar. Intenta ser lo más amable y cordial posible, nada de mensajes secos. A la gente le cuesta mucho animarse a comentar.

26 Cuando hayas hecho los cambios necesario, pincha en Guardar Configuración, el botón naranja de arriba a la derecha. Y vamos a comprobar que, efectivamente, aparece nuestra firma por defecto. Vamos a la opción entradas del menú de la izquierda y pinchamos en el botón naranja: Entrada nueva. 24 Escribimos cualquier cosa, esta entrada la borraremos posteriormente, es solo para ver que realmente hemos guardado correctamente la configuración aplicada. Pinchamos en el botón Publicar, arriba a la derecha. Ya está nuestra entrada de prueba publicada:

27 Pinchamos en el título. Aquí podemos ver el mensaje de nuestro formulario de comentarios y debajo de la caja de texto, los backlinks. 25 Si probamos a dejar un comentario, vemos que no es necesario estar registrado para hacerlo.

28 Y si escribimos un comentario y pinchamos en publicar, nada de verificación de palabras ni moderación, el comentario aparece publicado automáticamente. 26 Para eliminar esta entrada, vamos a nuestro panel de entradas, la marcamos y pinchamos en el cubo de la basura que hay arriba. Listo!

29 --> MÓVIL Y CORREO ELECTRÓNICO <-- Estas opciones no son nada recomendables si queremos cuidar la estética de nuestro blog, pero nos pueden servir para enviar a nuestro blog, tanto desde el móvil como desde el correo, ideas para futuras entradas y dejarlas en borrador. 27 No es un tema demasiado importante, por lo que no vamos a verlo en profundidad, solo hablaremos de como verificar nuestro móvil y correo. a) Móvil: Pinchamos en añadir dispositivo. Nos aparece el código y las diferentes formas de envío. Escogemos la que nos sea más sencilla y esperamos a que blogger lo reciba. A veces tarda un poco.

30 b) Correo: CURSO DISEÑA TU BLOG EN BLOGGER CONMIGO 28 Publicar entradas mediante correo electrónico: En el cuadrado que te he marcado en azul, puedes añadir la palabra secreta que quieras. Cuando quieras publicar o enviar como borrador alguna entrada desde tu correo, debes hacerlo a esa dirección. Es recomendable guardar los correos electrónicos como entradas de borrador, así posteriormente podemos editarlas tranquilamente en casa, es una buena manera de no perder ideas por el camino. Enviar entradas por correo a: Aquí puedes añadir las direcciones de correo de personas que te hayan pedido recibirlas expresamente. Por favor, recuerda que añadir a gente que no lo ha pedido, es hacer spam y no nos dejará en muy buen lugar. Guardamos la configuración y pasamos al siguiente paso.

31 --> IDIOMA Y FORMATO <-- Hay muchos bloggers que se olvidan completamente de esta parte que es de vital importancia, sobre todo si tenemos pensado programar nuestras entradas, ahora verás por qué. Estas son las opciones predeterminadas de Blogger: 29 En idioma pondremos español, la trasliteración no la tocaremos. Y lo verdaderamente importante: La zona horaria de Blogger por defecto es GMT -8:00. La de España es GMT +1. ves la diferencia horaria?

32 Por eso, los bloggers que no han cambiado su zona horaria... a veces se quejan de que sus entradas programadas no se publican... Y hay muchos, doy fe. Buscamos nuestra zona horaria y solucionado. 30 Las siguientes opciones dependerán de la estética que tengamos pensada para nuestro blog, yo suelo modificar solamente la de la fecha y el formato de hora de los comentarios, así: Puedes probar las diferentes opciones hasta dar con la que más te guste. Y no te olvides de cambiar los cambios.

33 OPTIMIZAR TU PRIMER BLOG Ahora vamos a pasar a la tercera parte de este primer tema, muy importante si queremos que nuestro blog esté correctamente optimizado y sea tenido en cuenta por Google > PREFERENCIAS PARA MOTORES DE BÚSQUEDA <-- Seguimos dentro de configuración.

34 a) Etiquetas meta: Esta descripción es la que leerá Google cuando indexe nuestro blog y en la que se basará para clasificarlo en su buscador. Es básico redactar una buena descripción incluyendo de manera estratégica nuestras palabras clave. Si has hecho el curso de Seo para Blogger conmigo, seguro que sabes perfectamente de qué te hablo. Si no, te cuento un poco: Una palabra clave es una palabra que defina la temática de tu blog, puedes jugar con varias palabras clave o sinónimos. 32 Vamos a ver cómo hacerlo. Pinchamos en SI y se abre el cuadro para introducir nuestra descripción. Podemos usar la misma que usamos en el apartado Lo Básico:

35 b) Errores y Redireccionamiento: Vamos a centrarnos en la opción marcada en azul. 33 Mensaje de página no encontrada --> A veces, cuando tenemos un enlace roto, a nuestros lectores les aparece el mensaje: Error 404 Página no encontrada. Esto puede ser porque hayamos enlazado a una foto que han borrado (por eso es mejor subir nuestras propias fotos a nuestro servidor), una web o entrada que ya no existe o simplemente que hayamos copiado mal el enlace. Sea por el motivo que sea, ese error Google lo ve como una muestra de poco interés por nuestra parte. No nos pide que arreglemos inmediatamente cada enlace roto, se conforma con que personalicemos nuestro mensaje de Página no Encontrada. Y eso podemos hacerlo en Editar.

36 Escribimos un mensaje amable tipo: Ups! Parece que la página que buscas no se encuentra. Pero no te preocupes! Lo arreglaré lo antes posible. Mientras, puedes seguir navegando por el blog. Seguro que encuentras algo interesante! 34 Pinchamos en Guardar Cambios... Y listo! También podemos darle formato al texto, para no quede tan soso... Para ello, vamos a usar un truqui te parece? Vamos a crear una nueva entrada, escribimos el mensaje de página no encontrada y le damos los colores y tipos de letra que queramos, incluso podemos añadir una imagen simpática. Algo así: Una vez tengamos nuestro mensaje tan mono como queramos, solo tenemos que pasar a vista HTML:

37 35 Copiar el código y pegarlo en la cajita de página no encontrada dentro de configuración. Guardamos los cambios y ya tenemos programado nuestro mensaje de error 404.

38 La opción de Redireccionamiento personalizado sirve para redireccionar nuestro blog a un dominio propio. En mi blog tienes un tutorial detallado de cómo hacerlo con Enom. c) Rastreadores e Indexación. Desde aquí indicaremos a los robots de Google qué páginas queremos que indexen y cuales preferimos que ignoren. A Google no le gustan nada las páginas duplicadas, por lo que le diremos que ignore las búsquedas y enlaces a entradas de nuestro archivo, así solo tendremos una vez cada una de nuestras entradas. 36 Vamos a configurar solamente la primera de las dos opciones que encontramos. Archivo robots.txt personalizado Seleccionamos Editar - Sí. Y en el cuadrado pegamos: User-agent: Mediapartners-Google Disallow: User-agent: * Disallow: /search Allow: /

39 Con ésto les estamos indicando a los robots que indexen solamente nuestras entradas y no hagan caso de las búsquedas, nubes de etiquetas ni archivos que podamos tener en nuestra sidebar. Guardamos los cambios... y voilá! Nuestro blog optimizado para cuando vea la luz > OTROS <-- La última opción de configuración. De estas opciones no modificaremos nada, solamente añadiremos el código de Google Analytics cuando lo activemos.

40 Si alguna vez quieres migrar tu blog, pinchando en Exportar dentro de Herramientas del Blog, podrás descargar todas las entradas de tu blog. Y en Importar, se cargan las entradas del blog que quieras añadir al tuyo. También encontramos aquí la opción de eliminar el blog. Hemos llegado al final del tema uno! Como has podido comprobar, paso a paso, es muy sencillo empezar nuestro blog con buen pie. Ya lo tenemos creado, configurado y optimizado. Listo para empezar a jugar con nuestra plantilla y personalizarlo a nuestro gusto. 38 Ahora te toca a ti practicar todo lo aprendido.

41 Introducción al Diseñador de Plantillas 39 Esta semana vamos a aprender a modificar nuestra plantilla HTML de Blogger. Para mí, lo más sencillo, sería enseñarte a diseñar tu blog desde el Diseñador de Plantillas de Blogger: Ruta: Plantilla - Personalizar - Diseñador de Plantillas Quieres saber por qué? Porque manejar el Diseñador de Plantillas de Blogger no tiene ningún misterio. Desde esta sencilla pantalla, podemos cambiar la plantilla actual de nuestro blog. Recuerda que trabajaremos con la Simple.

42 El Fondo: CURSO DISEÑA TU BLOG EN BLOGGER CONMIGO 40 El ancho: Que si lo cambiaremos desde aquí por comodidad. Las medidas que ves en la imagen, son las óptimas, las que yo suelo aplicar en cada uno de los blogs que diseño, a no ser que el blogger quiera unas medidas específicas. Blog completo -> 1020 px Barra lateral derecha -> 290 px Recuerda guardar los cambios pulsando en el botón naranja de arriba a la derecha: Aplicar al Blog.

43 Diseño: La plantilla de nuestro blog. Es decir, el boceto con la disposición de los diferentes elementos que lo componen: Cuerpo del blog, Sidebar y Footer. 41 La colocación óptima es la que ves en la imagen superior. Antes de continuar, lee esta entrada de El Perro de Papel sobre la optimización de la sidebar, para que entiendas todo: Optimiza tu Sidebar Si has leído atentamente la entrada, ya entenderás porqué es aconsejable poner la sidebar a la izquierda. Pero qué hay del footer? Footer -> Es el pie de página. A no ser que tengas pensado meter un montón de publicidad en tu pie de página, te recomiendo poner un único elemento, donde pondremos el nombre de nuestro blog y el año de creación. Queda mucho más limpio y profesional. No olvides aplicar los cambios al blog antes de seguir.

44 Avanzado: CURSO DISEÑA TU BLOG EN BLOGGER CONMIGO 42 Desde aquí pueden editarse cada uno de los detalles de nuestra plantilla simple: tipos de letra, colores, fondos, enlaces... Pero todos estos cambios los haremos directamente desde nuestra plantilla, ya que haciéndolo de esta manera, será mucho más sencillo exportar nuestra plantilla con todos los estilos e instalarla en otro blog. Y aprenderemos a trabajar directamente con el código de nuestra plantilla que, en un futuro, si tenemos pensado migrar nuestro blog a un alojamiento propio, nos será mucho más útil ya que tendremos medio camino andado. La última opción dentro de Avanzado es: Añadir CSS Qué es el CSS? Muy sencillo, los estilos de nuestra plantilla. De hecho, todo lo anterior: tipos de letra, colores... es ya parte del CSS de nuestro blog. Qué diferencia hay entre esta ventanita y las anteriores opciones avanzadas? Esta ventanita nos permite añadir nuestro propio código: un menú desplegable, efectos hover al pasar el ratón, sombreados, redondeos...

45 Y por qué no añadirlo desde aquí en vez de entrar en nuestra plantilla HTML? Porque añadiéndolo desde aquí... desordenamos nuestra plantilla, como veremos más adelante. Es un caos, todos los códigos se van añadiendo juntos al final de la parte CSS de nuestra plantilla e intentar poner orden después para tener un código limpio y organizado... es el doble de trabajo. Así que a lo largo de este curso, nos olvidaremos de Añadir CSS desde el Diseñador de Plantillas y lo haremos directamente desde la plantilla HTML. 43

46 La plantilla HTML y Estilos de Blogger Content - Header Vamos a empezar a estudiar la disposición de los diferentes elementos que componen la plantilla HTML de Blogger para empezar a modificarla y saber dónde tenemos que buscar cada elemento. 44 Ruta -> Plantilla - Editar HTML

47 Nos encontramos con ésto: 45 Si es la primera vez que te enfrentas a la plantilla HTML de Blogger... respira! No te preocupes, no pasa nada! Vamos a empezar: Localiza al principio de tu plantilla: <b:skin> </b:skin>

48 Y pincha en la flechita de la izquierda. Todo lo que aparece, son los estilos de tu plantilla: Lo primero que encontramos es el nombre de nuestra plantilla, el del diseñador y la URL. Como vamos a rediseñarla, podemos cambiar esos datos por los nuestros. 46 Así: Y pinchamos en el botón naranja superior: Guardar Plantilla. Ya tenemos nuestra plantilla firmada. Podemos seguir:

49 /* Variable definitions Son los estilos predefinidos a través del diseñador de plantillas, los obviaremos ya que, como te comenté al inicio de este tema, nosotros aprenderemos a aplicar los cambios directamente en nuestra plantilla HTML dejando de lado el Diseñador. 47 Seguimos bajando hasta encontrar: /* Content */

50 Dentro de Content encontramos el cuerpo de nuestro blog. Si te fijas, en todas las opciones aparece este símbolo: $ Qué quiere decir? Que ese valor es variable, es decir, puede modificarse desde el Diseñador de Plantillas. Como nuestra intención es aprender a trabajar directamente con nuestra plantilla obviando el Diseñador, vamos a descubrir nuestro código real con un truquito. 48 Abrimos nuestro blog y pinchamos en cualquier zona con el botón derecho del ratón: Y seleccionamos: Ver código fuente de la página.

51 49 Si es la primera vez que usas esta opción, no te agobies. Eso que ves es la plantilla HTML de tu blog. Vamos a buscar: /* Content Para ello, pulsamos: Control + F y se abrirá el buscador. Copiamos: /* Content y pulsamos Intro. Aquí tenemos los estilos del cuerpo de nuestro blog sin variables:

52 50 Ahora viene el truco. Seleccionamos todo el código que hay dentro de /* Content hasta llegar a /* Header:

53 Copiamos todo el código (Control + C), vamos a nuestra plantilla HTML y lo pegamos exactamente en el mismo lugar: 51 Guardamos la plantilla y si buscamos de nuevo Content, vemos que las $ han desaparecido. Ya podemos ver el código real de nuestra plantilla y modificarlo sin problema. Vamos a empezar por: body { font: normal normal 12px 'Trebuchet MS', Trebuchet, Verdana, sans-serif; color: #666666; background: #ffffff none repeat scroll top left; padding: ; Que es el primer código de estilo que encontramos dentro de Content. Estas son las propiedades generales de nuestro blog. El cuerpo. Lo desglosamos para modificarlo:

54 --> LETRA DEL BLOG font: normal normal 12px 'Trebuchet MS', Trebuchet, Verdana, sans-serif; color: #666666; El tipo de letra. Podemos modificar el tamaño, familia y color. Podemos ver los diferentes tipos de letra que nos ofrece Blogger en las opciones avanzadas del Diseñador de Plantillas. Antes de elegir el tipo de letra predeterminada para las entradas y textos principales de tu blog, te recomiendo leer esta entrada: 52 Diseñar entradas en Blogger: el tipo de letra adecuado Yo siempre instalo la Open Sans, por ser la más clara y sencilla de leer, así que mi primer código modificado quedaría así: body { font: normal normal 14px 'Open Sans', Trebuchet, Verdana, sans-serif; color: #000000; background: #ffffff none repeat scroll top left; padding: ; De momento, como no tenemos ninguna entrada publicada, no podemos comprobar nada en Vista Previa pero no te preocupes! Ya que tienes localizado el código puedes modificarlo tantas veces como quieras! Para modificar el color (yo he usado el negro para mejorar la claridad del texto), puedes buscar una tonalidad que te guste en esta web: Códigos HTML Colores Solo tienes que pinchar en el color que quieras, copiar el código del color y pegarlo en tu código.

55 53 También puedes jugar con la paleta de colores que encontrarás un poco más abajo hasta dar con tu color ideal.

56 Pinchando en On the List, tu color aparecerá abajo. Si quieres guardarlo para trabajar con él más adelante, solo tienes que pinchar en el pin de la parte superior derecha. Ten en cuenta que si borras las cookies, se eliminará, por lo que lo recomendable es que tengas un archivo (word, notepad, una nota...) con los códigos hexadecimales de los códigos que estás usando en tu plantilla > FONDO DEL BLOG Mi consejo: Blanco. O un color liso muy claro. Por qué? Pues porque en Diseño muchas veces menos es más. Si quieres un blog profesional, elegante, claro, limpio, dando prioridad al contenido y que no distraiga al visitante de tu objetivo: que lea tus entradas... pónselo fácil! Olvídate de los fondos demasiado recargados, colores estridentes o patrones geométricos que marean a tus visitas. Como te decía es solo mi consejo. Yo voy a dejar el fondo blanco. Esto se decide en el siguiente trocito del código dentro de body: body { font: normal normal 14px 'Open Sans', Trebuchet, Verdana, sans-serif; color: #000000; background: #ffffff none repeat scroll top left; padding: ; Si quieres elegir un color liso de fondo, solo tienes que sustituir el código del blanco (#ffffff) por el que tú quieras, puedes hacerlo desde la web donde elegimos el color de la letra. Y si quiero poner una imagen? En El Perro de Papel encontrarás un montón de fondos gratuitos que también puedes usar. Ver fondos gratis para Blogger

57 Y vamos a ver como subir la imagen a un servidor propio (para evitar que el diseñador que la ha creado, la borre y nos deje sin imagen de un día para otro) e instalarla en la plantilla de nuestro blog. Para eso, primero elegimos nuestro fondo. Para mi primera prueba, yo he elegido las rayitas grises finitas de esta entrada: Fondos suaves de San Valentín 55 Pinchamos encima de la imagen con el botón derecho del ratón y la guardamos en nuestro ordenador. Abrimos una pestaña nueva y buscamos: Picasa. Picasa es la plataforma donde Blogger almacena las imágenes de nuestro blog. Por ello, es la más recomendada para subir fondos, iconos de redes sociales, separadores y demás... ya que cargarán mucho más rápido que en cualquier otra web que ofrezca servicio de alojamiento de imágenes. Ya hemos subido nuestra firma personalizada usando Picasa, así que tenemos que tener un álbum ya creado con los gráficos de nuestro blog y conocemos lo básico para manejarlo verdad? Vamos a subir nuestra nueva imagen dentro del álbum para poder continuar. Antes de copiar la URL de nuestra imagen de fondo, vamos a preparar nuestra plantilla HTML para incrustar un fondo. Actualmente tienes algo similar a ésto: body { font: normal normal 14px 'Open Sans', Trebuchet, Verdana, sans-serif; color: #000000; background: #ffffff none repeat scroll top left; padding: ; Donde tu fondo es: background: #ffffff none repeat scroll top left; Bien. Pues vamos a sustituir el trozo de código del fondo por éste: background: #ffffff url(url DE TU IMAGEN DE FONDO) repeat scroll top center; Y ahora sí, copiamos la URL de nuestra imagen alojada en Picasa y la pegamos donde os he indicado en el código de nuestro fondo.

58 Comprobamos en Vista Previa que se ve correctamente y guardamos los cambios. No te preocupes si la parte de la cabecera te aparece con fondo blanco, eso vamos a arreglarlo ahora. Paso a paso recuerdas? De momento comprobamos que nos gusta cómo queda ese fondo antes de continuar. --> HTML BODY: html body.region-inner { min-width: 0; max-width: 100%; width: auto; 56 Esta parte del código no la tocaremos. --> COLORES DE LOS ENLACES: a:link { text-decoration:none; color: #2288bb; a:visited { text-decoration:none; color: #888888; a:hover { text-decoration:underline; color: #33aaff; Este es el siguiente código que encontramos dentro de Content. He marcado en negrita lo que podemos modificar. Vamos a ver lo que significa cada apartado. a:link { El color que queremos para nuestros enlaces. a:visited { El color que queremos que tengan los enlaces que hayan sido visitados.

59 a:hover { CURSO DISEÑA TU BLOG EN BLOGGER CONMIGO El color que queremos que muestren nuestros enlaces cuando pasen el cursor del ratón por encima. En mi caso, los tres son el negro. Sí, minimalista al máximo. Tú puedes usar los que mejor combinen con tu plantilla. Además, si te fijas, los enlaces, al pasar el cursor, presentan una línea inferior para diferenciarlos. Si no te gusta cómo queda, puedes eliminarla en el último código: 57 a:hover { text-decoration:underline; color: #33aaff; Cambia underline por none y listo. Así: a:hover { text-decoration:none; color: #33aaff; Yo no voy a hacerlo porque creo que es muy importante que nuestros enlaces se distingan del resto plano, pero puedes hacerlo si quieres. Mi código resultante es éste: a:link { text-decoration:none; color: #000000; a:visited { text-decoration:none; color: #000000; a:hover { text-decoration:underline; color: #000000; --> FONDO DEL BODY:.body-fauxcolumn-outer.fauxcolumn-inner { background: transparent none repeat scroll top left; _background-image: none; Esta parte del código tampoco vamos a tocarla por ahora. --> FONDO DEL HEADER:.body-fauxcolumn-outer.cap-top { position: absolute; z-index: 1; height: 400px; width: 100%; background: #ffffff none repeat scroll top left; Ahora vamos a hacer un pequeño cambio en este trocito de código para que nuestro fondo se vea también en el cabecero del blog y no aparezca cortado, ya que esta es la parte superior del cuerpo de nuestro blog, la que está por encima del cuerpo de nuestras entradas. Modificaremos la parte del código que te he marcado en negrita, por este: background: transparent none no-repeat scroll center center;

60 Resultado:.body-fauxcolumn-outer.cap-top { position: absolute; z-index: 1; height: 400px; width: 100%; background: transparent none no-repeat scroll center center; Comprobamos en Vista Previa que se ve correctamente y guardamos los cambios. 58 El siguiente trozo de código no lo tocaremos:.body-fauxcolumn-outer.cap-top.cap-left { width: 100%; background: transparent none repeat-x scroll top left; _background-image: none; Pasamos a: --> CÓDIGO DEL CONTENEDOR:.content-outer { -moz-box-shadow: rgba(0, 0, 0,.15); -webkit-box-shadow: rgba(0, 0, 0,.15); -goog-ms-box-shadow: #333333; box-shadow: rgba(0, 0, 0,.15); margin-bottom: 1px;.content-inner { padding: 10px 40px;.content-inner { background-color: #ffffff; Como has visto, la plantilla de Blogger va por trocitos de código, estos "trocitos" se llaman contenedores, ya que encajan unos con otros, tipo puzzle. Ésta última parte del código es la que añade estilo al cuerpo de nuestro blog, puedes ver exactamente que área engloba con un sencillo truco: Localiza la última parte del código:.content-inner { background-color: #ffffff; Y cambia el color blanco por el código del color negro:.content-inner { background-color: #000000; Pulsa en Vista Previa. Lo ves? Todo lo que aparece en negro, es el área que modificas al hacer cambios en este contenedor.

61 BORDES:.content-outer { -moz-box-shadow: rgba(0, 0, 0,.15); -webkit-box-shadow: rgba(0, 0, 0,.15); -goog-ms-box-shadow: #000000; box-shadow: rgba(0, 0, 0,.15); margin-bottom: 1px; En este trocito de código podemos añadir un sombreado a nuestro blog. Yo lo elimino directamente de la plantilla. 59 Resultado:.content-outer { margin-bottom: 1px; Pero no quito el código entero, ya que hay personas a las que sí que les gusta el sombreado, yo lo veo excesivamente recargado. Lo que si suele quedar bastante bien, son los bordes finos de un color claro siempre que nuestro fondo no sea blanco. Por ejemplo:.content-outer { margin-bottom: 1px; border-top: 1px solid #eeeeee; border-left: 1px solid #eeeeee; border-right: 1px solid #eeeeee; border-bottom: 1px solid #eeeeee; Resultado: un borde gris muy fino y elegante que enmarcará el cuerpo de tu blog. Así: Puedes cambiar el color y tipo de borde con los consejos que te dí en esta entrada de El Perro de Papel: Tipos de Bordes para Blogger

62 FONDO DEL CUERPO DEL BLOG:.content-inner { background-color: #ffffff; Es la parte que pusimos de color negro para comprobar el área que ocupada. Puedes añadirle el color que quieras pero el aconsejable es el blanco, tal y como está. Facilita la lectura que es nuestro objetivo principal. Así que no lo tocaremos. 60 Si has aplicado cambios y aún no los has guardado, es el momento de hacerlo. Vamos a pasar a otra parte del código. Recuerda que estamos en el CSS (estilos) de nuestra plantilla. Seguimos bajando y encontramos: /* Header */ El código que encontraremos aquí es el del cabecero de nuestro blog. Si te fijas, aparece como el de Content, con un montón de variables que podemos predefinir desde el Diseñador de Plantillas. Así que para trabajar directamente sobre nuestra plantilla, vamos a hacer lo mismo de antes. Abrimos nuestro blog, pinchamos sobre él con el botón derecho del ratón y seleccionamos Ver código fuente.

63 Buscamos /* Header Copiamos el código sin variables y lo sustituimos por el que encontramos en nuestra plantilla, el resultado del mío es: /* Header */.header-outer { background: transparent none no-repeat top; _background-image: none; min-height:240px;.header h1 { font: normal normal 77px 'Times New Roman', cursive; color: #000000; text-align: center;.header h1 a { color: #000000);.Header.description { font: bold normal 18px 'Open Sans', cursive; color: #8FE1D8; width: 500px; position: absolute; top: 150px; left:320px; text-align: center;.header-inner.header.titlewrapper { padding: 22px 30px;.header-inner.Header.descriptionwrapper { padding: 0 30px; 61 Vamos a ver qué podemos personalizar en cada parte del código de acuerdo?

64 CONTENEDOR DEL CABECERO -->.header-outer { background: transparent none no-repeat top; _background-image: none; min-height:240px; 62 Background -> Color de fondo del cabecero. Yo tengo transparent, que es transparente. Pero como anteriormente en Content hemos indicado que queremos todo el fondo del cuerpo blanco, se ve blanco también el fondo del cabecero. Si lo queremos de otro color, solo tenemos que sustituir transparent por el código hexadecimal del color que queramos, sin olvidar la # al inicio del mismo. Min-Height -> El alto de nuestra cabecera. Cuando más tarde añadamos una imagen en Diseño para nuestro cabecero, será en esta parte del código donde jugaremos con el alto de nuestro header para que se vea la imagen correctamente. De momento lo dejaremos así. TÍTULO DEL BLOG ->.Header h1 { font: normal normal 77px 'Times New Roman', cursive; color: #000000; text-align: center;.header h1 a { color: #000000); Este fragmento es el que da estilo al título de nuestro blog. Header h1 --> El título normal. Aquí podemos variar el tipo de letra y el tamaño, podemos instalar un tipo de letra original de Google Fonts. Para ello, te recomiendo echar un vistazo a este tutorial, donde te explico paso a paso como instalar una fuente nueva en Blogger: Instalar fuentes de Google Fonts en Blogger Para aplicar este tutorial al cabecero de nuestro blog, llegaremos solamente hasta el paso 13 del tutorial que te acabo de enlazar. Una vez tengamos instalada nuestra nueva fuente, solo tenemos que cambiarla en el trozo del código de h1 que acabamos de ver.

65 Yo he instalado ésta: <link href=' rel='stylesheet' type='text/css'/> Y he modificado de esta manera mi h1:.header h1 { font: normal normal 60px 'Raleway', cursive; color: #000000; text-align: center;.header h1 a { color: #000000); 63 Header h1 a { --> El color del título normal al pasar el ratón. Es aconsejable ponerlo del mismo color que en el anterior código para que no cambie de color el título del cabecero al cambiar de página.

66 DESCRIPCIÓN DEL BLOG -->.Header.description { font: bold normal 18px 'Open Sans', cursive; color: #8FE1D8; width: 500px; position: absolute; top: 150px; left:320px; text-align: center; 64 El texto descriptivo de nuestro blog que podemos añadirlo desde diseño, editando la cabecera. Yo he instalado esta fuente: <link href=' rel='stylesheet' type='text/css'/> Y he modificado así el código de mi descripción:.header.description { font: normal normal 18px 'Shadows Into Light Two', cursive; color: #dddddd; width: 500px; position: absolute; top: 150px; left: 130px; text-align: center; Vamos a ver qué puedes modificar de tu descripción: font: el tipo de letra de tu descripción. color: el color del texto de tu descripción width: el ancho que quieres que ocupe tu descripción, muy útil para descripciones de más de una línea, ya que podemos controlar exactamente donde queremos que se corte. top: el margen superior, es decir, el espacio que hay entre el título y la descripción. left: el margen izquierdo. Gracias a esta opción, podemos elegir en que parte del header situar la descripción, yo la he centrado. Es cuestión de probar, como en el margen superior. text-align: el alineado de tu descripción. La mía está centrada. Puedes sustituir center por left (izquierda) o right (derecha), para cambiarlo.

67 A TENER EN CUENTA --> Lo que nos interesa es que las nuevas visitas, nada más entrar en nuestro blog, sepan qué van a encontrar. Es decir, que no se encuentren un cabecero que ocupe toda la pantalla y tengan que usar el ratón para acceder al contenido. En internet hay millones de blogs contra los que competir, si llamamos la atención con un diseño profesional y cuidado, no podemos estropearlo obligando a nuestros nuevos lectores a usar el ratón constantemente para acceder al contenido. Por eso, he reducido mi margen superior, para que así, nada más entrar, puedan ver directamente la primera entrada. Mi código final de la descripción es el siguiente: 65.Header.description { font: normal normal 18px 'Shadows Into Light Two', cursive; color: #dddddd; width: 500px; position: absolute; top: 80px; left: 130px; text-align: center; Y el resultado es: Fácil de leer, profesional, limpio y accesible. Si encontramos un tipo de letra que transmita lo que nosotros queremos y usamos los colores adecuados, casi podemos prescindir de la imagen de la cabecera. Sobre todo porque así aligeramos el tiempo de carga de nuestro blog que es otro de los factores importantes que Google tiene muy en cuenta a la hora de posicionarnos.

68 Cuantas más imágenes y gadgets obliguemos a que se carguen en nuestra página principal, más tiempo tardará en cargar en nuestro blog. Y si tarda más de tres segundos, ten en cuenta que Google ya lo considera muy lento. Vamos a ver un truco para cargar una imagen decorativa de fondo sin necesidad de añadir una cabecera que, al tener más detalles, sería más pesada. Con esta opción, mantenemos nuestro título y descripción pero añadimos un fondo gráfico optimizado. 66 Vamos a usar el mismo sistema que para la firma y el fondo, necesitas guardar la imagen elegida en tu ordenador y subirla a Picasa, vamos a trabajar con la URL de la imagen. Una vez esté subida, vamos a añadir este fragmento de código justo después del de nuestra descripción: #header-inner{ position: relative; background:url(url DE TU IMAGEN DE FONDO) no-repeat; background-position-x: 160px; background-position-y: 150px; background-position: 0px 0px;.mobile #header-inner { background:none; Y pondremos el enlace de nuestra imagen donde lo he marcado. Ahora solo nos queda jugar con background-position-x y background-positiony modificando los píxeles hasta colocar nuestro diseño de fondo exactamente donde queramos. Recuerda que tu descripción también puedes cambiarla de lugar pero... Y el título? Cómo podemos moverlo para encajarlo correctamente?

69 Recordemos el código del estilo de nuestro título:.header h1 { font: normal normal 60px 'Raleway', cursive; color: #000000; text-align: center;.header h1 a { color: #000000); 67 Para poder moverlo, como la descripción, tenemos que añadir un pequeño fragmento de código: top: 10px; left: 20px; Exactamente aquí:.header h1 { font: normal normal 60px 'Raleway', cursive; color: #000000; top: 10px; left: 20px; text-align: center;.header h1 a { color: #000000); Ves? Ahora, modificando el top y el left, podemos mover nuestro título a la zona del cabecero que queramos y encajarlo, así, perfectamente en nuestro diseño de fondo.

70 Ya tenemos nuestro fondo y la cabecera personalizadas y optimizadas haciendo solo cambios en nuestra plantilla HTML. Espero que tu diseño empiece a parecerse a lo que tenías en mente antes de empezar el curso y estés contenta con tus avances. 68 Vamos a seguir personalizando nuestra plantilla. Ahora vamos a ver como personalizar el código del menú superior de páginas pero, para ello, necesitamos tener al menos una página creada y mostrarla en nuestro blog. Las páginas principales son Sobre Mí y Contacto. Piensa que en internet no sabemos quién hay detrás de cada blog, por lo que si quieres generar confianza, que te pongan cara y tengan una manera rápida de contactar contigo, es muy importante. Vamos a crear nuestras dos primeras páginas. MENÚ DE PÁGINAS Hace relativamente poco, ha cambiado la forma de crear páginas en Blogger, te hablé de ello en esta entrada --> Cambios en las páginas de Blogger Por lo que ahora, crear una nueva página es igual que editar una entrada. Vamos a crear dos páginas para empezar las pruebas: Sobre Mí y Contacto. Ruta: Páginas --> Página Nueva

71 69 Para diseñar tu página Sobre Mí y tu página de contacto, te recomiendo leer este tutorial: Páginas imprescindibles de tu Blog Una vez tenemos nuestras dos páginas creadas (puedes diseñarlas y editarlas más adelante, no te preocupes por eso), vamos a mostrarlas en nuestro menú superior del blog.

72 Nos dirigimos a Diseño y pinchamos en Añadir Gadget donde te muestro en la imagen siguiente: 70 Buscamos el Gadget Páginas y lo añadimos a nuestro blog.

73 Se abrirá una ventana emergente dónde podemos elegir qué páginas queremos mostrar y la colocación de las mismas. Ahora, tras los cambios de Blogger, las páginas que se enlazan a una URL, se añaden desde aquí. Puedes saber más sobre los cambios de Blogger aquí: Cambios en las páginas de Blogger 71 Más abajo, Blogger nos indica que tenemos que hacer si queremos que nuestro menú de páginas aparezca en la sidebar, en vez de en la zona superior bajo la cabecera. Nosotros lo dejaremos tal y como está. Y pulsamos en Guardar.

74 De momento, nuestro menú se ve así: 72 Vamos a ponerlo mucho más bonito modificando el estilo desde nuestra plantilla HTML. Para ello, buscamos el siguiente código: /* Tabs */ Verás que tiene un montón de variables. Por lo que usaremos el truco de siempre. Vamos a copiar el código fuente de nuestras Tabs (como hicimos con Content y Header) y a pegarlo en nuestra plantilla HTML.

75 El mío es éste: CURSO DISEÑA TU BLOG EN BLOGGER CONMIGO /* Tabs */.tabs-inner.section:first-child { border-top: 0 solid #dddddd;.tabs-inner.section:first-child ul { margin-top: -1px; border-top: 1px solid #dddddd; border-left: 1px solid #dddddd; border-right: 1px solid #dddddd;.tabs-inner.widget ul { background: transparent none repeat-x scroll 0-800px; _background-image: none; border-bottom: 1px solid #dddddd; margin-top: 0; margin-left: -30px; margin-right: -30px;.tabs-inner.widget li a { display: inline-block; padding:.6em 1em; font: normal normal 12px 'Trebuchet MS', Trebuchet, Verdana, sans-serif; color: #000000; border-left: 1px solid #ffffff; border-right: 1px solid #dddddd;.tabs-inner.widget li:first-child a { border-left: none;.tabs-inner.widget li.selected a,.tabs-inner.widget li a:hover { color: #000000; background-color: #eeeeee; text-decoration: none; 73 Vamos a empezar a personalizar todo lo que os he marcado en negrita.

76 Borde Superior:.tabs-inner.section:first-child { border-top: 0 solid #dddddd; Modificando el código de esta manera: 74.tabs-inner.section:first-child { border-top: 10px solid #dddddd; El resultado sería éste: Ahora mismo nuestro menú no está centrado, por lo que no queda demasiado bien, así que vamos a centrarlo añadiendo un pequeño código adicional justo encima, así: /* Centrar Páginas */.PageList {text-align:center!important;.pagelist li {display:inline!important; float:none!important;.tabs-inner.section:first-child { border-top: 10px solid #dddddd; El código a añadir es el que te he marcado en negrita. Y el resultado es automático:

77 75 Ya tenemos nuestras páginas centradas, seguimos personalizando el estilo de nuestro menú. Ya hemos hablado de lo importante que es reducir el tamaño superior de nuestro blog que no ofrezca información relevante- Con el código actual, queda mucho espacio entre la cabecera y el menú, así que vamos a solucionarlo reduciendo el margen. Para ello, añadiremos una nueva línea de código:.tabs-inner.section:first-child { border-top: 10px solid #dddddd; margin-top: -100px; Resultado: Mucho mejor verdad? Hemos reducido un espacio que en realidad no servía para nada y hemos subido nuestras entradas para que nada más entrar tengan la información a la vista.

78 Bordes Exteriores:.tabs-inner.section:first-child ul { margin-top: -1px; border-top: 1px solid #dddddd; border-left: 1px solid #dddddd; border-right: 1px solid #dddddd; 76 Aquí podemos eliminar los bordes exteriores de nuestro menú, cambiando todos los 1 a 0. O cambiar el formato y color de los bordes. Para usar otros tipos de borde recuerda que puedes consultar esta entrada: Tipos de Bordes HTML Resultado de eliminar los bordes: Como ves, solo hemos modificado el superior y los laterales. El inferior y los internos siguen ahí. Seguimos con nuestro código: Fondo y Borde Inferior:.tabs-inner.widget ul { background: transparent none repeat-x scroll 0-800px; _background-image: none; border-bottom: 1px solid #dddddd; margin-top: 0; margin-left: -30px; margin-right: -30px; Background -> Podemos sustituir transparent por el color que queramos para nuestro fondo. Yo he puesto directamente el blanco. Borde-bottom -> El borde inferior de nuestro menú de páginas.

79 Si te fijas, este borde es más largo que el menú superior que vimos antes, esto es porque no bordean la misma área, por lo que si queremos mantener ambos bordes y que midan lo mismo, tendremos que añadirlos los dos en la misma zona, por ejemplo: Nuestro código hasta el momento /* Tabs */ 77 /* Centrar Páginas */.PageList {text-align:center!important;.pagelist li {display:inline!important; float:none!important;.tabs-inner.section:first-child { border-top: 2px double #dddddd; margin-top: -100px;.tabs-inner.section:first-child ul { margin-top: -1px; border-top: 0px solid #dddddd; border-left: 0px solid #dddddd; border-right: 0px solid #dddddd;.tabs-inner.widget ul { background: #ffffff none repeat-x scroll 0-800px; _background-image: none; border-bottom: 2px double #dddddd; margin-top: 0; margin-left: -30px; margin-right: -30px;

80 Así, el borde superior es más corto que el inferior, para que sean iguales, hacemos este cambio: /* Tabs */ /* Centrar Páginas */.PageList {text-align:center!important;.pagelist li {display:inline!important; float:none!important; 78.tabs-inner.section:first-child { border-top: 0px double #dddddd; margin-top: -100px;.tabs-inner.section:first-child ul { margin-top: -1px; border-top: 2px double #dddddd; border-left: 0px solid #dddddd; border-right: 0px solid #dddddd;.tabs-inner.widget ul { background: #ffffff none repeat-x scroll 0-800px; _background-image: none; border-bottom: 2px double #dddddd; margin-top: 0px; margin-left: -30px; margin-right: -30px; Hemos puesto a cero el borde superior que vimos al principio y en el fragmento siguiente, donde habíamos eliminado todos los bordes, añadimos un estilo al border-top idéntico al del border-bottom del último fragmento de código que habíamos formateado. Resultado: Exactamente iguales verdad? Ya has aprendido a poner y quitar bordes, ahora tú decides cuáles se quedan y cuáles no.

81 Seguimos avanzando: Fuentes, Colores y Bordes:.tabs-inner.widget li a { display: inline-block; padding:.6em 1em; font: normal normal 12px 'Trebuchet MS', Trebuchet, Verdana, sans-serif; color: #000000; border-left: 1px solid #ffffff; border-right: 1px solid #dddddd; 79 Font-> Elegimos un tipo de letra que venga predeterminada por Blogger o la instalamos desde Google Fonts, como ya hemos visto. Color -> El color del texto de nuestro menú. Border-left -> Formato del borde izquierdo de cada botón de nuestro menú. Border-right-> Formato del borde derecho de cada botón de nuestro menú. Yo he usado la misma letra que en el título, para equilibrar el diseño (no es aconsejable usar más de dos o tres tipos de letra, sino el resultado es caótico y se rompe totalmente el equilibrio) y he eliminado los bordes:.tabs-inner.widget li a { display: inline-block; padding:.6em 1em; font: normal normal 18px 'Raleway', Trebuchet, Verdana, sans-serif; color: #000000; border-left: 0px solid #ffffff; border-right: 0px solid #dddddd; Resultado:

82 80 Mucho más claro y sencillo de leer verdad? Y continuamos con la última parte de nuestro código Tabs:.tabs-inner.widget li:first-child a { border-left: none;.tabs-inner.widget li.selected a,.tabs-inner.widget li a:hover { color: #000000; background-color: #eeeeee; text-decoration: none; color -> Color del texto al pasar el cursor. background-color -> Color del fondo al pasar el cursor. Yo lo he modificado así:.tabs-inner.widget li:first-child a { border-left: none;.tabs-inner.widget li.selected a,.tabs-inner.widget li a:hover { color: #dddddd; background-color: #ffffff; text-decoration: none;

83 Resultado: CURSO DISEÑA TU BLOG EN BLOGGER CONMIGO 81 Me encanta! Posiblemente añada algún color más, tal vez un rosa, pero de momento es el tipo de estética minimalista, limpia, profesional y cuidada que me gusta. Seguimos: COLUMNAS /* Columns */ Las columnas que bordean el cuerpo donde aparecen las entradas del blog. Hacemos el truco de siempre copiando el código fuente real de nuestra plantilla para trabajar mejor sobre él. El mío es: /* Columns */.main-outer { border-top: 0 solid transparent;.fauxcolumn-left-outer.fauxcolumn-inner { border-right: 1px solid transparent;.fauxcolumn-right-outer.fauxcolumn-inner { border-left: 1px solid transparent;

84 border-top: coincidirá con el border-bottom que ya hemos añadido en Tabs. border-right: si has colocado tu sidebar a la derecha, aquí puedes añadir una línea que separe las entradas de la barra lateral, por ejemplo:.fauxcolumn-left-outer.fauxcolumn-inner { border-right: 1px solid #dddddd; 82 El resultado sería: border-left: el borde izquierdo del contenedor de las entradas del blog. Si tienes tu sidebar en el lado derecho, aquí puedes aplicar el formato que quieras a la línea divisoria.

85 HEADINGS CURSO DISEÑA TU BLOG EN BLOGGER CONMIGO /* Headings */ h2 { margin: 0 0 1em 0; font: $(widget.title.font); color: $(widget.title.text.color); 83 Los títulos secundarios. Estos son los de los gadgets de la barra lateral y afecta también a la fecha. Hacemos el truco de siempre copiando el código fuente real de nuestra plantilla para trabajar mejor sobre él. El mío es: /* Headings */ h2 { margin: 0 0 1em 0; font: normal bold 11px 'Trebuchet MS',Trebuchet,Verdana,sans-serif; color: #000000; font: el tipo de letra que queremos que tengan los títulos de los gadgets de nuestra sidebar. color: el color de los títulos de los gadgets de nuestra sidebar. Mis cambios: /* Headings */ h2 { margin: 0 0 1em 0; font: normal bold 15px 'Shadows Into Light Two',Trebuchet,Verdana,sansserif; color: #dddddd;

86 Resultado: CURSO DISEÑA TU BLOG EN BLOGGER CONMIGO 84 Podemos añadir un estilo predeterminado que se aplique automáticamente a cada nuevo gadget que creemos, por ejemplo, un borde que aparezca siempre subrayando los títulos: /* Headings */ h2 { margin: 0 0 1em 0; font: normal bold 15px 'Shadows Into Light Two',Trebuchet,Verdana,sans-serif; color: #dddddd; border-bottom: 2px double #dddddd;

87 Resultado: CURSO DISEÑA TU BLOG EN BLOGGER CONMIGO 85 O una imagen que adorne el inicio de los títulos y aparezca automáticamente: Este es el código que vamos a añadir:.sidebar h2 { margin: 0 0 1em 0; text-align: center; background-image: url(url DE TU IMAGEN); background-position: center left; background-repeat: no-repeat; height: 45px; padding-left: 50px; padding-top: 20px; Justo debajo del código original de Headings, tiene que quedar así:

88 /* Headings */ h2 { margin: 0 0 1em 0; font: normal bold 15px 'Shadows Into Light Two',Trebuchet,Verdana,sans-serif; color: #F5A9A9; border-bottom: 2px double #dddddd; 86.sidebar h2 { margin: 0 0 1em 0; text-align: center; background-image: url(url DE TU IMAGEN); background-position: center left; background-repeat: no-repeat; height: 45px; padding-left: 50px; padding-top: 20px; text-align: la alineación del título de los gadgets. Puedes cambiarlo por left (izquierda) o right (derecha). background-image: la URL de tu imagen de fondo. Yo he usado el rosetón gris de esta entrada: Iconos para los títulos de las entradas Según la imagen que uses para adornar los títulos de tus gadgets, vas a necesitar "jugar" con los valores de los siguientes elementos, para que tu imagen se vea completa. Los valores que ves en height, padding-left y padding-top son los que hacen que mi imagen se vea perfecta. Pruébalos con la que hayas elegido tú y si no se ve completa, ve cambiándolos hasta que se vea correctamente. height -> alto del título del gadget. padding-left-> margen izquierdo del título del gadget. padding-top-> margen superior del título del gadget.

89 Nuestro blog ya va cogiendo forma, verdad? 87 WIDGETS Hacemos lo de siempre. Copiar nuestro código fuente en nuestra plantilla para eliminar las variables. El mío es: /* Widgets */.widget.zippy { color: #999999; text-shadow: 2px 2px 1px rgba(0, 0, 0,.1);.widget.popular-posts ul { list-style: none; Aquí lo único que elegimos es el color y sombreado de algunos de los elementos del sidebar, como es el caso de archivo. He publicado una entrada de prueba para que veas a lo que me refiero:

90 Y si aplico un color diferente al estilo de widgets, pòr ejemplo, el mismo tono de rosa que he puesto en los títulos: /* Widgets */.widget.zippy { color: #F5A9A9; text-shadow: 2px 2px 1px rgba(0, 0, 0,.1);.widget.popular-posts ul { list-style: none; 88 Resultado: Ves? Los triangulitos ahora son rosas. Puedes jugar con la gama de colores de tu plantilla y los resultados puedes ser muy originales si lo haces con cabeza y sentido común, combinando adecuadamente los diferentes colores.

91 LAS ENTRADAS Hemos llegado a la parte más importante de nuestra plantilla. Para trabajar con ella necesitas publicar al menos una entrada de prueba con un título y una foto. La de tu firma, que sale de manera automática, sirve. Y añadir algunas etiquetas, con una es suficiente. Puedes ver como añadir etiquetas en la siguiente entrada: 89 Sácale partido a las etiquetas de tu blog Solo tienes que escribir tu nueva etiqueta en el cuadradito que verás en el tutorial y crearás automáticamente una nueva etiqueta en tu blog. Ahora hacemos lo de siempre, copiamos nuestro código fuente real de Posts en nuestra plantilla HTML antes de empezar a modificar los estilos predeterminados. Mi código de las entradas es éste: /* Posts */.date-header span { background-color: #bbbbbb; color: #ffffff; padding: 0.4em; letter-spacing: 3px; margin: inherit;.main-inner { padding-top: 35px; padding-bottom: 65px;.main-inner.column-center-inner { padding: 0 0;.main-inner.column-center-inner.section { margin: 0 1em;.post { margin: px 0; h3.post-title,.comments h4 { font: normal normal 22px 'Trebuchet MS',Trebuchet,Verdana,sans-serif; margin:.75em 0 0;.post-body { font-size: 110%;

92 line-height: 1.4; position: relative;.post-body img,.post-body.tr-caption-container,.profile img,.image img,.bloglist.item-thumbnail img { padding: 2px; background: #ffffff; border: 1px solid #eeeeee; -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0,.1); -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0,.1); box-shadow: 1px 1px 5px rgba(0, 0, 0,.1);.post-body img,.post-body.tr-caption-container { padding: 5px;.post-body.tr-caption-container { color: #666666;.post-body.tr-caption-container img { padding: 0; background: transparent; border: none; -moz-box-shadow: rgba(0, 0, 0,.1); -webkit-box-shadow: rgba(0, 0, 0,.1); box-shadow: rgba(0, 0, 0,.1);.post-header { margin: em; line-height: 1.6; font-size: 90%;.post-footer { margin: 20px -2px 0; padding: 5px 10px; color: #666666; background-color: #eeeeee; border-bottom: 1px solid #eeeeee; line-height: 1.6; font-size: 90%; #comments.comment-author { padding-top: 1.5em; border-top: 1px solid transparent; background-position: 0 1.5em; #comments.comment-author:first-child { 90

93 padding-top: 0; border-top: none;.avatar-image-container { margin:.2em 0 0; #comments.avatar-image-container img { border: 1px solid #eeeeee; 91 Vamos a empezar aplicando cambios al primer fragmento del código, éste:.date-header span { background-color: #ffffff; color: #dddddd; padding: 0.4em; letter-spacing: 3px; margin: inherit; Es el formato de nuestra fecha_ background-color: color de fondo (yo he puesto el color blanco) color: color del texto (yo lo puse gris) Si guardas los cambios, verás que aparece una línea justo al lado de la fecha de tu entrada.

94 Exacto, es la misma línea que pusimos que apareciese automáticamente subrayando los títulos de nuestro sidebar. Y es que el h2 sirve tanto para los títulos del sidebar como para la fecha. Tenemos dos opciones: Eliminar la línea del código headings. Hacer que solo aparezca en el sidebar. La primera opción es sencilla, solo tenemos que localizar nuestro código: 92 h2 { margin: 0 0 1em 0; font: normal bold 15px 'Shadows Into Light Two',Trebuchet,Verdana,sans-serif; color: #F5A9A9; border-bottom: 2px double #dddddd; Y eliminar lo que te he marcado en negrita. La segunda opción tampoco es muy complicada. Copiaremos el código de la línea y lo bajaremos al nuevo código que creamos justo debajo de nuestro h2. Así: /* Headings */ h2 { margin: 0 0 1em 0; font: normal bold 15px 'Shadows Into Light Two',Trebuchet,Verdana,sans-serif; color: #F5A9A9;.sidebar h2 { margin: 0 0 1em 0; text-align: center; border-bottom: 2px double #dddddd; background-image: url( agzw9at4i28/unblysyz6si/aaaaaaaaklc/myoesj54g2y/s66-no/013.png); background-position: center left; background-repeat: no-repeat; height: 45px; padding-left: 50px; padding-top: 20px;

95 Resultado: CURSO DISEÑA TU BLOG EN BLOGGER CONMIGO 93 Con la segunda opción, conservamos la línea automática bajo los títulos de los gadgets de nuestro sidebar pero no estropeamos el diseño de nuestras entradas manteniendo la fecha limpia. TÍTULOS ENTRADAS La siguiente parte del código que vamos a modificar es ésta: h3.post-title,.comments h4 { font: normal normal 22px 'Trebuchet MS',Trebuchet,Verdana,sans-serif; margin:.75em 0 0; Podemos instalar una nueva fuente de Google Fonts como ya hemos hecho, o usar una de las que ya tenemos instalada. Yo he usado la misma que para el título del blog y los botones del menú, así sigo manteniendo una estética cuidada y equilibrada.

96 Resultado: CURSO DISEÑA TU BLOG EN BLOGGER CONMIGO 94 El color del título de las entradas, viene definido por los colores que hayas escogido para tus enlaces. Piensa que no deja de ser el enlace a tu entrada. Y cambiará de color una vez haya sido visitada o cuando se coloque el ratón encima. Estos estilos los definimos al principio, en Content, por si quieres volver atrás para hacer algún cambio. BORDES DE LAS IMAGENES DE LAS ENTRADAS El siguiente código dentro de post que vamos a modificar es éste:.post-body img,.post-body.tr-caption-container,.profile img,.image img,.bloglist.item-thumbnail img { padding: 2px; background: #ffffff; border: 1px solid #eeeeee; -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0,.1); -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0,.1); box-shadow: 1px 1px 5px rgba(0, 0, 0,.1); La parte que te he marcado en negrita, es la que hace que tus imágenes aparezcan con un borde y un sombreado.

97 border: puedes ponerlo a 0 para eliminar el borde o cambiarle el formato, como hemos visto ya varias veces. Las siguientes tres líneas son las sombras de la imagen. Para eliminar el sombreado, solo tienes que cambiar esas tres líneas: -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0,.1); -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0,.1); box-shadow: 1px 1px 5px rgba(0, 0, 0,.1); 95 Por éstas: -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0); -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0); box-shadow: 1px 1px 5px rgba(0, 0, 0, 0); Y tus imágenes ya no tendrán ese sombreado gris:

98 PIE DE LAS ENTRADAS Y por último, el footer o pie de nuestras entradas, ese que, por defecto, aparece coloreado en gris y queda tan feo. Para cambiar el estilo de nuestro footer, buscamos el siguiente fragmento de código dentro de Posts:.post-footer { margin: 20px -2px 0; padding: 5px 10px; color: #666666; background-color: #eeeeee; border-bottom: 1px solid #eeeeee; line-height: 1.6; font-size: 90%; 96 color: el color del texto del footer. background-color: el color de fondo del footer. border-bottom: el formato del borde del footer. font-size: la escala a la que se muestra el texto del footer. Yo he hecho estos cambios:.post-footer { margin: 20px -2px 0; padding: 5px 10px; font: normal normal 18px 'Shadows Into Light Two',Trebuchet,Verdana,sansserif; color: #666666; background-color: transparent; border-bottom: 5px double #eeeeee; line-height: 1.6; font-size: 110%;

99 Si te fijas, he añadido la línea de código que te he marcado en negrita, así he podido modificar el tipo de letra del pie de mi entrada de prueba: 97 Y hemos terminado de modificar el CSS de nuestra plantilla HTML!! Si sigues bajando, verás que hay otros apartados: /* Comments */ /* Accents */ /* Mobile */ Que no son tan importantes, pero puedes practicar con ellos en tu blog de pruebas, puede que consigas algo interesante que compartir con nosotras!

100 Cuando encuentres: ]]></b:skin> Habrás llegado al final del CSS de tu blog. Ahí empiezan los scripts, unos pequeños códigos que veremos un poco por encima, para que sepas lo que son y para qué sirven y el HTML de tu Blog. 98

101 Los scripts son pequeños códigos que nos hacen la vida mucho más sencilla automatizando procesos internos que pueden servirnos para mejorar el diseño de nuestro blog, entre otras cosas, si quieres saber más sobre los scripts, puedes leer estos artículos: 99 Script - Wikipedia - Esta web es completísima si te interesa aprender a escribir tus propios códigos, está en inglés, pero merece la pena: JavaScript.info Vamos a practicar: SUMARIOS AUTOMÁTICOS

102 Instalando este código, vamos a conseguir que nuestras entradas se muestren así en la página principal. El script coge la primera foto de nuestra entrada, la recorta mostrando solo una parte y corta nuestra entrada añadiendo el Leer Más. Lo bueno de este script es que la apariencia es muy original y cuidada, con cierto toque profesional, ya que se nota que nos hemos tomado nuestro tiempo programando nuestro blog para que se vea así. Además, podemos mostrar mucha más info en la página principal para captar la atención de los nuevos lectores y el formato puede personalizarse. 100 Empezamos: 1.- El código que vamos a usar es el siguiente: <!-- SUMARIOS AUTOMATICOS --> <style type='text/css'>.contemini { position:relative; width:225px; height:225px; float:left; overflow:hidden; margin:10px 10px 10px 10px; border:1px solid #F5A9A9; background:#ffffff;.miniaturas { width:225px; height:225px; background: no-repeat scroll 50% 40% #ffffff;.leermas { /* Las propiedades que gustéis para el enlace */ </style> <script type='text/javascript'> //<![CDATA[ function createsummaryandthumb(pid,enlacetitulo){ var div = document.getelementbyid(pid); var imgtag = ""; var img = div.getelementsbytagname("img"); var summ = sumario_noimg;

103 if(img.length>=1) { imgtag = '<div class="contemini"><a href="' + enlacetitulo + '"><div class="miniaturas" style="background-image:url(' + img[0].src + ')"></a></div></div>'; summ = sumario_img; var summary = removehtmltag(div.innerhtml,summ,imgtag,enlacetitulo); div.innerhtml = summary; 101 function removehtmltag(strx,chop,imagen,enlace){ var original=strx; if(strx.indexof("<")!=-1) { var s = strx.split("<"); for(var i=0;i<s.length;i++){ if(s[i].indexof(">")!=-1){ s[i] = s[i].substring(s[i].indexof(">")+1,s[i].length); strx = s.join(""); if(strx.length<=chop) { return original; else { chop = (chop < strx.length-1)? chop : strx.length-2; while(strx.charat(chop-1)!=' ' && strx.indexof(' ',chop)!=-1) chop++; strx = strx.substring(0,chop-1); var devolver = imagen + '<div>' + strx + '... (<a class="leermas" href="' + enlace+ '">Leer más</a>)</div>'; return devolver; sumario_noimg = 380; sumario_img = 255; //]]> </script>

104 2.- Copiamos el código anterior y abrimos nuestra plantilla HTML. Pulsamos Control + F a la vez y abrimos nuestro buscador interno. Buscamos: </head> Pegaremos el código encima de </head> 3.- Si ahora pinchas en Vista Previa, verás que no hay ningún cambio. Eso es debido a que hemos instalado el script pero Blogger no sabe dónde queremos que lo ejecute. Vamos a decírselo Abrimos de nuevo el buscador interno de nuestra plantilla y buscamos: <data:post.body/> 5.- Puedes encontrar varios en tu plantilla, sigue pulsando Intro hasta que encuentres dos juntos, como en la siguiente imagen: 6.- Ahora vamos a cambiar la parte del código original que te marco en negrita: <data:post.body/> <div style='clear: both;'/> <!-- clear for photos floats --> </div> <b:else/> <div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='articlebody'> <data:post.body/> <div style='clear: both;'/> <!-- clear for photos floats --> </div> </b:if>

105 7.- Por ésta, que incluye una condicional que llamará a nuestro script: <b:if cond='data:blog.pagetype == "item"'> <data:post.body/> <b:else/> <b:if cond='data:blog.pagetype == "static_page"'> <data:post.body/> <b:else/> <div expr:id='"summary-" + data:post.id'><data:post.body/></div> <script type='text/javascript'>createsummaryandthumb("summary- <data:post.id/>","<data:post.url/>");</script> </b:if> </b:if> <div style='clear: both;'/> <!-- clear for photos floats --> </div> </b:if> El resultado debería ser algo similar a ésto: 9.- Ahora sí, pincha en Vista Previa. Si has colocado el código en el punto correcto, ya debe verse tu página principal con los sumarios automáticos. Te deben aparecen con el formato que puse yo a los míos en mi blog, así que vamos a personalizarlo un poco.

106 PERSONALIZAR SUMARIOS AUTOMÁTICOS Volvemos a nuestro primer código, el que estaba antes de la etiqueta </head>. Exactamente éste: <!-- SUMARIOS AUTOMATICOS --> <style type='text/css'>.contemini { position:relative; width:225px; height:225px; float:left; overflow:hidden; margin:10px 10px 10px 10px; border:1px solid #F5A9A9; background:#ffffff;.miniaturas { width:225px; height:225px; background: no-repeat scroll 50% 40% #ffffff;.leermas { /* Las propiedades que gustéis para el enlace */ </style> 104 <script type='text/javascript'> //<![CDATA[ function createsummaryandthumb(pid,enlacetitulo){ var div = document.getelementbyid(pid); var imgtag = ""; var img = div.getelementsbytagname("img"); var summ = sumario_noimg; if(img.length>=1) { imgtag = '<div class="contemini"><a href="' + enlacetitulo + '"><div class="miniaturas" style="background-image:url(' + img[0].src + ')"></a></div></div>'; summ = sumario_img; var summary = removehtmltag(div.innerhtml,summ,imgtag,enlacetitulo); div.innerhtml = summary;

107 function removehtmltag(strx,chop,imagen,enlace){ var original=strx; if(strx.indexof("<")!=-1) { var s = strx.split("<"); for(var i=0;i<s.length;i++){ if(s[i].indexof(">")!=-1){ s[i] = s[i].substring(s[i].indexof(">")+1,s[i].length); strx = s.join(""); if(strx.length<=chop) { return original; else { chop = (chop < strx.length-1)? chop : strx.length-2; while(strx.charat(chop-1)!=' ' && strx.indexof(' ',chop)!=-1) chop++; strx = strx.substring(0,chop-1); var devolver = imagen + '<div>' + strx + '... (<a class="leermas" href="' + enlace+ '">Leer más</a>)</div>'; return devolver; 105 sumario_noimg = 380; sumario_img = 255; //]]> </script> La parte personalizable es la que te he marcado en negrita. Vamos por partes: <style type='text/css'>.contemini { position:relative; width:225px; /* Ancho de la miniatura */ height:225px; /* Alto de la miniatura */ float:left; /* Alineación de la miniatura */ overflow:hidden; margin:10px 10px 10px 10px; /* Márgenes */ border:1px solid #F5A9A9; /* Tipo y color del borde de la miniatura */ background:#ffffff; /* Color de fondo */

108 .miniaturas { width:225px; /* Repetimos el ancho de la miniatura */ height:225px; /* Repetimos el alto de la miniatura */ background: no-repeat scroll 50% 40% #ffffff;.leermas { /* Las propiedades que gustéis para el enlace */ 106 Dentro de.leermas puedes añadir el tipo de letra, color y efectos que quieras para tu enlace, incluso puedes instalar un tipo de letra chula de Google Fonts y usarla aquí. Yo he dejado las opciones por defecto que configuré para los enlaces pero si te apetece darle un toque diferente, puedes hacerlo desde aquí. Y en la parte inferior del código encontramos: sumario_noimg = 380; sumario_img = 255; Con el primer código indicamos al script el número de caracteres que queremos que muestre cuando no tengamos imagen en miniatura en nuestra entrada. El segundo indica lo mismo, pero cuando si hay imagen. Y listo! Ya tenemos un sistema de sumarios automáticos en nuestro blog que se activará cada vez que publiquemos una nueva entrada. Sencillo verdad? SI EL CÓDIGO TE DA ERROR PUEDE QUE SEA PORQUE AL COPIARLO DEL EBOOK SE COPIAN LOS PIES Y ENCABEZADOS DE PÁGINA, PRUEBA DESDE ESTE ENLACE: XzO58/edit?usp=sharing ENTRADAS RELACIONADAS No vamos a usar LinkWithin, sino que vamos a programarlo desde cero ya personalizarlo para que quede acorde con la estética elegida para nuestro blog. Este script funciona con las etiquetas de nuestras entradas, por lo que debes haber tenido cuidado con el etiquetado. Puedes saber más sobre como etiquetar tus entradas leyendo este sencillo artículo: Sácale Partido a las etiquetas de tu Blog

109 Empezamos:. 1 - El script que vamos a usar es éste: <!--Entradas Relacionadas--> <!-- remove --><b:if cond='data:blog.pagetype == "item"'> <style type='text/css'> #related-posts { float:center; text-transform:none; height:100%; min-height:100%; padding-top:5px; padding-left:55px; 107 #related-posts h2{ font-size: 25px; letter-spacing: 0px; text-transform: none; color: #F5A9A9; font-family: Raleway; text-align: center; margin-bottom: 0.75em; margin-top: 0em; padding-top: 0em; #related-posts a{ border-right: 0px dotted #DDDDDD; text-transform: none; font-size: 25px; font-family: Raleway; text-align: center; color:#734141; #related-posts a:hover{ color:#999999; text-transform: none; text-align: center; font-size: 25px;

110 </style> <script type='text/javascript'> var defaultnoimage=" PpjfsStySz0/UF91FE7rxfI/AAAAAAAACl8/092MmUHSFQ0/s1600/no_image.jpg&quot ;; var maxresults=6; var splittercolor="#dddddd"; var relatedpoststitle="puede interesarte:"; </script> 108 <!-- <script src=' type='text/javascript'/> --> <script> //<![CDATA[ var relatedtitles = new Array(); var relatedtitlesnum = 0; var relatedurls = new Array(); var thumburl = new Array(); function related_results_labels_thumbs(json) { for (var i = 0; i < json.feed.entry.length; i++) { var entry = json.feed.entry[i]; relatedtitles[relatedtitlesnum] = entry.title.$t; try {thumburl[relatedtitlesnum]=entry.media$thumbnail.url; catch (error){ s=entry.content.$t;a=s.indexof("<img");b=s.indexof("src=\"",a);c=s.indexof("\"",b+5 );d=s.substr(b+5,c-b-5); if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) {thumburl[relatedtitlesnum]=d; else {if(typeof(defaultnoimage)!== 'undefined') thumburl[relatedtitlesnum]=defaultnoimage; else thumburl[relatedtitlesnum]=" FeKY1cIGlbM/TnnKJ7XLnsI/AAAAAAAABY8/FJanm5jFIeU/s1600/noimage.png"; if(relatedtitles[relatedtitlesnum].length>35) relatedtitles[relatedtitlesnum]=relatedtitles[relatedtitlesnum].substring(0, 35)+"..."; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') { relatedurls[relatedtitlesnum] = entry.link[k].href; relatedtitlesnum++;

111 function removerelatedduplicates_thumbs() { var tmp = new Array(0); var tmp2 = new Array(0); var tmp3 = new Array(0); for(var i = 0; i < relatedurls.length; i++) { if(!contains_thumbs(tmp, relatedurls[i])) { tmp.length += 1; tmp[tmp.length - 1] = relatedurls[i]; tmp2.length += 1; tmp3.length += 1; tmp2[tmp2.length - 1] = relatedtitles[i]; tmp3[tmp3.length - 1] = thumburl[i]; relatedtitles = tmp2; relatedurls = tmp; thumburl=tmp3; 109 function contains_thumbs(a, e) { for(var j = 0; j < a.length; j++) if (a[j]==e) return true; return false; function printrelatedlabels_thumbs(current) { var splitbarcolor; if(typeof(splittercolor)!== 'undefined') splitbarcolor=splittercolor; else splitbarcolor="#d4eaf2"; for(var i = 0; i < relatedurls.length; i++) { if((relatedurls[i]==current) (!relatedtitles[i])) { relatedurls.splice(i,1); relatedtitles.splice(i,1); thumburl.splice(i,1); i--; var r = Math.floor((relatedTitles.length - 1) * Math.random()); var i = 0; if(relatedtitles.length>0) document.write('<h2>'+relatedpoststitle+'</h2>');

112 document.write('<div style="clear: both;"/>'); while (i < relatedtitles.length && i < 20 && i<maxresults) { document.write('<a style="text-decoration:none;padding:5px;float:left;'); if(i!=0) document.write('border-left:solid 0.5px '+splitbarcolor+';"'); else document.write('"'); document.write(' href="' + relatedurls[r] + '"><img style="width:96px;height:96px;border:0px;border-radius:50px;" src="'+thumburl[r]+'"/><br/><div style="width:72px;paddingleft:3px;height:65px;border: 0pt none ; margin: 3px 0pt 0pt; padding: 0pt; font-style: normal; font-variant: normal; font-weight: normal; font-size: 15px; line-height: normal; font-size-adjust: none; font-stretch: normal;">'+relatedtitles[r]+'</div></a>'); i++; if (r < relatedtitles.length - 1) { r++; else { r = 0; document.write('</div>'); relatedurls.splice(0,relatedurls.length); thumburl.splice(0,thumburl.length); relatedtitles.splice(0,relatedtitles.length); 110 //]]> </script> <!-- remove --></b:if> <!--Fin de Entradas Relacionadas--> 2 -. Que, igual que en el caso de los Sumarios Automáticos, lo pegaremos en nuestra Plantilla HTML justamente antes de </ head>. Debajo del código de los sumarios Ahora tenemos que indicarle a Blogger donde queremos que aparezcan, en el caso de las Entradas Relacionadas, lo normal, es que aparezca al final, de nuestras entradas. Buscamos en nuestra Plantilla HTML lo siguiente: <div class='post-footer'> Puedes encontrar dos, a nosotros nos interesa el segundo Justo encima pegamos: <!--Entradas Relacionadas-->

113 <!-- remove --><b:if cond='data:blog.pagetype == "item"'> <div id='related-posts'><br/> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.islast!= "true"'> </b:if> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&maxresults=6"' type='text/javascript'/></b:loop> <script type='text/javascript'> removerelatedduplicates_thumbs(); printrelatedlabels_thumbs("<data:post.url/>"); </script> </div><div style='clear:both'/> <!-- remove --></b:if> <b:if cond='data:blog.url == data:blog.homepageurl'><b:if cond='data:post.isfirstpost'> <a href=' alt='blogger Tricks' src=' alnou4/s1600/best+blogger+tips.png'/></a> </b:if></b:if> <!--Fin de Entradas Relacionadas--> 111 En la parte que te he marcado en negrita, puedes elegir el número de entradas relacionadas que quieres que se muestren al final de tus posts Ahora vamos a personalizar el código que pegamos antes de </head> <!--Entradas Relacionadas--> <!-- remove --><b:if cond='data:blog.pagetype == "item"'> <style type='text/css'> #related-posts { float:center; text-transform:none; height:100%; min-height:100%; padding-top:5px;

114 padding-left:55px; #related-posts h2{ font-size: 25px; / * Tamaño de la fuente del título * / letter-spacing: 0px; text-transform: none; color: #F5A9A9; / * Color de la fuente del título * / font-family: Raleway; / * Tipo de la fuente del título * / text-align: center; / * Alineación de la fuente del título * / margin-bottom: 0.75em; margin-top: 0em; padding-top: 0em; 112 #related-posts a{ border-right: 0px dotted #DDDDDD; text-transform: none; font-size: 25px; / * Tamaño de la fuente del título de las entradas relacionadas * / font-family: Raleway; / * Tipo de la fuente del título de las entradas relacionadas * / text-align: center; / * Alineación de la fuente del título de las entradas relacionadas * / color:#734141; / * Color de la fuente del título de las entradas relacionadas* / #related-posts a:hover{ color:#999999; / * Color de la fuente del título de las entradas relacionadas cuando pasamos el ratón* / text-transform: none; text-align: center; font-size: 25px; / * Tamaño de la fuente del título de las entradas relacionadas cuando pasamos el ratón* /. 7 - Un poco más abajo, encontramos: var relatedpoststitle="puede interesarte:"; Podemos cambiar el "Puede Interesarte" por el texto que quieres que aparezca como título de tus entradas relacionadas Seguimos bajando hasta casi el final del código, donde encontramos:

115 document.write(' href="' + relatedurls[r] + '"><img style="width:96px;height:96px;border:0px;border-radius:50px;" src="'+thumburl[r]+'"/><br/><div style="width:72px;paddingleft:3px;height:65px;border: 0pt none ; margin: 3px 0pt 0pt; padding: 0pt; fontstyle: normal; font-variant: normal; font-weight: normal; font-size: 15px; lineheight: normal; font-size-adjust: none; font-stretch: normal;">'+relatedtitles[r]+'</div></a>'); i++; 113 Vamos a personalizar la apariencia de las imágenes de nuestras entradas relacionadas: width: ancho height: alto border: Podemos añadir el tipo de borde que queramos, si lo dejamos a 0 no tendrán borde. border-radius: Esta propiedad es la que redondea nuestras imágenes. Si no queremos que aparezcan redondeadas, solo tenemos que eliminar -> borderradius: 50px ; 9 -. Comprobamos en vista previa que no hay errores y guardamos. Este gadget solo se ve cuando entramos dentro de nuestras entradas de manera individual, por lo que en Vista Previa no podemos saber si funciona. Tarda un poco en cargar hasta que Blogger se actualiza, no te impacientes si no funciona nada más instalarlo y espera un poco. Listo! ya tienes tu gadget personalizado instalado al final de todas tus entradas. Además de ir a juego con el diseño de tu blog, puede ayudarte a aumentar el número de páginas vistas, si has etiquetado bien tus entradas tus lectores encontrarán al final de cada post las entradas relacionadas y podrán visitarlas. Mola verdad? SI EL CÓDIGO TE DA ERROR PUEDE QUE SEA PORQUE AL COPIARLO DEL EBOOK SE COPIAN LOS PIES Y ENCABEZADOS DE PÁGINA, PRUEBA DESDE ESTE ENLACE: Mbyxo1_4/edit?usp=sharing

116 Vamos a empezar a ver las diferentes opciones que nos ofrece el apartado Diseño de Blogger. 114 SIDEBAR La sidebar es la columna lateral de nuestro blog, donde podemos añadir todos los elementos y gadgets que creamos necesarios. Ya vimos como personalizar su apariencia en la parte uno del tema tres. Nuestra barra lateral, junto a la cabecera y el menú superior de páginas, es lo que ayudará a nuestras visitas a navegar por nuestro blog, por lo que tenemos que tener muy claro qué queremos que visiten y como facilitarles el acceso a nuestras diferentes redes sociales, secciones, promociones... Voy a contarte como optimizo la sidebar de los blogs que diseño y cuáles son mis prioridades: A todo blogger nos interesa que nuestro contenido sea compartido. Para que ésto suceda, tenemos que ponérselo fácil a nuestras visitas. Si no has instalado tus redes sociales en el cabecero de tu blog, deben ser lo primero que vea tu nueva visita al empezar a leer tu contenido. Por eso, es recomendable que aparezcan en primer lugar en la barra lateral o, en su defecto, debajo de tu foto de presentación. En esta entrada puedes ver como instalar tus iconos de redes sociales en horizontal, un tema que a veces da quebraderos de cabeza ya que si no se programa correctamente, aparecen en vertical: Instalar redes sociales en horizontal en Blogger

117 Recuerda que hay varios programas de diseño gráfico gratuitos con los que puedes diseñar tus propios iconos de redes sociales. Te recomiendo echar un vistazo a éstos: Inkscape GIMP 115 Si estabas pensando en Picmonkey, siento desilusionarte, no soy partidaria de este programa. Lo veo demasiado básico y poco profesional. Todos los diseños realizados con Picmonkey terminan siendo iguales o muy parecidos y, como sabes, yo abogo por la originalidad y exclusividad. Lo siguiente que añado es la suscripción por . Los suscriptores son muy importantes para un blogger ya que son esas personas que han llegado a confiar tanto en nosotros como para darnos su correo y permitir que les enviemos nuestras actualizaciones y/o promociones directamente a su bandeja de entrada. Por eso, hay que mimarlos y cuidarlos como merecen. Nuestros suscriptores serán más receptivos a nuestras promociones que cualquiera de las visitas diarias que tengamos por lo que te comento, han dado ese pequeño paso de abrirnos las puertas de su casa. Para añadir nuestro gadget de suscriptores necesitamos que nuestro blog sea público y tener activado feedburner. Para cambiar la privacidad de tu blog, puedes repasar el capítulo dos del tema uno. Una vez que sea público, puedes ir de nuevo a Diseño - Añadir Gadget y buscar el gadget de suscripción por correo electrónico.

118 116 Pinchamos en el + de la izquierda: Y aquí podemos elegir el título de nuestro gadget. La URL no la tocaremos ya que es la predeterminada por Feedburner para nuestras actualizaciones. Y guardamos los cambios.

119 Con esto, hemos terminado con nuestro apartado de fidelización de visitas, como suelo llamarlo. Ya hemos colocado nuestras redes sociales y la suscripción por . Ahora vamos a centrarnos en mejorar la navegación por nuestro blog. Entradas Populares. Son aquellas más visitadas. Y si son las más visitadas, es porque son las más interesantes para nuestros lectores. Por eso, las mostraremos antes que las etiquetas y archivo. Seguro que si nuestras nuevas visitas han llegado a nuestro blog porque les interesa nuestro contenido, pincharán en alguna de ellas. 117 Pinchamos en el + de la izquierda y vamos a configurar lo que queremos mostrar:

120 Esta configuración es la que recomiendo para el gadget de entradas populares y te explico el motivo: Más visto --> En cualquier momento. Mostrará tus entradas más visitadas desde el inicio del blog, es decir, las más interesantes desde que comenzaste a publicar. Hay quien prefiere mostrar las del último mes, pero esto puede ocasionar que haya entradas antiguas que nunca vean la luz aunque sean más interesantes que las nuevas. Es solo un consejo, tú puedes elegir que mostrar en tu blog. 118 Mostrar --> Imagen / Fragmento / 5. No te preocupes si alguna de tus entradas no tiene imagen, no pasa nada, se mostrará solo el texto, pero siempre llama más la atención una imagen bonita a la hora de hacer click que una parrafada, tenlo en cuenta para tus próximas publicaciones. Fragmento: muestra las primeras palabras de tu entrada, pueden servir para despertar la curiosidad de tu nueva visita y hacerle pinchar en esa entrada. Máximo 5: Sí, yo elijo cinco para no hacer excesivamente larga la sidebar, recuerda que cuánto menos tengan que usar tus visitas el ratón para ver la información, más receptivos estarán. No les satures de información con una sidebar infinita. Etiquetas. De vital importancia. Son los temas claves de nuestro blog, las que clasifican cada una de nuestras entradas por temáticas y ayudan al lector a ubicarse y seguir navegando. Las etiquetas son fundamentales y un correcto etiquetado de tus entradas puede hacer subir tus visitas considerablemente, sobre todo si usas el script para entradas relacionadas que vimos en el tema anterior. Si no quieres usarlas, no es obligatorio, pero cuando llegues a 200 entradas, piensa que las etiquetas es la manera más sencilla de que esas entradas no caigan en el olvido y sigan recibiendo visitas.

121 Aquí no vamos a ver como etiquetar las entradas, ya que este curso es para aprender a diseñar y programar un blog desde cero, pero si quieres saber algo más sobre las etiquetas, puedes leer este tutorial donde te hablo un poco más de ellas: Sácale partido a las etiquetas de tu blog Además, con este gadget, podemos elegir qué etiquetas mostrar, cuales no y como queremos que se vean: 119 Esta es la configuración que yo suelo usar, a no ser que haya etiquetas que no quiero mostrar, en cuyo caso en: Mostrar: seleccionamos Etiquetas Seleccionadas y pinchando en editar, podemos elegir qué etiquetas queremos mostrar.

122 120 Sencillo verdad? Ahora nuestras nuevas visitas encontrarán los temas principales de nuestro blog con un solo click.

123 Archivo. Utilidad? Pues creo que ninguna demasiado importante. Pero es el índice de nuestro blog. No creo que muchas de nuestras visitas vayan navegando hacia atrás en el tiempo, pero puede que algunas sí. Es la mejor manera de acceder a todo nuestro contenido y bueno, el archivo para un blog es como el índice para un libro. Nunca está de más y a veces podemos necesitarlo. 121 Mi configuración favorita, por ser la más sencilla y fácil para navegar, es Jerarquía. Puedes probar Lista o Menú desplegable para ver cual se adapta mejor a ti, pero te recomiendo pensar siempre en tus nuevas visitas, si te han encontrado por Google muchas de ellas pueden no tener ni idea de lo que es un blog o de cómo funciona, así que pónselo fácil para que vuelvan!

124 CURSO DISEÑA TU BLOG EN BLOGGER CONMIGO Buscador interno. Puedes ponerlo al inicio, en la cabecera como tengo yo el mío mediante programación (visita este enlace para ver cómo) o encima/debajo de archivo. Piensa que el buscador va a usarlo alguien que ya sepa de qué va tu blog y qué contenido puede encontrar en él. Pensando en las nuevas visitas, el sitio óptimo es encima o debajo de archivo, cuando hayan llegado a este punto ya tendrán una visión más o menos clara de lo que ofreces. Pero si piensas en las visitas recurrentes, tal vez sea mejor ponerlo más arriba, eso depende de ti y la idea que tengas para organizar tu contenido. 122 Y a partir de aquí, puedes añadir lo que quieras. Ten en cuenta que a Google no le gustan demasiado los blogroll (esas listas interminables de blogs que nos gustan). Los considera enlaces artificiales porque están fuera de contexto. Si te gusta un blog, es mucho mejor que le dediques una entrada y compartas su enlace, hablando de su contenido y creando un contexto adecuado, que enlazarlo en tu sidebar. Puedes hacerle un flaco favor aunque tu intención sea la contraria. Y cuidado con los blogs que no sean de tu misma temática, a Google tampoco le parece muy natural que un blog sobre repostería enlace a uno de moda... cosas de Google, aunque en el fondo, tiene razón.

125 NAVBAR No me gusta nada la navbar, lo siento. La veo muy poco profesional. Es la barra de navegación que aparece en la parte superior de los blogs de blogger, tapando parte del cabecero y dándole un aspecto muy poco cuidado y profesional. 123 Mi recomendación es eliminarla, ya que su utilidad tampoco es muy importante. Para eliminarla puedes hacerlo desde Diseño - Barra de Navegación - Editar

126 Y seleccionamos NO. Si usabas la navbar para acceder a Blogger no te preocupes! Puedes hacerlo desde el panel de administración de Blogger: Tú seguirás accediendo a tu panel de administración con normalidad y le habrás dado un toque mucho más limpio y profesional a tu blog. 124

127 ATTRIBUTION 125 Supongo que si visitas otros blogs de blogger a menudo, te habrás fijado alguna vez en el footer (pie) del blog que estás visitando y habrás visto algo como ésto: Plantilla Simple. Con la tecnología de Blogger. Vamos a ver primero la forma más sencilla de personalizarlo sin entrar en la plantilla y manteniendo intacto "con la tecnología de Blogger". Para ello seguimos la siguiente ruta: Diseño -- Reconocimiento -- Editar

128 Vemos que solo nos permite añadir derechos de autor, que podemos escribirlos en la cajita en blanco. 126 Podemos usar negritas cerrando nuestro texto entre <b> y </b>. Así: No permite usar las etiquetas <span></span>, con las que podríamos darle otro color, solamente negrita y cursiva. Además, podemos añadir al final :

129 Y al guardar, el resultado sería: Como ves, se interpreta como la C enmarcada del Copyright. 127 Pero si quieres añadir colores o eliminar la coletilla "con la tecnología de Blogger", vamos a trabajar un poco más y a meternos en nuestra plantilla HTML. Abrimos nuestra plantilla HTML. Y pinchamos en cualquier zona dentro del cuadrado del código. Ahora pulsamos, como siempre, a la vez, Control + F, para abrir el buscador interno de Blogger y buscamos: Attribution Encontramos este fragmento de código, con una flechita negra a la derecha. Esta flecha oculta parte del código, pinchando sobre ella, podemos ver el código entero de nuestro Reconocimiento, para poder desbloquearlo y eliminarlo después. Al pinchar en la primera flecha, puede aparecerte una segunda, ábrela también. Al final verás el código completo:

130 Nos interesan las partes que te he enmarcado en azul, son las que vamos a cambiar. Primero tenemos: showaddelement='no' Lo cambiamos a 'yes' 128 Así: showaddelement='yes' Después tenemos: locked='true' Lo cambiamos a 'false' Así: locked='false' Quedará así: Con estos sencillos cambiamos, hemos desbloqueado el Reconocimiento para poder eliminarlo y podemos añadir más gadgets en su lugar. Guardamos los cambios y volvemos a Diseño. Ahora, si pinchamos en Editar en nuestro gadget de Reconomiento, nos aparece la opción de Eliminarlo.

131 129 Ahora podemos añadir un gadget de texto y poner lo que queramos con el formato y la estética de nuestro blog. Podemos darle un color cualquiera del cuadro de colores superior, pasar a Editar HTML y sustituir el código de color por uno de los que hayamos usado en nuestro diseño: Guardamos los cambios y listo! Ya tenemos nuestro footer acorde con la estética de nuestro blog. Si quieres centrarlo, solo tienes que encerrar todo el código entre <center> TU CODIGO </center>.

132 BOTÓN SUBIR Insertar el botón subir no tiene ningún misterio que no hayamos visto ya en El Perro de Papel. Te dejo dos formas diferentes de insertarlo: Botón subir en Plantilla HTML 130 Botón subir como gadget HTML/Javascript en Diseño Si quieres que el botón vaya directamente en la plantilla para que cuando instales tu nueva plantilla no tengas que hacer retoques adicionales, te recomiendo la primera opción, el código es similar, solo tienes que sustituir la URL de la imagen por la tuya. Ya me contarás por cual te has decidido!

133 131 Personalizar tu Buscador en Blogger Todo blog/web debería tener un buscador interno. Antes de ver como personalizarlo, te cuento porqué. Si una visita recurrente llega a tu blog, es posible que no lo necesite, ya habrá leído entradas anteriores y habrá vuelto solamente a ver que nuevo contenido hay... pero... qué sucede si es una nueva visita? Primero puede que pinche en tus entradas más visitadas, después en las etiquetas, el archivo, aunque necesario, a veces nos da más pereza... solución? Usar el buscador. Escribes la palabra que te interesa y voilá! ahí tienes todas las entradas del blog/web que llevan esa palabra. Si hasta ahora tenías dudas sobre si usarlo o no, mi consejo es siempre añadirlo. No ocupa nada y, además, puede personalizarse! Buscador automático de Blogger Buscador personalizado

134 La diferencia es evidente verdad? Al personalizarlo, podemos incluir el tipo de letra que queramos, a juego con la tipografía que hayamos elegido para nuestro blog. Y también el color. No se tarda nada y es uno de esos pequeños detalles que marcan la diferencia y trasmiten a nuestras visitas el mimo y cariño que ponemos en cada cosa que hacemos, sea grande o pequeña. Lo primero es añadir en Diseño un nuevo gadget y elegir el Buscador. Por defecto, nos aparecerá el automático, vamos a empezar a darle un toque diferente Entramos a nuestra plantilla HTML y buscamos: ]]></b:skin> 2.- Justo encima, pegaremos el siguiente código: /* Buscador */ input.gsc-search-button { color: #ffffff; height: 31px; font-family: Raleway, "Trebuchet Unicode MS", "Lucida Grande",sans-serif; font-size: 16px; background: #FF0000; border: 1px solid #ffffff; border-radius: 20px; input.gsc-input { color: #cc0000; background: #e6e6e6; Si copias ese código tal cual, obtendrás ésto:

135 3.- La primera parte del código, que te he marcado en verde, es la que da formato al botón. Puedes cambiar el tipo de letra por una de las predeterminadas de Blogger o por otra que hayas instalado desde Google Fonts en font-family. En color puedes elegir el color que quieres para tu letra. En background eliges el color de fondo, en border puedes modificar el borde del botón y en border-radius darle una forma redondeada variando el número de píxeles La segunda parte del código, de color violeta, es la que da formato al cuadradito donde se añade la palabra que buscas. En color puedes elegir el color de la letra y en background el del fondo. Ahora solo tienes que comprobar los cambios en Vista Previa y guardarlos si ha quedado tal y como querías. Ha sido sencillo verdad?

136 Personalizar suscripciones por De igual manera que con el buscador, el botoncito de suscribir por , también podemos personalizarlo. 134 Suscribir automático de Blogger Suscribir personalizado Vamos a ver como hacerlo, también es muy sencillo Entramos a nuestra plantilla HTML y buscamos: ]]></b:skin> 2.- Justo encima, pegaremos el siguiente código: /* Suscripción */.follow-by- -submit { background: #FF0000!important; /*este es el color de fondo del botón*/ color: #ffffff!important; /*Este es el color de la letra*/.follow-by- -address { color: #cc0000; background: #e6e6e6;.follow-by- -inner input[type="submit"] { font-family: Raleway, "Trebuchet Unicode MS", "Lucida Grande",sans-serif; font-size: 18px;

137 Cambiamos los colores y tipo de letra por los que mejor se adapten a nuestro diseño y... ahora vamos a traducirlo para que el mensaje aparezca en español. 3.- Guardamos los cambios, pinchamos en Ir al Widget (arriba) y buscamos Follow by