Digitalizando a Felicidade

Criei um template bem básico, com cores sólidas e fáceis de trocar.

Ele é simples e elegante, usando a maioria dos recursos da plataforma.

Só o menu de rolar a página e o da barra de rolagem que são scripts externos.

No arquivo zipado coloquei o template pronto e no post vou mostrando onde quem quiser poderá fazer as modificações.

Crie seu blog como descrito na postagem Criando um blog ou abra a área administrativa do seu blog atual.

Clique em Tema e a seguir na setinha ao lado de Personalizar e em seguida em Restaurar.

Clique em Fazer upload, procure a pasta onde está o arquivo XML e dê 2 cliques nele

Espere a mensagem de Tema restaurado aparecer no canto inferior esquerdo.

Clicando em Ver blog, também no canto inferior esquerdo, você verá que ele está assim:

A área da postagem propriamente dita está um retângulo translúcido porque não há nenhuma postagem.

O blog tem apenas a coluna dos posts e no rodapé 2 colunas de gadgets.

O tamanho total é de 1250px de largura.

Coloquei um modelo de comentário personalizado simples, barra de rolagem colorida, personalizei o blockquote, removi os links postagens antigas e postagens recentes, deixando apenas o link para a página inicial do blog e coloquei uma imagem na função Leia mais.

Todas as cores podem ser facilmente trocadas.

Começando pela testeira.

A testeira é essa imagem que contém o título do blog.

Preparei uma imagem simples usando máscara e a fonte FoglihtenNº07.

Quem quiser usar esse template deve preparar sua imagem com até 1250 x 450 px.

E para trocá-la basta ir em Layout, clicar em Editar, no gagdet Cabeçalho da página.

Role a barra de rolagem até aparecerem os campos Selecionar imagem e Posicionamento da imagem.

Clique primeiro em Fazer upload de imagem do computador.

Clique em escolher arquivo e espere a imagem ser carregada. Marque a opção Imagem sem título e sem descrição e Salve.

Visualize su blog.

Se quiser diminuir essa altura da testeira, que criei para um espaço com 450 px vá em Tema > Personalizar > Editar HTML.

Clique dentro do código, clique em ctrl F, digite /* Header na caixinha de pesquisa e dê Enter.

Nos dois primeiros grupos de códigos podemos ajustar a posição da imagem e a altura e largura também.

Vá testando os valores até ficar a seu gosto. Sempre que mudar um valor, clique no disquete abaixo do teu avatar e espere a mensagem de atualização feita no canto inferior esquerdo e visualize teu blog.

Se não ficou bom altere os valores novamente.

Para trocar a cor do plano de fundo, aquele cinza mais escuro ainda no Editar HTML digite /* Content.

O código vai estar assim:

Apague apenas $(body.background) e coloque no lugar o código da cor que você quer.

Clique no disquete, espere a mensagem de atualização feita e visualize o blog.

Para trocar as cores do menu de páginas digite /* Tabs na caixinha (ou role a página) e dentro do código troque as cores.

Troque as cores, se desejar e depois vá em Layout > Gadgets Páginas > Editar.

Note que o link da página é o do blog de demonstração. Para trocar basta clicar no lápis, apagar o link que está lá e colar o link da página inicial de teu blog, clicando em salvar em seguida.

Se já tiver criado outras páginas, clique em Adicionar um novo item e depois em Salvar.

Os novos itens aparecerão no menu de páginas.

Para saber mais sobre esse menu Páginas leia o post Personalizando menu páginas.

Para trocar as cores da área de postagem procure o código entre /* Posts e /* Comments.

Todo esse código modifica a área principal de postagem, incluindo o blockquote e o pager, que é onde fica(m) o(s) link(s) de navegação.

Simplificando:

- onde você encontrar o código #800000

troque pela cor das bordas de teu blog, se não quiser borda coloque a mesma cor que vai colocar no fundo da postagem;

- onde você encontrar o código #bbb7b7

troque pela cor do fundo da postagem, troque em todas as vezes que esse código aparecer porque são diversas seções que aparecem como uma só;

- em .post blockquote, ainda nessa seção, troque #aba7a7

pela cor do fundo dos destaques de texto e troque #800000 pela cor da borda do teu blog.

Na seção /* Comments faça a mesma coisa, apenas troque as cores que são:

#800000

,#aba7a7

e #DED8D8

Digite #Followers1 e faça a mesma troca de cores.

Digite /* Barra de Rolagem */ e faça a mesma troca de cores, usando as cores escolhidas para teu blog.

Para mudar as quinas de todos os elementos procure pelos códigos:

-moz-border-radius: 20px;

-webkit-border-radius: 20px;

-goog-ms-border-radius: 0;

border-radius: 20px;

O número 20 dá a curvatura que está no template. Aumentando o valor, aumentamos a curva e se deixarmos 0 fica uma quina reta.

Mas é preciso trocar os valores em todas as vezes que esse conjunto de códigos aparecer dentro de cada seção.

Para saber como trocar a imagem do Leia mais

leia a postagem Leia mais.

Para saber como trocar a imagem do link Página inicial

leia a postagem Links de navegação.

Para saber como personalizar cores, tipo de fonte e outros detalhes pela aba Designer de tema leia a postagem Template Rio Sereno.

Mas atenção: apesar de ser simples nem sempre, mesmo recebendo a mensagem de atualizações feitas, a atualização é feita na hora. Depende da velocidade da internet e do próprio Blogspot.

Nos fins de semana é um pouco mais instável. Mas funciona, se tivermos paciência.

De qualquer forma alterando no código fonte (Tema > Personalizar > Editar HTML) sempre funciona.

Menu para rolar a págnina

Anexei ao material uma pequena seleção alfa para quem quiser personalizar o menu para rolar a página.

Menu navegação seleção alfa:

selection #1 seta para cima

selection #2 círculo para página inicial (pode trocar por uma imagem de casinha)

selection #3 seta para baixo

selection #4 botão para o topo

selection #5 moldura para botão topo

selection #6 texto topt

selection #7 botão para base

selection #8 moldura para botão base

selection #9 texto para base

O código é esse:

function cima() {

window.scrollBy(0,20);

scrolldelay = setTimeout('cima()',100);

}

function stopScroll() {

clearTimeout(scrolldelay);

}

function baixo() {

window.scrollBy(0,-20);

scrolldelay = setTimeout('baixo()',100);

}

</script>

Prepare as imagens e salve-as separadamente em png porque cada uma será vinculada à uma função específica.

Salve-as em uma página estática ou em um site que lhe forneça uma url.

Coloque as urls das imagens nos lugares indicados.

O valor em vermelho - 100 - corresponde à velocidade em que a página rola. Quanto maior, mais lento.

Nas linhas mais abaixo os valores em bottom determinam a distância da base do blog para cada item, consequentemente a distância entre os itens também.

O valore right determina a distância dos elementos da borda esquerda do blog.

Altere os valores, se necessário, salvando e verificando o resultado no blog a cada mudança.

Além dessas mudanças você só terá que adicionar o link da página inicial de teu blog no lugar indicado.

E ele está em um gadget HTML/JavaScript:

Para adaptá-lo ao seu template siga as instruções acima e adicione o novo código no mesmo gadget, substituindo o anterior.

Por aqui encerro as explicações.

Nos demais tutoriais dessa série vocês encontrarão o básico para blogar.

Dúvidas, clique na plaquinha e me escreva:

Nenhum comentário:

Postar um comentário

Para se inscrever nas listas clique nos títulos de cada grupo na página inicial. Comece com as aulas de PSP, depois continue com o PSP + AS, e se quiser siga com o Xara e a Formatação para criar belos e-mails.
Deixe aqui suas opiniões e seja sempre bem-vindo(a).