Pular para o conteúdo principal

Tutorial - Como fazer um layout básico


      Olá, meu povo. Tudo bem? Comigo está tudo ótimo, pois estou de bom humor. Meu bom humor hoje é tanto, que vim até aqui para ensinar-los à fazer um layout básico. Mas com básico, quero dizer BEM BÁSICO MESMO, pra quem quer começar do zero. Mas calma minha gente, porque eu vou postar ainda vários outros tutoriais para que vocês continuem dando uma carinha mais autêntica para ao blog de vocês.

      A primeira coisa que vamos fazer é escolher o modelo para começar o nosso layout, clicando em "Modelo" e em seguida em "Personalizar".
      Depois, escolheremos o modelo Travel(viagem). E usaremos o 2º da esquerda para a direita.


   
      Clique em "Avançado" e procure "Plano de fundo da postagem" e escolha qualquer cor, apenas para ajudar a visualizar melhor o que estamos fazendo.


      Agora é só clicar em "Aplicar".
      Clique agora em "Editar HTML" (Fica ao lado de "Personalizar"). Para tirar as bordinhas de papel do template utilize "Ctrl + F", na barrinha que aparecer cole isso: .content-outer .content-cap-top { e depois aperte enter.
      Achou o código? Ótimo! Agora apague apenas o que está destacado em rosa na imagem à seguir. Prestem atenção aos "ponto e vírgula" para não apagar nada que não deva ser apagado.



      
      Visualize, seu blog estará mais ou menos assim:


      A próxima parte é opcional. Para tirar o espaço entre a área da postagem e a barra lateral. Utilizando novamente o comando "Ctrl + F" e cole isso: .main-inner .column-right-inner {
      Apagaremos novamente APENAS o que está destacado em rosa.



      Visualize. Se estiver tudo O.K salve as alterações.

      Agora vamos até "Layout" e clique em "Editar" no cabeçalho.


      Faça o upload de uma imagem para ficar no topo do seu blog. Marque a opção "Em vez de título e descrição". Depois que a imagem carregar é só salvar.

      Agora vamos à outra parte que é opcional. Nós vamos diminuir/tirar o espaço entre a imagem do topo e a área da postagem.
      Volte para "Modelo", "Editar HTML", "Crtl + F" e cole isso: /* Tabs
      Embaixo veremos isso:

.tabs-inner {
  margin: 1em 0 0;
  padding: 0;
}

      Apague a linha destacada em rosa. "Crtl + F" e cole: .main-inner {
      Achou? Ótimo! Agora cole embaixo dele este código: margin-top: -20px;
      Agora, tudo o que você precisa fazer é alterar o número "20" por um número menor, é ir diminuindo e visualizando até ficar do seu gosto(ou até chegar à 0 rsrsrs). Caso você queira aumentar o espaço é só retirar o sinal negativo que antecede o número 20.

      Agora, salve e pronto. Mude para o fundo que quiser, as cores, as letras e tudo mais. Esse foi o layout BÁSICO. O meu ficou assim:



      Espero que tenham gostado, logo logo vou postar vários outros 'tutus' para vocês. Como por slide, paginação numerada e etc. Deixem seus comentários e dúvidas, e os tutoriais que gostariam de ver.

Beijinhos ;*

Comentários

  1. Caramba, amei esse tutorial, vou tentar usá-lo o/. Beijos, seguindo aqui.

    http://utopianongrata.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Obrigada, Thamyris. Que bom que esse tutorial será útil pra você! :D

      Excluir
  2. Amei o tuto, e já estou usando no meu blog. Mt obrigada *-*

    www.amoraoprimeirorimel.com

    ResponderExcluir
    Respostas
    1. Obg, Flávia. Que bom que você gostou. Confira os outros tutoriais... ;)

      Excluir

Postar um comentário

Postagens mais visitadas deste blog

Blythe Dolls

A Blythe Doll, é uma boneca que surgiu nos anos 70, porém, assustava um pouco as crianças. Por esse motivo, saiu de linha um ano após o lançamento. Em 1997, a jornalista Gina Garan ganhou uma boneca Blythe de presente e passou a fotografá-la em todos os lugares, dando assim inspiração ao seu livro "This is Blythe" (Esta é a Blythe). Em 1999, ela foi introduzida à Junko CWC Wong pelo artista e ilustrador, Jeffrey Fulvimari. Ainda naquele ano, a Hasbro deu à Takara, empresa japonesa, uma licença para produzir uma nova edição da boneca Blythe, a NEO (nova) Blythe. A Blythe foi usada em uma campanha publicitária de televisão por Parco, o ramo de moda da Seibu Department Stores no Japão e foi um sucesso instantâneo. O sucesso no Japão levou a Hasbro a dar uma licença à Ashton Drake Galleries (ADG) em 2004, para produzir Blythes nos Estados Unidos por um preço mais "em conta".
Há dois tamanhos de bonecas Blythe: a 28 cm (escala 1/6th) de tamanho natural, e as de 11,2 cen…

Dica de Blogueira #7 - Parcerias

Quem acompanha grandes blogs já percebeu que todos eles tem parcerias com outros blogs, lojas, empresas, marcas e etc. E pequenos blogs que acabaram de começar, que ainda nem tem leitores de verdade, que realmente acompanham seu "trabalho" já querem conseguir parcerias só para ganhar coisas. Não é bem assim que funciona. Saibam que PARCERIA é uma troca, você deve ter algo para oferecer em troca dos "presentes".

          Para conseguir a parceria você deve ter algo que faça com que determinada loja/marca queira você como um parceiro.
Mas o que eu devo ter afinal? Primeiramente, um bom número de leitores/fãs que te acompanhem diariamente. As empresas estão de olho nessas pessoas que te acompanham, que gostam de você e do que você faz. Você deve de algum modo "levar" estar pessoas até seus parceiros, e seus parceiros em troca, podem levar até você novos leitores, os brindes/produtos/presentes que irão te ajudar no seu trabalho com o blog, gerando …

Reconstrução capilar com queratina líquida - Keramax

Neste post, trago para vocês uma resenha, da queratina líquida da Keramax. É uma carga máxima de queratina para cabelos fragilizados, com geleia real, queratina e creatina. Hidratação, maciez e brilho intenso.
      Custa por volta de R$15,00. Não tenho muita certeza mas acho que na minha eu paguei uns 16 ou 18(eu tive a infeliz ideia de tirar o preço).
      É uma carga máxima de queratina para cabelos fragilizados, com geleia real, queratina e creatina. Hidratação, maciez e brilho intenso.
      A carga máxima de queratina recupera cabelos danificados por químicas, como tinturas e alisamentos, e processos naturais, como exposição ao sol, chuva e vento. Meu cabelo está ainda bastante destruído, já que eu faço tudo em casa(descoloração, coloração, corte...). Então no mês passado(ou retrasado, já nem me lembro mais) eu comprei este produto e já utilizei cerca de 3 vezes, além de colocar um pouco no shampoo e cremes para pentear.
      Já melhorou meu cabelo, infelizmente não dá …