Como editar Template Free - Sweet Magic
Home Blogosfera HTML/CSS Como editar Template Free
Como editar Template Free
Konnichiwa fadinhas & elfos!
Como estão? Eu estou bem e super animada com o blog. Não estranhe esses espaços em branco ou rosa, é que o adsence aprovou o sm faz pouco tempo. Yeeeep! Bem, a postagem de hoje estarei dando umas dicas de como editar layouts prontos, cada um tem um jeitinho diferente de html e alguns códigos comuns que achamos para editar muitas vezes nem existem nesses layouts então temos que verificar de um outro jeitinho. E estarei mostrando como! Espero que ajude!
Vamos lá! Se o layout free que você baixou a pessoa que fez ter usado como base os modelos dados pelo bloguer, você pode tá modificando pelo painel e terá mais possibilidades de você saber onde está cada coisa, basta dar uma pesquisada no google (ex: como personalizar sidebar, mudar cabeçalho), mas existem aqueles que são de sites profissionais, nesse caso o painel é desabilitado e as edições só poderão ser feitas pelo html além disso não são como os padrões do blogger . Ai né, complica , você olha aquele tanto de códigos nos lugares diferentes e ...
Mas calma, não precisa se descabelar! June chegou! haha . Vamos lá! Primeiramente, coloque o layout que escolheu em um blog de testes, caso tenha esquecido : Modelo ➭ Fazer Backup/Restaurar ➭ Escolher Arquivo ➭ seu template baixado ➭ Fazer upload .
(coloque no seu blog oficial apenas quando já tiver pronto)
Vamos começar olhando as imagens do layout, vá em Modelo, Editar Html, Ctrl F e procure por .jpg veja todos e após .png
Todos as imagens em jpg/png irão ser marcadas, selecione o endereço e abra em outra guia do seu navegador. Veja onde que está essa imagem visualizando o layout, se ela é do fundo, do cabeçalho e etc. Se for de um lugar no qual você quer mudar. Anote em um bloco de notas o endereço da imagem e onde está localizado para você modificar depois, ou caso já tenha as imagens editadas e as que você quer,já coloque, mas mesmo assim deixe anotado a localização caso queira modificar depois.
Cores & Outros Elementos
As cores eu achei perfeito olhar por outro lugar, desse jeito também consegue acha várias coisas, como tamanho dos itens, até uma outra maneira de achar imagem também. Bem, caso queira mudar a cor do titulo, o tamanho e etc. Clique com o botão direito do mouse onde quer modificar e escolha Inspecionar:
E irá abrir essas informações ao lado. Veja, como eu inspecionei a parte de postagens populares e já foi selecionado onde está automaticamente. Na primeira parte é um pouco da base de como está no html, por isso mesmo você consegue achar outros elementos é só ir inspecionando e procurando no html do layout.
A parte de baixo, o Styles. É onde fica as personalizações (skins), ou seja, as cores, o tamanho, as sombras e até a fonte. Um detalhe bem legal é que se você clicar encima dos elementos como por exemplo a # da cor, você pode modifica-la por aí mesmo, e assim irá conseguir ver ao mesmo tempo como ficaria. Não modifica definitivamente, só serve para observação mesmo. Apos ver, é só procurar pela cor que estava e muda-la para aquela que você escolheu na parte de Editar HTML. Existe um site muito bom onde oferece a Tabela de Cores >aqui<. (lembrando que, não é somente cores você pode tá modificando outras coisas e podendo ver ao vivo, como ficaria)
E assim você vai visualizando onde é e depois modificando pelo html. No começo pode ser confuso, mas dar para pegar o jeito e é muito importante sempre ir anotando. Você precisará ter uma noção de html para poder editar perfeitamente, mesmo assim deixarei um mini guia para vocês:
#color: cor
#font-size: tamanho da fonte
#font-family: família da fonte (nesse caso, eu uso Nunito, Helvetica, sans-serif) Depende muito se o seu layout suporta certas fontes, e algumas não são reconhecidas. Se você deseja alguma da internet, você deve procurar </head> adicionar o código da fonte dada pelo site acima de </head> e ai sim você poderá colocar o nome da fonte e será reconhecido pelo template.
li a - cor do link, tipo de fonte, tamanho, padding (espaçamento);
li a:hover - cor do link quando clicar
width (tamanho total), height (altura)
#text-transform: transformação de texto (uppercase - texto maiúsculo, suas variações: none: texto normal, capitalize: todas as primeiras letras do texto em maiúsculas, lowercase: todas as letras do texto em minúsculas).
#background: plano de fundo (não apenas do blog como um todo, mas também dos elementos separados).
Por hoje é só! Espero que essa postagem ajude alguém!
Caso esteja faltando algo, ou qualquer duvida só perguntar nos comentários! Até mais!
Como editar Template Free Reviewed by June Damasceno on 01 junho Rating: 5
Koizumi Nana 1 de junho de 2016 18:53
ótima postagem *o*
sempre quis saber como fazer x.x
June Damasceno 2 de junho de 2016 23:22
Ajudei de alguma forma, que bom *-* Obrigadaa! ❤
Taina 2 de junho de 2016 00:28
Isso me lembra quando eu baixei meu primeiro Layout para teste, ah muito mais muito tempo atras, e exatamente por não saber como por o endereço das paginas e afins nele deixei de lado... Com o tempo fui mexendo e passei a entender algumas partes do codigo Html e perder o medo de mexer, e a localizar os # por sorte os templates free que pego sempre tem. A Unica coisa que queria mudar no meu que revirei e não achei foi a cor dos links, que ficar preto, mas bem fica vermelho quando selecionado então não é tão mal assim
bjs [ amei a iniciativa, continue assim]
June Damasceno 2 de junho de 2016 23:29
Entendo, sei como é, no começo é complicado, não sabe onde fica as coisas e talz. Isso vai pegando com o tempo mesmo, chega uma hora que nem vai precisar mais de alguns macetes, já vai entender bastante coisa. Sobre os links é como falei no finalzinho é algo como li a e li hover. Obrigadaa, vc falar isso anima sabia? haha ʕ•̫͡•ʔ bjiinhos
Yunikon 2 de junho de 2016 05:38
Sinceramente acho que isso não ajuda assim tanto, penso que é mais simples apenas aprender os básicos do CSS e do HTML como eu fiz no W3Schools, é muito fácil, qualquer um consegue aprender.
De qualquer forma suponho que esta postagem possa servir de base para um pequeno começo nesta área ^^
June Damasceno 2 de junho de 2016 23:39
Awwn sério? Realmente seria ótimo e melhor a pessoa tentar ir aprender, mas digo em momentos que não tem tempo sabe? Ou quer pelo menos achar onde fica o básico mesmo e já ir mudar no layout baixado. Mas obrigada pela dica. Poderá ser útil para alguns esse site, colocarei no finalzinho do post ok ? Obrigadaa por comentar *-* ❤
Andréa Machado - CEA 9 de dezembro de 2017 11:52
Ajudou MUITO!Seu post é maravilhoso! Sua iniciativa é fantástica! E ainda nos deixa curiosos para sairmos para aprender mais! Nos mostra que não HTML não é bicho de 7 cabeças e nos encoraja a correr atrás e aprender sempre. Obrigada pela ajuda, mas obrigada mais ainda por me mostrar que vale a pena tentar aprender um pouco mais pois a linguagem não absurdamente dificil, como eu pensava.
June Damasceno 11 de dezembro de 2017 23:29
Fico feliz que consegui ajudar! Esse post precisa até de uma atualização, para entender ainda melhor. Que bom que ficou com vontade de aprender mais, realmente não é um bicho de 7 cabeças, editando você vai vendo o que é cada coisa e se praticar facilita muito. Awwn que bom, de nada ♥♥♥ Obrigada por comentar tbm, fico feliz em saber que ajudei! Kissus e tudo de bom ;*
Unknown 14 de julho de 2018 10:52
Bom dia encontrar os elementos foi facil agora me explica como eu configuro o formulário parar enviar os dados para o meu e-mail
os dados do contato
June Damasceno 15 de julho de 2018 18:27
Bom dia! Você adicionou seu ID no formulário de contato? É só colocar que já vai para o seu e-mail (o e-mail que você usou para criar o blog). Já se quer dizer os dados da pessoa que escreveu para você, ela mesma deve colocar o e-mail (que é obrigatório) e então você pode responde-la normalmente.
Espero que seja isso, e tenha ajudado! Kissus
Mrs. Margot 21 de outubro de 2018 00:39
Olá! Nas minhas publicações gostava de poder mudar a cor de algumas palavras, usar fontes diferentes e até tamanhos, mas o layout que tenho não me permite, tem tudo padronizado, quando vou às configurações de design de modelo > avançado, não me aparece opções nenhumas de cor nem nada.
Tem como colocar essas opções de volta?
June Damasceno 24 de outubro de 2018 19:57
Oláa! Então, normalmente layouts personalizados são limitados na parte de modelo. Por isso é melhor que tudo seja editado por HTML mesmo. Como mostrado no próprio post. Vá em uma postagem sua, e identifique a cor padrão, nisso , você copia a # da cor e procura na area de Layout > Editar HTML, quando achar apague essa cor lá. Mesma coisa com as fontes, você precisa achar o nome delas no seu layout (inspecionando) , e editar no html. Caso precise de uma ajuda mais aprofundada me envie o endereço do blog e as alterações que deseja por e-mail! (sweetmagicblog1@gmail.com) Adoraria ajudar! Kissus! <3
Mrs. Margot 24 de outubro de 2018 20:30
Muito obrigado, através dessas dicas fui ver no html, verificar as definições/características do template e descobri o que apagar, por enquanto parece estar a funcionar. �� obrigado ����