Dando prosseguimento a série de postagens sobre as Variaveis CSS e os Elementos do Blogger, aqui neste post vamos falar sobre a variavel #sidebar-wrapper que corresponde aquela coluna do perfil.

Esta variavel está localizada no corpo do html do seu, mais precisamente neste trecho abaixo:

#sidebar-wrapper {
width: 240px;
float: $endSide;
color: $sidebartextcolor;
line-height: 1.8em;
margin:
5px 0 10px 0;
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 */
}

Se você quiser modificar a largura da coluna na sidebar, altere os valores que estão em width. Quanto maior for o valor da widht, mais larga será a sua coluna.

Lembrando que este código acima eu peguei do template Minima (template do proprio blogger). Se você utiliza um template modificado este código pode estar diferente, neste caso procure pelo titulo “sidebar-wrapper” no corpo html do seu blog.

Lembrando que:
#sidebar-wrapper -> é a área total da coluna.
Vejamos outro exemplo:

.sidebar {
width: 220px;
color:#000;
padding:0 0 0 0;
}

.sidebar -> é o interior da Coluna.

Personalizando as cores da sidebar:

Se você quiser incluir uma imagem ou cor na coluna .sidebar, que seja diferente da coluna total (#sidebar-wrapper}, acrescente background em .sidebar , dessa forma:

.sidebar {
width: 220px;
background: #fff url(endereço-da-imagem) repeat-x;
color:#000;
padding:0 0 0 0;
}

Se você quiser, pode acrescentar cor ao fundo da sidebar, para destacá-la no seu blog, inclusive pode acrescentar uma imagem de fundo (background).Para isso, acrescente no código, a seguinte linha :
background-color: #000000; -> apenas cor do fundo


Se quiser acrescentar uma imagem como plano de fundo, utilize este código:
background:transparent url(URL DA SUA IMAGEM)repeat; -> apenas imagem ao fundo
Sobre as maneiras que você pode estipular o comportamento da imagem do fundo, você poderá seguir as mesmas dicas aplicáveis a background, no artigo Modificando o Background do Blog.
Dica: Você pode usar uma imagem que não se repita na vertical e manter o restante do fundo com uma determinada cor, para que haja uma continuação da cor ao final da imagem.
Veja o exemplo:
background: #000000 url(URL DA SUA IMAGEM) repeat-x;

Personalizando o título da sidebar:

Se você estiver utilizando o template Minima, você deverá acrescentar o código abaixo. Para outros templates, este trecho já deve constar no código, basta procurar por ele no corpo do html do seu blog:

.sidebar h2 {
color: #FFFFFF; /*--cor da fonte--*/
background: #000000 ; /*--cor de fundo--*/
margin: 10px 0 10px 0;
border: 1px solid $bordercolor; /*--borda em toda coluna do titulo--*/
line-height: 1.5em;
padding: 10px 0 10px 0;
text-align: center; /*--alinhamento do texto do titulo--*/
}

Vamos identificar o que corresponde cada variável, para que você possa defini-las de acordo com sua preferência:
color: é a cor da fonte
background: é aqui que você estabelece a cor do fundo, se quiser pode acrescentar uma imagem
margin: determina a distância entre uma coluna e outra
border: é a borda em volta de toda coluna
line-height: é onde você define a altura da linha
padding: determina as margens internas, é a distância entre o texto e a borda
text-align: é o alinhamento do texto (pode ser: center= Centro, left= esquerda ou right= direita)

Separando as colunas:

Se você quiser, pode estabelecer uma distância de uma coluna para outra, separando-as de forma a dar um visual diferente para sua Sidebar. Para isso, procure por este trecho:

.sidebar .widget, .main .widget {
border-bottom:1px solid $bordercolor;
margin:0 0 1.4em;
padding:0 0 1.4em;
}

E modifique separando desta maneira:

.sidebar. widget{
margin: 0px 0px 20px 0px;
padding:20px 5px 20px 15px;
background: #000000;
border: 2px solid #ffffff;
}

.main .widget {
border-bottom:1px solid $bordercolor;
margin:0 0 1.4em;
padding:0 0 1.4em;
}
O template Minima traz o código de widgets do post (main) e da coluna (sidebar) juntos.Se você estiver utlizando o template Minima, você deve separar os dois códigos para que você possa alterar cada um individualmente.

Acrescentar linhas de links na sidebar:

Se no seu template não tiver a linha de código referente a linha de links da sidebar e você quiser acrescenta-la, para poder personalizar a maneira que seus links deverão se apresentar na sidebar.
E acrescente este trecho:

.sidebar ul {
list-style:disc;
margin:0 0 0 0;
padding:0 0 0 0;
}

.sidebar li {
margin:0;
padding:0 0 0 15px;
}

Lembrando que você deverá estabelecer os valores de margin e padding de acordo com o seu gosto. Uma dica é sempre ir visualizando antes de salvar as alterações.

Se você quiser acrescentar uma borda abaixo dos links da sidebar, acrescente:
border-bottom: 1px dotted $bordercolor;
no trecho:
.sidebar li{
  do código acima, devendo ficar assim:

.sidebar ul {
list-style:none;
margin:0 0 0 0;
padding:0 0 0 0;
}

.sidebar li {
margin:0;
padding:0 0 0 15px;
border-bottom: 1px dotted $bordercolor;
}
Veja também, como Personalizar os links da sidebar.

Entendendo melhor cada elemento da sidebar:

.sidebar-wrapper -> é a área total da coluna.
.sidebar -> é o interior da Coluna.
.sidebar h2 -> é a área do titulo da coluna.
.sidebar. widget -> É a área de cada elemento (widget) da coluna. É onde fica o contéudo.
.main .widget -> É a área que trata do widget do post. Tudo que você alterar nesta coluna vai ser alterado também na postagem.
.sidebar li -> Se refere aos itens das listas de links.
.sidebar ul -> Se refere a lista de links inteira.

ALTERANDO A POSIÇÃO DA SIDEBAR:

Se e sua sidebar está no lado direito e você quiser mudá-la para o lado esquerdo
Encontre a tag: #sidebar
E altere:
“float:right;” para “float:left;
Se for o oposto (sidebar no lado esquerdo trocada para o lado direito) é só alterar: “float:left;” para “float:right;”