Big Tutorial: Editar e Aplicar Tema PSD - Parte 2

Hey visitantes *-*, aqui estou eu novamente com a segunda parte do Big Tutorial sobre editar e aplicar no blog um Tema PSD. Nesta parte, vou explicar toda a Codificação do Tema HTML, que eu disponibilizei na primeira parte.

Para isso, precisas de estar muito atento, para não apagares nenhum código que seja necessário ao teu tema. Para ficar tudo explicadinho, eu nesta parte (a parte da codificação e alteração dos códigos do tema), resolvi tirar prints a todo o HTML da personalização do blog e explicar os vários códigos. Claro que me deu trabalho, mas sem dúvida, vocês merecem.

Neste momento, o aspeto do teu blog ainda é este (print). Aquela parte, da descrição do blog, vou ensinar mais para a frente.

Agora de acordo com os prints que eu vou disponibilizar e com as explicações, vais começar a alterar a personalização do teu blog.

Todos os prints, que eu vou disponibilizar, têm várias explicações, peço-te que as leias. Mesmo assim, vou explicar o que acho mais importante também aqui no post.

Então vá, vamos lá começar com a Personalização e Codificação do Tema. Vai a Modelo → Editar HTML.

Quando abrires o editor do teu blog, já com o Tema HTML (que eu disponibilizei na primeira parte) carregado, vai-te aparecer estes códigos (print). Para esta parte inicial, não são precisas grandes explicações, por isso altera a personalização de acordo com as legendas à frente de cada linha de código, no print que eu disponibilizei.

O próximo conjunto de códigos, é referente à descrição do blog (print). Para adicionarem a descrição no cabeçalho do blog, como neste exemplo (print), basta ires ao esquema do teu blog, e na miniaplicação que já está lá (print) colar o código abaixo.

<div class="descricaoblog">
Escreve aqui a descrição do teu blog.
</div>

Agora vamos passar para a parte dos códigos da codificação do Tema PSD, em si. Para isso, vê os dois prints abaixo, segue as explicações deles e segue também as explicações abaixo.

Codificação: Parte 1 - Parte 2

As três principais partes do tema, que tens de alterar são:

• #header-wrapper (cabeçalho);
• #content-wrapper (área dos posts + barra lateral);
• #footer (rodapé).

Ora bem, basta seguires as explicações, à frente de cada linha de código. É só substituíres o link do header-wrapper, pelo teu cabeçalho — não te esqueças de colocar na altura (height), a altura que apontas-te quando estavas a recortar o cabeçalho —, substituíres o link do content-wrapper, e finalmente substituíres o link do footer (e mais uma vez, não te esqueças de substituíres a altura, pela altura do teu rodapé).

Pronto, a parte principal, da Codificação do Tema PSD, está feita. Vamos, agora continuar com a personalização do mesmo.

Em relação ao próximo print, eu não vou explicar grande coisa, porque tudo o que precisas de saber está escrito à frente de cada linda de código (print); só vou explicar a parte das faixinhas.

Neste tema, eu decidi colocar as faixinhas na barra lateral por divs.

No HTML que eu disponibilizei, eu só coloquei código para a Faixa de Welcome. Portanto, se quiseres colocar mais faixas, tens de acrescentar por baixo do fecho da faixa welcome (print).

.colocar aqui o nome da faixa {
background:url(colocar aqui o link da faixa);
height:64px;
width:290px;
margin-left:-16px;
color:transparent;
margin-top:0px;
margin-bottom:-3px;
text-shadow:none;
}

Atenção: O código acima, só se aplica às faixinhas que eu disponibilizo no Tema PSD. Como para algumas pessoas, é difícil recortar a faixa do Tema PSD, eu decidi disponibilizar só a faixa em PSD, para vocês a poderem editar à vontade.

•• Faixa PSD

Para editares a faixa, basta selecionares a ferramenta texto, carregares em cima de "Welcome", escreveres o texto que pretendes na faixa e guardar com o formato .psd ; finalmente, hospeda e aplica o link da faixinha, no código que eu disponibilizo lá em cima.

Para colocares a faixa na miniaplicação que pretendes, basta colares no início da miniaplicação, o código abaixo, de acordo com as indicações do código lá de cima (print).

<div class='colocar aqui o nome da faixa'></div>

Neste momento, o aspeto do teu blog é este (print).

Nos próximos dois conjuntos de códigos (print), não tens de fazer grandes alterações. No primeiro, não precisas de alterar rigorosamente nada; no segundo, altera apenas (se quiseres), o valor das bordas das imagens. Se quiseres alterar o valor das bordas, altera nas três linhas de código.

Os próximos conjuntos de códigos, são relativos aos comentários, eu não vou ensinar a personalizá-los, portanto, peço-te que só o faças, se realmente perceberes de personalização. Os mesmos, foram personalizados pela Camila Santos.

Nos três conjuntos de códigos a seguir (print), apenas tens de alterar o conjunto de códigos referente à personalização das setinhas (mensagens anteriores; próximas mensagens). Para as personalizares, guia-te pelas legendas, à frente de cada linha de código.
Depois de personalizares as setinhas, guarda o modelo; e para elas aparecerem no blog, segue o pequeno tutorial abaixo.

Design → Editar HTML → Procura pelas seguintes tags:

<data:newerPageTitle/>

• E substitui esse código, por "«".

<data:homeMsg/>

• E apaga-o.

<data:olderPageTitle/>

• E substitui esse código, por "»".

Finalmente, nos dois últimos conjuntos de códigos (print), lê as explicações do print, e altera apenas o que eu te digo nas indicações para alterares.

Pronto, a segunda parte do Big Tutorial chegou ao fim; espero que tenhas conseguido fazer tudo, mas se não conseguis-te, não hesites em perguntar, na aba "Pergunta". Na próxima (e última) parte, ensinarei pouca coisa, vou só ensinar a mapear um novo menu, e a posicioná-lo no tema com css.