7 Dicas para personalizar os templates dinâmicos do Blogger

Eu gosto muito dos modelos de templates dinâmicos do Blogger, mas por enquanto não atende as minhas necessidades! Até já tentei utilizar um template dinâmico no meu blog; fiz um monte de personalizações, troquei cores de tudo que era possível, adicionei CSS para deletar as opções de visualização da barra do menu, para mudar a cor de fundo dos comentários etc, etc, etc... Hoje resolvi compartilhar com você sete dicas de personalização que aprendi em outros blogs; assim, você poderá personalizar o template do seu blog e deixá-lo do jeito que quiser!


Os códigos CSS são bem simples de instalar, siga as dicas abaixo que você não terá problemas!

1)Acesse o painel de controle do Blogger;
2)Escolha a opção Modelo ==> Personalizar ==> Avançado ==> Adicionar CSS.
3)Cole o código no local indicado;
4)Aperte aí no seu teclado a tecla "ESPAÇO" para ativar o botão cor de  laranja "Aplicar ao blog"; agora, clique no botão "Aplicar ao blog" ==> Visualizar blog. Veja se deu tudo certo!

Vá adicionando os códigos CSS um abaixo do outro e, salvando e visualizando. Por enquanto, os modelos de templates dinâmicos do Blogger estão com alguns bugs, mesmo depois de personalizados, tem vezes que você abre a página do blog e não aparecem as personalizações. Mas, não se preocupe, recarregue a página novamente que as personalizações deverão aparecer.

1)Dica para trocar a imagem de engrenagem que aparece ao carregar a página de um blog com template dinâmico (Evite colocar uma imagem muito grande e/ou pesada)!


Basta copiar o código abaixo e colar no local indicado. Você deve criar uma imagem pequena, hospedar a imagem no blogger (recomendado), copiar o link da imagem e substituir por esse link destacado em vermelho; não esqueça de adicionar a largura e altura da sua imagem, no local destacado em vermelho.

.blogger-gear, .overview-sspe {
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2ISx1lF83z29ep_9Z01rhgAg-__47lqWKHq_7FbyPKDyN4BfDWezVY8IJTX6-TimxZA_E66yzvOQYsvQdB8nanIYS52gRlMYwIymuw48uDQKS5X1kWwMt6-H8bJB5201Iumo23WITbNw/s1600/boas+vindas.png') !important;
height: 70px !important;
width: 284px !important;
}

2)Dica para ajustar a largura da sidebar do "template dinâmico Sidebar". Essa dica serve apenas para o modelo dinâmico "SIDEBAR". Copie o código abaixo e cole no local indicado. Os valores width:100px, margin-left:100px devem ser iguais; por exemplo se você quiser uma sidebar com 150px, deverá colocar width: 150px e margin-left:150px.


.sidebar #sidebar{
width: 100px !important;
}
.sidebar #content{
margin-left: 100px;
}

3)Dica para trocar a cor dos gadgets de qualquer template dinâmico do Blogger. Nesse código CSS você pode trocar a cor de fundo do gadget e a cor do texto.


.gadget-icons, .gadget-title, .gadget-content, #gadget-dock, .gadget-menu, .ss{
background:#458b00 !important;
color:#dddddd !important;
}

4)Dica para forçar a exibição dos gadgets na barra lateral de um blog com template dinâmico.


#gadget-dock{
position: fixed !important;
right: 0px !important;
}

5)Dica para trocar a cor de fundo e texto nos comentários de um blog com template dinâmico. Veja como funciona:

a)background-color: #222222 - É a cor de fundo principal dos comentários;
b)color:#ffffff - É a cor do texto do comentário;
c)background-color: #3C3939 - É a cor de fundo na resposta de um comentário;
d)color:#ff6600 - É a cor do texto na resposta de um comentário;
e)color:#0055cc - É a cor que será utilizada no nome de usuário, tanto do autor quanto dos usuários;
f)color:#006600 - É a cor de alguns links, data, responder etc. Veja na imagem abaixo:


.blogger-comments .comments-content, .ss{
background-color: #222222 !important;
color:#ffffff !important;
}
.blogger-comments .comments-content .comment-replies, .ss{
background-color: #3C3939 !important;
color:#ff6600 !important;
}
.blogger-comments .comments-content .user, .blogger-comments .comments-content .user a, .ss{
color:#0055cc !important;
}
.comments-content a{
color: #006600;
}

6)Dica para exibir data num blog que utiliza template dinâmico "SIDEBAR". A cor do gadget você pode personalizar no próprio painel do Blogger, é só acessar a opção "Faixa de opções de data"


.sidebar .article .article-header .date, .ss {
display: block !important;
}

7)A dica mais importante de todas - Alinhar os títulos dos artigos num blog que utiliza templates dinâmicos.


.article .article-header .title {
text-align: left;
}

Não tem mistério nenhum para personalizar um template dinâmico utilizando estes códigos CSS, basta você colocar os códigos no local indicado no início do artigo, um abaixo do outro e salvar. Conforme eu já mencionei no começo deste artigo, tem vezes que você abre a página do blog e não aparecem as personalizações. Não se preocupe, são bugs do próprio Blogger, basta recarregar a página que as personalizações deverão aparecer. Acredito que em breve isso seja corrigido e, que novas melhorias surgirão nestes templates!!

Estudado em: stackoverflow, southernspeakers e spiceupyourblog.