24 de dez de 2011

Sidebar e Cabeçalho

Pessoal esse post tem os créditos de um blog suuuper bacana o Trechy Teen (www). Vou ensinar a colocar um fundo colorido na sidebar (aprendi isso no Menina Nerd -www) e vou ensinar também a juntar a sidebar ao espaço dos posts, além de também ensinar a colocar o cabeçalho juntinho do espaço de posts e da sidebar, veja o exemplo do blog Perfeitinha (obs.:neste template a barra é dupla, ensinarei a coloca-la também) :

clique para melhor visualização


Ok vamos la? Antes devo dizer que os cabeçalhos que disponibilizarei aqui foram feitos pelo Trechy Teen.
Primeiro mude a cor da sua sidebar.
1. Vá em "Design", depois em "Editar HTML" e procure por:

Se você escolheu as colunas do lado direito, procure por:

.main-inner .fauxcolumn-right-outer .fauxcolumn-inner {

Se você escolheu as colunas do lado esquerdo, procure por:

.main-inner .fauxcolumn-left-outer .fauxcolumn-inner {

Vai aparecer assim:

.main-inner .fauxcolumn-right-outer .fauxcolumn-inner {
margin-right: $(content.padding);
background:$(widget.outer.background.color) $(widget.outer.background.gradient) repeat scroll top left;
}

Substitua a parte destacada em vermelho por:

background: url("URL DA IMAGEM") repeat;

obs.: Se você quer uma barra dupla faça o mesmo procedimento porém use somo modelo as seguintes imagens retiradas do Menina Nerd-lembrando que sua sidebar não poderá passar de 400, pois se não a imagem nao se ajustará direito ok?










Agora vamos juntar a barra lateral ao espaço de posts


Primeiro vamos tirar os espaços do layout, ou seja , juntar a barra lateral nas postagem e se no caso você deixou a barra de páginas , fazer o mesmo com ela.Para juntar a barra lateral com a das postagens basta você ir em design > editar html pressione as teclas Ctrl + F e procure por :

.main-inner .fauxcolumn-right-outer .fauxcolumn-inner {


.main-inner .fauxcolumn-left-outer .fauxcolumn-inner {

Quando ela encontrar , apague as partes indicadas em vermelho na imagem abaixo (a imagem foi retirada do blog Trechy Teen) :





Agora vamos colocar o cabeçalho juntinho

Primeiro vá em design depois editar html , e na página do html , pressione: Ctrl+F  e procure por :

/* Tabs
clique para melhor visualização

Agora pressione novamente Ctrl+F e procure por:
/* Main
-E no primeiro trecho abaixo de padding: $(content.padding) 0; 
adicione o seguinte código , e para juntar a barra com as postagens , vá aumentando o número e visualizando até que fique da maneira esperada:

margin-top: -10px;



(clique e o resto vc já sabe rsrs)


Aqui estão cabeçalhos, brushes e dois links utilississimos para seu cabeçalho. Para baixar fontes-Dafont
Para baixar Styles para Photoshop-Deviantart












Pessoal em posts anteriores eu mostrei um link que ensinava a deixar o fundo de imagens transparentes, quem não se lembra (é esse aqui). Vou ficando por aqui e deixando os brushes.Ah e depois de pronto coloque o cabeçalho normalmente. Beijos...

































6 comentários:

CARLA WOLF disse...

Adorei as dicas!
Feliz Natal
wolftheideia.blogspot.com/

Minduim disse...

Passei aqui para te desejar um Feliz Natal!

http://nacozinhadominduim.blogspot.com/

Carol disse...

Passei para desejar um feliz natal!
Bjos
http://fashion-girl3.blogspot.com/ :c

Thais Rodrigues disse...

Own que fofo meu blog como exemplo e amiga o tutorial ficou show e muito bem explicado .

um aviso rapido e que as votações começaram e pode votar já no seu blog preferido .
http://perfeitinha-blog.blogspot.com/

Newsdayoff disse...

Muito bom esse tutorial :a, me ajudou muito muito mesmo :d

http://newsdayoff.tk/

tifhany disse...

eu amo essas bonequinhas e queria alguem que fizesse um cabeçalho pra mim com essas bonequinhas lindaas