Nosso layout de cada dia - pt. 01

`

Esses dias estava pensando em fazer um layout free, mas eu acho tao divertido mexer e ensinar html, então vim trazer um big master tutorial com alguns códigos, dicas, explicações que vai ajudar deixar teu blog com a sua cara. Tem que ter paciência e tomar todo o cuidado e claro seguir o passo a passo certinho pra que nada dar errado. 
Aqui vamos pegar um dos layouts disponibilizados pelo blogger e usa-lo como base, pra ficar mais fácil e simples. 
Então antes de tudo você tem que ter uma noção do que você quer pro teu layout, como cores, estilo, cabeçario... você pode se inspirar em blogs, sites que gosta ou ate no meu rsrs . Tudo idealizados, bora então começar.


Vamos 'limpar' a base deixar tudo mais simples e organizado pra fazer o restante. Vamos escolher o modelo Travel (viagem) o todo branquinho, com as bordas de papel no topo. Vá em Modelo > Personalizar > Modelos > Travel e escolhe o modelo que ta circulado de rosa. 


Agora no mesmo lugar, vai em 'Avançado' e procure por 'plano de fundo da postagem' e escolha a cor que quer no fundo da postagem, assim como na imagem abaixo, escolhi a cor branca, mas também tem  a opção transparente, vai do que você vai querer. Feito isso clique em 'aplicar' e pronto bora pro HTML, vai la em 'editar Html'. 



Agora vamos tirar as bordas de papel, que ninguém merece... Então depois de clicado em 'editar html' clica dentro do html e aperte as teclas ctrl+F vai aparecer uma caixa de pesquisa dai procure por  .content-outer .content-cap-top {  logo abaixo vai ter um código, apague  o que esta destacado de rosa, assim como na imagem abaixo, mas tome todo o cuidado com os ponto e vírgula, qualquer um q tirar pode dar erro no Html todo.



Depois disso clique em visualizar se tiver assim, clique em salvar.



 Ainda no Html vamos abrir a caixa de pesquisa, pra isso clique Ctrl+F e procure por:

              .post-body {             
           line-height: 1.4          
         position: relative;}       

depois de ter encontrado cole abaixo dele esse código:
                    .post {;               
       background: #FFFFFF;      
 margin: 20px 10px 10px; 3px;
          text-align: left;}          

Depois de colar deve ficar assim, visualize se tiver tudo certo e salve.

Agora na caixa de pesquisa (Ctrl+F) pesquise por .sidebar .widget vai aparecer duas opções é a primeira e ai vai ter um código assim:   

.sidebar .widget {
  border-bottom: 2px solid $(widget.border.bevel.color);
  padding-bottom: 10px;
  margin: 10px 0;

apague todo ele, e substitua por este: 

.sidebar .widget {
background: #fff;
margin-left: -10px;
padding: 10px;
margin: 10px 0; }

visualize, estando tudo certo salve.

Por hoje é isso, eu resolvi separar esse post em partes se nao iria ficar muito grande, e chato pra continuar, amanha tem mais  e o que acharam? tem alguma ideia? alguma duvida ou algum tutorial que quer ver aqui? deixa nos comentários.




2

2 comentários:

  1. Já adorei a primeira parte desse tutorial,!
    Continue ensinando mais (:
    Agora me tire uma dúvida, oque é sidebar?

    ResponderExcluir
  2. Espero muito pela continuação *--*

    ResponderExcluir

Image Map