Reino Kawaii

Os modelos de visualização dinâmica são mais modernos, rápidos e possuem funções legais, como nos comentários que abrem automaticamente e sem demora ao clicar no ícone para comentar, a sidebar flutuante e o resumo de postagens por imagens. Isso vai do modelo escolhido. Até agora, contamos com os modelos:
Classic: visual clássico, carrega as postagens mais antigas conforme você vai visualizando os posts;
Flipcard: as postagens aparecem em forma de imagens em miniatura;
Magazine: destaque automático para o primeiro post, os outros aparecem mais abaixo;
Mosaico: mosaico de postagens representadas por imagens em miniatura;
Sidebar: com postagens na "sidebar";
Snapshot: postagens aparecem em forma de imagens em miniatura como se fossem fotografias tiradas mesmo de uma câmera;
Timeslide: as postagens aparecem de acordo com o mês.
Todos eles usam HTML5, CSS3 e AJAX, linguagens que trazem grandes efeitos a um site, pelo que entendi. E justamente por usar css, que são aqueles códigos que controlam o estilo e layout nos sites, tipo os que você deve adicionar acima de ]]></b:skin>, que não há a opção de editar HTML (até agora).
Então deve ser mega difícil lidar com esse tipo de template neh...foi o que pensei (fiquei tipo o coelhinho lá em cima rsrsrs...), mas pra falar a verdade, é muito fácil ^-^ Dá para fazer o básico pelo menos para quem, assim como eu, não entende muito sobre esse negócio de edições.
Hoje vou mostrar para vocês como adicionar um cabeçalho personalizado a um modelo dinâmico, e escolher um background fofo para ele. Eu recomendo o uso do Classic, mais bonito na minha opinião e onde testei o tutorial. Vamos lá!
Primeiro passo: salvar o seu modelo atual ou fazer os passos a seguir em um blog de testes<---importante!
Agora atualize para o Dynamic View Classic, em Modelo, Visualizações Dinâmicas; escolha o primeiro modelo. Clique em Personalizar para abrir o Designer do Blogger e vá modificando tudo ao seu gosto, escolhendo as cores, largura e plano de fundo ou background do seu computador ou do Blogger.
O background foi fácil neh. Vamos ao CSS para adicionar 2 backgrounds. Clique em Avançado, deslize até Adicionar CSS e cole isso:

#header .header-bar{
background: url(URL DA IMAGEM) repeat ;
}

Ok; agora temos 1 ou 2 planos de fundo!!!! Mas e o cabeçalho?
Diferente de outros modelos, o Dynamic View não possui na área de Elementos da Página o gadget Cabeçalho tão personalizável; em vez disso há o Header bar. Mas adicioná-lo é fácil. Crie uma imagem, de preferência uma que tenha a largura do tamanho da resolução da sua tela, hospede em algum site, recomendo o Picasa mesmo, e copie a URL dela.
Em Personalizar-Avançado-Adicionar CSS, cole esse código:

#header .header-drawer.sticky, #header .header-drawer  {
top: 134px;
}
 
#header .header-bar{
height: 265px;
}
 
#header:hover .header-drawer, #header .header-drawer.open, .header-ssyby, body.viewitem-open #header .header-drawer {
top: 265px;
}
 
#header-container {
height: 305px;
}
 
.viewitem-panel .viewitem-inner {
top: 100px;
padding-bottom: 120px !important;}
 
#header-container #header.header .header-bar span.title{
background: url(URL DA IMAGEM)
no-repeat center;
margin-left: auto !important;
margin-right: auto !important;
height: 265px;
}

=>Note as áreas em negrito; os valores podem ser alterados e se referem às distâncias do topo e tamanho do cabeçalho; é legal que se tenha uma diferença de 100px em 100px, assim se aumentar o primeiro valor para 234px, o segundo, terceiro e último terá 365px, o quarto e quinto 405 px e 200px. E onde é indicado no código, acrescente a URL da sua imagem.
Se seu cabeçalho já vier com o nome do blog, você pode remover o título que aparece no topo com o mesmo nome acrescentando isso:

#header.header .title a h1, #header.header .title h3{
display: none;
}

Pronto, o cabeçalho já tá lá, mas há uma coisinha chata: ele flutua, ou seja, quando for lendo as postagens ele vai ficar aparecendo. Se você adicionou uma bordinha fofa nele, até que fica legal e é uma forma de não se perder na leitura vendo cada linha. Mas se achar isso chato, pode remover adicionando esse código aqui:

#header .header-bar, #header .header-drawer.sticky, #header .header-drawer{
top: 0px !important;
margin-top: 0px !important;
position: relative !important;
}

body.sidebar #main.hfeed #sidebar{
position: absolute !important;
}

body.sidebar #main.hfeed #sidebar .item{
background: #EEEEEE;
}

#header{
position: relative !important;
}

Ao terminar cada código, dê um Enter para atualizar a página; pode ser que você não veja o resultado de imediato, então clique em Aplicar ao blog e visualize normalmente.
E o básico do básico do básico já foi feito; seu layout agora está mais moderno e com seu jeitinho ^-^
É isso por hoje, em breve tem mais tutoriais para Dynamic Views.
Espero que gostem e beijus<3