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:
|Tutorial - Mini gifs nos links Postado por, Marcadores e Comentários | Aprenda como personalizar seu Blockquote |Botão “Voltar ao topo” pelo HTML do Blogger | Quer mais Clique Aqui!
19 comentários:
Q blog liiindo! Amo! Vlw pelo visitinha! Beijos, aceita parceria? Espero que sim! Beijos!
www.grimacing.tk
Oi linda! Amei seu blog, parbéns! Vc escreve mto bem!Seguindo com duas contas! Aceita parceria flor? Bjus!
www.meujeitoblog.blogspot.com
Hooy! je que otimo o tutorial super perfeito *--*
Arrasou nos tutoriais amei seus desenhos ficou fofo,
Bjooos Dry
SweetCandyUp.blogspot.com *--*
Oi Flor..
Seguiindoo
Seguee o meu tbm
http://rosaepinkmakeup.blogspot.com/
Beijos Pink ♥
Oi liiinda! Já te linkei! Bjs flor, vc escreve mto bem! Beijos e valeuu!
www.griacing.tk
Oi linda jah coloquei seu link-me lah, so falta vc!
www.meujeitoblog.blogspot.com
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!
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
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 *--*
Que mega tutu, Guria! sempre me perguntam como fazer um template de 2 colunas... quando alguém + me perguntar irei indicar aqui *-*
Beeeeeijos!
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?
Olá,adorei o tutorial,é muito bom!
Estou seguindo seu blog,aceita parceria? Aguardo ansiosamente pela resposta.
www.the-fantastic-place.blogspot.com
nossa muito bom seu tutorial parabens vc é muito criativa! e obg me ajudou muito ja estou seguindo...
faz mais botao "Voltar ao Topo"
ooi floor ! quer fazer parceria ou se afiliar??
bjss
www.mariaclarasplace.blogspot.com
Oiie seu blog é mt fofo
Já estou seguindo !
Segue o meu??
Beijokas
http://girlsinparis-mi.blogspot.com/
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
Ah obrigada me ajudou muito :3
Deem uma olhadinha de como o meu ficoou:
robertadream.blogspot.com ^^
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?