Vamos ver o tutorial ?
Leia mais!
Então hoje eu vou mostrar as principais modificações que devem ser feitas no modelo blogger. Vou logo avisando que é só o básico, apenas para deixar a aparência dele mais limpa e profissional. O resto como modificar as cores, criar as imagens. Esse tutorial é só sobre como fazer a base.
Preste bastante atenção em todos os passos para não errar! Ah, desculpem pela tag nas imagens, mas não posso dar mole para os plagiadores. Se não der pra ver alguma coisa por causa da tag, me avisem. Para ampliar as imagens é só clicar em cima.
Primeiro vamos escolher o modelo básico. Vamos usar o Travel (Viagem) na versão que tem umas "bordinhas" de papel no cabeçalho. Ele pode parecer bem feinho a primeira vista, mas depois vamos deixá-lo super lindo.
Para isso vá em modelo > Personalizar e escolha o modelo circulado de vermelho.
Depois clique em "Avançado"ali no lado, procure "Plano de fundo da
postagem" e escolha uma cor qualquer só para destacar enquanto
estivermos fazendo as modificações no HTML.
Clique em aplicar ao blog e depois em voltar para o blogger. Agora vamos mexer no HTML do blog para deixá-lo bonitinho.
Clique em editar HTML e depois em "prosseguir" na mensagem que aparecer.
Vamos começar as modificações. Primeiro vamos tirar aquelas bordinhas de papel horrorosas. Aperte Ctrl+F e procure por .content-outer .content-cap-top {
Logo abaixo disso, você irá apagar apenas o que está destacado em verde
na imagem, nada mais nada menos! Atenção para os ponto e vírgula.
Seu layout deve ficar assim:
Agora vamos tirar o espaço entre a área das postagens e a barra lateral.
Aperte Ctrl+F novamente e procure por: .main-inner .column-right-inner {
Apague somente o que estiver em destaque novamente. Dessa vez você pode apagar os ponto e vírgula.
Visualize como ficou e veja que agora a sidebar está coladinha nos posts. Salve as alterações e vá para o layout do seu blog.
Para o próximo passo, precisamos colocar uma imagem de cabeçalho no
blog. Eu fiz uma só para dar o exemplo, mas você já pode usar a sua
imagem definitiva. Lembre-se sempre de fazer uma imagem da largura do
seu blog (Veja qual é a largura no designer de modelo).
Lá em layout clique em "Editar" no gadget do cabeçalho:
Vai abri uma janela, lá você clica em "Fazer upload da imagem" e escolhe
sua imagem de topo. Em posicionamento, marque a opção "Em vez de título
e descrição". Quando a imagem for totalmente carregada, é só salvar.
Agora vamos voltar para o Modelo HTML do blog. (Modelo > Editar HTML > Prosseguir)
Iremos retirar aquele espaço chato que fica entre a imagem do cabeçalho e
o resto do blog. A maioria dos layouts fica melhor sem aquele espaço,
mas se você achar que não precisa tirar, pule essa etapa.
Aperte Ctrl+F e procure por: /* Tabs
Logo abaixo você verá esse código:
.tabs-inner {
margin: 1em 0 0;
padding: 0;
}
Apague o que está destacado.
Aperte Ctrl+F de novo e procure por .main-inner {
Logo abaixo desse código, você vai acrescentar essa linha: margin-top: -20px;
Agora é só modificar o número (20) até ficar do jeito que você quer. Altere o número e vá visualizando até não sobrar nenhum espaço.
Se você quiser aumentar esse espaço, é só tirar o sinal de menos (-).
Já fizemos as principais modificações no nosso layout. Depois de salvar o HTML você pode ir para o designer do modelo e colocar uma imagem de fundo para deixar o blog mais bonitinho. Para isso clique em Modelo > Personalizar > Plano de fundo. Clique no quadrado que tem a miniatura do plano de fundo atual, depois clique em "Fazer upload da imagem" e escolha a imagem que quiser. O meu ficou assim:
A nova interface do blogger está dando problemas na hora de enviar uma imagem de fundo, então se você não conseguir, volte para a interface antiga do blogger clicando em voltar, no topo do painel do blogger.A base já está feita, agora é só você mudar as cores no designer do modelo e aplicar outros tutoriais para deixar o blog mais elaborado.
Beijos carinhosos ^^
Créditos:(www)
Nenhum comentário:
Postar um comentário