sexta-feira, 6 de abril de 2012

Truques que usei pra fazer meu template

Tumblr_m1ejt1agvw1qmevz7o1_500_large
Huuum confessa essa imagem mexeu com as suas lombrigas -_- kkkkkkk (JackieBoba). Hoooy  pra vocês que tem elogiado bastante o novo design do blog \o/ (valeu ). ''Esse post é especialmente feito pra vocês'' 

Sim. Este template nada mais é do que um dos modelos do blogger e pra ser mais precisa é o modelo viagem (2° opção www). Vou mostrar passo a passo como cheguei a este resultado Mini Gifs e também vou indicar os tutoriais que me ajudaram e vou aproveitar pra tirar dúvidas de alguns leitores que estão me perguntando bastante. 

 1° Pra facilitar a vida de vocês deixo aqui o link de um template que pode servir como base (é o modelo viagem, só que já personalizado) http://i11.photobucket.com/albums/a168/evelynregly/minigifs/miniok.gif clique aqui para fazer o download. Modificações a serem feitas --->
Resultado parecido:
Este tutorial foi testado com sucesso nos navegadores Google chromeMozilla firefox \o/ 
Mais pra você que vive na idade da pedra e ainda usa INTERNET EXPLORER (já tá na hora de trocar de navegador hein??) este tutorial não dá certo :(
 Vá em design do modelo e faça as seguintes modificações:


Agora salve.Essas são as modificações principais a personalização fica por conta de vocês, ok?

 O Truque do template:
O Cabeçalho, o menu e os Gadgets da barra lateral são uma imagem só, veja:
A imagem foi feita no Photoscape mesmo e hospedada no site (www). Tudo foi super calculado para que na hora de adicionar os Gadgets as medidas estejam certas!

 Para adicionar o este big banner ao blog usei este tutorial do Spazio DM (www).
 Para alinhar os Gadgets corretamente em cada imagem utilizei este simples código:
<div style="background:url(LINK_DA_IMAGEM) no-repeat;padding-right:20px;padding-left:20px;padding-top:30px;padding-bottom:10px;">
Tradução:
padding-right: equivale á margem direita;
padding-left: equivale á margem esquerda; 
padding-top: equivale á margem de cima;
padding-bottom: equivale a margem de baixo
Alterando corretamente os números fiz com que cada Script ficasse dentro das imagens! Sim eu confesso fiz uma reciclagem de códigos, mais até que deu certo (risos).

Tumblr_lp4c8zg2321qlddq4o1_500_large
Tutoriais adicionais:

Confira mais tutoriais para personalizar seu blog na página de goodies e confira a tag Tutoriais também!
Bom gente revelei meus truques usados, espero ter esclarecidos algumas dúvidas e futuras perguntas rsrsrsr
Bye Gente!

84 comentários :

  1. Nossa pra min que não sou blogueira tudo isso parece tão difícil Kkk' você teve que fazer muita coisa pra chegar nessa perfeição toda =)
    Beijooooos amigaaaa !

    ResponderExcluir
  2. Nossa Jackie, tô impressionada como vc conseguiu fazer aquela imagem enorme?!?! OMG *o*, incrivel acho qe consigo fazer tudo menos esse bendinto menu,kkk né ñ?Adorei as dicas,hehe'
    Beeeeeeeijos;*
    http://sooulteen.blogspot.com.br/

    ResponderExcluir
  3. Ai Jackie isso era tudo que eu precisava... ;c;
    Cara eu amei, amei, amei a frase que está lá no seu cabeçalho super fato.
    http://mundrose.blogspot.com.br/

    ResponderExcluir
  4. Adorei as dicas, confesso que piro com esses códigos, quando vou mudar de lay, quase arranco todos meus fios de cabelos ahuahuahua :j:, muito difícil!
    O novo design daqui ta muito lindo mesmo, parabéns!
    Bj

    ResponderExcluir
  5. NUSS amei jackie ! óia nóis aqui de novo ( 2 da manhã kk )

    amei os tutoriais ! salvo nóis em? bjo

    cherryseublog.blogspot.com.br

    ResponderExcluir
  6. @leticia carolina HAHAHAHAH olhas as olheiras hein guria? kkkkkkkkkk Maldita insônia O.o

    ResponderExcluir
  7. @Marcelle Monteiro Também me identifiquei tanto com a frase que coloquei logo no cabeçalho pra todo mundo ler kkkkkkkkkkkkk *---*

    ResponderExcluir
  8. Eu achei meio dificil fazer as imagens para por os gadgets,já que são muitas. Adorei o post e o laout está lindo,como sempre.
    http://i-teenbr.net.tc

    ResponderExcluir
  9. Ótimo tutorial. Bom tbm pra muita gente que acha que é simples e rápido fazer :/
    www.bugigangazdanet.blogspot.com

    ResponderExcluir
  10. adorei as dicas jakie!!!!! me ajudou muito acabei de mudar o lay do meu blog rsrsrs

    http://sweetrock16.blogspot.com.br/

    ResponderExcluir
  11. Que fácil Jackie , eu nunca imaginava >< usahhsahs , bjs bjs :* www.blog-algodaodoce.com =)

    ResponderExcluir
  12. Achei linda a sua sidebar, mas sou muito preguiçosa pra fazer isso kkkkkkk. O layout ficou lindo. Se algum dia a preguiça deixar eu vou tentar fazer uma sidebar assim, talvez no meu próximo lay.

    Ponha Glitter

    ResponderExcluir
  13. Jackie, qual é o tamanho do banner?

    ResponderExcluir
  14. Jackie esse tutorial ficou perfeito!!!! Seu layout novo tá muito lindo e não é qualquer blogueira que sai revelando seus segredos assim rsrs Adorei!

    Beijoo :* Maison de Poupées

    ResponderExcluir
  15. Jackie, qual o tamanho do banner?

    ResponderExcluir
  16. Nossa ameii!
    Menina vc arraza nessas dicas *-*
    Essa semanah vou tentar mudar meu lay,
    pra ver se consigo

    Beijos sua linda.

    http://meuinfinitto.blogspot.com.br/

    ResponderExcluir
  17. Parece tão dificil O.O haja paciencia, rsrs

    Mas ficou lindo seu template *.* Amééy

    ResponderExcluir
  18. Jackie, eu não consigo personalizar os coments :n:
    meu coments estão horriveis

    ResponderExcluir
  19. Uau, não sabia que cabeçalho e sidebar eram uma imagem só. Mas aí tem que deixar a sidebar de verdade transparente? Não entendi essa parte.

    Adorei o tutorial, Jackie. Tem várias dicas ótimas, vou usar no meu próximo layout.

    muggle-world.blogspot.com

    ResponderExcluir
  20. É a Jackie! haha# parabéns, viu? Seu blog vai causar inveja, tô te avisando! hsaushau SÉRIO MESMO, parabéns! :j:

    ResponderExcluir
  21. Ai Jackie simplesmente amei nada mais o designe daqui é lindo!♥
    http://kelly-club.blogspot.com.br

    ResponderExcluir
  22. Jackie, mas uma vez vc arazou no tutorial. Lindaaa vc é umas de minhas inspiraões, ótimo tutorial (:

    Beeeeeeeeeeijan

    http://the-lovers-world.blogspot.com.br/

    ResponderExcluir
  23. Algo que eu adorei no seu template novo,a ideia separar o Gadgets e colocar em duas colunas de cores diferentes foi demais!
    http://jeitointelect.blogspot.com.br/

    ResponderExcluir
  24. aah Jackie, seu template ficou diwwo :3 mas deve ter dado muito trabalho, não? uashuash, aceita ser entrevistada? bjs Dani, teenrockers.tk

    ResponderExcluir
  25. Amei jackie! Mas você mudou minha vida mesmo com aquele stiqr, depois de tanto tempo te enchendo *0* MUITO lindo aqui mesmo! Um dos meus blogs favoritos :D
    Beijos ♥

    Conspirantes

    ResponderExcluir
  26. Oi Jackie, faz um tempão que não passo por aqui, pq fiquei sem pc por um mês, daí já viu né?
    Mas agora que meu pc voltou vim correndo olhar as novis do seu blog e me deparei com esse lay lindão!*_*
    Nossa flor, que lay, mais fofo, eu amei!!! =)
    Acho que vou tentar customizar um lay com essas dicas que vc deu.
    Parabéns pelo lindo trabalho. Bjokas e boa páscoa pra ti! ♥

    ResponderExcluir
  27. ficou muito lindo esse lay e olhando assim parece um bicho de sete cabeças mas é bem fácil, adorei!!
    crazylifebr.blogspot.com

    ResponderExcluir
  28. Qual serias as medidas para montar um template como esse seu ?

    ResponderExcluir
  29. Nooosssaaa que massa todos eless!! :k: AMEI! :m:


    Floor, posso te pedir um favorzinhu também? :j: Pode curtir nossa página que se necontra na sidebar? desde já agradeço!

    Um beijoo da sua mais nova seguidora que deseja ser retribuida >> Laara


    :h: rawr >> http://laara-teen.blogspot.com.br/

    ResponderExcluir
  30. Oii
    Queria dizer que adorei seu blog !!! É super lindão!
    Quueria te convidar para conhecer e seguir o meu:

    http://rosarosalina.blogspot.com

    ResponderExcluir
  31. Nossa que legal, gostei dos truques.

    http://dezapaixao.blogspot.com.br/2012/04/inspiracaominha-nail-art.html

    ResponderExcluir
  32. Ah, que legal! Parabéns, muito legal da sua parte ensinar suas técnicas! Hoje é meu aniversário, sabia? Beijos!

    www.nicole-falaserio.blogspot.com

    ResponderExcluir
  33. :g: Jackie minha lindona amei como sempre Feliz Páscoa !!
    Bjs
    aJUda a divulgar porfavor
    http://wwwjovens-garotaas.blogspot.com.br/

    ResponderExcluir
  34. Eii queria perguntar se tem um jeito fácil de colocar setas diferentes no blog ?
    sem colocar no HTML?

    ResponderExcluir
  35. Poxa Jackie parece tãão fácil... Amei o blog super lindo ja estou seguindo! Bezõõs Luuh
    Rawy ---> teenstyle-official.blogspot.com.br

    ResponderExcluir
  36. haa ficou lindo lindo! ameei *-*
    http://girlsinful.blogspot.com.br/

    ResponderExcluir
  37. Qual é a diferença de Template pra Layout?

    ResponderExcluir
  38. ADOREEEEEEEEI JACKIE *OOO*
    VO SALVAR NOS FAVORITOSSSS! s2 haha

    Bj guria diva u_u
    bnascimentooo.tk

    ResponderExcluir
  39. @Juliana Do template que eu indiquei como base é 1003(largura) o tamanho vc escolhe!

    aaah e a largura pode ser modificada *---*

    ResponderExcluir
  40. @Gilciany Viana aaaaaaah brigada lindaaaaa \o/ aaah feliz pascoa pra ti tbm muuuito chocolate (: rsrsrs

    ResponderExcluir
  41. Mesmo vc esplicando não sei mecher, mas valeu as dicas seu blog é lindo.
    E te peço um favor, to começando agora nesse mundo dos blogs, vc poderia ir lá me seguir e conhecer o meu cantinho sua visita pra mim será uma honra.
    Beijo grande Fabi.
    http://blogda-fabiana.blogspot.com.br/

    ResponderExcluir
  42. Minha cara ao ver que você fez a imagem no PhotoSacpe =O
    Ele sempre foi o meu programa queridinho, rs..Vou tentar depois.

    Só não consegui a do Menu dentro do banner, que eu necessitoo! Coisa de menu mapeado já era, uhahsha.

    World-cutest.tk

    ResponderExcluir
  43. oiiii! aceita afiliação????
    amusicadesconhecida.blogspot.com

    ResponderExcluir
  44. Ameiii Jackie !!!
    esse titorial da certo no Safari ????
    bjs Mari
    www.mundodebolinhas.com

    ResponderExcluir
  45. Jackie, o seu resultado tá certo, pq o resultado é para dar entre 1 e 9, tá certíssimo, OK ??

    http:/bandanacolorida-samy.blogspot.com
    http:/apenasbrincando-samy.blogspot.com <<< meu blog de jogos

    ResponderExcluir
  46. Ameeei o layout Jackie! Ta lindo!

    cdiasblog.blogspot.com

    ResponderExcluir
  47. Oie <3
    Feliz Páscoa atrasado , rs .
    Adorei o post !
    Que lindo !
    Beijos !

    atrevidass.blogspot.com

    ResponderExcluir
  48. Oii, adooro seu blog e suas dicas !! Amei esses ai ! Você já segue e já comentou meu blog *--* , masss , tem como divulgar ele ou colocar ali nas barras ? Meu blog é esse aqui : http://aabaguncadomeuquarto.blogspot.com/ beijinhos !

    ResponderExcluir
  49. Não consigo colocar meu banner , me ajuda ai flor!
    será que eu to fazendo meu banner muito pequeno

    ResponderExcluir
  50. Ownt :k: ficou lindo o design do blog, nem tinha visto ainda... Amei mesmo e obrigada pelo seu comentário!
    Beijoos!

    ResponderExcluir
  51. :N: boa noite Jackie Zanini aa' estou tentando fazer esse tuto desde de domingo .Mais faço tudo certinho mais quando vou colocar no blog fica grande ao pequeno demais, poderia me ajudar obrigada.

    ResponderExcluir
  52. @Jackie Zanini não sei o que acontece saber faço certinho mais na hora que vou colocar ficar uma bagunça :I: o que será obrigada fofa

    ResponderExcluir
  53. O problema e o template peguei as medidas certinhas que você passou mais quando vou coloca
    vira uma bagunça que só kkk e muito tenso..
    Será que se não for pedir demais você não poderia estar colocando para mim faria um grande e enorme favor e eu agradeceria muito mesmo.

    ResponderExcluir
  54. Caramba, jackie! Vc é demais *-* Ficou lindão, achei que tinha que mexer muito com HTML e tudo mais, mas que nada! Perfeito *-*

    ResponderExcluir
  55. Eu fiz mas o meu ficou muito pequeno, o que eu devo ter feito errado? :(

    ResponderExcluir
  56. ótimas dicas :)


    :l: coisinhasdegarotas-cherry.com.br

    ResponderExcluir
  57. Tipo o meu tá ficando cortado no meio agora? mesmo eu colocando o modelo viagem...

    ResponderExcluir
  58. Mas, não consigo fazer o template viagem ficar transparente.
    :i: Me ajuda :i:
    Porque o plano de fundo da barra lateral e das guias é sempre escuro, é meio preto, tipo por exemplo, se eu colocar a cor AMARELA fica VERDE OLIVA, PINK fica BORDÔ, e por aí vai... Como fazer para Ficar transparente ou de uma cor viva?? :i: Help?? :i:

    ResponderExcluir
  59. Viu, eu ja fiz o template ficar transparente.
    :h:
    Mas agora me explica, como faz para deixar a imagem ficar estendida no blog, tipo ela fica lado a lado.
    Eu nao consigo estender ela.
    Como faz?

    ResponderExcluir
  60. Oiii jackie tudo bem? AMANDO SEU BLOG!
    mais eu não consigo colocar oque eu faço ?

    ResponderExcluir
  61. AAhh! Pirei com essas dicas! Tudo bem se eu usar, né? Ah, claro que ta tudo bem, você é a Jackie... A deusa do blogspot :k:
    Ameeii amiga :3

    Kisses :*

    ResponderExcluir
  62. Perfeito pena que não vou conseguir...
    pirei aquiiii
    http://lorranne14.blogspot.com.br/
    se puder seguir meu blog e comentar?

    ResponderExcluir
  63. Onde você colocou o código para alinhar os gadgets?
    Em baixo do código do "big banner"?
    xoxo

    ResponderExcluir
  64. Jackie, uma dúvida... qual a medida que você usou, pra fazer esse mega banner? por não saber as medidas certas, nunca dá certo quando eu vou fazer o meu template :j:

    ResponderExcluir
  65. Nossa flor amei a postagem e amo o seu blog,foi uns dos primeiros que conheci e foi amor a primeira vista kkk,esse post me ajudou d+!

    ResponderExcluir
  66. jackie, pode nos ensinar a juntar o cabeçalho do Blog com as páginas e deixar o cabeçalho mais para cima que nem o seu ???

    ResponderExcluir
    Respostas
    1. Como assim juntar o cabeçalho com as páginas?
      a pra deixar o cabeçalho mais pra cima >>http://editionskatycat.blogspot.com.br/2012/05/subir-o-cabecalho-do-blog.html

      Excluir
  67. Como faço um template pelo photoscap ?

    ResponderExcluir
    Respostas
    1. A parte do design tem vários jeitos.
      (esse é um por exemplo)... O resto tem q ser por HTML mesmo (:

      Excluir
  68. Jackie Me dá esse template ai que você feiz ?
    By: Camila

    ResponderExcluir
    Respostas
    1. Nem tenho mais o código desse template '-'

      Excluir
  69. Jackie ensina a gente fazer paginas pois já tentei e não deu certo os seus tutoriais são os únicos que dão certo ! Fico feliz se você me ensinar a fazer isso !

    ResponderExcluir
    Respostas
    1. http://www.ferramentasblog.com/2011/09/como-criar-paginas-estaticas-no-novo-blogger.html

      Excluir
  70. Sabe no final eu nao encontrei oque vc falou.

    ResponderExcluir

.