Nuevo diseño

  
                                                    Antes                     Después

Para retomar el blog lo primero que necesitaba era un nuevo diseño, la plantilla es mas elaborada que la anterior esta vez solo modifique algunas imágenes, texto y links. El resultado me gusto aunque en el momento todavía faltan algunos elementos de lo que plantee sería la vista del blog, de momento explicare lo que hice, son elementos "técnicos" sencillos, por lo que si saben sintaxis html y css no será difícil entenderlos.

La plantilla esta basada en Tech Dream, adaptada de Wordpress

live demo


Lo primero fue crear el nuevo header,la imagen original me agrada, el concepto del cuadro principal junto a la lap, la imagen del cuadro, la pantalla de la lap y el rango de colores era algo que sin duda cambiaria. Encontrar una imagen dentro de la plantilla no es tan díficil, simplemente se busca la extensión de la imagen en mi caso (.jpg).

La edición de las imagenes fue en photoshop, lo cual simplifico mucho el proceso. El cuadro se compone de dos imagenes: Camera by ~MathewJ91, Music with wings by ~GaZm85, el titulo del blog y efectos de relleno. Mientras la computadora despliega el "nuevo" logo de Dmar. Y el rango de colores lo deje de verde a amarillo.

Teniendo la parte visual, era hora de configurar las páginas, algo que desde el principio quería incluir en el blog, pero que nunca implemente, buscando las opciones para hacerlo encontré que blogger implemento la creación de páginas en draft.blogger.com, con la creación de páginas habilitada, escribí el about, contact y un pequeño faq(en parte como broma, y otras cosas "seriamente").

Termine agregando los links de las paginas, y del rss (la plantilla ya lo tenia, pero según lo mejore), solo quedaba un pequeño detalle, el titulo y descripción del blog quedaban encima del header, haciendolo ver horrible, la solución un cambio en el CSS. Lo primero que se me ocurrió: display: none, primero en #header pero eso quito el titulo, descripción e imagen, después lo inserte en #header h1 el resultado se veía como quería pero después me di cuenta que el botón del RSS y el link estaban desfasados, entonces cambie el atributo a visibility: hidden, el resultado se veia y funcionaba como queria, el titulo no se despliega pero se mantiene su espacio. La razón por que funciono visibility: hidden es por la forma en que actua:

display: none; // Elimina el elemento de la pagina
visibility: hidden; // Esconde el elemento, reserva el espacio en el que se despliega.


La plantilla le faltan elementos que me parecen importantes, enviar a twitter, post relacionados, gadgets en el sidebar, con los cuales trabajare el resto de la semana. Ahora que termine examenes e inevitablemente tendre internet empezare con posts normales el 15/02.

Read Users' Comments (0)

0 Response to "Nuevo diseño"

Publicar un comentario