Os tutoriais e templates aqui apresentados são voltados para os Modelos de layout (lançados em 2006). A eficácia das dicas aqui apresentadas não foram testadas nos novos modelos de templates do Blogger (2010).

04 dezembro 2008

Firebug encontrando os codigos do seu template


Este blog recebe em média 40 comentários/dia e 90% deles são perguntas ou relatos de dificuldades em localizar um determinado código no template. Alguns desejam fazer modificações mas não percebem exatamente onde devem alterar o código. Por exemplo, alguém me pergunta como retirar um menu ou os paineis do template Clean, mas não sabe que trecho do código corresponde à eles. Para detectar qualquer código da sua (e de outras) páginas, recomendo o Firebug, um complemento do Firefox que eu uso inclusive para converter temas do Wordpress para o Blogger. Após ter instalado o Firebug, acesse a página onde se encontra o código que deseja modificar (se for em seu próprio blog, acesse a página principal e não a página de visualização), clique em Ferramanetas - Firebug - Inspecionar Elemento, como na imagem abaixo:


Veja que uma janela se abriu na parte inferior da tela: do lado direito você verá o código CSS (o que dá estilo à página) e do lado esquerdo o código HTML. Para localizar o código correspondente à um determinado elemento na página, basta colocar o mouse sobre ele (sobre o slide do template Clean, por exemplo) e será mostrado os dois códigos correspondentes:

 
clique para ampliar e ver os detalhes
Veja na imagem que à esquerda já aparece em destaque o inicio do código HTML que corresponde ao slide e à direita o CSS. Você pode localizar qualquer detalhe: código de cor, fonte, largura de uma div, etc, bastando apontar o cursor sobre o elemento.

Esta é uma excelente maneira de conhecer os códigos e entender melhor a estrutura do seu template.

Fica a dica.

Artigos Relacionados

25 comentários:

Bonzu Pipinpadaloxicopolis III disse...

olá
Localizar un código también funciona Ctrl + F

maternajapao disse...

Ótima dica Ariane!
Cada vez que "te visito" gosto mais do seu blog.
Como dizem aqui no Japão: arigato!

Marciano disse...

Ótima dica..muito boa mesmo
Obrigado ;)

Vicky disse...

Adorei seu blog, descobri por um link no blog do Helio Jenné. Quero ler com calma, porque meu negocio é escrever e mal tenho tido tempo pra isso. Mas gosto de uma coisa mais bonitinha e arrumadinha, vai ler legal brincar um pouco mais com as possibilidades e sair do que só está available no Blogger. Voltarei mais vezes com certeza. Um abraco.

Ariane disse...

Bonzu, o Ctrl+F só serve se vc já sabe o q está procurando, caso contrário, é o Firebug q te dá o nome da DIV ou class vc procura.

Wilcomjc disse...

Olá Ariane, vc tem previsão de quando vai postar aquele post (outrora prometido) de: como transformar wordpress em blogspot?

Abração

Ricardo Santos disse...

Uso e recomendo também.

Apenas uma sugestão para outro plugin: Web Developer

https://addons.mozilla.org/pt-PT/firefox/addon/60

Podemos modificar o CSS etc de um site/blogue e ver o resultado em tempo real

Bonzu Pipinpadaloxicopolis III disse...

O claro, ctrl + f cuando ya se sabe lo que está procurando, muy interesnate,

Hola Ariane, me gustan tus diceños de plantillas

Anne disse...

Ótima dica, Ariane ^^
Bom, preciso de uma ajudinha sua: instalei um novo layout no meu blog e gostei muito do resultado (dá uma olhadinha, adoraria sua opinião também).

MAS, estou com um problema: onde está escrito "undefined", logo no canto esquerdo das postagens, deveria estar a data da postagem.
Porque isso está ocorrendo?

Grata desde já!
Grande beijo! ;*

Anne
http://annetakashi.blogspot.com

rafaelcapitao.com disse...

Olá Ariane!

Gostei da dica! já baixei a extensão para o Firefox e estou me acostumando ao poucos com o firebug.

!!! disse...

Oi !

gostaria de te fazer um desafio!

desafio a vc tentar axar algum sistema de login compativel com o blogger?

c vc conseguir isso , namoral, vc e a melhor!

filmespravc.com disse...

Mto obrigado pela dica, seu blog já está nos meus favoritos.

Augusto Mota disse...

Ariane, por tanta ajuda que recebi do seu blog, estou te contemplando com o premio dardos, é só passar no Hippies & Beatniks e pegar. Grande abraço e boa sorte na casa nova.

Metal Ômega disse...

Muito obrigado Ariane, era o que eu precisava :-D

Ariane disse...

maternajapão,Marciano, obrigada!

Vicky, seja bem-vinda e volte sempre! abraços

Wil, na verdade é usando o Firebug...olho o código e vou 'transplantando'. é tão intuitivo que não sei se vai virar mesmo post.

Ricardo, este é sensacional, vou fazer um post sobre ele também.

Anne, não achei seu blog :-(

rafael, vai gostar, com certeza. abraços

!!! não, obrigada :-)

filmespravc, eu é que agradeço

Augusto, agradeço imenso a sua gentileza.

Metal, de nada! Espero que te ajude muito.

BaixeDownloads disse...

Como transforma WordPress em Blogger?

omundodegantes disse...

Como programador eu uso (e recomendo!) o firebug. Com ele é fácil acessar qualquer elemento html do blog, identificar sua id ou class. Também é possível editar no próprio firebug as css e testar os resultados em tempo real...

Parabéns pelo excelente trabalho, Ariane!

Jeferson Lima disse...

Olá Ariane, tudo bem com você ?
O meu assuto não tem a ver com essa postagem, mas eu queria que você e ajudasse a "concertar" o eu blog.
Eu baixei um template e instalei certinho, mas quando eu fui colocar uma image no menu ficou muito estranho, e os links da HEADER quase ficam ocultos porque estão da mesma cor da página, procurei no HTML e não consegui mudar. Você pode me ajudar???
O link do meu blog é:
http://pegadownloadings.blogspot.com

O e-mail é:
pegadownloadings2008@hotmail.com ou
jefersonlima206@yahoo.com

Por favor, me ajude, já tentei de tudo...

jcdigital disse...

Até então não havia descoberto funcionalidade para o Firebug, mas gostei da explicação, e agora vou adotar pra procurar erros no template.

;)

Laura Jardim disse...

Olá, adorei este blog (site)!!! Muito bom! Estou com dificuldades em mexer com o html (ou será "xml"?) do blogspot...
Sempre trabalhei no blogger.com.br e lá não dá problemas!
Parabéns pelo seu trabalho!
Laura Jardim

Moisés disse...

ola fiz uma modificação no meu blog com uma dica que peguei aqui e não me lembro qual era e depois descobri que agora, ou seja , depois da modificação, na proxima pagina ou pagina anterior so aparece os titulos e não as postagens, como faço para desfazer esta modificaçõ, pois muitas outras eu ja fiz depois e não lebro qual que causou isto.
se puderes me passar uma dica,
obrigado.
moisesalba@gmail.com
http://moisesalba.blogspot.com

Natasha Belus disse...

Ual, realmente muito útil. Esse blog foi uma benção que caiu do céu. Quem sabe um dia eu não faça templates tão bonitos quanto esses do TNB

Lee Emovere disse...

Ari... Muito obrigado por tudo. Meu blog tá ficando bom demais graças a tua ajuda. Acredito que esse Firedebug vai desmontar todas as minhas dúvidas. Não sou japonês e não estou no japão, mas... Arigato! ^^

Te adoro,
Leo

Aramak disse...

Olá, gostaria de saber como inserir este sistema de comentarios igual este do seu blog. Muito Obrigado!

Nexo disse...

Muito bom... muito fácil Obrigado !

Postar um comentário

Os comentários são moderados.