sábado

Tutorial/Fanfic e Gincana \o


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?

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 template, ela contém o resto!
Main wrapper=É a coluna do post!
Sidebar wrapper=Coluna do perfil!

Observação: Os numéros de width você pode diminuir ou aumentar até a coluna subir, pois em CADA TEMPLATE é diferente, você tem que ir TESTANDO as numerações até as 3 colunas ficarem ALINHADAS CORRETAMENTE!

Vamos acrescentar a nova coluna agora!:
Para acrescentar uma nova sidebar, copie o código abaixo e acrescente logo após os códigos para 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).
Não esqueça de somar bordas e o espaçamento que talvez você deseje que tenha entre as colunas.

Agora desça a página até encontrar esta parte do código (HTML):






e cole imediatamente ANTES este:



Importante:
Nem todo template tem a div Content-Wrapper. Se o seu template não tem, insira a nova coluna depois da div Header, assim:







id='newsidebar' preferred='yes'>










Ou ainda, após :









0 Comentários :3 on "Tutorial/Fanfic e Gincana \o"

Postar um comentário