sábado, 3 de agosto de 2013

Fazendo Seu Layout Parte I

Olá dreamers! Como estão? Eu estou bem feliz hoje, porque eu junto com minhas amigas, lançamos o Brazillian VIP, é um site totalmente dedicado ao grupo BIGBANG. E nós fomos muito bem recebidas, nossa página no facebook alcançou 144 curtidas em menos de 2 horas, não é incrível? Então eu percebi que todo meu esforço fazendo o layout, todo o esforço das meninas me ajudando, buscando o melhor, fazendo o que pode, valeu a pena. E outra, o RD alcançou mais uma meta, agora temos 150 seguidores, é ou não é pra morrer de alegria? Hahaha, muito obrigada a todos vocês, só tenho a agradecer! E rumo a meta dos 200, força na peruca! Bom, vamos falar sobre o post de hoje... Foi um pedido que eu recebi na ask, e pra comemorar a mais nova meta, eu decidi trazer o tuto que me deu um mega trabalho pra fazer, afinal, eu tive que descobrir tudo sozinha, fuçar no html de cabo à rabo pra fazer.

Primeiro, eu vou mostrar o layout que eu vou ensinar a fazer, ele é um layout que eu disponibilizei pra vocês a pouco tempo atrás. Para ver, clique aqui. Se gostaram, vamos lá aprender a fazer hahaha.

Começando com o tutorial, você deve aplicar no seu blog, o layout do modelo Viagem (Travel). É ele que vamos modificar e deixar do seu jeitinho. Depois de aplicar o modelo, vá em Modelo>Personalizar>Avançado>Plano de Fundo da Postagem, então você escolhe a cor branca e clica em Aplicar ao Blog, depois vá em "Plano de Fundo da Barra Lateral" e coloque transparente onde tem escrito "Plano de Fundo", não precisa alterar onde tem "Cor da Moldura". Depois nessa mesma área clique em "Plano de Fundo" (fica abaixo de Modelos), remova aquela imagem de fundo e clique em Aplicar ao Blog, novamente.

Agora vá em Modelo>Editar HTML e em seguida, procure por: transparent $(content.imageBorder.top) repeat-x scroll top center e apague somente essa linha que achou. Repita o mesmo passo com as seguintes linhas:

$(content.background)
left -$(content.imageBorder.top.space)
$(content.background.color)
$(content.padding)

Agora que apagou essas partes, você vai reparar que sumiu aquele papel que tinha no fundo. Vamos então arrumar o background e cabeçalho. Eu vou explicar como colocar um cabeçalho igual a esse do layout que mostrei pra vocês. Primeiro, vamos excluir o cabeçalho que já vem.

Procure por <header> no html, quando achar selecione tudo de <header> até </header> e apague. Preste atenção pra não deletar nada além disso, é um código grande, então preste atenção. Lembrando: selecione de <header> até </header> delete e salve. Assim que você for olhar seu blog, verá que o cabeçalho sumiu. Agora vamos colocar o cabeçalho que nem o do blog que vocês viram e o background. Volte no html do blog e procure por body { quando você achar, verá algo como isso aqui:

body {
font: $(body.font);
color: $(body.text.color);
background: $(body.background);
}

Então, substitua por:

body, html {
height: ALTURA DO CABEÇALHOpx;
padding: 0; }
 body {
background: url("URL DO CABEÇALHO") repeat;
}
html { background: url("URL DO BACKGROUND") repeat;
}

Agora, você verá que o seu blog já ficou com outra cara, já está ficando super fofinho hahaha. Agora vamos organizar a sidebar... Primeiro vamos escolher a fonte que vocês vão querer usar nos títulos dos gadgets.

Você tem duas opções:

1º opção: Vá no Type Font, cadastre super rápido e faça upload de uma fonte do seu computador. Em seguida, clique em "TrueType Enable" e vá em "Example Code", copia o primeiro código que apareceu e cola no seu html, acima da área que você está editando. Clique aqui para ver um exemplo.

2ª opção: Vá no Google Fonts e escolha a que desejar. É simples, a fonte que você achar mais legal, você clica em "quick-use" e quando abrir a página, você vê onde tem escrito "Add this code to your website" e seleciona o que tem ali abaixo na caixa desde <link até css'> e lembre-se de acrescentar uma barra antes de fechar o código. 

Ficando assim: <link href='http://fonts.googleapis.com/css?family=Parisienne' rel='stylesheet' type='text/css'/>

Em seguida, procure por </head> e cole o código que você acabou de personalizar, acima do trecho procurado. Agora que a fonte já está escolhida, vamos personalizar primeiro a parte dos títulos do gadgets. 

Procure por /* Headings---------- no seu html, e substitua o primeiro trecho abaixo da parte procurada. Começa com "h2", você substitui até } que é o fechamento do código, pelo trecho a seguir:
.sidebar h2 {
font-family: NOME DA FONTE;
font-size: TAMANHO DA FONTEpx;
color: #COR DA FONTE;
background: #COR DO FUNDO;
text-align: center;
padding: 5px;
}
Essa é a parte responsável pelo título do gadget, na fonte, você escolhe o nome daquela fonte que você instalou no seu html no passo anterior. Agora vamos arrumar o corpo da sidebar. Procure pelo trecho:

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

E substitua o trecho acima por:
.sidebar .widget {
background: #COR DO FUNDO; 
border-bottom: 3px solid #COR DA BORDA; /*BORDA NA PARTE DE BAIXO, REMOVA SE NÃO QUISER*/
}

Agora, vamos mudar a fonte da sidebar, procure pelo trecho:

.footer-inner .widget,
.sidebar .widget {
  font: $(widget.font);
  color: $(widget.text.color);
}

E substitua por:
@font-face { font-family: "silkscreen"; src: url('http://static.tumblr.com/0xqvkot/7jqmgsn0m/pf_arma_five.ttf'); }
.footer-inner .widget,
.sidebar .widget {
font-family: pf arma five;  /*SE QUISER OUTRA FONTE, ALTERE O NOME E REMOVA O TRECHO ACIMA DE @font ATÉ ttf'); } */
font-size: 8px; /*TAMANHO DA FONTE*/
text-align: center;
color: #b79dc1; /*COR DA FONTE*/
padding:1px;
}
Bom dreamers, essa foi a primeira parte do tutorial, você já tem, digamos que, o "esqueleto" do seu layout hahaha, aguardem a próxima parte e espero que estejam gostando, deixem seus comentários, por favor! Beijos e até amanhã meus amores

37 comentários:

  1. Adorei o tutorial. O layout free que você usou como base é lindo! Parabéns pela páginaa u__u
    Kiss
    With You

    ResponderExcluir
    Respostas
    1. Ps: Estou seguindo o BV u__u haha

      Excluir
    2. Awn Mandi, muito obrigada por ter gostado do tutorial e muuuuuito obrigada pela visita e por seguir o BV, você sempre me apoiando hahaha. Obrigada mesmo! ♥

      Excluir
  2. *O* O BV é tão perfeiito *-* Apesar de eu não ser grande fã dos Big Bang, já segui o site/blog (?) Quero ver posts novos *3*
    Gostei do big tutorial, quando eu era muito novata na blogosfera não conseguia fazer o meu próprio lay >< Será útil para algumas pessoas (:

    Kiss~

    from Niik ll Letter of Pain (perfil)

    ResponderExcluir
    Respostas
    1. Awn Niik muito obrigada. E obrigada por seguir também! E sim, espero que esse tuto possa ajudar algumas pessoas que como nós, não sabia fazer nada (ou quase nada) no começo haha. Beijos! ♥

      Excluir
  3. Ótimo tutorial,bem explicadinho u-u Que layout free é aquele? mais que perfeição! Ah,vi O BV, não sou fã de Big Bang,mas eu tenho uma amiga que é,vou recomendar o BV pra ela,ela vai amar <33
    Beijos ~, Modern Girl - HTML
    Modern-girl-html.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Awn Sthefâany, muito obrigada, de verdade. E espero que sua amiga que é fã de BB curta muito o site, viu? Hahaha beijos! ^^

      Excluir
  4. Amei o tutorial, muito bem explicado rs. Vou visitar a página viu

    Estou te seguindo, visita o meu cantinho e segue se gostar?
    www.mundoo-cute.blogspot.com

    ResponderExcluir
    Respostas
    1. Awn Mariana, muito obrigada e visita sim, será um honra. ^-^ Beijos.

      Excluir
  5. Parabéns pelas metas e pelo novo Blog! Vou visitar, também sou VIP.
    Vou acompanhar esse tutorial, está bem explicado e pode ser útil para novatos. Beijos.

    semprefuiestranha.blogspot.com | SEMPRE FUI ESTRANHA

    ResponderExcluir
    Respostas
    1. Muito obrigada Ammy, e vou adorar sua visita no BV. E obrigada por acompanhar o tuto também, espero que ele possa ajudar os iniciantes mesmo. *-* Beijos!

      Excluir
  6. Parabéns pelas metas! Estes guias de como fazer um layout são realmente boas para iniciantes, ótimo tuto <3

    - HTML Secret

    ResponderExcluir
    Respostas
    1. Muito obrigada, espero poder ajudar a quem precisa com ele haha. Beijos! *-*

      Excluir
  7. Sim, pode morrer de alegria, rçrç.
    Adorei o tutorial, bem simples, mas muito útil aos iniciantes ^-^

    Até mais ^-^
    Y-ummie ♥

    ResponderExcluir
    Respostas
    1. Awn Yummie, muito obrigada! *-*

      Excluir
  8. Para tudo, Nana! Amei o big tuto, eu usava o do Cherry Bomb, mas agora vou passar a usar o daqui *w* Tá tudo tão bem explicadinho... ^3^ Cada vez me apaixono mais pelos posts do RD!
    Tu merece MUITO todas as curtidas do Facebook, e todos os seguidores daqui. Parabéns <3
    Kiss~
    Garotas Atrevidas ❤ ~clique e visite

    ResponderExcluir
    Respostas
    1. Awn Mille, muito obrigada. Você sempre sendo gentil e fofa aqui no RD. Obrigada de verdade! ♥

      Excluir
  9. Adorei o tutorial! Vou enviar pra uma colega minha que está começando com o blog agora. Obrigada ;)

    xx,
    www.likeparadise.com.br

    ResponderExcluir
    Respostas
    1. Ahh obrigada e envia sim, espero que o tutorial ajude ela! *-*

      Excluir
  10. Amei o tuto, o resultado fica lindo *-* Parabéns pela meta, e pela page do face tbm *u*

    ResponderExcluir
    Respostas
    1. Awn Nana, muito obrigada, viu? Beijos! *-*

      Excluir
  11. OMG :O que layout perfeito, acho que vou te pedir pra fazer um pra mim se faz? bjs

    www.brrendacaroline.blogspot.com

    ResponderExcluir
    Respostas
    1. Hahaha, desse do modelo que eu postei eu posso fazer sim, é só eu tentar encaixar no meu tempo livre hahaha. Beijos! ^^

      Excluir
  12. OMG, que divo. Muito útil e o resultado é realmente pfto *U* Amei HAUSHA

    Abraxos no coração #
    rabiscosnopapel-oficial.blogspot.com

    ResponderExcluir
  13. Curto BIGBANG mas não chego a ser uma VIP, parabéns pelo sucesso rapido da pagina *-*
    Curti o tutorial também,

    beijinhossss!!
    www.mah4021.com

    ResponderExcluir
    Respostas
    1. Awn muito obrigada Marcella. Bom, você não é VIP mas é muito bom que goste, já fico feliz haha. Beijos!

      Excluir
  14. Eu também fiz o meu layout pegando um de base e editando!!
    É tão bom conseguir deixar o blog do seu jeitinho né?
    Adorei o tutorial, sua explicação foi muito boa s2
    Beijinhos
    http://www.meninadepalavra.com/

    ResponderExcluir
    Respostas
    1. É muito bom. Eu uso a base travel que já vem no blog, ele é super bom de editar haha e sim, adoro fazer meu blog do meu jeito, realmente é legal demais! Muito obrigada! *-*

      Excluir
  15. Adorei o tutorial *O*
    Lay free é mto lindo ;3
    Queria saber fazer lays assim :/

    ~ Beijos
    http://cantinhodaslovelys.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Awn Tauane muito obrigada! *-* E bom, seguindo o tutorial você saberá kkkkk. Beijos!

      Excluir
  16. Eu amo quando as pessoas colocam modos diferentes de fazer um layout,você vai tendo várias bases,é ótimo.
    Um beijo
    http://bombasticmsuics.blogspot.com

    ResponderExcluir
    Respostas
    1. Awn Gaby, eu também gosto muito. É super interessante fazer layouts diferentes aprendendo de vários lugares né? Haha. Beijos! *-*

      Excluir
  17. Adorei o tutorial, ótimo e bem explicado!
    Beijos

    ResponderExcluir
  18. Adorei o tutorial, o layout que você usou para base é lindo!

    ResponderExcluir

1 ♥ Leio e respondo todos os comentários. Sim, vou retribuir a visita, dependendo do que comentar aqui. Vir aqui só pra pedir pra eu visitar ou seguir é o que não dá, né?

2 ♥ Sem comentários ofensivos, ok? Se tem uma crítica construtiva, pode dar, mas se não for tão importante assim, guarde pra você mesmo. As vezes é bem melhor do que sair ofendendo as pessoas.

3 ♥ Muito obrigada por comentar no meu blog, e obrigada também pela sua visita. Saiba que é muito importante pra mim. Ah, não esqueça de deixar o endereço do seu blog! ^^