Tips para diseñar tu blog

20/6/15

Tips para diseñar tu blog



¡Hola!

Como podéis comprobar hace un tiempo rediseñé el blog por completo y como algunos de vosotros me habéis preguntado cómo lo he hecho, hoy os traigo este post para explicaros algún que otro consejo tanto como para diseñar tu blog o rediseñarlo.





Ante todo, decir que todo lo que he aprendido y he aplicado en el blog se lo debo a los consejos y tutoriales de Creative Mindly y Miss Lavanda


Os aconsejo que os paséis por sus blogs, tienen miles de cosas más, pero yo os voy a contar lo que he hecho yo:


1. Paleta de colores: parece una tontería pero no lo es, de hecho es lo más importante que parece y facilita mucho el tener una paleta para próximas actualizaciones del blog y el diseño en sí. Aconsejo que no escojáis demasiados colores, aunque sí una variedad que pueda combinarse:

  i) Pensad en el color que queréis utilizar en el blog (en el ejemplo será: rojo)

  ii) Entrad en esta página web para escoger los colores.

  iii) Escoged los colores: pensad que debéis variar entre tonos más oscuros y claros, sin que contrasten demasiado.

  iv) Apuntad el código en alguna parte segura: lo más aconsejable esque hagáis una imagen como ésta para tenerla accesible y guardada allá donde guardéis lo del blog.

  v) Copiad el código del color cuando queráis personalizar vuestro blog. Hacedlo de la manera que más os guste. Lo podéis utilizar cuando diseñéis la cabecera, los iconos sociales o cuando pongáis los colores a los enlaces, títulos de los gadgets, título de la entrada, etc. (Plantilla >>  Personalizar >> Avanzado)


2. Sidebar: decidid si queréis una o dos. Yo antes tenía dos, pero ahora he decidido poner una solo porque así me obligo a tener menos gadgets y el blog parece más ordenado. Sinceramente no creo que antes tuviera demasiados, sino que al tener las secciones (que hay bastantes) allí, necesitaba dos para poner todo lo esencial, pero ahora con una y con la barra superior, todo es mucho mejor tanto como para la visita de lector como para la vuestra.

3. Elementos de búsqueda: todo tiene que estar accesible y que resulte fácil y sencillo de encontrar. Podéis hacerlo de varias maneras:

  i) Barra superior: la instalé a partir de este tutorial, pero si queréis que os diga la verdad, me resultó difícil porque no me aclaraba con la explicación de los códigos, así que os lo voy a contar un poco por si os pasa lo mismo. Que quede claro que todo esto lo he aprendido gracias a Miss Lavanda, y os recuerdo que la siguiente explicación es para la barra superior SIN los botones de las redes sociales incorporados y CON menú desplegable:

   >> Seguid las instrucciones que os indica Miss Lavanda en el tutorial mencionado arriba hasta donde pone pegar el código.

  >> Diferencia entre página y categoría (yo con esto me confundí por eso lo quiero recalcar): 
           >Página: NO puede llevar un menú desplegable / subcategorías debajo.
           >Categoría: SÍ puede llevar un menú desplegable / subcategorías debajo.

  >> Código:
<div id='barra-superior'>
<ul class='menu'>
<li><a href='URL'>Página 1</a></li>
<li><a>Categoría 1</a>
<ul>
<li><a href='URL'>SubCategoría 1</a></li>
<li><a href='URL'>SubCategoría 2</a></li>
<li><a href='URL'>SubCategoría 3</a></li>
</ul>
</li>
<li><a>Categoría 2</a>
<ul>
<li><a href='URL'>SubCategoría 1</a></li>
<li><a href='URL'>SubCategoría 2</a></li>
<li><a href='URL'>SubCategoría 3</a></li>
</ul>
</li>
<li><a href='URL'>Página 2</a></li>
<li><a href='URL'>Página 3</a></li>
</ul>
</div>

 >>Cosas SUPER importantes: 
       >el código ENTERO debe de comenzar por <div id='barra-superior'> y terminar por </div>.
       >los elementos INDIVIDUALES (Página, Categoría, SubCategoría, etc.) deben de comenzar por <ul> y terminar por  <li>.
       >si no está así: NO SERÁ VÁLIDO.
   
 >>Añadir más elementos: 
      >Página: <li><a href='URL'>Página </a></li>
      >Categoría: <li><a>Categoría</a>
      >SubCategoría: <li><a href='URL'>SubCategoría</a></li>

  >>Con la personalización tendréis que seguir el tutorial de Miss Lavanda, no creo que tengáis ningún problema.


ii) Cajita de búsqueda: esto lo aprendí de Creative Mindly en este tutorial. Es bastante útil porque a través de algunas palabras clave, el lector puede acceder a la entrada que busca sin ningún problema.

iii) Etiquetas: es importante que etiquetéis las entradas, de esta manera el lector solo tiene que hacer clic en ella para encontrar entradas del mismo tipo. También podéis aprovechar para organizar las categorías de la barra superior, así os resultará más fácil organizaros las secciones del blog.

4. Botones sociales: hay miles de botones sociales para descargar en Google, pero siempre es aconsejable os lo diseñéis vosotros mismos.
  i) Entráis en picmonkey.com.
  ii) Le dáis a diseñar.
  iii) Ponéis el fondo transparente.
  iv) Hacéis clic en la mariposa y después en Geometric.
  v) Escogéis el círculo y lo editáis como queráis.
  vi) Buscáis en Google una foto del símbolo de la red social y la introducís haciendo clic en "Your Own".
  vii) Subís la foto a tinypic para introducir el siguiente código (créiditos a Mamá quiero ser blogger):


<a href='URL de tu PERFIL en la RED SOCIAL' target='_blank'><img alt=”NOMBRE DE LA RED SOCIAL” src='URL de la IMAGEN con el ICONO'  title='NOMBRE DE LA RED SOCIAL' /></a>


Esto son las cuatro cosas en las que me he basado para mejorar el blog. Es mucho trabajo pero vale la pena. :) 

Espero que os sirvan de ayuda. :P

Blue Butterfly

10 comentarios:

  1. ¡Hola!

    Sin duda, hacia muchísimo que no me pasaba por tu blog y, de repente, al entrar, me encuentro con este diseño y oh my gosh. Me encanta.
    El azul es, sin lugar a dudas, mi color favorito, y solo con esto ya tienes mi aprobación. Pero está todo muy bien hecho, con ventanas y secciones... Felicidades.

    Un beso,

    escapefromreality14.blogspot.com.es

    ResponderEliminar
    Respuestas
    1. Muchas gracias. :) ¡Ya te echaba de menos! :)

      Blue Butterfly

      Eliminar
  2. Muchas gracias por la info guapa.
    Te sigo, me sigues?
    Un beso.

    ResponderEliminar
    Respuestas
    1. De nada. :)

      Ahora me paso.

      Blue Butterfly

      Eliminar
  3. Buenaaaaas, me encanta darle color y cambios al blog (y tener tiempo, y un unicornio, y m¡bueno muchas cosas más) así que estos consejos siempre vienen bien.
    Abrazotes guapa^^

    ResponderEliminar
    Respuestas
    1. Jajajaja, muchas gracias. :)

      Blue Butterfly

      Eliminar
  4. ¡Hola, Blue! Me gusto mucho el post, a mi siempre se me hace dificil el tema de diseñar mi blog ya que no entiendo mucho el html pero bueno. Tu blog esta muy bonito :3. Un beso.

    ResponderEliminar
    Respuestas
    1. Poco a poco irás aprendiendo. :) Espero que esto te sirva para empezar. ;)

      ¡Gracias!

      Blue Butterfly

      Eliminar
  5. me gusto mucho esta entrada ya que le quiero dar un cambio y no se como:(
    haber si con tu ayuda puedo(crucemos los dedos jeje XD)
    un beso
    Ainhoa
    infinitylife9.blogspot.com

    ResponderEliminar
    Respuestas
    1. ¡Gracias! Si necesitas algo más, dímelo. :)

      Blue Butterfly

      Eliminar

¡Hola!
Estoy encantada de que quieras dejar un comentario. ¡Muchas gracias! El blog mejorará gracias a ti.
Pero recuerda que los SPAM y los SPOILERS no están permitidos, así como la falta de respeto hacia mí o a otro usuario que comente.
Gracias.
Blue Butterfly