A estrutura de um modelo do Blogger
O tutorial original sobre essa matéria, foi publicado site OurBloggerTtemplates. Fiz resumo para compartilhar com vocês e recomendo que visitem o site, que oferece tradução automática clicando na bandeira no topo da página.
Conhecendo a estrutura básica, você pode facilmente obter idéias de como adaptar aos modelos existentes, um modelo de design, e como transformá-lo em uma estrutura diferente. Veja um exemplo de modelo muito comum:
Entendendo os blocos contentores:
Body : É o corpo de seu modelo (basicamente tudo o que cobre a tela do computador).
Outer-wrapper : Aquí demarcado pela cor cinza, é o espaço que abrange todo o modelo. Dentro dele você constrói blocos menores. Neste exemplo de Outer-wrapper, estão o cabeçalho (header), conteúdo (main, post e sidebar) e rodapé.
Header : Este bloco é o cabeçalho do seu blog e dentro do cabeçalho, você tem outros sub-blocos - Header Title (título), Header Description (descrição), e outros, como os banners do Adsense, uma barra de menu, etc. Então, para conter o header e os sub-blocos cria-se geralmente um Header-wrapper que divide tudo dentro.
Content : é todo o conteúdo abaixo do cabeçalho é o content-wrapper - basicamente o bloco recipiente mais importante de todos. Dentro desse espaço estão os recipientes Sidebar (1,2 ou qualquer número de barras laterais) e no recipiente principal (que contém as suas mensagens, comentários ou alguns anúncios).
Footer : Como na seção de cabeçalho, você também precisará de um footer-wrapper para conter outros sub-blocos na seção de rodapé.
Main : Main-wrapper é o espaço externo na secção principal que vai dentro de content-wrapper. Dentro deste main-wrapper são os blocos de Post, bloco de comentário, Data Cabeçalho e outros widgets criados a partir da opção “Adicionar Gadget” .
Sidebar : é o bloco que contém todos os widgets laterais, ex: About Me, Etiquetas, Arquivo, Texto, HTML, Adsense, etc . Em um modelo padrão do Blogger, você encontrará geralmente só 1 lateral - daí a coluna 2-modelo (principal e Sidebar). Depois de entender a estrutura, é realmente fácil de adicionar outras colunas (sidebars) Há vários tutoriais que ensinam esse procedimento. Os modelos mais comuns tem 2 ou 3-colunas laretrais (como o modelo) .
Blog Post : Este bloco contém as coisas importantes - o seu Posts Títulos, Post, Author Post, rótulos, etc
Uma outra maneira de ver como funciona essa estrutura, é do ponto de vista hierárquico a partir do maior “recipiente”:
Body
Outer-wrapper
Header-wrapper
Blog Title
Blog Description
Outer widgets
Content-wrapper
Sidebar-wrapper (1,2,3...)
Main-wrapper
Date Header
Posts
Post Title
Post Content (o cale Post Body)
Post Footer (Author, Labels, etc)
Comments
Feed Link
Other widgets (mostly ad units)
Footer-wrapper
Footer text (avisos, direitos autorais, etc)
Outras widgets
Depois de compreender essa estrutura básica, será mais fácil aprender sobre os códigos do Blogger.. O surpreendente é que mesmo com pouco conhecimento em programação web, você pode personalizar seu modelo apenas pela compreensão da estrutura básica e algum conhecimento de linguagem HTML e CSS. Procure aprender e não tenha medo de se aventurar! Faça um blog de testes e vá fundo!
O tutorial original sobre essa matéria, foi publicado site OurBloggerTtemplates. Fiz resumo para compartilhar com vocês e recomendo que visitem o site, que oferece tradução automática clicando na bandeira no topo da página.
Conhecendo a estrutura básica, você pode facilmente obter idéias de como adaptar aos modelos existentes, um modelo de design, e como transformá-lo em uma estrutura diferente. Veja um exemplo de modelo muito comum:
Body : É o corpo de seu modelo (basicamente tudo o que cobre a tela do computador).
Outer-wrapper : Aquí demarcado pela cor cinza, é o espaço que abrange todo o modelo. Dentro dele você constrói blocos menores. Neste exemplo de Outer-wrapper, estão o cabeçalho (header), conteúdo (main, post e sidebar) e rodapé.
Header : Este bloco é o cabeçalho do seu blog e dentro do cabeçalho, você tem outros sub-blocos - Header Title (título), Header Description (descrição), e outros, como os banners do Adsense, uma barra de menu, etc. Então, para conter o header e os sub-blocos cria-se geralmente um Header-wrapper que divide tudo dentro.
Content : é todo o conteúdo abaixo do cabeçalho é o content-wrapper - basicamente o bloco recipiente mais importante de todos. Dentro desse espaço estão os recipientes Sidebar (1,2 ou qualquer número de barras laterais) e no recipiente principal (que contém as suas mensagens, comentários ou alguns anúncios).
Footer : Como na seção de cabeçalho, você também precisará de um footer-wrapper para conter outros sub-blocos na seção de rodapé.
Main : Main-wrapper é o espaço externo na secção principal que vai dentro de content-wrapper. Dentro deste main-wrapper são os blocos de Post, bloco de comentário, Data Cabeçalho e outros widgets criados a partir da opção “Adicionar Gadget” .
Sidebar : é o bloco que contém todos os widgets laterais, ex: About Me, Etiquetas, Arquivo, Texto, HTML, Adsense, etc . Em um modelo padrão do Blogger, você encontrará geralmente só 1 lateral - daí a coluna 2-modelo (principal e Sidebar). Depois de entender a estrutura, é realmente fácil de adicionar outras colunas (sidebars) Há vários tutoriais que ensinam esse procedimento. Os modelos mais comuns tem 2 ou 3-colunas laretrais (como o modelo) .
Blog Post : Este bloco contém as coisas importantes - o seu Posts Títulos, Post, Author Post, rótulos, etc
Uma outra maneira de ver como funciona essa estrutura, é do ponto de vista hierárquico a partir do maior “recipiente”:
Body
Outer-wrapper
Header-wrapper
Blog Title
Blog Description
Outer widgets
Content-wrapper
Sidebar-wrapper (1,2,3...)
Main-wrapper
Date Header
Posts
Post Title
Post Content (o cale Post Body)
Post Footer (Author, Labels, etc)
Comments
Feed Link
Other widgets (mostly ad units)
Footer-wrapper
Footer text (avisos, direitos autorais, etc)
Outras widgets
Depois de compreender essa estrutura básica, será mais fácil aprender sobre os códigos do Blogger.. O surpreendente é que mesmo com pouco conhecimento em programação web, você pode personalizar seu modelo apenas pela compreensão da estrutura básica e algum conhecimento de linguagem HTML e CSS. Procure aprender e não tenha medo de se aventurar! Faça um blog de testes e vá fundo!
Postar um comentário