11 de set de 2013

Como Criar um Layout Cute + Layout Free

Como me pediram muuuuuuuuuuuuito para postar esse tutorial de novo, eu decidi colocar ele em 'primeiro' na minha lista de posts, já que a Rafa (minha baby haha) estava precisando bastante dele.
Esse tutorial e o Layout disponibilizado foi feito quando eu tinha o meu antigo blog, o Poison HTML, por isso que a URL e algumas coisas no lay está escrito o nome do blog.

Veja aqui o resultado final do layout (x




1. Escolha o segundo modelo Viagem do blogger


2. Clique em 'Plano de Fundo' e escolha um background, e clique em concluir. Recomendo esse background aqui.


3. Vá em 'Ajustar Larguras' e coloque 1020px em cima e 330px em baixo. 


4. Vá em 'Avançado' > Título do Blog > Deixe Transparente
5. Em 'Avançado' clique em 'Plano de fundo das postagens' e deixe transparente.
6. Em Avançado, vá em 'Plano de Fundo da Barra lateral' e também deixe em transparente.
7. Clique em 'Aplicar Modelo', como mostra essa imagem (x)



8. Vá em 'Editar HTML' > Aperte F3 e procure por .content-outer .content-cap-top {
Abaixo dele, terá esses outros códigos:
.content-outer .content-cap-top { height: $(content.imageBorder.top.space); background: transparent $(content.imageBorder.top) repeat-x scroll top center; } .content-outer { margin: 0 auto; padding-top: $(content.margin); } .content-inner { background: $(content.background); background-position: left -$(content.imageBorder.top.space); background-color: $(content.background.color); padding: $(content.padding); }
Apague todo o código acima do seu HTML, e no lugar cole esse:
.content-outer .content-cap-top { height: background: } .content-outer { margin: padding-top: } .content-inner { background: background-position: background-color: padding: }
Se você visualizar, verá que aquele fundo branco saiu. Esse fundo branco chama-se 'folha', e a retiramos. Salve o modelo.



  9. Agora, aperte F3 e procure por /head Logo acima, cole o script dessa fonte:
<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz' rel='stylesheet' type='text/css'/>
 Essa vai ser a fonte do título dos widgets e dos posts. Salve.



  10. Aperte F3 e busque por /* Posts Logo abaixo você encontrará esse código:
h3.post-title { margin-top: 20px; }
Logo abaixo desse código, cole esse:
.post-header, .dados {
border-top: 1px solid #eee;
}
Ao visualizar, você verá que tem uma linha abaixo do título dos posts. Se ela estiver certinha, salve. 11. Procure por h3.post-title a { Abaixo você verá que tem o lugar para colocar a fonte e a cor da fonte (font e color). Então, vamos mudar. Apague o código da fonte (esse de baixo)
 font: $(post.title.font);
E cole no lugar dele, este aqui:
font: normal 28px 'Yanone Kaffeesatz', sans-serif;
Você pode alterar o '28' se quiser, ele é o tamanho da fonte. Se você visualizar, verá que mudou a fonte do título dos posts. Agora apague o código da cor (esse de baixo)
color: $(post.title.text.color);
E cole no lugar, este aqui:
 color: #C2D1D9;
Você pode alterar o código da cor. Eu coloquei um meio verdinho, se você não alterar vai ficar bonito também. Visualize, e se estiver ok, salve.



12. Aperte F3 e procure por .main-inner .column-center-outer { Abaixo do código procurado, haverá o componente dele, ou seja, o código abaixo. Vai estar bem assim:
.main-inner .column-center-outer { background: $(post.background.color) $(post.background.url) repeat scroll top left; _background-image: none; }
Então, apague todo esse código (o que mostrei acima), e no lugar dele, cole este código:
.post-outer { box-shadow: inset 0 0 0px #E6E6E6, 0 0 5px #d9d7d7; margin: 3px 8px 15px; background:#fff; padding: 5px 5px; padding: 5px; }
Se você visualizar, verá que o fundo dos seus posts estão brancos e separados. Se estiver assim mesmo, salve o modelo.



13. Aperte F3 e procure por /* Widgets Logo abaixo você verá que tem um .sidebar .widget { mais o código que o acompanha. Assim:
.sidebar .widget { border-bottom: 2px solid $(widget.border.bevel.color); padding-bottom: 10px; margin: 10px 0; }
Então, apague esse código mostrado acima, e no lugar dele cole este aqui:
.sidebar .widget { width:100% !important; background:#fff; padding-left: 10px;padding-bottom: 10px;padding-right:10px;padding-top: 5px;margin: 30px 0; box-shadow: inset 0 0 0px #E6E6E6, 0 0 5px #d9d7d7; }
Visualize e verá sua sidebar separada, com sombra e com o fundo branco. Se estiver assim, salve.



  14. Aperte F3 e procure por ]]></b:skin> Logo acima dele, cole o seguinte código:
.sidebar h2 { margin-top: 15px; margin-bottom: 5px; font: normal 22px 'Yanone Kaffeesatz', sans-serif; color: #C1D2DB; /* Cor da fonte */ border-bottom: 1px dotted #EDEDED; /* Tipo e cor da borda */ text-align: center; height: 18px; text-shadow: 0px 1px 1px #EDEDED; padding-bottom: 10px; margin: 4px 2px 5px; padding: 5px 10px; }
Esse é o script para os títulos da sidebar, altere a desejar.



  15. Agora, vamos acrescentar uns scripts para deixar o layout mais agradável. Cole todos os códigos a seguir, acima de ]]></b:skin>
/* Efeito revelar e esconder navbar */ #navbar-iframe { opacity:0; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } #navbar-iframe:hover { opacity:1; } /* seleção de texto colorida */ *::-moz-selection { background: #f9f9f9; /*---Cor de fundo--*/ color:#483D8B; /*--cor da fonte--*/ } *::selection { background: #f9f9f9;/*---Cor de fundo--*/ color:#483D8B; /*--cor da fonte--*/ } /* Retirar o attribution */ #Attribution1 { clear: both; line-height: 2.5em; display: none; } /* Retirar o Assinar Postagem (Atom) */ .feed-links { height:0px; visibility:hidden; display:none; } /* Barra de rolagem colorida */ ::-webkit-scrollbar {width: 2px; height: 10px; background: #f5f5f5; } ::-webkit-scrollbar-thumb { background: #000; } *{ scrollbar-face-color:#ff004d; scrollbar-highlight-color:#ff004d; scrollbar-3dlight-color:#343434; scrollbar-darkshadow-color:#343434; scrollbar-shadow-color:#ff004d; scrollbar-arrow-color:#343434; scrollbar-track-color:#343434; } /* Negrito, itálico e sublinhado */ b{color: #3DB5D6; text-decoration: none;} /* Estilo do negrito */ i {color: #ccc; text-decoration: none;} /* Estilo do itálico */ u {color: #000; text-decoration: none; border-bottom: 1px dotted #48D1CC; } /* Imagens dos posts com bordas arredondadas */ .post img{ border-radius: 5px; } /* Footer dos posts */ .post-footer-line-1{ border-bottom: 1px dotted #BBB; /* Estilo da borda */ font-size:11px; /* Tamanho da fonte de letra */ } .post-footer-line-1{ border-bottom: 1px dotted #BBB; /* Estilo da borda */ font-size:11px; /* Tamanho da fonte de letra */ } .post-footer-line-2{ border-bottom: 1px dotted #BBB; /* Estilo da borda */ font-size:11px; /* Tamanho da fonte de letra */ }
Você pode personalizar ou tirar alguns dos scripts, até porque eu os nomeei para ficar mais fácil. Visualize e se estiver de acordo com o que você quer, salve.






16. Aperte F3 e busque por /* Content Logo abaixo de content, tente encontrar esse código:
a:link { text-decoration:none; color: $(link.color); } a:visited { text-decoration:none; color: $(link.visited.color); } a:hover { text-decoration:underline; color: $(link.hover.color); }
Ao encontrar, substitua todo ele por esse:
a:link { color: #C2D1D9; /* Cor do link*/ text-decoration: none; -webkit-transition: color 0.7s ease-out;-moz-transition: color 0.7s ease-out;transition: color 0.7s ease-out; } a:visited { color: #CEDAE1; /*Cor dos links visitados*/ text-decoration:none; filter:alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; } a:hover { color: #CFCFCF; /*Cor do link quando passa o mouse*/ text-decoration:none; filter:alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; }
Salve.



17. Aperte F3 e procure por .main-inner h2.date-header { Encontrará o seguinte código:
.main-inner h2.date-header { font: $(date.font); color: $(date.text.color); }
Então, substitua o código acima por esse:
.main-inner h2.date-header { border-radius:5px 0px 0px 5px; /* borda */ font: normal normal 12px tahoma; text-transform:uppercase; color: #C2D1D9; background: #f9f9f9; /* cor do fundo da caixa */ width: auto; text-align: right; /* alinhamento do texto */ padding:5px; float: right; /* na direita ou esquerda */ right: 8px; /* mais para direita */ top: 5px; /* altura da caixa */ }
Esse código é referente ao estilo da data dos posts. Você pode mudar as cores e posicionar melhor caso não esteja bom. Salve.



Pronto, seu blog estará prontinho, só ira faltar o banner que vai ficar ao seu critério de fazer, enfeitar e tal.
Credite | Não repasse | Beijos da Tia Rafa ;* (tô com mania de me chamar de tia, não sei porque ghauhahs)

22 comentários:

  1. ADOREI <3 FICOU DIWO!! E muito parecido com o meu que é um lay free do blog Memorias ao Vento.
    Queria saber se posso usa-lo como base??

    Bjos >0<
    http://nemtaobobassim.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Claro, pode sim, só não tira os créditos, tá? <3

      Excluir
  2. Perfeito o layout free ^-^ E o tuto melhor ainda >o<

    Beijão na testa xD,

    Juu-Chan do Nescau com Nutella >o< ( clique no link )

    ResponderExcluir
  3. Tudo bem explicadinho... acho que vou usar como base, posso tia Rafa? :3
    HUSAIHISUAHSAUI'

    ResponderExcluir
    Respostas
    1. HAISHAISHAISHAISHAISHA que fofo, geeeeente *u* safghjagshjka pode sim kkk

      Excluir
  4. Ótimo tutorial, muito completo.

    locadorando.blogspot.com.br

    ResponderExcluir
  5. Oi, Rafa! Sempre gostei desse html, usei até no meu blog antigo. O aniversário tá chegando viu? Você tá indo super bem nesse blog viu? Beijo!

    ResponderExcluir
    Respostas
    1. AWWWWWN, DANIH COISA MARAVILHOSA FEAT. GATONA DA MINHA LIFE <3

      Excluir
    2. Tu que é diva, fica postando coisa diva e-e Que direto n dá p mim comentar, mais eu leio! u_u

      Excluir
  6. Que legal os tutoriais, o lay ficou muito lindo u3u xx
    fairiesdancing.blogspot.com

    ResponderExcluir
  7. Amor, estou te mandando email, para que faça meu layout,e aguardo resposta. pff.

    beijo

    ResponderExcluir
  8. Obrigada Rafa!!! Awn que fofa "minha baby" >< te love. Obrigada, vou usar, porque ainda nao sei como fazer um sozinho e vc me ajuda muito!!! Beijos

    ResponderExcluir
  9. Gente, tá muito lindo, perfeito >.<
    Pode usar como base?

    h4shtag.blogspot.com

    ResponderExcluir
  10. Gostei do lay, e o tuto já conhecia as vezes esqueço de lembrar como tirar essa "folha" do modelo travel as vezes :)

    http://the-high-essenci.blogspot.com.br/

    ResponderExcluir
  11. Usei o tutorial no meu blog e gostei bastante do resultado!
    http://impossible-to-no.blogspot.com.br/

    ResponderExcluir

sem xingamentos, pls

Related Posts Plugin for WordPress, Blogger...