Olá meus amores, hoje trago para voces um tutorial super simples + 10 Imagens personalizadas para colocar no titulo da sidebar. Essa imagens eu mesma criei, por tanto se forem reblogar por gentileza dêem os CRÉDITOS! #Obrigada!
Bom, para começar, va na Opcao Modelo do seu blog e clique em EDITAR HTML > Dê Ctrl+F e procure por: /* Headings , abaixo desse codigo terá .sidebar h2 { selecione essa linha até o fechamento da chave } e SUBSTITUA por:
.sidebar h2 {font-family: 'Bromello', sans-serif; /*Estilo da fonte*/font-size: 28px; /*Tamanho da fonte*/color: #000; /*Cor da fonte*/background:url("LINK_DA_IMAGEM") top center no-repeat;
margin-top: 10px;
padding: 15px; /*Diminua o numero se quiser a Fonte mais pra cima */-webkit-border-top-right-radius: 40px;
height: 45px;/*Altura da imagem nao alterar*/width: 290px; /*Largura da imagem nao alterar*/ text-align: center; /*Alinhamento do texto*/}
ENTENDENDO OS CODIGOS:
font-family: 'Bromello', sans-serif; /*Estilo da fonte*/ Voce substitue o BROMELLO por qualquer outra fonte desejada.
Onde tem escrito (LINK_DA_IMAGEM) substitua pelo link de uma das imagens logo abaixo, basta clicar com o botão esquerdo em cima da imagem e clicar em COPIAR URL DA IMAGEM.
padding: 15px; /*Numeros altos a fonte desce // Numero baixos ela sobe */
A altura e largura da imagem nao precisa alterar, pois as imagens estao todas personalizadas com 290 px por 45px.
Veja alguns RESULTADOS:
Imagens pronta para usar:
Espero que tenham gostado, curtam e compartilhem.