Reino Kawaii

Há algum tempo, tenho lido artigos pela internet sobre o tal do design ou layout responsivo e como aplicá-lo ao Blogger. Se você buscar o que é design responsivo pela net vai encontrar muitas definições, o que entendi é que quando se diz que um template é responsivo, significa que ele e os elementos que o compõem, como cabeçalho, sidebars, área de posts, rodapé... irão se adaptar bem em qualquer resolução de tela e poderão até ser visualizados com personalizações diferentes para cada  tipo de tela.*(*´꒳`*) Nesse post vou mostrar como usar imagens de cabeçalhos e backgrounds/planos de fundo diferentes na versão do blog para computador e de smartphones ou tablets.

O Blogger já tem modelos responsivos e pela internet vocês encontrarão muitos layouts responsivos gratuitos (se procurar aqui no blog, vai ver que já recomendei alguns). Optei por usar o modelo Simple do Blogger porque quase todos os tutoriais que aprendi quando comecei como blogueira dão certo nele. Além do modelo simple/simples do Blogger, testei o que compartilho hoje em um template baixado na web e deu certo. O importante é que seu tema seja responsivo.

Então, antes de começar, recomendo que vocês leiam posts sobre esse assunto como os de Elaine Gaspareto, que ensina como deixar modelos mais antigos do Blogger (tipo simple, viagem) responsivos (ela tem uma série de posts com vídeos que facilitam entender) e sobre as media queries que usaremos no tutorial, com as quais você define a personalização para cada tamanho de tela; o site w3schools.com ajuda bastante, foi onde aprendi a mudar as imagens de acordo com a resolução.

Já falei/escrevi demais, vamos lá... Ah! Vale lembrar que esse tutorial é bem simplesinho ok? Eu ainda não sei muito sobre como deixar o blog totalmente responsivo; por enquanto trago apenas esse truquezinho, será necessário que você posicione as coisas com cuidado, portanto, faça em um blog de testes.
Obtive o resultado atual no modelo aqui do blog; ao visualizar o Reino Kawaii no celular, você verá assim (em telas menores que 400px, celular na vertical):
E no pc, assim:

1 - Primeiro, defina o modelo a ser usado. Escolhi esse Simple:
Não se esqueça de deixá-lo responsivo com o tutorial que citei algumas linhas acima.
Usei uma cor como plano de fundo geral e 2 imagens para cabeçalho que também são, na verdade, backgrounds. Então a primeira coisa é ocultar o título do blog, se não quiser que ele apareça; se quiser, pule essa parte. Em Tema - Personalizar - Avançado - Título do blog, deixe assim:

Ou, no html do template (Tema-Editar html), acrescente antes de /b:skin:

.Header h1{

display: none !important;

}

2 - Em Tema - Personalizar - Imagem de plano de fundo, envie a imagem que você queira que apareça em telas menores, como as de celulares menores que 400px de resolução. Escolha o alinhamento central, não dividir em blocos e desmarque rolar com a página.

Em Avançado, escolha as cores de plano de fundo e faça outras alterações que achar necessário.

3 - No html do template, procure por </head> e acima dele, cole:

<style type='text/css'>

/*imagem para pc */

@media only screen and (min-width: 400px) {

    body { 

       background:#fff url(URL-DA-IMAGEM-PARA-TELAS-MAIORES-PC) no-repeat scroll top center; 

    }

}

/*posicionar o background ou cabeçalho pequeno com relação a área de postagens em telas menores*/

@media only screen and (max-width: 400px){

.main-inner .columns {/*posicionar coluna central em telas menores */

        margin-top: -100px!important;

     }

}

</style>

O valor -100px "sobe" a área de posts e sidebar para mais perto do topo do blog. Essa área do modelo simple é identificada por .main-inner .columns; você deve saber qual é a área da coluna central ou da área de postagens e sidebar do modelo que estiver editando e usar o nome dela no lugar de main-inner columns...

Testei em um template responsivo baixado da internet (esse aqui do themexpose) e deu certo assim:

1 - Procure por body { e cole isso substituindo onde houver escrito background:

2 - Cole aquele código que deve ir antes de </head> e oculte o título se preferir, como expliquei, escolhendo a imagem mostrada em telas maiores. Veja na imagem acima que no pc você vê a imagem da boneca com plano de fundo branco (cor #fff) e em um celular, a imagem do cinnamoroll com fundo rosa (cor #fee).
Claro, se for necessário, aplique novos valores para distanciar as imagens do topo ou da área central com posts, mas o básico, está no código ok? Você pode definir mais estilos para outros tamanhos de tela, trocando o 400px por outras resoluções.
Espero ter conseguido explicar direitinho