Olá, pessoal! Tudo bem?
Hoje eu resolvi trazer para vocês um tutorial super simples, mas que salva vidas. Não sei se posso muito bem chamar de técnica isso que vou compartilhar com vocês hoje. Até hoje não encontrei em nenhum lugar alguém ensinando isso, nem aprendi durante meu curso de Web Designer. Aprendi na marra mesmo, com as tentativas e erros infinitos enquanto personalizava alguns blogs e confesso que uso até hoje.
Sabe quando a gente quer editar uma coisa no nosso layout mas não sabemos em qual parte no código HTML devemos ir e morremos procurando no google mas não encontramos nada? Pois é! Acho que todo mundo já passou por isso pelos menos uma vez na via. Mas calma que eu vou te mostrar como resolver esse probleminha.
Essa dica também ajuda aquelas pessoas que, assim como eu, sempre esquecem qual parte no código HTML precisa ir para fazer tal edição sem precisar perder tempo pesquisando no google ou olhando anotações.
Primeiramente é importante lembrar que antes de fazer qualquer alteração no seu código é indispensável fazer um backup do seu layout pro caso de algo dar errado. Também vale a pena dizer que nem sempre esse método funciona, mas já me salvou 85% das vezes.
Agora chega de blá blá blá e vamos ao que interessa, não é mesmo?!
Para esse tutorial cheguei à conclusão de que usar exemplos seria o modo mais fácil de explicar, então vamos imaginar que você queira mudar a cor do título das postagens.
1. No seu blog coloque o cursor do mouse em cima do título da postagem;
2. Clique com o botão direito;
3. Vá em Inspecionar.
Depois disso abrirá uma janela na parte inferior da sua tela. Agora você vai precisar de um pouquinho de atenção para encontrar o código correto. O ideal é sempre clicar em cima certinho do elemento que você deseja editar, pois já abrirá o código dele na janelinha.
1. Coloque o cursor do mouse em cima do último quadrado que irá aparecer na parte inferior de página, se o elemento que você deseja editar ficar selecionado, você está no código certo;
2. Você ainda pode ir no lado direito desse quadrado e testar em tempo real cores, tamanho, etc.
Você sempre irá se guiar pelo código que aparece quadro no canto direito da tela.
Agora que você já sabe em qual parte do código HTML você pode editar o elemento que deseja, neste caso a cor do título da postagem [.post-wrapper .post-title a:hover] você irá modificar o código HTML de fato.
1. Vá em tema;
2. Editar HTML;
3. Clique dentro do código e depois dê Ctrl+F para abrir a janela de busca;
4. Na janela de busca cole o código encontrado nos passos anteriores e aperte enter;
5. Você será levado a parte exata do código para editar o elemento que deseja.
Agora é só fazer a sua personalização se guiando pelos passos anteriores. Pode parecer muita informação, mas é super simples e, depois que pegar o jeito, se torna super rápido também.
Mudar a cor dos elementos é uma edição super simples que escolhi para usar como exemplo, mas com essa "técnica" já fiz personalizações das mais simples até as mais bicho de sete cabeça. O único segredo é treinar e aos poucos você vai criando seus próprios macetes para diversas formas de personalização.
Mudar a cor dos elementos é uma edição super simples que escolhi para usar como exemplo, mas com essa "técnica" já fiz personalizações das mais simples até as mais bicho de sete cabeça. O único segredo é treinar e aos poucos você vai criando seus próprios macetes para diversas formas de personalização.
Espero que tenham curtido a dica! Caso tenham alguma dúvida podem perguntar aqui nos comentários, ajudarei com o que estiver ao meu alcance. Ah, não esqueçam de me contar se deu certo com vocês também! Beijos!
Tá sabendo que tá rolando promoção aqui no blog? Não? Saca só! Quer concorrer a um layout personalizado? Então se inscreve aqui. Lembrando que o layout é apenas para plataforma blogger!
Oi!!
ResponderExcluirEu não entendo nada destes códigos e sempre acabo ficando perdida. Eu gostei da dica 😀 é otima.
Bjo
Eu até hoje fico perdida em algumas coisas kkkk O negócio é praticar! Espero que a dica te ajude.
ExcluirBeijos
Confesso que também sempre fico perdida com esses códigos, mas vou tentar fazer, você explicou muito bem ...Obrigadaaa ☺☺☺
ResponderExcluirEspero que dê certo! Depois me conta aqui como foi.
ExcluirBeijos
Por esse motivo eu optei pelo site wix, a gente nao mexe com HTML, pq é uma peleja!!!! Mas vc conseguiu explicar muito bom o assunto.
ResponderExcluirRealmente o wix é uma maravilha, só arrastar e tá tudo bonitinho como a gente imaginou.
ExcluirBeijos
Não sou muito boa em código HTML por isso que tento ficar bem afastada dele, mas é importante saber mexer com ele, mas a sua dica é bem vinda, bjs.
ResponderExcluirÉ importante mesmo, Lucimar. Às vezes, por mais que a gente não queira mexer no código, acaba aparecendo a necessidade de fazer algo nele.
ExcluirBeijos
Caracaaaaa eu morri e não sabia disso :o Tô chocada ! Porque já "sofri" tanto tentando saber onde ficava alguns códigos que eu sempre esquecia !! Parabéns pelo post MARAVILHOSO <3
ResponderExcluirFico feliz que tenha ajudado! Fazer isso é uma mão na roda pra achar o que precisamos no código. Economiza muito tempo.
ExcluirBeijos
Olha, mexer com html não é fácil, mas adorei seu tutorial, falou bem de forma simples. Muito bom.
ResponderExcluirObrigada, Ge! Espero que te ajude de alguma forma!
ExcluirBeijos
Esse post é de grande ajuda, sempre tenho dúvidas nesse assunto, eu paguei uma designer para personalizar o meu layout, estou querendo mudar a foto de perfil e não consigo.Amei aprender sobre como mudar a cor do título.Bjs
ResponderExcluirEspero que te ajude de alguma forma quando precisar mexer no código, como nesse caso. Não esquece de fazer backup do layout antes para o caso de algo dar errado.
ExcluirBeijos
Creio que seu post irá ajudar muitas blogueiras, especialmente as menores
ResponderExcluirEspero que ajude sim, Sam! É bem complicado mexer nos códigos quando estamos começando.
ExcluirBeijos
eu vivo mudando algo no meu blog
ResponderExcluiros códigos html são dificeis na primeira olhada, mas depois prestando bastante atenção tá pra dar uma carinha diferente pro blog sem quebrar muito a cabeça.
essa sua dica é ótima
beijos
maisumbeijo.com
Verdade, Bruna! Depois de um tempo a gente acaba se acostumando e entendo o código. Ele acaba fazendo sentido.
ExcluirMuito explicativo!! Tenho muita dificuldade com esses códigos hahah vou usar suas dicas
ResponderExcluirEspero que ajude, Viviane! =)
Excluir