Los Sidebar

Vamos a empezar hablar sobre los sidebar o columna, como todos saben es la parte lateral del blog, bien sea a la derecha o la izquierda. Es una parte fundamental en blog, ya que ahí podrás poner todo lo relacionado con tu blog (Archivos, enlaces, imágenes, videos, script, texto, reloj, calendario, e/o).

Vamos a identificar la parte de códigos (HTML/CSS) que le corresponde a los sidebar. "Todo lo explicado, esta basado en la plantilla mínima"

• Lo primero: Parte CSS

En esta parte la encontraremos en el Outer-Wrapper.

#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}

Width (ancho) Esta parte es muy importante ya que aquí le daremos el tamaño al sidebar.

• Segundo: Parte CSS

Lo encontraremos en el /* Sidebar Content.

/* Sidebar Content

----------------------------------------------- */

.sidebar { 

  color: $sidebartextcolor;

  line-height: 1.5em;

 }



.sidebar ul {

  list-style:none;

  margin:0 0 0;

  padding:0 0 0;

}

.sidebar li {

  margin:0;

  padding-top:0;

  padding-$endSide:0;

  padding-bottom:.25em;

  padding-$startSide:15px;

  text-indent:-15px;

  line-height:1.5em;

  }



.sidebar .widget, .main .widget { 

  border-bottom:1px dotted $bordercolor;

  margin:0 0 1.5em;

  padding:0 0 1.5em;

 }



.main .Blog { 

  border-bottom-width: 0;

}

Aquí haremos cambios en de estilo en el sidebar, como por ejemplo: cambiarle el color, colocarle margenes y el estilo de las lista en el sidebar. Es algo muy fácil de modificar te invito a visitar estos tutoriales, para así entender más de sobre los CSS.

• Tercero: Parte HTML

Esto lo encontraras en <div id='sidebar-wrapper'> dentro de las etiquetas Body.

<b:section class='sidebar' id='sidebar' preferred='yes'>

<b:widget id='Followers1' locked='false' title='Seguidores' type='Followers'/>

<b:widget id='BlogArchive1' locked='false' title='Archivo' type='BlogArchive'/>

</b:section>

Por lo general así encontraras estas secciones donde cada sección comenzara por la etiqueta <b:section> y terminara con la etiqueta </b:section> y dentro de la sección veremos las etiquetas widget (artilugios) que son lo elementos que le agregas al blog.

Según la página de ayuda de Blogger tienen que ser únicos y adaptarlos a los siguientes atributos:

• id - (obligatorio) un nombre exclusivo, que consta únicamente de letras y números.
• class - (opcional) algunos nombres de clase habituales son "navbar", "header", "main", "sidebar" y "footer." Si cambias las plantillas más adelante, estos nombres ayudarán a Blogger a determinar la mejor forma de transferir el contenido. Sin embargo, puedes utilizar otros nombres si lo prefieres.
• maxwidgets- (opcional) el número máximo de artilugios que se pueden permitir en esta sección. Si no se especifica límite, significa que no existe.
• showaddelement - (opcional) puede ser "yes" o "no", donde "yes" es la opción predeterminada. Determina si la pestaña "Elementos de página" mostrará el vínculo "Añadir un elemento de página" en esta sección.
• growth - (opcional) puede ser "horizontal" o "vertical", donde "vertical" es la opción predeterminada. Establece si los artilugios de esta sección se ordenan uno al lado de otro o uno encima del otro.

Cada artilugios (widget) también tiene unos atributos a seguir:

<b:widget id='Followers1' locked='false' title='Seguidores' type='Followers'/>

<b:widget id='BlogArchive1' locked='false' title='Archivo' type='BlogArchive'/>

• id - (obligatorio) consta únicamente de letras y números, y cada uno de los ID de la plantilla deben ser exclusivos. El ID de un artilugio sólo se puede modificar eliminando el artilugio en cuestión y creando uno nuevo.
• type - (obligatorio) indica el tipo de artilugio, el cual debe ser uno de los tipos válidos de la lista que se especifica más abajo.
• locked - (opcional) puede ser "yes" o "no", donde "no" es la opción predeterminada. Un artilugio con este atributo no se puede mover ni suprimir de la pestaña "Elementos de página".
• title - (opcional) el título que se muestra del artilugio. Si no se especifica ninguno, se empleará un título predeterminado, como "List1".
• pageType - (opcional) puede ser "all", "archive", "main" o "item", donde "all" es la opción predeterminada. El artilugio se mostrará únicamente en las páginas del blog que se hayan establecido para ello. (Todos los artilugios se muestran en la pestaña "Elementos de página", independientemente de su atributo pageType).

Al final lo verán de esta estructura, donde <b:section></b:section> van dentro de la etiqueta <div id='sidebar-wrapper'> </div> :

<div id='sidebar-wrapper'>

<b:section class='sidebar' id='sidebar' preferred='yes'>

<b:widget id='Followers1' locked='false' title='Seguidores' type='Followers'/>

<b:widget id='BlogArchive1' locked='false' title='Archivo' type='BlogArchive'/>

</b:section>
</div>

Dentro de las etiquetas widget hay unos ID existente para diferenciar cada artilugios:

• BlogArchive
• Blog
• Feed
• Header
• HTML
• SingleImage
• LinkList
• List
• Logo
• BlogProfile
• Navbar
• VideoBar
• NewsBar

Referencia en Ayuda de Blogger

Seguiremos explicando más en el próxima entrada. :)