Escola do Blogger - Aula #1

Hello babys! Cá estou eu com a aula! Uhuul! Bem, voês estão muito ansiosos para aprender a fazer um layout certo? Então vamos lá sem mais delongas. 

Antes de tudo, crie um blog de teste, para você não estragar o seu blog e ter que refazer tudo novamente.

1. Criando o blogger teste

Coloque um nome qualquer e o endereço de link, por enquanto deixe qualquer modelo. Agora, clique em criar um blog.

Vá em modelo e clique em personalizar

Agora, escolha o modelo Travel (Viagem), depois o branquinho que tem ali em baixo.

Vá em avançado e escolha plano de fundo da postagem, ali você escolhe alguma cor para podermos editar melhor depois.

Clique em aplicar ao blog e depois <<Voltar para o Blogger

 Agora clique em editar HTML

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 amarelo na imagem, nada mais nada menos! Atenção para os pontos e vírgulas.

Deve ficar assim:

Pronto, já está ficando mais bonito!

Agora, vamos fazer uma postagem de teste! Ative o negrito, itálico, imagem, sublinhado, blockquote e tudo o que mais for preciso!

Vamos remover aquela navbar chatinha?

Vá em layout, lá vai estar navbar. Clique em editar e depois vai aparecer uma janela, clique em desativado e depois salvar.

Agora, vamos para a parte mais enjoadinha. Vá em Modelo>Personalizar> Avançado > Plano de Fundo da Barra Lateral

Deixe transparente! Agora vamos colocar um modelo para a sidebar! Vá em Editar 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.

.sidebar .widget {
width:100% !important;
background:#fff;
margin:15px 0 !important;
border-radius:5px;
padding:10px;
box-shadow: inset 0 0 15px #eee, 0 0 3px #ccc;
overflow:hidden
}
.sidebar .widget:first-child {
  margin-top: 0;
}
.sidebar h2 {
font-family: Verdana;
font-size: 17px;
color: #fff;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGLLFbNpffeAnBIk0NE56uoFE0uyJ9QSeqgrynP-4bTv_vTcZ8Mi56_pJAT2hX70zmjjFyJgDYuFsaEqOgPZUVZHDW_oSN2e71Xa3XGkVE9sG-2lbV69P38-an8II77c_4spLWGfrI8YY/s1600/Faixinha+gadgets.png) no-repeat center;
height: 25px;
width: 300px;
text-align: center;
margin-top:-5px;
margin-left:-9px ;
margin-bottom:10px ;
text-shadow:0 1px #5C487E ;
padding:5px;
width:114%; }

Cred: Sweet Poison

   .sidebar .widget {
   -webkit-border-radius: 0px;
   -moz-border-radius: 0px;
   border-radius: 0px;
   padding-bottom: 12px;
   margin: 0px 0;
   Background: #ffffff;
   border-bottom:5px #2D3A86 solid;
    margin-top:41px;
    padding:11px;
    box-shadow: 1px 2px 3px 1px #e1dddd;
    }
   .sidebar h2 {
    text-align:center;
   color: #2C2C2C;
    background-color: #83B7FF;
    -moz-box-shadow: inset 0 0 10px #6DA8FB;
    -webkit-box-shadow: inset 0 0 10px #6DA8FB;
    box-shadow: inset 0 0 10px #8193FF;
    padding:2px;
   -webkit-border-top-left-radius: 4px;
   -webkit-border-top-right-radius: 4px;
   -moz-border-radius-topleft: 4px;
   -moz-border-radius-topright: 4px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    display:inline;
    float:right;
    margin-top:-38px;
    } 

Cred: Kawaii World

    .sidebar .widget {
    border-bottom: 5px solid #D682DE;
    border-top: 5px solid #621E85;
    padding-bottom: 20px;
    margin: 10px 0;
    background: #fff;
    padding:12px;
    box-shadow: inset 0 0 15px #eee, 0 0 3px #ccc;
    }
    .sidebar .widget h2 {
    background:#45CFAF;
    font-size:16px;
   font-family: Stoke;
    color: #fff;
    font-size: 23px;
    text-shadow:0 1px #ddd ;
    margin-top:-12px;
    margin-left:-13px;
    margin-bottom:10px ;
    padding:5px;
    width:107%;
    }

.sidebar .widget {
background: #fff;
padding: 5px;
border-bottom: 2px solid $(widget.border.bevel.color);
padding-bottom: 10px;
 margin: 10px 0; }
h2 {
display:block; background:#EAC3B8;
color:#A95A4E;
text-shadow: 1px 1px 0 #transparent; font-size:12px;
font-weight:bold; letter-spacing:1px; padding:3px 5px 3px 10px; margin:5 0 0px 0;
text-transform: normal; border-bottom: 1px dotted #000000;
}

Créditos: Bunny Crazy

Deve ficar assim dependendo de qual você escolheu:

Já fizemos bastante coisa, né? Ufa, já até cansei. A próxima aula será amanhã, porém irei postar alguns tutoriais enquanto isso para deixar seu blog lindo.

Beijos. Até logo!