comunidades

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 que 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,

el 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 aparició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 realizado con 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 enlacé a las

páginas correspondientes que previamente habíamos creado en

Google+, Facebook y Twitter.

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?



Fuente: este post proviene de hampton sc, donde puedes consultar el contenido original.
¿Vulnera este post tus derechos? Pincha aquí.
¿Qué te ha parecido esta idea?

Esta idea proviene de:

Y estas son sus últimas ideas publicadas:

Casa Decor 2020 Dormitorios

El 5 de marzo la nueva edición de Casa Decor 2020 abría sus puertas en Madrid con la intención de mantenerlas abiertas hasta el 19 de abril pero, a causa de la situación de emergencia generada por el ...

Showroom docontract MAD

Esta semana han coincidido varios eventos decorativos en Madrid a los que he podido asistir. Casa Decor 2020 abrió sus puertas el 5 de marzo y un día antes fue la presentación a los medios. Una edició ...

Visita a un viñedo de Oporto

Durante nuestro viaje a Oporto decidimos hacer alguna excursión por los alrededores y la idea de visitar un viñedo y bodega del afamado vino de Oporto nos sedujo desde el principio. Es una excursión d ...

Recomendamos

Relacionado

general dulces recetas

Mini croissant con masa de hojaldre.

#header {display:none;} Ocultamos la cabecera referenciando su id #menuWrapper {display:none;} Ocultamos el menu referenciando su id .sidebar {display:none;} Ocultamos la sidebar referenciando su clase #footer {display:none;} Ocultamos el pié de página referenciando su id #imprimir {display:none;} Ocultamos la impresora su id #blog-pager {display:none;} Ocultamos entr ...

ideas diy

Un DIY para cambiar el aspecto de un macetero con piedras

Que tal si hoy hacemos algo especial para nuestro balcón , jardín o terraza . Os apuntáis ? La idea DIY de hoy es cambiar el aspecto de una maceta simple a una de aspecto mas rustico decorándola con piedras . Solo necesitas un macetero , yeso , una pequeña malla y piedras .La primera fotografía las piedras están puestas de lado ,son piedras oscuras y planas Fíjate en la serie de fotografías ...

general

Os presento la empresa Deyho y su web-blog .

Muchos ya conoceréis esta empresa llamada Deyho , pero para que no la conozcáis os haré un pequeño resumen . Es una empresa que se dedica a la venta online de productos para la decoración de nuestras casas , con una trayectoria de muchos años de experiencia en el mundo de la decoración. Ellos de decidieron que la mejor manera para llegar a todos nosotros era a través de internet y ya desde hace ...

general

DIY.......UN REGALO ESPECIAL

En España y muchos países de habla hispana, además de Filipinas y ciertas zonas de Francia, se espera la llegada de los Reyes Magos, en la noche del 5 de Enero. Es por ello que mi manualidad de hoy la voy a dedicar a realizar una pecera decorada, que incluso podréis realizar con los peques de casa, ahora que están de vacaciones. Si no sois expertos a la hora de dibujar, no os preocupeis, al final ...

diy todas cuerda ...

DIY Un paragüero con cuerda

DIY PARAGÜERO DE CUERDA

EN ABRIL AGUAS MIL!!! Vaya…parecía que anunciaban sol y subida de temperaturas, pero para variar los del tiempo no dan una!!! Es lo que tiene la primavera, que nos trae locos a tod@s. Seguro que estarás deseandito dejar atrás el frío invierno y salir a pasear al sol, pero, aunque hayan subido un poco las temperaturas, no debes olvidarte de la lluvia, ya sabes que en esta época cuando meno ...

general diy: como hacer ...

DIY: COMO HACER ... UN PORTAVELAS CON UN TRONCO

Si os gusta tener algún elemento natural en vuestra casa, hoy os traigo un sencillo diy para realizar un portavelas con un simple tronco. Si teneis la oportunidad de ir al campo podeis buscar alguna rama algo gruesa que esté caida, o la podeis comprar en un establecimiento de venta de leña o en una gasolinera. Con ello, tendreis un detalle original que decora y una ambientación que introduce un pu ...

general diy punto

DIY....TUTORIAL PARA POMPONES CON FORMA DE LEON

Ya estoy de nuevo aquí con el tutorial de Mr printables para realizar pompones con forma de cabeza de animales. Hoy toca el león, y lo primero antes de empezar es aprender como se hacen los pompones de lana. Seguramente la mayoría de vosotros sois unos expertos, pero por si hay alguien que lo desconoce, lo explicare brevemente. Hay dos formas de realizar los pompones, una de ellas es con 2 plantil ...

DIY Ikea Ivar ...

DIY: Mueble Ivar Ikea

Después de este parón navideño, retomamos la actividad en el blog. Como muchos de vosotros, comenzamos el año cargados de propósitos para este 2017, y uno de ellos es potenciar nuestra imaginación y creatividad. Por este motivo en el primer post del año os proponemos un DIY con infinidad de posibilidades. Se trata de personalizar un mueble, en este caso exponemos diferentes formas de hackear los m ...

general diy ideas para decorar ...

DIY: RENUEVA TU VAJILLA

Ideas para decorar casi gratis.Hoy te quiero confesar que cuando me independicé, hace algunos años ya, compré la vajilla antes de tener la casa decorada, no sabía ni el color de la pintura. Lo peor de todo es que nunca me ha acabado de convencer y costó un ojo de la cara. Y lo peor peor de todo es que es irrompible! El otro día me empecé a plantear hacer una fiesta temática griega y que los invit ...

general adorno alfombra ...

DIY: haz un felpudo muy molón para la entrada

El día que compras el felpudo para la entrada de tu nueva casa, es uno de los mejores! Es como la pieza final (a veces la primera) que indica que una nueva etapa acaba de comenzar. Esta suele ser una pieza que dura en perfectas condiciones un montón de tiempo, tanto que lo más seguro es que te acabes aburriendo de él. Pero claro, como todavía está nuevo, pues te da pena tirarlo... Pero a que si h ...