28.3.13

Big Tutorial: Criando um Layout/Template - Parte 1

Quando estava escrevendo o post ainda era de dia rs. Agora é Boa Tarde!


Bom Dia! Antes de começar o post normalmente, essa semana descobri um plágio que fizeram do GS, foi no ano passado, mas só vim descobrir agora. Vejam o plágio: clique, Vejam o original: clique. Podemos ver claramente que é plágio pela data do post. EU postei primeiro, e ela ainda diz que ela quem fez e ainda coloca no final do post que plágio é crime. QUE IRÔNIA. Isso me deixa muito chatiada. São coisas que tive o trabalho de fazer e o ser humano plageia. Mas enfim, vou deixar isso pra lá porque não quero me estressar.
Hoje trago um big tutorial, que tem o intuito de ajudar todos que são iniciantes no HTML e que querem aprender a fazer seus próprios layouts. Esta é a primeira parte do tutorial. Ele será divido, mais ou menos, em três partes, para que não seja cansativo de ficar lendo, afinal, este tutorial é bem grande. Vamos começar? GO!



Primeiramente vá até o Desing do Modelo. Coloque no modelo Viagem e depois vá até o modelo rosa como mostra na imagem abaixo:


Agora, vá até plano de fundo e escolha o Background como mostra a imagem abaixo.
Opções extras de background: 12345 e 6.


Vá até Layout, e deixe da seguinte maneira: 


Coloque em Ajustar Largura e ajuste desta forma:


Depois clique em Aplicar modelo. Depois vá até Layout> Navbar e desative.


Agora, vamos personalizar a sidebar. Abra seu HTML e pesquise por: /* Widgets.
 Antes de feixar o " { " você irá colar o código abaixo:
background: #fff; /*---- cor do fundo da caixa ----*/
  padding-left: 20px; /*---- espaço à esquerda ----*/
  padding-bottom: 20px;  /*--- espaço de baixo ---*/
  padding-right: 20px; /*--- espaço à direita ---*/
  padding-top: 5px; /*---- espaço de cima ----*/
border-radius: 8px; /*---- bordas arredondadas, apague a linha se não quiser ----*/
box-shadow:0 0 3px #ccc, inset 0 0 20px #eee; /*--- efeito sombra embutida na caixa  ---*/
 Abaixo de  /* Widgets, você vai encontrar:
.sidebar .widget {
  border-bottom: 2px solid $(widget.border.bevel.color);
  padding-bottom: 10px;
  margin: 10px 0;

Substitua por: 
.sidebar .widget {
border-bottom: 8px solid #81648d; /*---- cor e largura da borda de baixo do gadget ----*/
border-top: 5px solid #81648d; /*---- cor e largura da borda de cima do gadget ----*/
  padding-bottom: 10px;
  margin: 30px 0; /*---- espaço ente um gadget e outro ----*/ 
O meu ficou personalizado desta maneira:


Quando você for visualizar, vai perceber que ficara aquele fundo feio por baixo da parte personalizada. Vamos aprender a tira-lo.

Vá no HTML do seu blog e se sua barra lateral for do lado esquerdo procure por:
.main-inner .fauxcolumn-left-outer .fauxcolumn-inner {

Se for do lado direito procure por:
.main-inner .fauxcolumn-right-outer .fauxcolumn-inner {

Depois de acha-lo, estará mais ou menos assim:
.main-inner .fauxcolumn-right-outer .fauxcolumn-inner {
margin-right: $(content.padding);
background:$(widget.outer.background.color) $(widget.outer.background.gradient) repeat scroll top left;}

Apague a parte destacada e visualise, se estiver tudo certo salve.
Ficará assim:

Agora vamos subir a barra lateral. 

Vá no HTML  do blog , clique em ctrl F e perquise por:
.main-inner .column-left-outer {  caso esteja do lado esquerdo
.main-inner .column-right-outer { caso esteja do lado direito


Depois de achar o código, cole abaixo:
margin-top: -150px; /*---- valor da sidebar mais pra cima ----*/ 

 Colocando faixinha do no título do gadget

pesquise por /* Mobile. Antes de body.mobile  { coloque o seguinte código: 

.sidebar .widget h2{
background: url(LINK DO SEU RIBBON) no-repeat left;
margin-top:-2px;
margin-left:-19px;
margin-bottom:0px;
padding:15px;
width:150%;
overflow:hidden;
}
 Se cortar a sua imagem aumente o valor de "padding:15px;" e vá visualizando até que fique a imagem completa.

O meu ficou assim:

Personalizando o titulo

Procure por <head> e acima cole:
<link href='http://fonts.googleapis.com/css?family=Rochester' rel='stylesheet' type='text/css'/>

 Procure por h2 {  abaixo dele estará assim:
 font: $(widget.title.font);
 color: $(widget.title.text.color);
Substitua-o por:
 text-align: center;
 font-family: Rochester;
color: #fff;
text-shadow: 1px 1px 0px #543163;
font-size: 20px;
O meu está assim:


Vejam o antes e o depois da sidebar:


Nesta primeira parte, personalizamos o BG, e a sidebar. Na parte 2, aprederemos a personalizar as postagem. Espero que tenham gostado! Beijos. 


29 comentários:

  1. Que show! Desta eu não sabia.
    swagofunicorns.blogspot.com

    ResponderExcluir
  2. que legal! eu não sabia desta.

    heart attack only

    ResponderExcluir
  3. Olá flor, adorei as suas dicas ;) Eu estou só para avisar que o seu afiliado, 'kawaii e tutoriais' mudou de nome & url, agora é: Trufa de menta (http://trufa-de-menta.blogspot.com.br/) Ficaria muito agradecida se você mudar o nome da sua elite ^^ BEIJOS =**

    ResponderExcluir
    Respostas
    1. Obrigada! Valeu por avisar, vou mudar :) Beijos

      Excluir
  4. Outro tuto desse? Amei! Esse ainda está me parecendo ser bem melhor que o outro.

    ResponderExcluir
  5. Tuto perfeito! Vou usar pra fazer o layout do meu blog >.< Beijos

    http://myeditions-world.blogspot.com.br/ ~em reforma :P

    ResponderExcluir
  6. Graças a deus, eu procuro isso da barra a meses, e achei aqui, e seus tutos são bem detalhados achei o que eu precisava pq eu não tava achando body.mobile pq eu não consigo colocar a caixa de pesquisa no novo HTML

    ResponderExcluir
  7. Top hein,rsrs estou fazendo um blog com ele bjjs!!
    http://meu-mundo-alternativo.blogspot.com.br/

    ResponderExcluir
  8. Eu não estou conseguindo fazer!Me ajude?Se possível eu passa ria a senha para você e vc fazeria pra mim?entre em contato com meu e-mail:
    mundoabrahao2105@gmail.com

    ResponderExcluir
  9. Não estou conseguindo fazer !! Help !! Não acho de jeito nenhum os códigos no HTML :/ To muito triste por isso. Manda a resposta do meu e-mail biadiasbatista@hotmail.com , gostaria que você edita-se pra mim !!

    ResponderExcluir
    Respostas
    1. Oi, nem é preciso que eu edite. Com esse novo editor do blogger, pra você achar os códigos, é preciso que clique en qualquer lugar dentro da cixinha de códigos e dar um ctrl F. Aí você pesquisa normalmente!

      Excluir
  10. Eu tentei , mais não foi , não acho NADA dos códigos :/ Faço tudo certinho , mais não acho ! Não aparece :'(

    ResponderExcluir
    Respostas
    1. Depois de colar o código tenta dar um Enter no seu teclado :)

      Excluir
  11. não consigo achar os codigos e ja tentei o que vc falou para a beatriz dias mais não vai :(

    ResponderExcluir
  12. Olá,no meu blog não tem esse código /* Widgets. nem os outro oque eu faço??

    ResponderExcluir
    Respostas
    1. Eu não sei, e, todos os blogs que testei sempre teve :(

      Excluir
  13. É só tirar o . do /* Widgets!!! Me diz como ajustar as palavras dentro da barrinha???
    anacarolinadutra10@gmail.com@gmail.com

    meumundocupcake.blogspot.com

    ResponderExcluir
    Respostas
    1. O texto da sidebar? Dá pra mudar pelo próprio modelo do blog :)

      Excluir
    2. Ah. Aceita afiliação? O blog é novo mais está se desenvolvendo aos poucos.

      http://lovelydreamsoficial.blogspot.com

      Excluir
    3. Amor, eu irei mudar de layout e daí falo com você, ok?

      Excluir