#Hannyensina; Personalize a data do blog (Fundo com background)

| |

23 de julho de 2016

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) 
(Usei o blog da Lauren como exemplo, porque o meu já é personalizado e vocês não entenderiam)  


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




4 comentários:

  1. Que bacana! Adorei a dica. <3

    www.kailagarcia.com

    ResponderExcluir
  2. ótima dica!!! Fica muito bacana!

    Amei!


    Beijos da Nati

    oxifalei.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Feliz que tenha gostado. Fica mesmo!
      Beijos ♥

      Excluir

* Por favor, leia o post antes de comentar e deixe o link do seu blog para que eu possa conhecer o seu cantinho também.

-- Por favor, não faça spam.

Aguns emojis para você usar;

❤️ 💔 😏 😚

* Quer entrar em contato comigo? Me encontre no Facebook Ou no Instagram

| Proibida qualquer cópia total ou parcial do layout ou conteúdo. Copiar não é se inspirar. | @ Conteúdo/Layout produzido por; Lorrany Barbosa.