quinta-feira, 12 de janeiro de 2012

Aprenda a editar um layout facilmente, confira!

Tumblr_lvey9s2n2l1qjylpzo1_500_large
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á:

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
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)
  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).
  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

O código acima corresponde a uma imagem do template. Que são essas dos cantos grifados:
Clique aqui para salvar a imagem Mini gif 72  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!

   Agora procure por: 


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj96bubzVYaw07gbHntm8jQn7YJie7ghTYSH9UkVqqiHnxDSrr_zrYlggU3V2_TjwvpfM6N2St0AoiC2FsbfWKo_Q22LDtr-KxzqcqVM3DLiWW9fcVXoIudne3Bcp7nm8Lv8p0rxq6Vll3S/s0/container_bg.jpg

Essa imagem corresponde ao meio do template, veja:
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!)
 
   Agora procure por: 


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiU42zLp3y7j4lN5QuHRYlPLtr2oXLthddu85QkxPg8cwVmFQKtpoGWyeB-xVwIF_icPOdgdfwzq1SeX0e8Xqtms3RovtayC_H4DMfC3b-eN2rEsXEQRxxvRdTM_t1SB4bbHgPGAw0qyDob/s0/bottom_frame.jpg

 Esta imagem corresponde ao final do template veja:
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
   Agora procure por: 


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTFekUVOXvxSELTRWMjskqSHTtd-J1qj6ZIiLY7gGka8u3pOCDQaS-I9ew3nEu1_f2uyNBU0U13VR4Q8_Iuq5OYhG6cDSO-szTXaZCLgVDqQasaE8y1zGESQzOJQvAMnn1KKPzyDOrGqOx/s0/top_container.jpg

Corresponde a imagem abaixo do cabeçalho:

Gente não esqueçam de hospedar as imagens prontas e trocar as urls ok?
   Agora procure por: 


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgu4vAIpb7tscQI-JEU_xdnV-wGdnTJ1xC-_4-CkFtZ0sCcleam66ERibUaS0AoA565avI4wczv4eLu7F4cINqLsrlKTaIhisIDtMqjTpBIDaHsRbFd459Fs4kfegtgsLS4lRS4Gj5OMWzJ/s0/top_frame.jpg

Corresponde ao cabeçalho:

 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

sugestões:  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

Sugestões:    97 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

Imagem base: 
Flechinhas da barra lateral:


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEQ2MDtejDcTCM2xK5VHmbP282Elpa0dk6ZlkNRe-lZuMZgaZB9-ojxdEW5O3OP2iFvGnU6vh8zHUX1pLaGILOn2s6o5nCH6M4uPiugO0OZq6YINoLUs8-1n6nF-ka5cHUauJytVHu8OLK/s0/sidebar_li.jpg

Sugestões:     Mini gif 235 Mini gif 161  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 (:

83 comentários :

  1. 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 *-*

    http://senhorita-lady.blogspot.com/

    ResponderExcluir
  2. Amei o post, ajuda muito, tipo, eu nunca uso um template do blogger, eu sempre baixo outro e personalizo.

    ResponderExcluir
  3. Uau! 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
    O post está de parabéns ;D

    bjs, te espero no meu blog!
    http://sweettime-blog.blogspot.com/

    ResponderExcluir
  4. Que legal! Adorei! Dá pra fazer um layout completo assim! Vou tentar!

    cdiasblog.blogspot.com

    ResponderExcluir
  5. Esse tutorial é PERFECT!! Mas mesmo eu usando esse tutu o template que eu fiz focou horrível... Fazer o que, néh?? Rsrsrsrs...

    Beeeijooosss "Guria"...

    mycandyspace.blogspot.com

    ResponderExcluir
  6. kkkk , nossa que tutorial enorme !
    cade você no meu em diva?
    Tem novo post lá!
    #Bezos Rawr -----> Bikoti.com

    ResponderExcluir
  7. Adorei, vou tentar editar um !
    jackie 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

    ResponderExcluir
  8. Nossa muito legal monta seu próprio template
    assim o resultado ficara a sua cara!
    com esse mega tutu ficou mega fácil ;D
    Beijoooos adorei o Tutuu
    :l:

    ResponderExcluir
  9. Oh
    gostei da dica
    é muito fácil :D
    bjs

    gpurple.blogspot.com

    ResponderExcluir
  10. Jackie amei as dicas :k:
    Mas com certeza o Layout num blog é tudo!
    No próximo design irei pegar estas dicas!
    Beijoos :l:

    ResponderExcluir
  11. Mas Jackie .. Onde encontro templates para desmembrar ??

    ResponderExcluir
  12. Muito bom
    Parabens!
    http://novidadesdatekinha.blogspot.com

    ResponderExcluir
  13. 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 *-*

    Quanto ao post: adooorei. vou tentar usas algumas coisas para o meu blog *o* Muitos beijos ;*

    porckybunny.blogspot.com

    ResponderExcluir
  14. muito brigada por seguir meu blog, o seu é perfeito !!!
    beeeijos
    http://afterinfinite.blogspot.com/

    ResponderExcluir
  15. nossa! primeiro blog que entro que ensina como editar um template pronto!
    esse sim vale a pena seguir ! Obrigada por ensina como editar um template! :D
    http://tudoparaorkutfeniniemasculi.blogspot.com

    ResponderExcluir
  16. Adorei o tutorial jackie! rs ;)
    bem legal!


    bjs
    bnascimentooo.net.tc

    ResponderExcluir
  17. Adorei seu blog!
    Dá uma passadinha no meu tbm.

    Beijos ;*

    ResponderExcluir
  18. 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

    Rawar -->> World Girl
    http://ianapaulinhaaaa.blogspot.com/

    ResponderExcluir
  19. 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 .
    http://perfeitinha-blog.blogspot.com/

    ResponderExcluir
  20. Ah bem legal o seu tutorial,e ajuda muito na hora de preparar o Layout, bjinhos.
    http://blogdaingridzinha.blogspot.com/

    ResponderExcluir
  21. @Iana Paulinha A guria brigada minha flor (:
    Em breve tento trazer um template a sua cara viu *---*
    :j:

    ResponderExcluir
  22. 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 !!

    ResponderExcluir
  23. Nossa demais esse tutorial..
    adorei

    http://alinecuerci.blogspot.com/

    ResponderExcluir
  24. Oiii
    Eu 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

    ResponderExcluir
  25. Eu tentei mas o blog não sofreu nenhuma modificação me ajude porfavor!!:a:

    ResponderExcluir
  26. Muito bom o tuto *____*, amei! :k: :j:
    bjks

    vnmpoficial.blogspot.com

    ResponderExcluir
  27. Adorei!Ficou muito legal!
    Mais não é meio errado pega rum template que alguém fez e usar como base?

    ResponderExcluir
  28. Menina, eu fui baixar o modelo mas na hora de colocar deu erro no Xml :<
    Nã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/

    ResponderExcluir
  29. Que fofo :) o próximo será assim!
    Será que você poderia fazer um cabeçalho para mim? você cobra ou não? Obg *-*

    ResponderExcluir
  30. @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 =/

    Beeeeijus Guria
    :h:

    ResponderExcluir
  31. Oiii muito legal o tutorial,mas ainda não quero mudar o meu...
    Bom,recebi um comentario seu que eu estou com 6 votos.....Gostaria de saber como acompanhar a votação....
    Bjokas
    http://blogdadudafonseca.blogspot.com/

    ResponderExcluir
  32. :k: Aaawn!
    Jackiee 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

    ResponderExcluir
  33. Muito obrigado!!!Muito obrigado mesmo estava pensando em criar um template mais ta com dúvida você me salvo!

    Beijinhos da Luísa>>>Lufashionteen.blogspot.com

    ResponderExcluir
  34. Jackie, linda! Você e suas dicas maravilhoosas!

    Adooooooro.


    Beeijos, linda! =)

    Cáhh Chaves.

    ResponderExcluir
  35. Eu não conseguir colocar o template no blogger,por que?

    Beijos da Luísa>>>Lufashionteen.blogspot.com

    ResponderExcluir
  36. Oiii fofa!Tá tendo um concurso no blog,participa vai que vc ganha!
    http://www.cotidianodeumabarbie.blogspot.com/2012/01/concurso-de-1-ano-de-blog.html#comment-form
    bjssssss

    ResponderExcluir
  37. amei o blog^^
    olha o meu
    http://barbieprincesss.blogspot.com/
    se gostar segue
    bjss

    ResponderExcluir
  38. :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:

    ResponderExcluir
  39. Adorei o tutorial, estava procurando um a tempos, amei seu blog, Jackie *-*. Você aceita afiliação?
    Beijos, linda.:k:
    edianaparadise.blogspot.com

    ResponderExcluir
  40. O layout já e bonito só o cabeçalho dele q mata neah?!mais gostei do tuto...bjos :h: http://cinnamoncakeoriginal.blogspot.com

    ResponderExcluir
  41. Adorei o tutorial, mas não consegui aplicar no meu Blog :i: . Amo demais seu Blog :h: Segue meu Blog ? sapoxuxu.blogspot.com :j:

    ResponderExcluir
  42. Jackie q tutu maravilhoso Parabens!!!
    queria 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

    ResponderExcluir
  43. Lá Jackie ainda não consegui ajuda plix?
    http://www.areadownloads.net/

    ResponderExcluir
  44. Jackie que tutoria perfeito,adorei ja estou com vontade de fazer mas o tempo ta muito curto mas se eu fizer lhe mostrarei.
    Bjs
    Mamah
    justagirl-mama.blogspot.com

    ResponderExcluir
  45. voce faz encomendas ?? quanto custa ?
    www.mariaclarasplace.blogspot.com

    ResponderExcluir
  46. Amei esse post. o vou usar e por isso linkei vc viu!! Valeu! Beijos

    ResponderExcluir
  47. ah meeu blog!! http://imcssn.blogspot.com

    ResponderExcluir
  48. jackie vou fazer um template free :k: valeu amiga :3

    ResponderExcluir
  49. Jack como faz para tirar o widget "busca" porque não dá para exclir... E você colocou uma imagem no lugar dele.

    ResponderExcluir
  50. Ah não precisa mais não já consegui.... Obrigada ainda assim.
    http://mundrose.blogspot.com/

    ResponderExcluir
  51. 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 <

    em ajuda??

    itsemillyworld.blogspot.com

    ResponderExcluir
  52. :k: Vc cobra muito caro para fazer um template para meu blog? :j:

    ResponderExcluir
  53. @Anne guria não faço lays por encomendas (:

    ResponderExcluir
  54. :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
  55. #descompactar li errado e escrevi errado

    ResponderExcluir
  56. como vc arrumou o link das fotos?

    ResponderExcluir
  57. O link da 'imagem base' como vc arrumou? Pra procurar no html... :/

    ResponderExcluir
  58. Jackie o meu dá erro na hora q vou salvar esse código de HTML

    ResponderExcluir
  59. oie!! Sou apaixonada pelo seu blog, venho aqui sempre...:h:
    estou aprendendo bastante aqui...
    Que seu fds seja perfeito bjos!
    Meu Cantinho Especial

    ResponderExcluir
  60. Jackie amo seu blog , mais por favor como se faz pro blogger aceitar esses templates :'(

    ResponderExcluir
  61. Jackie, 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:

    meninacansadadesorrir.blogspot.com

    ResponderExcluir
  62. Aconteceu um erro e eu nao sei porque sera que voce poderia me ajudar?

    eu 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:

    ResponderExcluir
  63. O meu ficou torto na parte debaixo e no meio, como ajeito?

    ResponderExcluir
  64. Será que vc podia fazer um sem essa base?
    :l:

    ResponderExcluir
  65. @Maria RitaNão dá mtu trabalho *o*
    fiz esse post justamente pra inspirar vcs a editarem seus próprios lays.

    ResponderExcluir
  66. CA-RA-CA que tutorial foda você até fez parecer muito fácil kkkk...
    amei amei amie e espero que você poste outros igual a esse... adoreeeeei
    Bjão

    ResponderExcluir
  67. Quando eu instalei o meu, o menu ficou mal :i:

    ResponderExcluir
  68. Oi, Jackie! Sou sua Fã! rsrsrs...
    Mas, 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

    ResponderExcluir
  69. Apesar 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.

    ResponderExcluir
    Respostas
    1. No 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 :(

      Excluir
  70. Já tentei de tudo pra deixar a area do cabeçalho maior, tem como ? :X

    ResponderExcluir
    Respostas
    1. Ter eu acho que até tem, mas como esse tutorial é antigo eu não me lembro mais dos códigos :c

      Excluir
  71. Jackie posso te implorar uma coisinha? Faz um lay para mim pfvr!
    Eu imploro Jackie por favor tô super deprê

    ResponderExcluir
  72. o meu só deu certo o primeiro passo, nao achei o "
    http://1.bp.blogspot.com/_8aZXeWtZzQY/TVGUxLFqqmI/AAAAAAAAB50/i65OlS93NVM/s000/bg.jpg" :c me ajudaa?

    ResponderExcluir
    Respostas
    1. 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

      Excluir
  73. ameei <3 show de boola, parabeens guria!

    ResponderExcluir

.