Este tutorial foi feito com o theme base disponibilizado por Fran Keynes no Ilovehtml.

Para quem não entendeu eu estou ensinando a fazer isso aqui:

É bem simples.  Primeiro você vai procurar no seu css a div que comanda a sidebar e os posts.  Nesse caso aí em cima, a sidebar é #sidebar e os posts é #conteudo

Mude os seguintes códigos e deixe eles assim:

1- Em #sidebar:

left: 10px;

2- Em #conteudo

margin-left: 500px;

Agora vamos inserir no css a div que comandará a personalização da barra:

/*** barra by making-themes ***/

#barra {position: fixed; width: 180px; left: 320px; margin-top: -10px; margin-bottom: -20px; background: #ddd; border-left: 3px solid #bdbdbd; border-right: 3px solid #bdbdbd; height: 100%; padding: 2px;}

Personalize à vontade as cores e o background.

Agora insira isso depois do código da sidebar, substitua as aspas.(depois da última </div>)

<div id=”barra”>Conteúdo aqui</div>

E pronto, está feito.  Se quiser inserir uma imagem, ou um gif, insira esse código:

<img src=”urldaimagem” width=”100%”>

Obs.: Em algumas telas de computador, pode ser que os posts apareçam cortados.  Você pode mudar a width na div dos posts para resolver o problema, ou simplesmente dar Ctrl -.

Se te ajudou, credite.

{Carol}