sexta-feira, 19 de agosto de 2011

Saiba como editar seu template facilmente

Template by Cblogger

O cblogger 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.

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.

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é o Editor 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”.

Inspecionar elemento chrome

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.

html e 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;

Botão inspecionar

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

Coluna cbloggerNo 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:

Como acrescentar código
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:

Acrescentar código background e border 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).

Copie a ID da coluna 
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.

Procure a ID

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

Selecione os códigos CSS

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

Cole o código CSS 

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.

Recomendo que leiam também:

Marcadores: , , , , , ,