¡Haz tu sitio más dinámico y funcional con Blidgets!

Un sitio en Bligoo está construido, entre otras cosas, a partir de Blidgets. Estos son los que aportan funcionalidades y dinamismo al contenido de tu sitio.

Agregar Blidgets a tu sitio en Bligoo

Una de las preguntas que nos han hecho muchas veces en La Cocina de Bligoo es cómo agregar una nueva columna con blidgets en un sitio.

Bligoo es tan flexible que puedes agregar blidgets donde tú quieras. Sólo es necesario agregar columnas, o "espacios para blidgets" y luego agregar blidgets en ellos.

En este artículo explicaremos cómo agregar columnas en las plantillas de tu sitio y en las portadas. Sigue leyendo y aprende a personalizar aun más tu sitio.

Para modificar la estructura de tu sitio es necesario tener conocimientos básicos de HTML y CSS. Te recomendamos que busques algunos tutoriales on-line para aprender lo básico ya que no es algo muy complicado y puedes hacer maravillas una vez que aprendas.

Perfecto, ¿por dónde comenzamos?

Lo primero es leer el artículo anterior en donde explicamos la estructura general de un sitio en Bligoo. Para el resto del artículo asumiremos que ya lo has leído.

Ahora, debemos ver dónde agregaremos la columna. Como ejemplo usaremos un sitio recién creado, http://unacolumna.bligoo.cl/. Es un sitio con una sola columna a la derecha.

Nuestra intención es agregarle una columna a la izquierda para que tenga una columna a cada lado. En resumen, queremos pasar de esto:

 

Estructura de una columna

a esto:

 

Estructura de dos columnas

Agregando el espacio

Primero lo más sencillo, agregar el espacio de blidgets. Para eso debes ir al Editor de Bligoo en tu sitio (En la barra de Bligoo, en la pestaña Editor). Luego, una vez en el editor, vamos a la pestaña de CSS y HTML y buscamos la caja con las plantillas del sitio.

¿Dónde están las plantillas del sitio?

Ahora, abrimos la plantilla "index.tpl". Esta es la que contiene la estructura básica del sitio y es la que queremos modificar.

Cuando la encuentres y cliquees sobre ella, verás que no son muchas líneas. Las que nos interesan son específicamente las que definen una columna.

<div  id="blidget-container">
  	<div id="blidget-container-1-wrapper"  class="clearfix">
  		<div id="blidget-container-1">
  			{ container-0 }
  		</div>
  </div>
</div> 

Esta es la parte que define la columna derecha. La llave { container-0 } es la que se reemplaza con el contenido de los blidgets.

Copiamos el texto anterior y lo modificamos para que se vea de esta manera.

 <div  id="blidget-container-izquierda">
	<div id="blidget-container-izquierda-wrapper"  class="clearfix">
  		<div id="blidget-container-izquierda-content">
  			{ container-1 }
 		 </div>
   </div>
 </div> 

Aquí hicimos dos cosas: primero, cambiamos todos los ID de los DIV para que no se repitan con los de la columna de la derecha. Esto es necesario para que podamos diferenciar una columna de otra.

Lo segundo, y aun más importante, es que cambiamos de { container-0 } a { container-1 }. Con esto hemos generado el nuevo espacio de blidgets. En la plantilla de tu sitio puedes tener hasta 17 espacios como este y usarlos de la manera que más convenga al diseño de tu sitio.

Ahora, debes poner ese texto justo antes de la línea que dice:

<div id="center-wrapper">

La línea anterior es la que define el comienzo del contenido central. Al poner el texto de la columna antes de ella estaremos poniendo la columna en la estructura del sitio.

Si ya quieres introducir blidgets en la nueva columna tienes que ir a la pestaña de edición de blidgets.

¡Perfecto! ¿Estamos listos?

No todavía. Aunque la columna está lista y ya podemos introducir blidgets en ella todavía faltan u par de pasos.

Si trataste de introducir blidgets en la columna te habrás dado cuenta de que la columna no se encuentra a la izquierda. Esto es porque falta darle propiedades gráficas por medio del CSS.

Ahora debemos ir a sección de hojas de estilo y buscar la hoja generated.css.

 

¿Donde está el editor de CSS?

La columna del medio está configurada para tener un 65% del tamaño del sitio y la columna de la derecha un 35%. Eso nos da el 10% del sitio y no tenemos espacio para nuestra columna. Lo que debemos hacer es configurar todo para que la columna del medio tenga un 50% y las otras dos 25% cada una.

Primero buscamos en el CSS donde dice:

#center-wrapper {
	padding-top: 30px;
	float: left;
	width: 65%;
} 

Y cambiamos el 65% por 50%.

Ahora buscamos donde dice:

#blidget-container {
	float: right;
	width: 35%;
} 

Y modificamos donde dice 35% por 25%.

Con esto hemos dejado el espacio necesario en el sitio para que quepa nuestra nueva columna. Para darle las propiedades, iremos al final del archivo generated.css y agregaremos las siguientes líneas.

#blidget-container-izquierda {
	float: left;
	width: 25%;
} 

Aquí lo que hemos hecho es decirle a la columna que tome un 25% del ancho del sitio y que se posicione hacia la izquierda. El posicionamiento hacia la izquierda es muy importante pues es lo que la alinea con las otras columnas.

Ahora lo único que resta por hacer es ir a la pestaña de edición de blidgets y agregar todos los blidgets que quieras a la nueva columna.

Para ver cómo debería quedar todo puedes ver este sitio

http://doscolumnas.bligoo.cl/

¿Y eso es todo?

Sí, eso es todo :D

Bueno, en realidad hay muchas cosas más que puedes hacer después de esto. Puedes crear otras columnas, puedes cambiar la apariencia gráfica por separado de cada una o puedes crear espacios de blidgets de manera horizontal. También puedes crear combinaciones como dos columnas a un mismo lado y una columna sobre estas dos.

Por último sólo recordarte que mientras más conocimientos de HTML y CSS tengas, podrás personalizar aun más tu sitio ya que es el lenguaje estándar para la construcción de sitios Web.

|

Comentarios

PERFECTO. Muy bien explicado.

Vengo desde hace algún tiempo estructurando mi Blog AtinaChilePro.bligoo.cl para que se adapte a todas los tamaños y resoluciones de los diferentes monitores que han ido apareciendo en el mercado.

Saludos Cordiales

  Tomás Nomás

 





Como dice Tomás muy bien explicado, la verdad que desde hace tiempo vengo utilizando este servici opara mi blog personal, y es de fácil manejo, no sabia lo de las dos columnas, voy a intentarlo a ver que tal se me da, gracias a todos! Saludos Lorena

Ah soy nueva en bligoo, la verdad que esta bien explicado, por pasos y si se conoce de diseno se puede hacer.

Pero no entiendo todo....

Yo tengo dos columnas, una central y la otra derecha, pero me gustaria tener una a la izquierda....como lo hago. He probado ahora mismo siguiendo los pasos y no encuentro muchos datos que me dices para cambiar los contenedores...

Este es mi sitio....por favor me pudes dar una explicacion que me sea mas facil o acsesible a poder llegar a agregar esta 3ra columna?

Muchas gracias y que tengan un bello fin de semana!!!

http://luisa-guerra.bligoo.com/content

L.M Guerra

tengo un problema....

1.- entre al editor, menu y hice click en Agregar un item al menu le puse como url del destino http://geekperu.bligoo.pe/Humorgeek.

2.-luego fui a paginas y le di click en crear una nueva pagina y puse en direccion http://geekperu.bligoo.pe/Humorgeek.

3.-guarde todos los cambios.

4.-luego me diriji a http://geekperu.bligoo.pe/Humorgeek le di click en escribir, nuevo articulo.

5.-cuando hago eso me lleva a http://geekperu.bligoo.pe/content/edit/3252650/new/post#edit-form pero deseeo  que el articulo este en  http://geekperu.bligoo.pe/Humorgeek y cuando escriba un articulo ahi tambien este publicado en http://geekperu.bligoo.pe/content.

6.-pero cuando hago solo se llega publicar en http://geekperu.bligoo.pe/content y no en http://geekperu.bligoo.pe/Humorgeek.

 

7.como puedo solucionar..

GRACIAS

Ayer se vio el apoyo masivo del pais en la marcha del candidadato Danilo Medina

ahora estoy muy informado de como debo de utilizarlo

Comentarios de este artículo en RSS
Cerrar