LAYOUT DOS SONHOS AULA 01 : BACKGROUND PRESONALIZADO

30 março 2016

Background nada mais é do que o fundo de um layout. Ao meu ver, ele é uma das peças chaves na criação e afirmo que se for escolhido de forma correta, pode te acarretar muitos views, pois a primeira impressão é a que fica, e se o leitor gostar do design do seu blog, com certeza ele voltará.






Antes de começar não esqueça de baixar nosso layout base que disponibilizei no último post (Clique Aqui) pois será nele que criaremos nosso layout dos sonhos. Então vamos DELETAR o navbar. Na lateral esquerda da área administrativa do seu blog, procure por LAYOUTNAVBAR e clique em DESATIVADO. Pronto! Esse elemento chato não vai nos importunar mais.

Agora vamos ajustar a largura da nossa base. Procure por MODELOPERSONALIZARAJUSTAR LARGURAS e coloque 1080 em PARA TODO BLOG e 350 BARRA LATERAL DIREITA e Salve.

Existem alguns sites bem legais que disponibilizam gratuitamente backgrounds para uso pessoal e comercial. Abaixo vou listar os 3 sites que mais uso.

Subtlepatterns é bem fácil de manusear. Sua interface é bem limpa e te possibilita ver o background escolhido em uso, basta clicar em PREVIEW em cima da imagem.



Ava7patterns este site é apaixonante. Pra quem gosta, é um prato cheio, pois ele possui inúmeros backgrounds de cores e formas diferentes.



Pattern8 assim como os outros, também te possibilita ver o background em uso com apenas um clique, facilitando assim a escolha. Ele possui background florais, geométricos e muitas outras formas.



Já escolhemos o background, agora é hora de coloca-lo no seu devido lugar. Vamos precisar da URL do background para instalar no nosso layout, e isso é muito fácil. Publique a imagem normalmente em um blog de teste (pode ser nesse que está criado o layout), depois clique na imagem e com o botão direito clique em COPIAR O ENDEREÇO DA IMAGEM ou COPIAR A URL DA IMAGEM.

De volta a área administrativa, procure novamente por MODELOEDITAR HTML, clique dentro da caixa de códigos e aperte CTRL+F e nela digite /* Content

Feito isso, no lugar de #D8D8D8 coloque url("URL do 1º background") repeat e onde está destacado de vermelho cole a URL que acabamos de copiar, clique em VISUALIZAR MODELO se estiver tudo ok, salve!



Viu como é fácil? Caso queira deixar uma cor ao invés de um background é só trocar o código da cor desejada, navegue no site HTML COLOR CODES e escolha com cautela a cor que deseja.

Espero que tenham gostado e não se esqueça que essa é a nossa primeira aula e que está vindo muita coisa boa por ai. Comente o que achou dessa aula, e se ficou alguma dúvida não deixe de perguntar.

Decidi não mostrar o andamento do meu layout base, pois quero fazer uma surpresa na última aula.

Não esqueça de me seguir nas redes sociais: FACE | TWITTER | INSTAGRAM | GOOGLE+


Um super beijo e até a próxima 0/


2 comentários:

  1. Ola Lorena, como faço para baixar o layout base que você disponibilizou?

    ResponderExcluir
    Respostas
    1. Olá, eu deixei o link nesse post. Dê uma revisada nele!

      Bjs :*

      Excluir