Equipe

20 dezembro 2012

Criando um layout



Oi galera, hoje o tutorial é muito grande. Mas eu estou fazendo ele á pedido de uma amiga do twitter. Enfim, se você já sabe fazer um layout só ignore esse post. Sem delongas clique em Let's Go para por a mão na massa. Lembrando, que esse tutorial é bem básico, porém fofo.

-> Vá no blogger, selecione o blog que você deseja fazer o layout e clique em modelo.


-> Selecione a opção personalizar!


-> Selecione o modelo Travel com cores azuis como mostra o print abaixo

-> Vá em Background e coloque este.

-> Vá em Avançado e coloque em Plano de fundo e selecione isso:


-> Vá em Plano de fundo de postagem e selecione isso:

-> Vá em plano de fundo de barra lateral e selecione:

-> Salve. E clique em Voltar para o blogger. Clique em editar HTML!

-> Dê o ctrl+f e procure por .content-outer .content-cap-top { e apague os códigos que aparece no print

-> Salve. Agora procure por Widgets e cole isso antes de }
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: 5px; /*---- bordas arredondadas, apague a linha se não quiser ----*/
box-shadow: 1px 3px 15px 2px #ccc; /*---- sombra da caixa ----*/

Print:

-> Salve. Já está ficando diferente né? 

-> Dê o ctrl+f e procure por ]]></b:skin> tecle enter e antes dela cole:
#navbar-iframe { height: 0px; visibility: hidden; display: none; }

-> Vamos separar os post's?  Dê o ctrl+f e procure por: .main-inner .column-center-outer { vai aparecer mais ou menos isso:

.main-inner .column-center-outer {  background: $(post.background.color) $(post.background.url) repeat scroll top left; _background-image: none; }

Apague toda essa parte e substitua por isso:

.post-outer {
background: #fff; /* Fundo da postagem */
padding-top: 4px; /* Espaço do topo */
padding-left: 5px; /* Espaço da esquerda */
padding-right: 5px; /* Espaço da direita */
padding-bottom: 5px; /* Espaço de baixo */
margin: 5px 3px 25px;
border-radius: 10px;
margin-top: 35px;
}

->Vamos personalizar a barra de rolagem? Dê o ctrl+f e procure por  ]]></b:skin> antes dela cole:

/***Barra de rolagem***/
::-webkit-scrollbar{width:10px;height:3px;}
::-webkit-scrollbar-button:start:decrement::-webkit-scrollbar-button:end:increment{display:block;height:0;background-color:transparent;}
::-webkit-scrollbar-track-piece{background-color:#ffffff;-webkit-border-radius:0;-webkit-border-bottom-right-radius:3px;-webkit-border-bottom-left-radius:3px;}
::-webkit-scrollbar-thumb:vertical{height:50px; background-color:#FFC1C1;-webkit-border-radius:12px;}
::-webkit-scrollbar-thumb:horizontal{width:50px; background-color:#ddd;-webkit-border-radius:px;}

-> Vamos centralizar e personalizar o titulo dos posts? Clique em expandir modelos de Widgets dê o ctrl+ f e procure por:

<div class='post-header'>
 E acima desse código cole: 

<div style="border-top: 1px  dotted  #707070"></div> 

Para centraliza-los procure por h3.post-title a { e cole esse código depois dessa tag:
text-align:center;
font: $(post.title.font);
color: #90EE90;
border-bottom: 1px solid #000;
-> Criando um cabeçalho:

Se você tem um photoscape, salve essa imagem que é transparente ela não vai aparecer por que é transparente, salve. Edite como quiser, coloque o nome do seu blog, enfim, personalize. Após isso faça o seguinte: 

E ai vocês já sabem o que fazer. Para o layout ficar bonito, eu colocaria cortininha,mas como o tutorial é de um simples layout eu não vou ficar explicando muita coisa. Os tutoriais aqui do blog vão ajudar a aprimorar esse layout sim. Então, espero que vocês tenham entendido mais ou menos como criar um layout simples. Até a próxima.








7 comentários:

  1. Amei o tutorial! *------*
    Vai ajudar bastante as pessoas.

    In love com seu blog!
    Bejos---->milena-modaeglitter.blogspot.com.br

    ResponderExcluir
  2. Muito legal esse tutorial, muito bom, ajuda de mais!

    hitfeminino.blogspot.com.br

    ResponderExcluir
  3. Adorei o tutorial,tudo super bem explicado *OO*

    Clica e me visita *U*

    ResponderExcluir
  4. O tutorial ficou bem legal, com certeza ajudou bastante gente!!!

    P.S.:Olá, gostaria de compartilhar um novidade com você. Meu blog está passando por mudanças de conteúdo e endereço, e gostaria de você estivesse comigo nesse recomeço. O novo endereço é: http://dama-louca.blogspot.com.br/. Aguardo sua visita e obrigada pela atenção!

    ResponderExcluir
  5. Amei demais o tutorial! Muito bem explicado!

    Seguiiindoooo~

    Minha Vida Fora de Série )perfil(

    ResponderExcluir
  6. Adorei o tutorial, mas eu não tenho muita paciência para fazer lays, só se eu aprendesse de verdade em um curso ou coisa e tal, seguindo o blog, poderia retribuir a visita?



    xoxo, U. Chic

    ResponderExcluir
  7. Gostei do tutorial. Realmente ajuda muita gente, graças a um desses eu fiz o meu. Seguindo seu blog.

    Retribui visita --> henriquemontoya.blogspot.com.br

    ResponderExcluir

Seguindo,Segue de volta? Não! Eu quero leitores, e NÃO números, então esse tipo de comentário será mais ignorado que o orkut aqui!

Aceita afiliação? Se tiver vagas sim , caso contrário não! Mas temos as seguintes regras: Layout bom e organizado, estar seguindo o blog, comentar sempre aqui, e ter mais de 200 seguidores

Retribui meu comentário? Claro, por que não? Deixe seu link no final da postagem

Me ensina isso? Sim, peça e postaremos

Aceitamos criticas, porém, crie criticas com ARGUMENTOS não com ofensas do tipo "Odiei o blog" isso não é argumento, isso é desculpa de pessoa mimadinha

LAYOUT FEITO POR GABRIELY MEIRELES NÃO COPIE OU SE INSPIRE.TECNOLOGIA DO BLOGGER