Dominio: mundoblogger.com.br
Chave: 6750f38d68212cb9ffc85aee2a0ef61d0ebf4f04
Hora do cache: 1490554592
Vida do cache: 1490813792
Status: 1
Mensagem: Licença válida
Chave do Pedido: 11808bbc6205bade68f0b70c302eaa74d4305945
Chave do Produto: PROKEY
Scroll Top

Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Criação de Blogs Profissionais e Redes Sociais.

Hospedagem - 728 x 90

Aprendendo CSS e HTML Iniciantes

Os Elementos de Página do Blogger

Ao seguir um tutorial para instalar um recurso, ou fazer alguma personalização no seu blog, com certeza alguns leitores se deparam com determinados termos que, muitas vezes sequer sabem o significado ou sabem onde localiza-los.
Percebi que muitos usuários iniciantes tem dúvidas a respeito da localização de determinados elementos, e muitas vezes não sabem nem o que significam estas expressões. Pensando nisso, eu já publiquei um artigo com algumas explicações básicas sobre os Elementos do Blogger , onde trata a respeito dos Elementos básicos do Blogger e suas variáveis e iniciei a serie de artigos: Aprendendo CSS e HTML.
Neste artigo veremos sobre os Elementos de Página.

O que são Elementos de Página:

Elementos de Página é o corpo do Blog.
Para acessar os elementos de página, devemos clicar no menu “Layoutno painel do Blogger.

Entendendo e conhecendo as seções nos elementos de página

O Layout do Blogger é formado por “Seções e itens”. As seções marcam as áreas da página.
Cada seção (section) é representada pela tag: <b:section>
Cada “section” possui um “ID” especificado que nomeia o elemento da seção( este ID deve ser único) seguida de uma “class“. Em cada seção possui alguns atributos e é através deles que podemos determinar a quantidade de itens permitidos na seção e se permitiremos a inclusão de um “elemento da página” nesta seção.
Você pode adicionar vários elementos de página nas seções (section) existentes no layout do blog clicando em “Adicionar um gadget”

Para melhor entendimento, vejamos um exemplo do código padrão referente a seção do cabeçalho:


<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<--restante do código-->
</b:section>

Desmembrando o código acima:
b:section ? é a tag de abertura da seção.
class=’header’ ? descreve o grupo existente dentro do elemento “cabeçalho”
id=’header‘ ? identifica e especifica o cabeçalho como elemento único.
maxwidgets=’1′ ? determina a quantidade de itens permitido na seção “header”, ou seja, determina a quantidade de gadgets que você poderá incluir dentro da seção do cabeçalho. Neste exemplo, o nº 1 significa que só pode ser incluido um gadget.
showaddelement=’no’ ? o atributo “no” determina que a seção do cabeçalho não permitirá a inclusão ou movimentação de elementos de página. Para que a seção permita incluirmos elementos de página, devemos trocar o “no” por “yes“.

Se no atributo “showaddelement” estiver estipulado o “yes”, significa que você pode organizar os elementos da forma que preferir, basta clicar no elemento que deseja mover e arrastá-lo e soltá-lo onde quiser.
Um exemplo prático: no artigo que eu publiquei ensinando Como instalar widget acima da coluna de postagens , notem que ao localizar a tag referente à seção “main” onde está escrito showaddelement=’no’ eu informo que deve-se trocar por showaddelement=’yes’, justamente para que o blogger passe a aceitar a adição de um gadget acima da coluna de postagens, que neste caso faz parte da seção “main-wrapper”. Se deixar a opção showaddelement=’no’ você não poderá incluir um gadget naquele local.

Os espaços destinados a inserir os elementos nas seções, são chamados de “Gadgets” (Widgets).
Você pode adicionar vários elementos de página, clicando em “Adicionar um gadget”. Abrirá um pop-up para você selecionar e escolher quais elementos devem ser adicionados. Clique em “Adicionar” para colocar cada determinado elemento no seu blog.

Após instalados no elemento de página, os gadgets podem ser movidos para cima, para baixo, para os lados. Você poderá posicioná-lo onde preferir.
De todos os gadgets existentes, o mais usado é o “html/javascript”.
É nesse gadget(ou Widgets) que podemos inserir qualquer código, desde que seja em linguagem html ou em javascript.

Sempre que for inserir um gadget, deverá clicar em “adicionar gadget” no local onde você quer inserí-lo.
Por exemplo: se quer inserir um código javascript e quer que ele apareça na sua coluna sidebar, você deverá clicar em “adicionar gadget” na seção da coluna “sidebar”, escolher a opção “html/javascript” e colar o código lá dentro.

Sempre que você for inserindo novos gadgets (widgets), sempre é bom conferir as alterações, clicando em visualizar, antes de salvar qualquer modificação. Assim, se algo saiu errado, basta você clicar em “limpar modificações” que tudo que não foi salvo, voltará ao estado anterior.

Artigo atualizado em 05/2012.



De um play no vídeo abaixo e aprenda a Criar blogs Profissionais




Gostou deste artigo? Ajude nosso projeto.
Compartilhe em suas redes sociais nos botões abaixo:

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

Sobre o autor | Website

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

15 Comentários

  1. Gláucia Victer disse:

    Olá, pessoal! Adorei conhecer o Mundo Blogger, pois decidi criar meu próprio blog e desde então tenho corrido atrás de informações. Porém,como sou totalmente ignorante no assunto, tenho sentido necessidade de um glossário, digamos assim. A linguagem dos blogs me é completamente estranha – o que é um tutorial, um template e um gadget, por exemplo? Por favor, me ajudem! Existe algum lugar onde posso encontrar as definições básicas e enfim sair do estado de ignorância em que me encontro?

  2. Thabata disse:

    Adorei o seu blog!!! Minhas amigas me pediram muito para montar um blog, porem não sabia como, dei uma olhada no seu blog e adorei…
    O meu blog é sobre novidades da moda e como combinar peças gastando pouco!!! Um beijo

  3. Anônimo disse:

    Muito bom os seus tutoriais desde que criei o meu blog tenho visitado com frequência o seu Site e todas os seus tutorias são muito úteis e da forma que você explica ficar fácil entender sobre os códigos agradeço por dispobinilizar esta biblioteca online de informações muito úteis para blogs, eu gosto de chamar de biblioteca online pois o seu blog pra mim e como o wikipédia, é a referencia de tudo que procuro para o meu blog.

  4. Mery disse:

    Boa tarde,uso o blog com visualização dinâmica,
    vim pedir uma ajuda. Já rodei tuuudo na internet e nãoachei essa resposta.
    Como tirar aquelas malditas faixas/etiqueta com data e hora que vai nos posts?
    já mechi e revirei o html e nada!
    Já té fui excluio e testando tuudo que eu desconfiei ser no código e nada! li muitos tutoriais mas nada disso.
    já até tentei coloca-las da cor no fundo da postagem mas ela tem um efeito de sombra e aparece msm assim e também não vi por ai ensiando trocar o fundo na visualização dinamica.
    Desde já mt obrigada.

  5. Márcia disse:

    Sou leiga em matéria de internet, estou tentando criar um blog e realmente é como você mencionou, se não conhecemos a linguagem dificilmente entenderemos a forma com que orientam no próprio item de AJUDA.
    Você usa uma linguagem ótima com demonstrações de como fazer, tornando tudo mais simples!
    Algo que fiquei horas tentando entender,você elucidou rapidamente!
    OBRIGADA!
    Parabéns!

  6. THG disse:

    o mundoblogger.com.br é responsavel por 95% de tudo que aprendo sobre desenvolvimento blogger na web

    obrigado vanessa continue assim

  7. peço Vanessa como conseguir um tipo de blog que permita uma quantidade de postagens pois no momento o modelo do blog pára na sétima fotoblog

  8. Eliane disse:

    Oi Vanessa não acho onde diz elementos de pagina no blog que estou criando vou em design e layout e não aparece pra mim, sabe me dizer como faço?

  9. Alisson disse:

    Olá,

    Fico grato pelas informações, criei um blog a poucos dias e estou em uma procura intensa por informações, de como fazer um blog de qualidade e útil. Aqui encontrei ótimas informações para quem ainda está aprendendo e tem dificuldades com linguagens HTML.

    Muito grato

  10. web di disse:

    aprendo sempre alguma coisa nova nos seus tutos , mesmo que alguns sejam para iniciantes… “no” e “yes”, “section” foram muito úteis!
    Obrigada por compartilhar conosco :)

  11. Adriana disse:

    Olá.

    Estou querondo colocar uma sub-categoria em meu blog, mais não estou conseguindo.
    Vc sabe me dizer se consigo incluir uma sub-categoria no blogger?

    Agradeço pela atenção.

    Dri

  12. Eduada Alves disse:

    muuuuuuuuuuuuuuuuito obrigada, eu rodei na internet atrás disso e não achei, no final foi uma coisa tão simples que me assustei! kkk

    http://www.blogdduds.blogspot.com

  13. .:: Clau ::. disse:

    Adelson
    Que bom que ajudou! Fico feliz com isso :)
    Obrigada pelo comentário, e volte sempre e sempre viu? 😉
    Abraços 😀

  14. gerenciandoblog.com.br disse:

    Olá, Clau!

    Que ótimo post! Não apenas para os iniciantes. Mesmo eu, que já "bato cabeça" alterando alguns elementos do meu template, encontrei informações preciosas aqui, que com certeza facilitarão minhas futuras tentativas.

    Parabéns!

    Adelson Smania
    Gerenciando Blog

Desculpe, os comentários deste artigo estão desativados.

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.