O layout de um blog é tudo! Mante lo organizado com as cores em harmonia é fundamental para atrair cada vez mais visitantes para o seu blog. Se você mesma(o) puder cuidar do design do blog melhor ainda, pois assim ele pode ficar mais a sua cara. Por isso hoje eu vou ensinar vocês a editar um layout facilmente pegando os pontos principais. Os resultados são imediatos e garanto que é super fácil! Então gurias estão esperando o que? Essa é a sua oportunidade de ter um lay mais profissional e gratuito personalizado por você mesma (o) confira já:
1° baixe o template e instale no seu blog de testes. Mais Jackie não sei instalar Templates? Não tem problema confira esses tutoriais 
(www) (www).
2° Ai mesmo no seu HTML dê um ctrl + f e na barra de pesquisa que apareceu procure por:
O template que que eu escolhi para desmembra lo e mostrar aqui é este:
Dica: Faça em um blog de testes primeiro e se gostar do resultado final passe para o seu blog original.
Atenção
Atenção
Os códigos abaixo se referem as imagens principais do template. A partir delas você pode editar com as cores e fundos que você bem entender. Feito isso você só precisa trocar as urls, ok! vocês podem usar de inspiração o que eu fiz veja (www). O template limpo apenas com as imagens base que eu irei disponibilizar ao decorrer do tutorial ficaria assim (www)
1° baixe o template e instale no seu blog de testes. Mais Jackie não sei instalar Templates? Não tem problema confira esses tutoriais (www) (www).
2° Ai mesmo no seu HTML dê um ctrl + f e na barra de pesquisa que apareceu procure por: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSAsXkMa6svOxzHpFrm4BkTVXwWhWM2NU8RhS4Hqh5PP_-ueT7BBVEUIsPl5CWFSrA-IOHqfvWavSJUEltsVSg4n9ZkuhNZ5uwUFwdWkjeXG8xL-nZHr3ZXZFGi_vep5hzPLRqgH-aInF0/s0/bg.jpg
Clique aqui para salvar a imagem 
edite essa imagem no seu programa de costume, no meu caso editei com o photoscape mesmo. Sabe gente ainda sou café com leite kkkkkkk. hospede a imagem no imgur.com ou em algum outro site de sua preferência. Copie a url e cole no lugar da imagem original do template.
edite essa imagem no seu programa de costume, no meu caso editei com o photoscape mesmo. Sabe gente ainda sou café com leite kkkkkkk. hospede a imagem no imgur.com ou em algum outro site de sua preferência. Copie a url e cole no lugar da imagem original do template.
Agora procure por: background: #f188c3
Corresponde a cor da continuação da imagem que você editou então confira essa tabela de cores e coloque o código de uma cor que se enquadre na cor da imagem que você editou, certo!
3° Agora procure por: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj96bubzVYaw07gbHntm8jQn7YJie7ghTYSH9UkVqqiHnxDSrr_zrYlggU3V2_TjwvpfM6N2St0AoiC2FsbfWKo_Q22LDtr-KxzqcqVM3DLiWW9fcVXoIudne3Bcp7nm8Lv8p0rxq6Vll3S/s0/container_bg.jpg
Eu fiz uma imagem base pra vocês editarem por cima tá? ou se achar melhor edite a original mesmo! Feito isso hospede a imagem e troque a url. (Abra em uma nova guia para salvar a imagem em tamanho original!)
4° Agora procure por: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiU42zLp3y7j4lN5QuHRYlPLtr2oXLthddu85QkxPg8cwVmFQKtpoGWyeB-xVwIF_icPOdgdfwzq1SeX0e8Xqtms3RovtayC_H4DMfC3b-eN2rEsXEQRxxvRdTM_t1SB4bbHgPGAw0qyDob/s0/bottom_frame.jpg
Usem como base a original ou a que eu fiz:
Vocês podem incrementar com backgrounds, brushes, icons e outras coisinhas que vocês podem encontrar no minha página de goodies.
5° Agora procure por: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTFekUVOXvxSELTRWMjskqSHTtd-J1qj6ZIiLY7gGka8u3pOCDQaS-I9ew3nEu1_f2uyNBU0U13VR4Q8_Iuq5OYhG6cDSO-szTXaZCLgVDqQasaE8y1zGESQzOJQvAMnn1KKPzyDOrGqOx/s0/top_container.jpg
Gente não esqueçam de hospedar as imagens prontas e trocar as urls ok?
6° Agora procure por: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgu4vAIpb7tscQI-JEU_xdnV-wGdnTJ1xC-_4-CkFtZ0sCcleam66ERibUaS0AoA565avI4wczv4eLu7F4cINqLsrlKTaIhisIDtMqjTpBIDaHsRbFd459Fs4kfegtgsLS4lRS4Gj5OMWzJ/s0/top_frame.jpg
Edições rápidas:
Trocar o gif ao lado do post:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilS1RUo5c3oJpb0lR62FQFNe9Wf3STmvztzIEg48nOC3-rYcAxqmBrZmF_0wuC3tdG_6Ppj17MgH-DBn2oJrckMQexWtA07qcszzNeE-MMGJ8Rcx6t7EYCJH9oMqgoGrRGBu13OjtnBllJ/s0/post_header_bg.gif
veja mais aqui (www)
Trocar o gif do link comentários:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgygOEZwGDsyEdfWW9SRwPxYYx3BDykuuWpJ5_epaHNd62a5w_pgWh0tNs04thdF2HLH6lNYOqvbkIArOjKV0jyTEbhpMi29xQn8fwWTjp_KfGmdfVBaMmBF5fMoPPPXvmwrJKtzZ8VH3l_/s0/read_bg.gif
veja mais aqui (www)
Trocar a imagem do titulo dos Gadgets:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPwdAwgW73JpYWxEqnPZDYmbjwQVLVUipuBbyxmCKTnTJd_S5dXZ1uZVDKJ7wJL2ZJdI8PHu_1zfaiOECwFIaRfk5Ujjl41pf1LnKCkmjY2FlfZQsRfe6qRZlDVl9_JCShdbEDqViBGDfi/s0/sidebar_header_bg.jpg
Flechinhas da barra lateral:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEQ2MDtejDcTCM2xK5VHmbP282Elpa0dk6ZlkNRe-lZuMZgaZB9-ojxdEW5O3OP2iFvGnU6vh8zHUX1pLaGILOn2s6o5nCH6M4uPiugO0OZq6YINoLUs8-1n6nF-ka5cHUauJytVHu8OLK/s0/sidebar_li.jpg
veja mais aqui (www)
Se você entende um pouco mais de HTML é só futricar mais no template e irá encontrar novos códigos para serem modificados, Ok! Espero que tenham gostado do Big tutorial hahaha é admito ficou meio grandinho O.o
Bom gente é isso (:
Mega tuturial? Perfeito! <3 Estava procurando um site pra me ensinar a modificar o HTML but, minga busca chegou ao fim! Tentarei fazer isso com outros lay e te mostro! Obrigada *-*
ResponderExcluirhttp://senhorita-lady.blogspot.com/
Amei o post, ajuda muito, tipo, eu nunca uso um template do blogger, eu sempre baixo outro e personalizo.
ResponderExcluirUau! Que legal uma sessão inteirinha de tutoriais pra gente! ótima idéia :) Gostei muito jackie! Acho que vou usar alguns no meu blog :D
ResponderExcluirO post está de parabéns ;D
bjs, te espero no meu blog!
http://sweettime-blog.blogspot.com/
Que legal! Adorei! Dá pra fazer um layout completo assim! Vou tentar!
ResponderExcluircdiasblog.blogspot.com
Esse tutorial é PERFECT!! Mas mesmo eu usando esse tutu o template que eu fiz focou horrível... Fazer o que, néh?? Rsrsrsrs...
ResponderExcluirBeeeijooosss "Guria"...
mycandyspace.blogspot.com
kkkk , nossa que tutorial enorme !
ResponderExcluircade você no meu em diva?
Tem novo post lá!
#Bezos Rawr -----> Bikoti.com
Adorei, vou tentar editar um !
ResponderExcluirjackie sabe aquele post que você fez "Organizando a penteadeira com a Jackie" então você me inspirou e resolvi fazer um arrumando meu guarda-roupas da uma olhadinha lá --- > http://cleciasz.blogspot.com/2012/01/arrumando-o-guarda-roupas.html
bjs
Nossa muito legal monta seu próprio template
ResponderExcluirassim o resultado ficara a sua cara!
com esse mega tutu ficou mega fácil ;D
Beijoooos adorei o Tutuu
:l:
ameeeeeeeeeeeeeeeei :j:
ResponderExcluirOh
ResponderExcluirgostei da dica
é muito fácil :D
bjs
gpurple.blogspot.com
Jackie amei as dicas :k:
ResponderExcluirMas com certeza o Layout num blog é tudo!
No próximo design irei pegar estas dicas!
Beijoos :l:
Mas Jackie .. Onde encontro templates para desmembrar ??
ResponderExcluirMuito bom
ResponderExcluirParabens!
http://novidadesdatekinha.blogspot.com
Olá flor, sei o quanto você gosta de kawaii assim como eu, rsrs. Bom, da uma passadinha no meu We♥it http://weheartit.com/AnaClaraPrado ? Tem um moonte de fotos kawaii lá, acho que você vai gostar! Bom é isso *-*
ResponderExcluirQuanto ao post: adooorei. vou tentar usas algumas coisas para o meu blog *o* Muitos beijos ;*
porckybunny.blogspot.com
muito brigada por seguir meu blog, o seu é perfeito !!!
ResponderExcluirbeeeijos
http://afterinfinite.blogspot.com/
nossa! primeiro blog que entro que ensina como editar um template pronto!
ResponderExcluiresse sim vale a pena seguir ! Obrigada por ensina como editar um template! :D
http://tudoparaorkutfeniniemasculi.blogspot.com
Adorei o tutorial jackie! rs ;)
ResponderExcluirbem legal!
bjs
bnascimentooo.net.tc
Adorei seu blog!
ResponderExcluirDá uma passadinha no meu tbm.
Beijos ;*
Bom eu ja sabia fazer isso, ate pq sou mt curiosa não posso ver nada que eu saio mexendo ate aprender rsrs, mais eu não troco pq eu gosto um pouco mais largo como o meu e ainda não achei um template que seja parecido, queria um com 2 barras uma pequena e uma normal como o seu mais só que com a aréa dos posts maior rsrs, mais adorei o tuto, vc é mt inteligente, não é a toa que esta ganhnado seu publico tão merecidamente! um beijo
ResponderExcluirRawar -->> World Girl
http://ianapaulinhaaaa.blogspot.com/
Menina que tutorial perfeito , eu tava muito atrás rsrs , acredita que eu quebrava a cabeça desenhyando toda a pagina do template , querendo por tudo deu ma vez e pelo que vi aqui e mega fácil fazer o template do nosso jeito neh , alem de ser ate mais fácil eu acho , vou testar e qualquer coisa te mostro o resutlado e talz , PARABÉNS .
ResponderExcluirhttp://perfeitinha-blog.blogspot.com/
Ah bem legal o seu tutorial,e ajuda muito na hora de preparar o Layout, bjinhos.
ResponderExcluirhttp://blogdaingridzinha.blogspot.com/
@Iana Paulinha A guria brigada minha flor (:
ResponderExcluirEm breve tento trazer um template a sua cara viu *---*
:j:
Jackie no meu template não tem aquele body do stiqr então dava pra fazer http://exemploo1.blogspot.com/2011/09/blog-post.html#comment-form esse exemplo de um template que tenha esse body para botar o stiqr ??? pff se de obrigadaaa !!
ResponderExcluirNossa demais esse tutorial..
ResponderExcluiradorei
http://alinecuerci.blogspot.com/
Oiii
ResponderExcluirEu fico doidinha com esses codigos,mais com esse tutorial ficou bem mais facil.
Parabéns pelo blog!Já estou seguindo,visite o meu e se gostar siga de volta!!
paginasempreto.blogspot.com
Beijos
Eu tentei mas o blog não sofreu nenhuma modificação me ajude porfavor!!:a:
ResponderExcluirMuito bom o tuto *____*, amei! :k: :j:
ResponderExcluirbjks
vnmpoficial.blogspot.com
Adorei!Ficou muito legal!
ResponderExcluirMais não é meio errado pega rum template que alguém fez e usar como base?
Menina, eu fui baixar o modelo mas na hora de colocar deu erro no Xml :<
ResponderExcluirNão deu pra tirar as fotos (:l) mas enfim, eu comprei um caderno da Jolie, um da Pucca, um dos Skelanimals e um do chococat (gabei no cheirinho). Nem comprei tudo que eu queria :l mas enfim, (hsuahsuhsau) :d: gostei um pouquinho ^^
http://blogueiragabi.blogspot.com/
Que fofo :) o próximo será assim!
ResponderExcluirSerá que você poderia fazer um cabeçalho para mim? você cobra ou não? Obg *-*
@Thay Linda desde que você NÃO retire os créditos originais não. Até mesmo porque muito ''web design'' que vc vê por ai faz isso, edita um template mais RETIRA os créditos originais isso sim é ERRADO e ainda ganha dinheiro em cima dos outros =/
ResponderExcluirBeeeeijus Guria
:h:
Oiii muito legal o tutorial,mas ainda não quero mudar o meu...
ResponderExcluirBom,recebi um comentario seu que eu estou com 6 votos.....Gostaria de saber como acompanhar a votação....
Bjokas
http://blogdadudafonseca.blogspot.com/
Jackie , omg omg! Brigada :j:
ResponderExcluir:k: Aaawn!
ResponderExcluirJackiee floor, eu amodorei seu blog!! (dee verdade!!)
E gostei bastante do seu tutoriial! =)
Aliás, todos os seus tutoriais =D
Aprendi a fazer aquele cupcake fofo no photoscape *-*
Muito obrigada mesmo!
Um beijão flor e fica com Deus!
www.alinerakelli.blogspot.com
Muito obrigado!!!Muito obrigado mesmo estava pensando em criar um template mais ta com dúvida você me salvo!
ResponderExcluirBeijinhos da Luísa>>>Lufashionteen.blogspot.com
Jackie, linda! Você e suas dicas maravilhoosas!
ResponderExcluirAdooooooro.
Beeijos, linda! =)
Cáhh Chaves.
Eu não conseguir colocar o template no blogger,por que?
ResponderExcluirBeijos da Luísa>>>Lufashionteen.blogspot.com
Oiii fofa!Tá tendo um concurso no blog,participa vai que vc ganha!
ResponderExcluirhttp://www.cotidianodeumabarbie.blogspot.com/2012/01/concurso-de-1-ano-de-blog.html#comment-form
bjssssss
amei o blog^^
ResponderExcluirolha o meu
http://barbieprincesss.blogspot.com/
se gostar segue
bjss
:h: Poxa, eu não consegui encontrar nunhum desses codigos na minha HTML, procurei por todos. Eu não sei pq mas eu nunca consigo achar os códigos pra perssonalizar meu blog :d:
ResponderExcluirAdorei o tutorial, estava procurando um a tempos, amei seu blog, Jackie *-*. Você aceita afiliação?
ResponderExcluirBeijos, linda.:k:
edianaparadise.blogspot.com
O layout já e bonito só o cabeçalho dele q mata neah?!mais gostei do tuto...bjos :h: http://cinnamoncakeoriginal.blogspot.com
ResponderExcluirAdorei o tutorial, mas não consegui aplicar no meu Blog :i: . Amo demais seu Blog :h: Segue meu Blog ? sapoxuxu.blogspot.com :j:
ResponderExcluirJackie q tutu maravilhoso Parabens!!!
ResponderExcluirqueria saber como se faz as imagens para colocar no titulo dos Gadgets e tambem queria saber com coloca tres colunas no blog tem algum tutu ai p mim bjin
Lá Jackie ainda não consegui ajuda plix?
ResponderExcluirhttp://www.areadownloads.net/
Jackie que tutoria perfeito,adorei ja estou com vontade de fazer mas o tempo ta muito curto mas se eu fizer lhe mostrarei.
ResponderExcluirBjs
Mamah
justagirl-mama.blogspot.com
voce faz encomendas ?? quanto custa ?
ResponderExcluirwww.mariaclarasplace.blogspot.com
Amei esse post. o vou usar e por isso linkei vc viu!! Valeu! Beijos
ResponderExcluirah meeu blog!! http://imcssn.blogspot.com
ResponderExcluirjackie vou fazer um template free :k: valeu amiga :3
ResponderExcluirJack como faz para tirar o widget "busca" porque não dá para exclir... E você colocou uma imagem no lugar dele.
ResponderExcluirAh não precisa mais não já consegui.... Obrigada ainda assim.
ResponderExcluirhttp://mundrose.blogspot.com/
estou sempre tentando intalar o template no meu blog (esse msm q vc desmembrou) e eu não consigo!!! eu tbm tentei italar outro mas sempre aparece isso > http://2.bp.blogspot.com/-6gYW5wPuAzs/T1z_29vxIcI/AAAAAAAAA2k/iWxFcx8Zj_U/s1600/emilly.png <
ResponderExcluirem ajuda??
itsemillyworld.blogspot.com
:k: Vc cobra muito caro para fazer um template para meu blog? :j:
ResponderExcluir@Anne guria não faço lays por encomendas (:
ResponderExcluir:k: desculpa Jackie. Eu sei q eu encho o saco com isso >< mas eu não sei fazer nada direito. Eu não sei desempacotar o layout :i: como é? Não vou encomodar mais, eu juro! u-u
ResponderExcluir#descompactar li errado e escrevi errado
ResponderExcluircomo vc arrumou o link das fotos?
ResponderExcluir@Isadora P. ?
ResponderExcluirO link da 'imagem base' como vc arrumou? Pra procurar no html... :/
ResponderExcluirProcurei no template mesmo.
ResponderExcluirJackie o meu dá erro na hora q vou salvar esse código de HTML
ResponderExcluiroie!! Sou apaixonada pelo seu blog, venho aqui sempre...:h:
ResponderExcluirestou aprendendo bastante aqui...
Que seu fds seja perfeito bjos!
Meu Cantinho Especial
Jackie amo seu blog , mais por favor como se faz pro blogger aceitar esses templates :'(
ResponderExcluirJackie, Jackie, Jackie... eu poderia te dizer Te Amo!:h: Com esse post fui em busca de outros templates, um com a minha cara! Bem eu achei ele!É perfect! :k: Ti adoru viu?? :l:
ResponderExcluirmeninacansadadesorrir.blogspot.com
Aconteceu um erro e eu nao sei porque sera que voce poderia me ajudar?
ResponderExcluireu fiz as imagens do tamanho certinho, igual ao que vc nos deu confira:
4.bp.blogspot.com/-LhAwBYP8zTo/UE_flB4nveI/AAAAAAAAAKk/ZGjVDJg_xQI/s1600/cabecalho+2+sonhos+perdididos.jpg
Mas quando substituo elas no blog ficam enorme confira: criandomeulayoutsp.blogspot.com.br/
Se voce souber o erro tem como me ajudar?
beijos obrigada :l:
O meu ficou torto na parte debaixo e no meio, como ajeito?
ResponderExcluir@Ana Beatriz Mesquita arrumando a imagem que tu fez (:
ResponderExcluirSerá que vc podia fazer um sem essa base?
ResponderExcluir:l:
@Maria RitaNão dá mtu trabalho *o*
ResponderExcluirfiz esse post justamente pra inspirar vcs a editarem seus próprios lays.
CA-RA-CA que tutorial foda você até fez parecer muito fácil kkkk...
ResponderExcluiramei amei amie e espero que você poste outros igual a esse... adoreeeeei
Bjão
Quando eu instalei o meu, o menu ficou mal :i:
ResponderExcluirOi, Jackie! Sou sua Fã! rsrsrs...
ResponderExcluirMas, oh, queria saber as medidas dos desenhos que você fez. Pode ser? Quero fazer um layout para meu blog, um layout totalmente personalizado por mim (a ideia tá na mente!!!), mas não sei as medidas pra desenhar.
Agradeço demais!!! :-)
Seu blog é showwwwwwwwwwwwwwww!!! Beijinhos...
solteiras-noivas-casadas.blogspot.com.br
♥
eu não consegui fazer :(
ResponderExcluirApesar do tutorial estar muito bem explicado, sem o passo de como vc. faz prá cortar as imagens fica complicado...Eu não sei como cortar a imagem em pedaços sem saber exatamente as medidas, pois na hora de juntar tudo, fica errado na tela. Vc. tem como editar o post e adicionar essa parte de como medir prá cortar as partes das imagens? Muito bom seu blog e belo template.
ResponderExcluirNo meu caso quando editei as imagens nessa sequencia não tive problemas de visualização errada, então acho que nessa caso não posso te ajudar :(
ExcluirJá tentei de tudo pra deixar a area do cabeçalho maior, tem como ? :X
ResponderExcluirTer eu acho que até tem, mas como esse tutorial é antigo eu não me lembro mais dos códigos :c
ExcluirJackie posso te implorar uma coisinha? Faz um lay para mim pfvr!
ResponderExcluirEu imploro Jackie por favor tô super deprê
não faço templates por encomenda :c
Excluiro meu só deu certo o primeiro passo, nao achei o "
ResponderExcluirhttp://1.bp.blogspot.com/_8aZXeWtZzQY/TVGUxLFqqmI/AAAAAAAAB50/i65OlS93NVM/s000/bg.jpg" :c me ajudaa?
Procura de novo guria, tipo, esse tutu é muito antigo eu teria que desmembrar o lay de novo pra te ajudar, mas eu não disponho mais de tempo para isso :x
Excluirameei <3 show de boola, parabeens guria!
ResponderExcluir