14 dezembro 2011

Mega Tutorial - Personalizando o Modelo Simples do Blogger - 2 Colunas

| |
Ola Pessoal hoje eu irei ensinar a personalizar o modelo simples, ficará parecido com o Template do PinkGirls. Lembrando que o tutorial Tem somente 2 Colunas, e não três como o meu blog!
Ex:

O programa que uso é o Adobe Photoshop, mais se você não tem pode usar o Photofilte, Inkscape e ate Mesmo o Photoscape.
Então Vamos começar o tutorial, eu vou deixar Uma Base pra Vocês modificarem como quiser

           Cabeçalho                          Meio                            Rodapé

Depois de ter baixado a base abra as 3partes no Photosop, Photofiltre ou Photoscape e as Modifique Como quiser Mude as Cores Adicionem Brushes enfim deixe a base com a sua cara.
Vamos Às modificações no Template.
Obs.: Sugiro que você crie um blog de testes, e Faça uma ou duas postagens nele com texto e imagens, pra você perceber as modificações.
Vá em > Design> Designer do Modelo, escolha o Modelo Simples


Agora Dessa ate Plano de Fundo


Escolha um fundinho bem bonito, Desse para Layout, e siga a figura


Feito isso suba Para Ajustar Larguras e coloque para Todo o Blog: 1000 pixels, e Barra Lateral : 250 pixels


Dessa para Avançado
Em texto da pagina: escolha a Cor e a Fonte que você preferir,
Em Plano de Fundo: Plano de fundo Externo escolha uma cor clara, Plano de Fundo principal deixe tranparente, em plano de fundo do cabeçalho deixe transparente.


Dessa lá para Imagens Deixe as primeiras duas opções em transparente e a ultima cor Deixe em preto.

O Resto das cores você preenche como quiser! Depois de preencher todas as cores clica em Aplicar ao Blog

Antes de Qualquer coisa Hospede as Imagens que você modificou pegue os links cole em um bloco de notas e deixe-os separados,
Agora Vamos Adicionar a Base no Código HTML
Vá em Design > Editar HTML 



Este código Representa a Parte do Meio
Pressione CTRL+F e pesquise por:
.main-inner {
------------------Vai aparecer mais ou menos assim: ------------------
.main-inner {
  padding-top: $(main.padding.top);
  padding-bottom: $(main.padding.bottom);
}
------------------Apage a parte------------------
  padding-top: $(main.padding.top);
  padding-bottom: $(main.padding.bottom);
}
------------------E Cole o seguinte código no lugar------------------
  padding: $(content.padding) 0;
margin-top:-0px;
background: url("LINK-IMAGEM-DO-MEIO") repeat;
}
Agora pegue o link da imagem do meio e cole onde esta escrito LINK-IMAGEM-DO-MEIO Visualize se estiver certinho salve.
Este código Representa a Parte do Rodapé
Pressione CTRL+F e pesquise por:
/* Widgets
----------------------------------------------- */
E Cole logo abaixo o seguinte código
.footer-inner {
margin-top:-10px;
height: 140px;
background: url("URL-IMAGEM-DO-RODAPÉ") no-repeat;
}
Pegue o link da imagem do Rodapé e cole onde esta escrito LINK-IMAGEM-DO-RODAPÉ.
Vamos Adicionar o Cabeçalho
Para o cabeçalho não ficar desalinhado nem Cortando Como eu tenho visto em vários Blogs, faça o seguinte.
Agora vá em Design> Elementos de Pagina procure pelo gadget do Cabeçalho e clica em editar
Ao invés de carregar a imagem diretamente do computador, hospede-a primeiro em algum dite próprio pra isso, copie o código da imagem do Cabeçalho que você hospedou e cole onde esta Mostrando na figura Abaixo, seguido de um ponto [.]
Note que quando adicionado o ponto a imagem será carregada, espere que carregue completamente e só assim salve.

Enfim Agora Você me pergunta Jéssica como faço pra retirar a sombra em volta do Template?
É o seguinte procure por:
.content-inner {
E logo abaixo você vai encontrar
  -moz-box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);
  -webkit-box-shadow: 0 0 $(content.shadow.spread.webkit) rgba(0, 0, 0, .15);
  -goog-ms-box-shadow: 0 0 $(content.shadow.spread.ie) #333333;
  box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);
Depois de encontrar o código Apague-o, visualize o template se tiver sumido a sombra salve o template.
Espero ter ajudado caso surja alguma duvida é só comentar e Deixar o link do teu blog ou MSN, que logo retornarei
Veja outros Links:

19 comentários:

: P disse... [Responder]

Q blog liiindo! Amo! Vlw pelo visitinha! Beijos, aceita parceria? Espero que sim! Beijos!

www.grimacing.tk

Carol disse... [Responder]

Oi linda! Amei seu blog, parbéns! Vc escreve mto bem!Seguindo com duas contas! Aceita parceria flor? Bjus!

www.meujeitoblog.blogspot.com

Dry disse... [Responder]

Hooy! je que otimo o tutorial super perfeito *--*
Arrasou nos tutoriais amei seus desenhos ficou fofo,
Bjooos Dry
SweetCandyUp.blogspot.com *--*

Vαℓériα ƒαcнiєri ♥ disse... [Responder]

Oi Flor..
Seguiindoo
Seguee o meu tbm
http://rosaepinkmakeup.blogspot.com/
Beijos Pink ♥

: P disse... [Responder]

Oi liiinda! Já te linkei! Bjs flor, vc escreve mto bem! Beijos e valeuu!

www.griacing.tk

Carol disse... [Responder]

Oi linda jah coloquei seu link-me lah, so falta vc!

www.meujeitoblog.blogspot.com

Dallila disse... [Responder]

Amei o tutorial já to criando meu próprio template, ah ontem eu tava assistindo tv e vi uma menina muito parecida com vc, kk era você mesmo?
Bjos adoro suas dicas e tutoriais!

Malena disse... [Responder]

Own *-* adorei.

Seu blog é bem organizado e tudo de bom ^^
Estou aqui para convida-la a fazer parte do Embalaço. Eu retribuio ;)

http://embalaco.blogspot.com/

Visite o Embalaço Artistic, novo post por lá:
http://embalacoartistic.blogspot.com/2011/12/filme-operacao-presente.html

Dry disse... [Responder]

Hooy que legal o tutorial .
Voltando ao assunto do inskape eu fiz isso mais de 23 VEZES eu tentei não consigui flor '
Bjoos da Dry
SweetCandyUp.blogspot.com *--*

jackie Zanini disse... [Responder]

Que mega tutu, Guria! sempre me perguntam como fazer um template de 2 colunas... quando alguém + me perguntar irei indicar aqui *-*

Beeeeeijos!

Vitória Bottcher disse... [Responder]

Oii lah vem eu di novo !! Queria que vc me ajudasse em que tipo eu salvo as imagens que fiz no Inkscape ? pq já alvei em varios tipo e nenhum abre no meu p :( Pf me ajuda !! A meu blog dessa semana não paassa ! Aceita parceriia flor?

Marieli disse... [Responder]

Olá,adorei o tutorial,é muito bom!
Estou seguindo seu blog,aceita parceria? Aguardo ansiosamente pela resposta.

www.the-fantastic-place.blogspot.com

tatiana disse... [Responder]

nossa muito bom seu tutorial parabens vc é muito criativa! e obg me ajudou muito ja estou seguindo...

*Brun@* disse... [Responder]

faz mais botao "Voltar ao Topo"

Clarinha Pink disse... [Responder]

ooi floor ! quer fazer parceria ou se afiliar??
bjss

www.mariaclarasplace.blogspot.com

Milenna disse... [Responder]

Oiie seu blog é mt fofo
Já estou seguindo !
Segue o meu??
Beijokas

http://girlsinparis-mi.blogspot.com/

*Brun@* disse... [Responder]

Oiie eu de novo xD. é q teve um problema eu fui usar o template da Selena Gomez e ficou 2 "Postagens no blog". pq? como eu faço para tirar um? pf pf pf explica

Roberta V. disse... [Responder]

Ah obrigada me ajudou muito :3
Deem uma olhadinha de como o meu ficoou:

robertadream.blogspot.com ^^

micarla disse... [Responder]

Oi,esse código que representa a parte do meio,quando coloco o link da imagem no meu,ela também aparece na sidebar.Qual seria o código para colocar a imagem de fundo somente na sidebar?

Se Plagiar Vai Dançar!
myfreecopyright.com registered & protectedProtected by Copyscape Online Plagiarism Checker