Como fazer uma sidebar

Olá a todos ! Nescauh Here !

A pedido de um amigo,estarei ensinando como criar uma sidebar para seu blog,e como implanta-la no blog.

Bom vamos começar,

Para templates de 2 Colunas:

Crie um novo documento de 982x100 px; 

Em seguida,com a ferramenta Retângulo Tool, faça dois retângulos um de cada lado,cobrindo toda a altura da área de desenho,mas cobrindo só uma parte dos lados. (depois iremos arrumar as larguras)

Depois disso,vamos editar o tamanho dos retângulos,clique neles e lá embaixo em Propriedades,deixe suas configurações desse jeito:

L ou W : 204

A ou H:  141

Para templates de uma coluna:

Abra um novo documento de 982x100 px; e faça um quadrado cobrindo toda a altura do lado que é a sua sidebar. Ex: se a sua sidebar for do lado direito,faça o quadrado do lado direito.

Clique no quadrado que ficará o lado da sua sidebar,e em Propriedades edite conforme a imagem:

L ou W: 270

A ou H: 141

Agora no outro quadrado,do lado oposto da sua sidebar,edite conforma a imagem:

L ou W: 10

A ou H: 200

Agora que já definimos a largura,vamos adicionar um contorno para deixar ela mais bonita.

Clique na sua sidebar, e clique no Lápis da barra de ferramentas embaixo para adicionar um contorno,selecione 3 pixels de largura e escolha a cor.

A sidebar ficará apenas com um contorno,por que ela está saindo da área de desenho. Para arrumar isso clique na sua sidebar e com as setas do teclado vá mexendo para o lado até sair o contorno de 3 px !

(a cada teclada com a seta,move 1 pixel,mova 4  vezes para ficar 3 pixels certinhos)

Lembre-se: Não podemos deixar que o contorno de cima apareça,se não a sidebar vai ficar se dividindo desse jeito,e estragará o layout.

Se você quiser você pode adicionar alguns efeitos como listras a sua sidebar,personalize-a a seu gosto .

Aplicando a sidebar no Blog

Para colocar sua sidebar no blog,vá em Modelo>Editar HTML> de CTRL+F e procure por 

#content-wrapper {

background:transparent url

Depois de transparent url haverá um parentes,cole o link da sua sidebar dentro dele, ficando assim o código:

#content-wrapper {

background:transparent url(LINK DA SIDEBAR)...

Visualize , e se estiver tudo Ok, salve.
Se ficou com alguma dúvida,poste nos comentários que eu te ajudarei . Até mais.