Reino Kawaii

Dentre os temas mais recentes responsivos lançados pelo Blogger, um dos meus favoritos é o Contempo. Já o personalizei para usar aqui no blog e compartilho com vocês alguns códigos úteis para quem quer personalizar também.
Algumas vezes o que fiz para mudar alguma coisa nesse tema deu certo em um blog de testes e no meu não ou vice-versa, portanto as dicas que estão nesse post não são profissionais, afinal, eu só edito html por que gosto mesmo e vou aprendendo aos poucos, mas acredito que auxilie a encontrar algumas partes que talvez você possa querer incrementar. Eu o personalizei deixando sempre uma postagem em destaque.. Vejam o resultado final aqui: Contempo Kawaii.
Primeiro, vá em Tema - Contempo e clique no primeiro modelo, aplicando-o ao blog. Vá em Personalizar (ou clique no modelo + personalizar). Aí você especifica o 'geralzão' do template. O que mudei aqui foi:
Em Avançado...

• Texto da página: fonte 14px /cor #757575
• Plano de Fundo: altura do plano de fundo 640/ cor do plano de fundo do corpo da página: transparent/ cor do plano de fundo da postagem: #ffffff
• Links: cor do link: #d5a6bd/ visitado: #ead1dc/ hover: #c797af
• Postagens: cor do título:#d5a6bd/ tamanho: 30px/ fonte do texto da postagem: Verdana, 15px/ cor dos ícones: #d5a6bd.
• Compartilhamento: cor do texto e ícones: #d5a6bd
• Links de navegação: cor #d5a6bd
• Menu lateral: transparent
• Marcadores: fundo:#d5a6bd texto:#ffffff
• Larguras: barra lateral: 290/conteúdo: 810/margem:90.

Gadgets: Ocultei alguns como Quem sou eu, Postagens mais visitadas, Denunciar abuso. Aí você escolhe.

Aplique suas alterações ao blog. Agora sim, vamos em Tema - Editar HTML.

Uma das vantagens desse template é que se pode adicionar 2 imagens como background bem mais fácil do que como mostrei nesse post aqui, sem contar que você ainda pode usar uma imagem de cabeçalho em Layout. No html do Contempo procure por Credit: Michael Elkan. Há um link para a imagem padrão:
Só trocar esse link acima pelo link da sua imagem.

Note que a imagem fica um pouco escura. Procure por .bg-photo-overlay e só mude o background, assim:
.bg-photo-overlay {
  background: none;
  background-size: cover;
  height: $(body.background.height);
  position: absolute;
  width: 100%;
  z-index: 2;
}

Procure por body (destaquei abaixo):

Mude o background para algo como:
background: #f4ddef url('URL-DA-IMAGEM') repeat;
  color: $(body.text.color);
  font: $(body.text.font);
  margin: 0;
  min-height: 100vh;

Ou seja, background: #código-de-uma-cor-opcional url('URL-DO-SEU-BACKGROUND') repeat;

Por padrão, a sidebar desse modelo aparece em telas maiores que 1440px de resolução. Para fazer a sidebar aparecer em telas menores, usei antes de /b:skin esse código do site Airina:
@media screen and (max-width: 1439px){
.sidebar-invisible {
    -webkit-transform: translateX(0px)!important;
    -ms-transform: translateX(0px)!important;
    transform: translateX(0px)!important;
  }
  .centered-bottom,
  .centered-top-container,
  .centered-top-placeholder {
    margin-left:10%; /* adjust % accordingly */
    margin-right:-10%; /* adjust % accordingly */
  }
}

@media screen and (max-width: 1024px){
  .sidebar-invisible {
    -webkit-transform: translateX(-284px)!important;
    -ms-transform: translateX(-284px)!important;
    transform: translateX(-284px)!important;
  }
  .centered-bottom,
  .centered-top-container,
  .centered-top-placeholder {
    margin-left:auto;
    margin-auto:auto;
  }
}

@media screen and (min-width: 1440px) {
  .sidebar-container {
    margin-top: 0 !important;
  }

Se quiser que a sidebar fique oculta novamente, basta remover o código. (Em um dos templates que editei para testar, quando troquei o valor de margem para 90 (em Personalizar - Avançado - Larguras que citei no início da postagem), a sidebar apareceu também.
Há uma sombra na sidebar. Procure por: .sidebar-container ou .sidebar-container .widget + .widget ou um trecho que nem esse:
.sidebar-container{
box-shadow:1px 1px 3px rgba(0,0,0,.1)
}
.sidebar-container,.sidebar-container .sidebar_bottom{
background-color:$(sidebar.backgroundColorBottom)
}
e apague: box-shadow:1px 1px 3px rgba(0,0,0,.1) e deixe background: transparent;

Para personalizar os títulos da sidebar, procure por .sidebar-container .widget .title e mude a cor, tamanho, fonte... exemplo:
.sidebar-container .widget .title{
color: #d5a6bd;
margin: 0;
text-align: center;
font-size: 22px;
font-family: 'Parisienne', cursive;
}
Procure por .sidebar-container .svg-icon-24 e deixe assim (para mudar a cor da setinha que abre/expande os gadgets):
.sidebar-container .svg-icon-24{
fill:#d5a6bd;
}
No gadget Arquivo, se quiser mudar a cor do número de postagens, procure por .BlogArchive .post-count e deixe assim:
.BlogArchive .post-count{
color:#d5a6bd;
}
Basta usar um código de cor de sua preferência em color.

Procure por Attribution e mude a cor do texto para transparent

O Contempo não tem (até agora) a opção postagens mais recentes ou antigas, e sim o mais postagens que aparece no final do blog, de fora das postagens. Para alterar a cor do texto, procure por #blog-pager a
Deixe assim, usando a cor que preferir:
#blog-pager a{
color:#d5a6bd;
font-size:14px
}

Aquela barra com título que aparece quando você 'desce' até o rodapé; para que ela suma, encontre: .sticky{ e acrescente display:none; talvez você precise fazer o mesmo em .centered-top-container.sticky .Header .replaced h1, acrescentando ou mudando display:block para um  display:none;

Procure por .post-title aí você encontra isso:
.post-title{
font:$(posts.title.font);
float:$(startSide);
margin:0 0 8px 0;
max-width:calc(100% - 48px)
}
.post-title a{
font:$(posts.stream.title.font)
}

E troca por isso:
.post-title {
  font: normal normal 45px 'Parisienne', cursive;
  text-align: center;
  margin: 0 0 8px 0;
  max-width: calc(100% - 48px);
}

.post-title a {
  font: normal normal 45px 'Parisienne', cursive;
}

.post-header{text-align:center;
}

Procure .post-snippet .snippet-item e acrescente:
text-align: justify;
font-family: Delius, cursive; <= para mudar a fonte