Aprendendo a Editar um Layout: Parte 3

by - julho 21, 2013


Olá, acho que já disse antes e direi novamente, a primeira segunda parte foram simplesmente
o básico do básico para começarmos realmente a editar.

Bem, para essa fase, será necessário usar uma tabela de cores, faço da seguinte forma:
1-Escolho uma imagem para ser a base de cores do layout.
2- Extraio as cores dela usando o http://www.degraeve.com/color-palette/index.php
Recomendo que escolha a usa imagem e use o mesmo site.

Essa será minha tabela de cor!



Vamos começar com uma coisa simples, personalizar a data do blog, ela está assim:


Vá no HTML do seu blog, aperte CTRL+ F e procure por:

.main-inner h2.date-header {


Agora apaguem a parte abaixo disso até a chave. Ou seja, essa parte:

font: $(date.font);
  color: $(date.text.color);

Agora substitua por essa parte:

font: Tahoma;
color: #333;/*Cor da fonte, altere a seu favor*/
margin-left: -80px;/*Posicionamento, pode alterar*/
background: #aa4477;/*Plano de fundo,Altere a seu favor*/
float: left;/*Não altere*/
font-size: 11px;/*Tamanho da fonte*/
padding: 4px;/*Não altere*/
-webkit-border-radius: 5px;/*Borda arredondada, retire se quiser*/
-moz-border-radius: 5px;
border-radius: 5px;
}
.main-inner h2.date-header:hover {
background: #776688;/*Cor do fundo quando passa o mouse, altere se quiser*/

Altere o desejado e salve.


Agora vamos personalizar o background pelo HTML

Primeiro abra o html do seu blog:  Modelo>>Editar Html
Clique em alguma letra dele e aperte Ctrl+F (Para a nova versão do html do blogger, o F3 não funciona)
Procure por: body {
 Então você vai achar isso:

body {

  font: $(body.font);/* tipo e tamanho da fonte para o blog */
  color: $(body.text.color); /* cor do texto no blog*/
  background: $(body.background); /* plano de fundo */  
}





Então, apagamos a parte:




$(body.background)



Mas, deixe a virgula no final.









E cole no lugar do que você apagou:



url(URL_Da_Sua_Imagem)







Altere o url da sua imagem, eu usei essa:











Salve e visualize:















Viram, até agora, tudo bem facilzinho, vamos bem divagar.







Espero que esteja ajudando^^














Share


Tweet


Pin


Share




Tags :













You May Also Like













3
Comentários











  1. Nanda-chan21 de julho de 2013 às 07:06
    *O* Queee legal que ficou ! Bem organizado e com cores ótimas ! 

    No meu próximo lay é claaaaaaaaaaaaaaaaaaaaaaro que vou utilizar esse site que tu recomendou !!! EU NECESSITO O.O , sou péssima em organizar as cores no blooog ! 

    Tutorial ótimo !!!!!!!!!!!!!!!!!!!!!! *OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO* SABE EXPLICAR MUITO BEM ! 

    Bjoooooooooos pra tyyyyy ! Se kissus chegarem aí voando são meeeeeus que te mandei *W*WW**W*WW**WW*W*W* 
    ResponderExcluir
    Respostas
    1. Gaby Misaki21 de julho de 2013 às 07:45
      Muito  obrigada, eu também sou péssima com as cores quando não uso imagem como base e.e'

      Fico feliz por ter gostado, hihi*----*

      ~~kissus *3*
      *----------*
      Excluir
  2. Anônimo24 de julho de 2013 às 15:05
    d+, super fofinho, adorei!!
    ResponderExcluir











Muito obrigada por seu comentário e por sua presença! 
Ambos são super importantes para mim.

Kaomojis:
(*´∀｀*) (*≧∀≦*) (=´∀｀)人(´∀｀=) ( ･ ▽ ･)
ヾ(*^▽^*)o,  ｡･ﾟﾟ･(>_<)･ﾟﾟ･｡ (＞ω＜；)＊(´∀`)ﾉﾉ＊
（。ゝω・）～♡ ﾍ(´∀｀ﾍ)ﾍ  (╯°□°）╯•ᴥ• (´･ω･`)