Oi seus lindos, como vão? Eu estou cansada e acabei de almoçar, eu e minha irmã estamos mudando de quarto ( nos separando, vamos dizer ) e então tive que tirar todas as roupas do meu guarda-roupa, ajudar meu pai a trocar os móveis, etc. Mas isso foi ontem, hoje eu fiquei na rua com a minha irmã ( de vela, masok ) e conheci meu amigo virtual, foi bem legal também, mas estava muito calor e eu estou com muita dor no pé, me obrigaram a andar de skate ç.ç. Ah, dia 24 a lista da minha escola de quem caiu em qual ano vai sair, e a de vocês? Estou super ansiosa, e nervosa também >3<
Enfim, talvez a maioria das pessoas que estão lendo agora não entenderam nada do título, mas vou explicar: Pra você que tem um cabeçalho/header como o meu, e está irritado porque em telas menores ele se repete, ou fica pela metade, eu trouxe esse tutorial. Caso você não entendeu, olhe o Blog, e diminua o zoom da tela, você ve que o 'fundo' dele continua em toda a largura do Blog, não é? Então, é isso que eu vou ensinar! É bem simples se você prestar bastante atenção. Let's go?
Primeiro, faça o fundo de seu cabeçalho, esse por exemplo (x) e sem seguida, você deve seguir o tutorial de dois backgrounds no Blog. Vou passa-lo pra vocês, avisando que peguei o tuto no Blog Birthday Cake, só modifiquei um pouco.
Vá em seu HTML, tecle Ctrl + F e procure por body {, você encontrará mais ou menos isso:
body {Apague tudo isso e substitua por:
font: $(body.font);
color: $(body.text.color);
background: $(body.background);
}
body, html {
height: ALTURApx;
margin: 0;
padding: 0; }
body {
font: $(body.font);
color: $(body.text.color);
background: url("LINKDOFUNDODOHEADER") repeat-x; }
html {
background: url("LINKDOBACKDEBAIXO") repeat; }
ALTURA: A altura do fundo do cabeçalho.
LINK DO FUNDO DO HEADER: Você vai colocar o link do fundo de seu cabeçalho, no meu caso é esse.
LINK DO BACK DE BAIXO: Bom, esse será o link do background que quer que fique em baixo, exemplo.
Pronto, já temos o fundo ajustado para outras telas. Agora, vamos 'colocar' o cabeçalho em geral, e que se alinhe também. Agora você apenas precisa fazer seu cabeçalho completo, exemplo. Mas agora, você vai cortar ele apenas onde tem o conteúdo, afinal já temos o fundo dele no Blog, não é? Então você vai salvar o cabeçalho desse jeito. Agora, vá em layout > E no gadget de cabeçalho, você coloca a url da imagem que você salvou, que contém apenas o conteúdo do cabeçalho, assim. É provável que seu cabeçalho ficará desalinhado comparado ao fundo, mas aí é só usar esse tutorial
RESULTADO
DIMINUINDO O ZOOM
Desculpem se expliquei muito mal, é porque estou cansada e porque não sou boa com explicação mesmo q, dúvidas nos comentários ^.^
Meodeus é exatamente o que eu tava procurando :3
ResponderExcluirVou deixar até nos favoritos aqui HAUSHA
Bem útil adorei
Beijos <3
http://p-erfectthings.blogspot.com.br/
Awwn que bom amor *u*
ExcluirFico feliz que lhe foi útil ♥
Ah, conheceu um amiga virtual? Eu tenho muita vontade de conhecer um também mas e-e Enfim, ótimo tutorial Elo, adorei *-*
ResponderExcluirBeijos | Grandes Sonhadores
Sim *u* Nunca desista ASUHASUH obrigada <3
ExcluirAin é massa conhecer pessoalmente um amigo virtual eheuh' Adoro andar de Skate :33
ResponderExcluirO tuto ficou muito bom, tipo super bem explicado adorei beijos ^^
http://secretempir-e.blogspot.com.br/
Pois é *_* Eu sou medrosa ç.ç
ExcluirObrigada! ♥♥
A lista das séries e das classes sai dia 22 :3 Estou nervosa e esperançosa, IUAHSIHSA' q.
ResponderExcluirAdorei o tutorial! Realmente não fazia ideia! É horrível quando nos deparamos com um header desproporcional a nossa tela, né? =3
Um grande beijo,
Juu-Chan || Nescau com Nutella
A minha é dois dias depois da sua ~avá~ UHEUHE também *u*
ExcluirQue bom flor! Pois é uheuhe >3<
Explicou bem sim! Meu Deus, é perfeito, obrigada! *u*
ResponderExcluirObrigada *0* Awwn, imagina :3
ExcluirConheceu seu amigo virtual? sempre quis conhecer um dos meus mas nunca da :( Adorei esse tutorial eu sempre procuro ele,agora sei onde tem =)
ResponderExcluirCounting Feelings | counting-feelings.blogspot.com.br
Siim, mas eu já sabia que ele morava na minha cidade, conheci pelo computador e ontem me encontrei com ele >3< Que boom fror *u*
ExcluirMuito bom o tuto. Que lay diwooooo >u<
ResponderExcluirh-world.blogspot.com
diamond-resources.blogspot.com
Obrigaaaaaada *uu* UHEUHE
ExcluirAmei o tuto,é perfeito ^ - ^!Beijos♥
ResponderExcluirhttp://garota-com-lilas.blogspot.com.br/ Visita?
Obrigada <3
ExcluirClaro!
Fica bem legal o resultado , e é bem simples Haha'
ResponderExcluirEu já disse que esse lay tá lindo ? Acho que não então ;
Que layout lindo *u*
D-Resources
UHEUHEUH que bom que achou *u*
ExcluirAwn obrigada Luis ♥
Explicou muito bem Dona Heloísa uha3uhe3ue3h -q Esse tutorial é bem útil :3
ResponderExcluir-
snowing-wishes.blogspot.com
UHEUHE obrigada >3<
ExcluirHihi nunca conheci um amigo virtual pessoalmente, deve ser um máximo u.u Amo andar de skate.. O tutorial é bem útil, é verdade que quando um layout é grande fica bem esquisito em computadores pequenos :p
ResponderExcluirhttp://maiira-t.blogspot.com.br/
Tenho uma amiga virtual que mora na minha cidade e eu nem sabia *0* Estou cheia de sorte q. Eu tenho medo :c UEUHE que bom que acha >3<
ExcluirJá conhecia esse tutorial, mas é sempre bom relembrar.
ResponderExcluirSweet of Cherry
UHEUHE verdade *u*
ExcluirEu já comentei? Acho que sim, não sei, eu comentei quando coisou a postagem, mas ok, vou comentar de novo. O tutorial é super útil, e fica muito legal, parabéns :3
ResponderExcluirVisite o blog :3 | Etc For Me :3
UHEUHEUH ai desculpa, eu tive que 'coisar' por causa da ilustração o3o Mesmo assim, obrigada >3<
Excluirhey!
ResponderExcluirAchei esse tutorial super útil! Vou tentar fazer no meu blog, e deixar nos favoritos também :D
Adorei seu blog, já estou seguindo, te espero no meu! <3
Um grande beijo,
Duda.
fashiondudaah.blogspot.com
Awn tenta sim <33
ExcluirAwn, sdv :3
Esse tutorial é bem útil , vou até deixar nos favoritos *-*
ResponderExcluirQueria pedir algum tutorial para ps , tipo como fazer alguma coisa para lays , poderia fazer , amor ? <3
XOXO <3 || Senhorita Liberdade
Ok *uu*
ExcluirTipo, cabeçalhos, faixinhas, avatares...? Pede na ask linda
(ノ⊙ヮ⊙)ノ
Eu amo usar esse tutorial <3
ResponderExcluirJá estava com saudades daqui <33'
ha-unting.blogspot.com
AAAAAAAAH que lay divo o seu Ana *00* ~
ExcluirEu também q. Awn ♥
este tuto e otimo,muda totalmente a aparencia do blog ^^
ResponderExcluirawn helo sz tava com saudades daqui e resolvi visitar oo lay ta tão fofo que nem da vontade de ir embora suhushuahush bjoss ^^ !!
Verdade *0*
ExcluirLôôô (╯°□°)╯ Que saudades ♥♥♥♥
O resultado ficou ótimo haha!
ResponderExcluirJá add no favoritos porque se eu precisa eu venho aqui :D
Cate-land.blogspot.com
Awwn, que bom que gostou :33
ExcluirÓtimo tuto! Estava procurando por ele! 'HAUEAUHEU
ResponderExcluirBlog muuito fofo o seu *-*
Um beijão!
http://infinitiesbooks.blogspot.com.br/
Sério? Que bom *0*
ExcluirMuito obrigada <3
Muito útil o tutorial, o meu realmente não esta ajustado se diminuir ele repete. Adorei o tutorial, muito bom <3
ResponderExcluircherrycookiie.blogspot.com.br
Que bom que achou >3< Bom, tente usa-lo q
ExcluirObrigada !
MDS ESSE TUTO é um tutorial dos deuses HUAUAUAUAHUAHAUA
ResponderExcluirAdorei de mais isso, super fácil e simples <3
Mds, do no pé e te obrigaram a andar de skate, que dó ç.ç
XOXO :D
{Joven Clube}
SAUHUSHAUSAH fico feliz que gostou <3
ExcluirPois é ç.ç q
Eu já reparei isso que muitas vezes fica diferente dependendo da tela e acho bem ruim, seria bom se se ajustasse sozinho auhhaua. E juro que eu li que você tinha que tirar fotos do seu guarda-roupa em vez de tirar as roupas UHAUHAUH
ResponderExcluirbeijos
sim senhorita (clique aqui ou no perfil)
Pois é :c Nossa UEUHEUHEU
ExcluirRsrs, sempre fico de vela '-' Amigo virtual? Eu tenho vários, é bem legal conhece amigos virtuais! Adorei o tutorial, eu estava precisando de algum *U*
ResponderExcluirhttp://bomb-dreams.blogspot.com.br/
Vida triste :c Pois é *u* Awwn que bom!
ExcluirAdorei o tuto, é bem útil ^~^
ResponderExcluirbreathingnewthings.blogspot.com.br
Awn que bom *o*
ExcluirAdorei esse tutorial =)
ResponderExcluirgirlsofthemoonlove.blogspot.com
Que bom <33
Excluir