Oláááá, tudo bom?? Eu espero que sim, pois eu estou mega maravilhosamente bem. Pois finalmente consegui terminar o layout e estou apaixonada por ele, ficou do jeitinho que eu queria. Algo mais "profissional" porém a minha cara. Me perdoem por tanto rosa, sei que irrita algumas pessoas, mas é a minha cor favorita e eu nunca consigo criar um layout para o blog sem usar essa cor. Enfim... Enquanto estava criando o layout, entrei no jackie dream (Blog que salva minha vida com vários tutoriais legais) e vi que ela usava uma imagem de fundo na parte da data e a data ficava a cima do título do blog. Revirei a internet toda atrás de um tutorial e não encontrei, daí eu pensei "Porque não tentar fazer do jeito que eu imagino que seja feito" e não é que deu certo?! kkkkk E seria meio injusto consegui e não compartilhar com vocês, afinal eu estou aqui para ajudar. Então se você quer saber como eu fiz, segue o tutorial abaixo ♥
Ps. Faça um Backup do seu modelo pois pode acontecer algo e você não vai querer perder todo o seu layout né? Caso queira testar em um blog de testes primeiro, eu aconselho. Lembrando que eu uso o modelo Travel do blog, então não sei se funciona em todos os modelos ok?
Primeiro; Abra o seu blog, clique em modelo e editar HTML.
Segundo; Aperte Ctrl + F e pesquise por; .main-inner h2.date-header {
Deve aparecer o código que está na imagem ( Caso sua data seja personalizada, terá algo abaixo de Color: $(date.text.color); )
Após Color: $(date.text.color); E ate de fechar a chave } cole o seguinte código abaixo;
margin-right: -10px;
background-image:url('LINK DA IMAGEM AQUI'); background-repeat:no-repeat;
Text-align: Center; (Texto no centro, apague se não quiser)
font-size: 11px;
padding: 20px; (Altere para acertar o tamanho da imagem) }
OBS; Caso queira o background apenas com cor, use esse código e pule a parte da criação da imagem
margin-right: -10px;
background: #COR AQUI;
float: rigth;
font-size: 12px;
Text-align: Center;
padding: 20px;}
.main-inner h2.date-header:hover { Fundo em Hover, apague se não quiser)
background: #COR AQUI;
}
OBS; margin-right: -10px; (Altere caso fique para fora da sua area de postagem. Número negativo - Lado direito. Número positivo (Basta remover o -) lado esquerdo.
Criando a imagem de background
Parte 1; Tire um print da tela do seu blog, selecione a area da sua postagem, recorte e salve (Tudo isso no paint)
Parte 2; Abra seu programa de edição (Eu usei o Photoscape), selecione a imagem desejada e faça como mostra a imagem abaixo;
Parte 3; Volte para inicio (Caso esteja usando o photoscape) + Selecione redimensionar e copie a largura e a altura da imagem, salve em um bloco de notas. (Estes números são importantes para o uso na criação da sua imagem)
Parte 4; Selecione um fundo png, coloque a largura e altura que apareceu na imagem anterior e crie sua imagem de acordo com seu gosto. (Lembre-se a data vai aparecer centralizada, então caso queira adicionar algum png por cima coloque nas laterais e não no centro)
Parte5; Após criar a imagem, clique em salvar + Salvar como + Talvez apareça a seguinte mensagem "Você deseja salvar a foto incluindo objetos de fora?" Clique em não + Deixe selecionado em PNG (*.png) e clique em salvar.
Parte 6; Abra a imagem em algum site hospedeiro, eu uso o blogger mesmo. Deixe a imagem em tamanho original, copie o código da imagem. Volte para o modelo do blogger e cole o código onde está sendo indicado no código.
Visualize se está tudo certo e clique em salvar modelo. E o resultado final sera esse!
Imagem criada como exemplo. Podem usar, ela está no tamanho de 582 x 31
.
Que bacana! Adorei a dica. <3
ResponderExcluirwww.kailagarcia.com
Que bom que gostou amore ♥
Excluirótima dica!!! Fica muito bacana!
ResponderExcluirAmei!
Beijos da Nati
oxifalei.blogspot.com.br
Feliz que tenha gostado. Fica mesmo!
ExcluirBeijos ♥