Un blog con apariencia de web * DIY

Ya sabéis que en Hampton SC nos gusta el handmade,

el low cost, los retos creativos, los proyectos personalizados,

los pequeños/grandes emprendedores...

Esta misma filosofía DIY es compartida por quienes formamos

Estoy Contigo En..., el proyecto que pusimos en marcha hace

no mucho y al que hemos estado dando forma

para presentarlo como se merece.

Conseguir una imagen corporativa mediante un logotipo y una web

propios nos ha tenido ocupadas estas últimas semanas ya que

decidimos intervenir en todo el proceso creativo.

Al no ser diseñadoras gráficas ni tener conocimientos de

programación web suficientes, decidimos crear nuestra página

a partir del instrumento que mejor manejamos: Blogger.

Y como dentro de nuestra filosofía es igualmente importante

compartir, facilitando así la labor de otros creadores, os cuento

cómo lo hicimos.

Las plantillas con vistas dinámicas para blogs de Blogger

ofrecen un aspecto muy parecido a las webs por lo que decidimos

partir de ellas e ir eliminando aquellos elementos que son

necesarios en un blog pero que no tienen sentido en una

página web: fecha de publicación, atribución, símbolos-enlaces

para compartir los post en redes sociales...

La mayor dificultad para cambiar el aspecto de las plantillas con

vistas dinámicas radica en que los cambios no se realizan a través

de la edición html, como en las plantillas tradicionales de Blogger,

sino mediante códigos CSS sobre los que no hay tanta información

en tutoriales y foros de ayuda.

Pero a fuerza de buscar, investigar e interpretar..., de probar

una y otra vez, conseguimos eliminar todos aquellos elementos

que nos eran innecesarios.

Lo primero que hicimos fue elegir la vista que más se

adaptaba al aspecto web que queríamos obtener, la vista

Classic, eliminando después la opción de visualización de

los otros tipos de vistas dinámicas.

Para ello añadimos en el apartado Avanzado del diseñador de

plantillas de Blogger, el código CSS siguiente:

#views{ display: none !important; }

Queríamos eliminar también el cajón de búsqueda sobre la

barra de pestañas y en este caso el código CSS a introducir es:

#search { display: none !important; }

La barra de gadgets de la derecha tampoco es necesaria y

podemos hacerla desaparecer añadiendo otro código CSS:

#gadget-dock {display:none !important; }

Para eliminar el símbolo de fecha de publicación de post,

el código CSS que pondremos es:

.ribbon, .date {display:none !important;}

Los datos de publicación y autoría de las entradas

desaparecen al añadir el CSS:

.publish-info {display:none !important;}

Los iconos de distribución de los post en las redes sociales

los eliminamos con el código CSS:

.share-controls,  .delay {display:none !important;}

Finalmente los datos de "diseño de blog con la tecnología

Blogger" del final de la página desaparecerán al añadir:

#attribution-container { display: none !important; }

El aspecto final que presentará la ventana de códigos CSS

personalizado del diseñador de plantillas de Blogger será

el que aparece en la imagen siguiente.

Una vez conseguido el aspecto básico de una web, iremos

eligiendo en el Diseñador de plantillas de Blogger el color y/o

la imagen de fondo, ajustaremos el ancho, el tipo de letra y
su color...

Y después empezaremos a introducir contenido.

Tan sólo será necesario crear una entrada o post, sin ponerle

título, que quedará como la página de INICIO y en la que

introduciremos la información e imágenes

básicas de nuestro proyecto.

Un slideshow al comienzo de la misma nos permitirá presentar

el logo de nuestro proyecto seguido de fotografías que ilustren

el tema o contenido de nuestra web.

Debido a las características de las plantillas de vistas dinámicas

me resultó imposible incrustar un slideshow y finalmente opté

por hacer un gift que si bien no permite introducir flechas para

hacer avanzar o retroceder la presentación de  imágenes,

tiene el mismo aspecto y cometido.

Crearemos posteriormente tantas páginas como necesitemos y

programaremos su nombre y posición en la barra de pestañas

como se hace en un blog normal.

Para dar acceso a las páginas más importantes desde la página

de inicio, creé en PowerPoint unas pequeñas imágenes con

los principales servicios que ofrecemos, siguiendo la estética y

composición de nuestro logo, también diseñado en PowerPoint,

guardando las imágenes en formato .jpg

Enlazando cada imagen con su página correspondiente (añadimos la url

de la página al enlace de la imagen), podremos acceder a las páginas

tanto desde la barra de pestañas como desde la página principal.

Finalmente añadí los iconos de las redes sociales y los enlacé a las

páginas correspondientes que previamente habíamos creado en
Facebook, Twitter y Google+.

(Agradeceremos infinitamente los likes, los retuits y los +)
;-)

Y, ahora sí, podéis ver resultado final de nuestra flamante página web.

Os presentamos:

Estoy Contigo En...

Es viernes y no quiero perderme el encuentro de Colorín Colorado,

por lo que participo con este DIY en sus Findes Frugales.

Debo reconocer que si bien el coste económico de esta creación es 0,

su coste en tiempo es del 150% y su coste neuronal de más del 200%

Pero la satisfacción de haberlo conseguido por uno mismo es impagable.

¿No os parece?