O Tutorial dessa vez é Como Adicionar uma Nova Coluna no Template! que foi 'pedido' pela minha querida parceira que tem um blog maravilhoso, 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?
----------------------------------------------- */
#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"
Bem vindo(a) ao CONCURSO GOODIES!!!
Esperamos que você se divirta bastante.
Aguarde as novas promos.
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?
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!!! :*
Olá... cada vez que passo por aqui vejo q vcs estão ficando cada vez melhores parabéns...abço
Ahhh!!! Eu não consegui...o que será que está dando errado?
Pensei que finalmente iria colocar uma nova coluna...Me ajuda!!!
---AVISO---
ESTE TUTORIAL ESTÁ SOBRE REVISÃO!!! POIS CONTÉM ALGUNS ERROS!
____
Postar um comentário