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.
Trocar a imagem de fundo e o background
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:
https://themes.googleusercontent.com/image?id=L1lcAxxz0CLgsDzixEprHJ2F38TyEjCyE3RSAjynQDks0lT1BDc1OxXKaTEdLc89HPvdB11X9FDw
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;
Sidebar
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.
Ocultar Attribution
Procure por
Attribution e mude a cor do texto para
transparent
Estilo do 'Mais Postagens'
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
}
Esconder barra com nome do blog
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;
Postagens
Centralizar títulos
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;
}
Justificar texto nas postagens
Procure
.post-snippet .snippet-item e acrescente:
text-align: justify;
font-family: Delius, cursive; <= para mudar a fonte
Adicionar Postagens Relacionadas, Postagens Recentes/Antigas, Perfil do autor abaixo das postagens
Essa é a parte mais... complicadinha? É porque você precisa encontrar o lugar certo. Comigo funcionou assim...
Tenha os códigos dos
posts relacionados, dos
links de postagens mais recentes ou antigos, do seu mini perfil com imagens, links de redes sociais etc e tal.
A parte dos posts relacionados a que me refiro é a que o autor do código diz para adicionar antes de </b:includable>, a outra vai antes de </head> normal.
Procure por postMeta. Acima dele há postLabels, com uma seta preta; clique nessa seta para abrir/expandir e antes de </b:includable>, acrescente seu html de perfil, posts relacionados, links de navegação...
Procure por Postagens no blog. Logo acima, há snippetedPostThumbnail com uma seta preta; clique nessa seta para expandir o código.
E antes de </b:includable> cole novamente só o código das postagens relacionadas.
Salve e veja se deu tudo certo quando acessar seu blog (as postagens relacionadas só aparecem em blogs públicos). Não adicionei os estilos para as postagens relacionadas do autor do código (o que vai entre <style>e</style>). E caso queira que algo só apareça "dentro do post", use isso:
<b:if cond='data:blog.pageType == "item"'>
Escreva algo aqui
</b:if>
Vou disponibilizar esse modelo que personalizei para download como template free, caso vocês queiram usá-lo ou dar uma olhada nos códigos. Só tenho que dar uns retoques e o compartilho assim que estiver bom ok?
Espero que lhes seja útil.
Imagem do início do post: Pixabay.com
