23 de jan de 2013

Criando um Template part I

Vota no Portal?? GO AQUI
Yoo 
Como vão?
Hoje não vou conversar muito porque estou focada nestes posts que vou fazer, ensinando a criar e personalizar um template.
Bom de inicio vai ser o mesmo de sempre escolhendo o modelo, separando os gadgets...
Espero que tenham paciência porque os posts vão ser grandes.
Vamos lá ??
Leia Mais
Para ficar mais fácil irei colocar o link da imagem que estou explicando e vocês veem tudo detalhado beleza?
1. Primeiro façam o seguinte:  X e depois salve.

2. Ainda em Designer de modelo do Blogger.Vá em ajustar larguras e escolha a largura que você quer, o que a maioria coloca é todo Blog 1.000 e a Barra Lateral 300.Mas fica a seu critério.

3. Agora em avançado faça isso X e X .

Antes de ir para a parte em Html que tal colocarmos um background?
Estes eu peguei no Google mesmo.
Claros:


Escuros:


Depois de colocar o background deve ficar mais ou menos assim X

 Agora vamos para parte Html, o próximo Tuto aprendi no Blog da Gih que agora esta desativado.
4.  Vamos tirar essa bordas feias do Modelo Travel??
Agora vá em Modelo -> Editar Html 
F3 ou Ctrl+F e procure por:
.content-outer .content-cap-top {
 Você deve encontrar isso:
.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 o que esta em negrito
Visualize e olhe se ficara assim  X
Se tudo estiver certinho é só salvar.
5. Bom a maioria dos Blogs gosta de tirar o espaço entre cabeçalho e o resto do Blog,- eu não tiro o espaço do meu Blog  -mas vou ensinar do mesmo jeito para que vocês possam fazer se quiserem.
Em Modelo -editar Html , Ctrl+F ou F3 e procure por:
/* Tabs
Você irá achar isto:
.tabs-inner {
  margin: 1em 0 0;
  padding: 0;
}

Apague o que está em Negrito 

Ctrl+F novamente e procure por:
.main-inner {
Abaixo do que acabou de procura cole isto:
margin-top: -20px;
Explicando ....
-20px é a distância entre o cabeçalho e o resto do Blog. Se quiser mais perto aumente o numero mas sem tirar o( - ).
Se você quiser o cabeçalho mais longe, tire o ( - ) 

Então é isso, a primeira parte está pronta na segunda parte vamos separar o Gadgets e personalizar mais um pouco do Blog ok?
Se tiverem alguma dúvida perguntem aí ok?
E se tiverem algum pedido especial é falar também.
Kissus~




9 comentários:

  1. Esse post é legal para os blogueiros que não sabem fazer layout.

    Kissus
    gotas-de-fofura.blogspot.com

    ResponderExcluir
    Respostas
    1. Muito útil, sério mesmo! Para mim também. kkk
      Uso isto para retirar aquela barrinha chata do modelo. =D

      Beijos, Sweetie Coconut!

      Excluir
    2. É ela é realmente feia...as vezes esqueço como tira, mas depois deste tuto já ta tudo decoradim ^^

      Excluir
  2. Nik Chan,o meu netbook não tá achando o codigo da parte de tirar a borda do modelo! :/ está borda é realmente feia! queria tira-la mas não consigo,que raiva!


    Beijos,GG's Fantasy

    ResponderExcluir
  3. Perfeito!Seu blog é muito perfeito!E esse tutorial também!Foi você que fez o tuto?Realmente,ficou muito bom,e ainda mais no novo modelo do Blogger!

    +Follow!

    Beijinhos!

    Eternal Dream

    ResponderExcluir
  4. Manaaa, vc tá chata esses dias então tive que vim aqui no seu blog procurar umas dicas de HTML, num esquece que fui q ti dei os primeiros passos pra programação viw. Hehe!
    Mas é q HTML não é meu forte,apesar de ser muitoo fácil. Que bom q esse tutorial me ajudou!

    Flw mana,sua chata!
    bjs Mih!
    Paradise Books

    ResponderExcluir

-Yoo!!

Sem comentários Ofensivos.
Pedidos na ask
Elogios são sempre bem vindos
-Responderei a todo mundo...

(◕‿◕✿)  。◕‿◕。 ⊱✿◕‿◕✿⊰ (◡‿◡✿) (◕〝◕)


◑▂◐ ◑0◐ ◑︿◐ ◑ω◐ ◑﹏◐ ◑△◐ ◑▽◐