sábado

Como colocar uma nova coluna



O Tutorial dessa vez é Como Adicionar uma Nova Coluna no Template! que foi 'pedido' pela minha querida parceira que tem um blog maravilh
oso, a Fer Chan,dona do Espaço Otaku!Yosshi vamos lá o/

Conselho: Quem estiver fazendo esse tutorial eu aconselho a não testar primeiro no seu blog e sim em outro qualquer, ou faça um próprio pra isso!Porque qualquer coisinha as vezes pode DANIFICAR o código do seu blog, então faça como eu sempre faço teste em outro blog primeiro ok?

Nesse tutorial vamos pegar como base os templates modelos do próprio blogger, e se você analisar o html(CSS) encontramos o seguinte:/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#main-wrapper {
width: 410px;
float: left;
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 */
}

#sidebar-wrapper {
width: 220px;
float: right;
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 */
}

->Sendo:Outer-Wrapper=Maior div do layout!
Main-Wrapper=Coluna do post!
Sidebar-Wrapper=Coluna do perfil!

-Para adicionar uma nova coluna oposta a sidebar, é necessário primeiro criar espaço para ela dentro de Outer-wrapper.Ou seja, aumentar ela!

Vamos para o objetivo agora que é criar uma nova coluna ou seja uma nova Sidebar-Wrapper,para isso acrescente o código abaixo logo abaixo do Sidebar-Wrapper.

#newsidebar-wrapper {
margin-left: 0px;
width: 220px;
float: left;
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 */
}

Note que sidebar-wrapper tem float:right (flutua à direita) e newsidebar-wrapper tem que ter float:left (flutuação à esquerda).
Lembre-se: a soma da largura do post mais as duas colunas laterais tem que ser menor do que o valor width de Outer-Wrapper. Não esqueça de somar bordas e o espaçamento que talvez você deseje que tenha entre as colunas.E também tente várias vezes, afinal até que consiga com que a barra não fica lá em baixo e o espaçamento e o alinhamento sejam corretos é preciso PACIÊNCIA E PERSISTÊNCIA!(experiencia própria O.O')

Agora desça a página até encontrar esta parte do código (HTML):
RETIRE OS ESPAÇOS DO CÓDIGO, FOI NECESSÁRIO COLOCAr ELES PARA NÃO ALTERAR O POST POR CAUSA DOS DIVS E MUDAR O TEMPLATE DO ANIME OISHII!
< id= "'main-wrapper'">
< id= "'sidebar-wrapper'">
< class ="'sidebar'" id= "'sidebar'" preferred="'yes'">

e cole imediatamente ANTES este:
< id= "'newsidebar-wrapper'"> < class= "'sidebar'" id= "'newsidebar'" preferred= "'yes'">< / b:section > < /div>

Alguma dúvida? Pergunte pelos comentários ^^ Ps: eu testei e deu certo \o
Arigatou : De Ferramentas Blog adaptado e incrementado por Anime Oishii.

-----

6 Comentários :3 on "Como colocar uma nova coluna"

Equipe CG on 13 de set de 2009 15:33:00 disse...

Bem vindo(a) ao CONCURSO GOODIES!!!
Esperamos que você se divirta bastante.
Aguarde as novas promos.

Natasha Belus on 13 de set de 2009 15:43:00 disse...

Oie. Vim responder seu comment no CG. Sobre o erro na hora de comentar as vezes o Haloscan fica com essas frescuras...¬¬' mas logo logo ele funciona de novo.
A minha fanfic, é mais uma Fiction, ainda mais pq tem personagens inéditos e a história... Bem, é uma mistura de um monte de coisas. De qualquer forma fico lisonjeada, e deixo sim a fic ser publicada no Anime Oishii. Quanto as imagens, as duas que vc quer... bem eu fiz a da Sayuri na floresta foi feita com a tablet, já a segunda (Carolina e Shaos) eu escaneei um desenho e fiz usando o mouse imbutido do nootebook (o demora foi uma tristeza) eu tbm deixo vc postar, só um detalhe, não esqueça de me linkar nas páginas desses conteúdos, tipo o link de text "by Natasha" ou então na página de créditos tá bom?

Sofi-Chan on 14 de set de 2009 10:58:00 disse...

Yoooo Uzumakii samaaaaa!!! o/
Não faz mal eu sei o que é arrumar blogs x.x'''
Mas eu gosto de fazer tudo antes de mostrar o lay XD
Weeeeee~~ Sobreviveu 8D Não quer um rebuçadinho (XD gozando~)
Waaaaaa X3 Obrigada pelos elogios do blog aqui no destaque!!! Seu é melhor X3 Psssstttt...Tou fazendo um blog anime MAS shhhhhh não conte a ninguém... 8D
Tanta fase o-o' mas pelos vistos corre bem ^^

Ja neeee!!! :*

Romantkun °-º' on 14 de set de 2009 12:30:00 disse...

Olá... cada vez que passo por aqui vejo q vcs estão ficando cada vez melhores parabéns...abço

FeR Chan ϟ on 15 de set de 2009 14:43:00 disse...

Ahhh!!! Eu não consegui...o que será que está dando errado?
Pensei que finalmente iria colocar uma nova coluna...Me ajuda!!!

Srta.Uzumaki ^^ on 12 de set de 2010 21:05:00 disse...

---AVISO---
ESTE TUTORIAL ESTÁ SOBRE REVISÃO!!! POIS CONTÉM ALGUNS ERROS!
____

Postar um comentário