Saiba como editar seu template facilmente

O Como Criar Um Bom Blog tem como principal objetivo, ajudar você a personalizar seu blog da maneira mais simplificada possível para que todos possam fazer os tutoriais com facilidade. Além de oferecermos tutoriais, também oferece dicas. E nesse artigo darei mais uma de nossas belas dicas de como personalizar seu blog de maneira simples.

Muitos que tentam modificar seus blogs acabam fazendo besteira por não ter conhecimento sobre as linguagens que o template exige, no caso, CSS e HTML. Se você já tem algum conhecimento prévio das linguagens, não terás problema em adquirir esta dica, caso ao contrário recomendo que baixem apostila na internet e comece a estudar em casa gratuitamente.

Mas voltando ao principal objetivo dessa postagem, mostrar como editar seu template de maneira fácil, não será necessário instalar nenhum programa específico no computador, mas sim no navegador. Se você usa o Firefox, terás que baixar uma extensão chamado “Firebug”. O firebug é uma ferramenta de grande utilidade para programadores web,, assim como é de grande utilidade para min criar templates. Com ele podemos identificar erros e editar qualquer site. Sendo assim, ele pode servir para interpretar sua página antes que de você alterar qualquer código no seu HTML original.

• Clique aqui para instalar o firebug no seu navegador

Se você usar o Google Chrome, não será necessário instalar o firebug, apensar de existir uma versão para o Chrome, o navegador dispensa a necessidade dele, pois no próprio Chrome já vem contido uma ferramenta semelhante ao firebug.

• Clique aqui caso queira instalar o firebug no Chrome

Vamos a aula prática pra você ver como funciona a ferramenta e como você pode usar para editar seu template.

Vou usar a própria ferramenta do Google Chrome pra fazer as modificações, mas você pode estar usando o firebug também.

Para começar, temos que deixar uma aba do navegador na página no Editor HTML do seu blog. Sendo assim, abra o seu navegador e na primeira guia entre no blogger, faça o login e vá até oEditor HTML do blog que você quer fazer alterações.

Agora abra outra Guia no seu navegador e entre no seu blog. Deixe seu blog carregar totalmente. Clique em qualquer lugar do seu blog com o botão direito e clique na opção “inspecionar elemento”.

Repare que na parte inferior do seu navegador abriu uma janela, nesta janela são exibidos os códigos do seu blog em duas partes, do lado esquerdo mostra o HTML e do lado direito o CSS.

Vamos usar apenas o CSS que é a parte do estilo e da sua página.

Nesta área podemos alterar toda a parte do designer do elemento inspecionado. Suponha que você queira fazer algumas alterações na coluna, então faremos o seguinte:

Clicamos no botão com o desenho de uma lupa;

Posicionamos o cursor sobre a coluna até ela ficar azul, e damos um clique.

No painel de inspeção, do lado direito, onde editamos o CSS do elemento que acabamos de inspecionar, podemos deletar, modificar e acrescentar códigos. Como exemplo, vamos colocar uma cor de fundo e uma borda interna (background e border). Sendo assim, vamos ter que que acrescentar código. Para acrescentar um novo código, apenas damos dois cliques abaixo do último código da coluna. Veja:

Ao dar dois cliques, digite um código, aperte ENTER, acrescente um valor e aperte ENTER novamente.

Agora coloque os códigos ‘background e border’ e seus respectivos valores de acordo com a imagem abaixo:

Lembrando que a alteração é instantâneo, ou seja, ao acrescentar o código, você já vai ver como vai ficar.

Depois de ter deixado o elemento como você queria, no nosso caso a coluna, você terá que copiar a ID da coluna (CTRL + C).

 
Vá até o HTML do seu blog (na primeira guia), aperte CTRL + F  e em seguida CTRL + V pra colar a ID, o navegador vai pesquisar a ID no seu HTML.

Volte para a segunda guia e copie os códigos CSS da coluna modificada, selecione os códigos e copie (CTRL + C).

Vá no HTML, selecione tudo estiver entre “{  }” (sem aspas)  da ID cole o código apertando
CTRL + V.

 

Visualize, se estiver tudo em ordem, salve!

Pronto, agora faça o mesmo com as próximas modificações que você fizer. Viu como é fácil? Agora você poderá modificar seu template sozinho, apenas entre no seu blog, modifique as partes e instantânea veja como vai ficar, depois é só aplique no HTML do seu blog.

Você usa outra forma para editar seu template? Conte-nos.