Como configurar a sidebar css

Como configurar a sidebar css

Muitas vezes queremos modificar o menu lateral de nosso blog mas não temos coragem por achar complicado. Muitos fazem isso, mas voce leitor assíduo deste blog vai descobrir que é mais simples do que parece, e que não há segredos para moficar a sidebar (Barra lateral) do seu blog, basta seguir este tutorial:

1ª Etapa:
Acesse seu blog, "DESIGN" -> "EDITAR HTML" e procure por #sidebar-wrapper que corresponde à coluna do seu blog voce irá trabalhar sempre no seu código-fonte:

Esta id está localizada no corpo html do seu blog mais ou menos da seguinte forma:

#sidebar-wrapper {
    width: 240px;
    float: right;
    color: #fff;
    line-height: 1.8em;
    margin: 10px 0 10px 0;
    word-wrap: break- word;
    overflow: hidden;
}
Perceba agora as propriedades de sua sidebar, para modificar a largura da sua coluna modifique os pixels de width, quanto maior o valor mais largo será sua coluna, float refere-se a qual lado do template sua coluna deverá ficar, neste caso ela está na esquerda do blog, para colocar a coluna no lado direito basta trocar float: right por float: left. A propriedade line-height refere-se há altura das linhas que irão se dispor em sua coluna, a propriedade color diz respeito a cor de qualquer texto que seja inserido dentro de sua coluna. A propriedade margin é usada para identificar a distância dos elementos externos em relação a sua coluna (Para mais infor acesse : Tudo sobre margin e padding) após realizar as alterações desejadas sempre visualize antes de fazer uma modificação, até porque se voce colocar um valor muito alto irá danificar o layout do blog, então tome cuidado.
Além do id sua coluna possui uma class que será referente há área interna do seu blog:
.sidebar {
width: 220px;
color:#000;
padding:0 0 0 0;
}

Obs.: id refere-se a posicionamento e classe sobre características dos elementos internos do id.

Para maiores esclarecimentos acesse: aqui

2ª Etapa: PERSONALIZANDO CORES DA SIDEBAR:

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

.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; Modifique pelo código html da cor que voce desejar.

background:url(URL DA SUA IMAGEM)repeat; Substitua pelo endereço (URL) da sua imagem de preferência.

Dica: Use repeat acopanhado de x para a imagem não se repetir na vertical mantendo no restante a cor de fundo que voce deseja. Veja o exemplo:
background: #000000 url(URL DA SUA IMAGEM) repeat-x;

3ª Etapa: PERSONALIZANDO O TITULO:
Se você estiver utlizando 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;
background: #000000 ;
margin: 10px 0 10px 0;
border: 1px solid $bordercolor;
line-height: 1.5em;
padding: 10px 0 10px 0;
text-align: center;
}

Vamos identificar o que corresponde cada variavel, 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
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)
4ª Etapa: 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.

5ª Etapa: COLOCANDO IMAGEM OU LINHA NOS LINKS DA SIDEBAR:
Se você quiser acrescentar uma imagem (icones) antes de cada link na sidebar, procure pelo trecho abaixo:

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

E acrescente o código abaixo logo em seguida:

.sidebar ul li {
list-style: disc url(url da sua imagem);
vertical-align: top;
padding: 0;
margin-left: 20px;
}

Lembrete: Sempre visualize antes de salvar, ao fazer uma modificação em seu template.

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;
}
.sidebar ul li {
list-style: disc url(url da sua imagem);
vertical-align: top;
padding: 0;
margin-left: 20px;
}
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. 
.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.
.sidebar ul -> Se refere a lista inteira.

6ª Etapa: 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;”