Big Tutorial: Criando um Layout (Template)

Yo bunnies, hoje vou mostrar como criar seu próprio layout, template, theme como desejar chamar. É super fácil de fazer em horas você cria um modelo básico é claro se for colocar vários efeitos vai demorar mais. Tempo atrás eu fiz essa postagem comemorando os 250 seguidores,  mas o blogger mudou novamente sua forma de ser editado. E percebi que o tutorial não esta ajudando porque muitos códigos situados que se procuravam esta de outra forma. Então vim atualiza-lo e espero que continue a ajudar vocês. Da outra fez fiz o tutorial direcionando para outras postagens, mas desta vez vou fazer diferente. Farei com os códigos aqui a não ser que sejam muito extensos. Tá bom? Então vamos lá jujubas de uva.

1º Passo: A base

O primeiro passo e muito simples! Pode parecer difícil começar do zero, mas com os passos que irei ensinar vai ser moleza. Então venha comigo! Primeiro iremos escolher o modelo do template. A maioria dos blogueiros utilizam o template Travel modelo 2, que e totalmente editável. Siga na demonstração abaixo:

Clique na imagem para visualizar melhor

Se estiver assim, como na imagem a cima, já pode salvar. Agora vamos trocar o fundo do blog, eu geralmente deixo o fundo sem imagem, só na  cor cinza mesmo, depois retorno e coloco a imagem. Assim eu trabalho melhor no meu template.

Mas para você mudar o fundo vá ate a aba Plano de fundo, clique no quadradinho com a imagem atual do seu plado de fundo, vá em Upload Image, e troque por um background que esteja em seu computador, ou remova o fundo deixando apenas a cor.

 Clique na imagem para visualizar melhor

Ótimo, Agora vamos ao Editar HTML. Você vai reparar que o modelo Travel tem umas bordinhas e ondinhas, muito feias no cabeçalho e no fundo da postagem. Então iremos remove-la completamente, então vamos remover. Para isso use esse tutorial: >Remover bordas do modelo travel-

Depois de executar o tutorial ele ficara assim:

   

Clique na imagem para visualizar melhor

Sei! Sei! Esta feio  mais isso e só o inicio rsrs. Agora faça uma uma postagem de teste, dentro desta postagem coloque, blockquote, imagem, ative o negrito, itálico, sublinhado tudo mais que for necessário. Agora trabalharemos no fundo da postagem, para isso vá em:

Modelo>Personalizar> Avançado > Plano de Fundo da Postagem.

Ele estará em transparente, então selecione a cor que desejar, eu fiz preferência pelo branco e ficou assim o resultado, se seguiu direitinho o seu terá o mesmo resultado.

  Clique na imagem para visualizar melhor

2º Passo: Estética

Essa e a parte mais enjoadinha é a parte onde vamos dar vida a aparência do layout ou seja personalizar as cores, gadgets, imagens, cabeçalhos entre mais coisas. Eu só irei explicar mas vocês personalizam da forma que desejarem afinal cada um tem seu gosto correto?

A primeira coisa que costumo fazer após a base pronta é remover a navbar. Eu acho que ela tira a beleza do layout então a removo o mais rápido possível. Para remove-la ou melhora-la basta seguir os tutoriais a baixo, a três deles escolha o de sua preferência:

>Navbar em estilo hover
>Remover Navbar sem HTML
>Removendo a Navbar

Agora sem aquela nave-alien, vamos editar a sidebar que é uma das áreas mais importantes do template, mas antes de mexer você tem que já ter uma ideia de que cores você deseja usar. Nada de usar cores berrantes e cegamente que deixe as pessoas com os olhos doendo ou que não tenha nem uma combinação! Tem muitos sites e blog que tem tabela de cores ou ache uma imagem com cores legais e trabalhe nelas é assim que faço. Para personalizarmos a sidebar, vá em:

Modelo>Personalizar> Avançado > Plano de Fundo da Barra Lateral

Agora basta coloca-la em transparente, como mostro na imagem abaixo. Você vai notar que o fundo irá desaparecer, salve e volte até Editar HTML.

  Clique na imagem para visualizar melhor

Agora vamos arrumar esta sidebar, adicionando um fundo personalizado e título bonitinho. Vocês podem arrumar da forma que desejarem, muitos blogs já tem modelos de sidebar prontas para adicionar. Tem algumas antigas aqui no blog porém se procurar vai achar muitas lindas por ai: >Modelos de Sidebar

Lá já mostra como adicionar mas irei repetir aqui, para trocar a sidebar vá ate seu HTML e procure por
 /* Widgets apague de .sidebar .widget { ate a ultima chave de .sidebar .widget:first-child  e cole o novo código no lugar, então salve.

 Clique na imagem para visualizar melhor

A próxima coisa que temos que fazer e personalizar a área das postagens, é algo muito simples mesmo. Vamos adicionar uma fonte diferente no título da postagem, então use esse: >Colocar fonte diferente no blog
Se quiser centralizar ou mudar a posição do titulo ele use esse tutorial: >Mudar a posição dos títulos
Se desejar colocar uma linha abaixo das postagem utilize essa postagem: > Bordas abaixo do título
Ou utilize modelos prontos: > Modelos de títulos

A área das postagens é muito importante ficar bonitinha então vamos adicionar umas bordas para chamar atenção né? Eu acho que fica legal sólida, mas aconselho fazer da mesma forma do gadgets, para não ficar cada canto de uma maneira, claro que isso varia do modelo que vai criar: >Adicionar bordas no blog

  Clique na imagem para visualizar melhor

Título e área Ok! Agora vamos mexer na data! Você pode só remove-la ou personaliza-la. Para remove lá vá ate lá remova a cor e o tamanho da fonte deixando em 0px:

 Modelo>Personalizar> Avançado > Cabeçalho de data

Se quer personaliza-la utilize um dos tutoriais abaixo ou pesquise no blog por novos modelos:

>Modelos de data
> Estilos para data de blog
> Personalizar data do blog
> Data com efeito hover
> Data com faixinha

3º Passo:Personalização

Estamos quase no final, porem esta aparte mais extensa pois se trata dos detalhes.O cabeçalho ficara por conta vocês, afinal cada um tem seu estilo e gosto. Eu por exemplo gosto dos mais simples possível, mas nem todos gostam de simples.

Vamos agora editar as funções o negrito, itálico e sublinhado do blog. Pode parecer coisa pequena mais faz muita diferença para isso use um dos tutus abaixo:

> Negrito, Itálico, e Sublinhado com efeito Hover
> Itálico, Negrito, Sublinhado automaticamente colorido

 Clique na imagem para visualizar melhor

Bem melhor não é? Agora iremos mexe nos links, se quer deixa-los em efeito fade use esse: >Links em fade
Caso não queira vá em o local situado e arrume as cores como desejar:

 Modelo>Personalizar> Avançado > Cor de links

Agora vamos remover uma coisinha que praticamente não usamos e atrapalha bastante: Os botões de compartilhamento. Para fazer isso vá ate o seu Layout e em "Postagens do Blog" clique em editar. Abrira uma nova janela e então é só desmarcar a caixinha de "Mostrar botões de compartilhamento".

Agora vamos adicionar bordas no  footer é igual o que fica no titulo das postagens ele serve para separar os marcadores, número de comentários, nome do autor e etc... aqui esta o tutorial: Personalizando os Footer

A próxima etapa e cuidar do "Leia Mais", "Mais informações>>" ou "Read More" a varias formas de você personalizar, mas mostrarei duas:

>>Personalizando o Leia Mais
>> Colocando "Leia Mais" com imagem

 Para mudar o texto do balão vá em Layout >> "Postagens do Blog" clique em editar. Abrira uma nova janela e então lá estará escrito uma das frases acima apague e coloque o que desejar.

  Clique na imagem para visualizar melhor

 Uffa, estamos quase lá. Agora iremos remover duas coisinhas que fará muita diferença:

>Remover "Assinar: Postagens (Atom)"
>Removendo o "Attribution, Tecnologia do Blogger"

Agora são pequenos detalhes como, menu, blockquote, cursor, favicon, opacar imagens, efeito de bordas, efeito em afiliados e etc... ai já ficaria gigantesca a post se eu colocar tudo não é? rsrs
Porem aqui no blog, tem vários tutorias, estilos de blockquote, menus e todos que listei a cima. Bom vou terminando a post por aqui espero que ajude vocês e que tenham gostado. Ate a próxima postagem pessoal e não esqueçam de comentar. Bye bunnies.

Atualizada em: 09|08|2013