Nós vamos levá-lo um pouco mais longe hoje e adicionar uma imagem de fundo personalizado por trás de nossos títulos de widget para um efeito personalizado.
Para fazer isso, primeiro precisamos decidir o que queremos fazer com os títulos. Coisas como adicionar uma linha personalizada sob eles, ou adicionar um pouco de gráfico são todos feitos através de propriedades CSS de fundo.
Este exemplo acima na imagem mostra um titulo não muito atraente, certo? Você gostaria de adicionar alguns elementos de círculo para coincidir com o cabeçalho, tornar o texto maior e centralizá-lo. Para isso você só precisará planejar em sua cabeça como você está como os títulos combinariam melhor com o tema do seu blog. Então, as primeiras coisas vamos mudar é a fonte. Alterar o tamanho da fonte e posicionamento vai me dar uma ideia melhor do tamanho da imagem de fundo vou precisar para concluir a personalização.
Você notará a mudança se você ir em Tema no Blogger depois em Personalizar ou Customizar e, em seguida, ir em Avançado> Gadgets. As opções que aparecerá permitem apenas que você mude instantaneamente a fonte e a cor, mas não muito mais. A desvantagem para isso é que ele também muda automaticamente a data do seu post junto com ele. Mudo, eu sei. Então, em vez de usar esse método, vamos usar nosso próprio método CSS para a fonte. O nome da classe para o elemento que vamos trabalhar (ou melhor texto do título da barra lateral) é .sidebar h2 . Vá em Avançado> CSS e aplique o seguinte código abaixo:
.sidebar h2 {
color:#000000;
font-size: 18px;
text-align: center;
text-transform: uppercase;
}
Bom agora com o código CSS aplicado estamos prontos para colocar a nossa imagem de fundo. Se você quiser pode usar Photoshop para editar sua imagem de sua preferencia.
Salve sua imagem final escolhida como um jpg e faça o upload para seu servidor ou um site de hospedagem de fotos como Photobucket.com.
Se você usar Photobucket, use a opção "link direto" quando for adicioná-lo a url ao CSS como mostra imagem abaixo: 
Agora para codificar tudo junto. No seu código acima, adicione a propriedade background-image e ficará assim como no exemplo abaixo, também adicione outros elementos em vermelho para configurações adicionais:
.sidebar h2 {
background-image:url (http://i11.photobucket.com/albums/a165/yourusername/sidebar.jpg~original);
background-position: top center;
background-repeat: no-repeat;
height: 53px;
color:#000000;
font-size: 18px;
text-align: center;
text-transform: uppercase;
}
Agora você pode querer posicionar melhor seu texto sobre a imagem de plano de fundo. Por exemplo, na imagem acima eu gostaria que o texto ficasse quase na linha abaixo. Você pode ajustar o posicionamento do texto com o "padding" (em vermelho no código abaixo). também acrescido ao código como no exemplo abaixo:
.sidebar h2 {
background-image:url(http://i11.photobucket.com/albums/a165/yourusername/sidebar.jpg~original); /*sua url do photobucket */
background-position: top center;
background-repeat: no-repeat;
height: 53px;
color:#000000;
font-size: 18px;
text-align: center;
text-transform: uppercase;
padding-top: 20px
}
 |
| Ficará assim após a aplicação do código acima |
Ao fazer isso, você pode perceber o espaço debaixo de seu título aumentou. Tudo o que temos a fazer é ajustar a altura e torná-lo menor ao seu gosto acrescendo height: 27px ao seu código como mostra o exemplo abaixo:
.sidebar h2 {
background-image:url(http://i11.photobucket.com/albums/a165/yourusername/sidebar.jpg~original); /*sua url photobucket*/
background-position: top center;
background-repeat: no-repeat;
height: 27px;
color:#000000;
font-size: 18px;
text-align: center;
text-transform: uppercase;
padding-top: 20px
}
Os títulos da barra lateral agora estão totalmente personalizados e você ainda pode inserir os nomes dos widgets como de costume. Se você é criativo e tem um pouco de conhecimento em CSS podes projetar o sidebar como quiser! Até a próxima.
0 Comentários