![[ Ferramentas Blog ]](/wordpress/wp-content/themes/fb5/images/logo.png){kind=logo}
Agora qualquer um consegue criar um template original para o Blogger, mesmo sem saber nada de XML, HTML e CSS, com o novo Designer do Modelo, incorporado a seu painel e totalmente visual. É uma revolução e inovação já que nenhuma outra plataforma de blog ou site tem uma ferramenta tão útil e simples como essa. Mas a dúvida fica quanto à estrutura do código-fonte. Veja o que é mais importante.
A novidade desses modelos de templates e layout do Blogger (Blogspot) vai mais além da funcionalidade que já ensinamos a usar aqui:
Se você quer criar o seu próprio template, totalmente único e exclusivo para seu blog, tem que experimentar essa dica para o Blogger e usar bastante.
Pode parecer um assunto complicado para a maioria, mas a questão é que em alguns casos, precisamos ao menos saber onde achar as partes de nosso blog para fazer pequenos ajustes e adicionar funcionalidades, gadgets e tags. O que vemos de inovador está também no código-fonte, na estrutura do HTML usado que é todo desenvolvido nas novas linguagens chamadas HTML5 e CSS3. Ok! Ainda é um híbrido entre o HTML4 e HTML5.
Não desanime ainda. Um mínimo de HTML e CSS temos que conhecer, nem que seja apenas para achar as coisas certas quando lemos um tutorial aqui ou em outro metablog:
Praticamente não mudaram as linhas de código das partes que vamos mostrar, por isso é importante revisar esse conhecimento.
As partes de seu blog no Código-fonte do Blogger (Blogspot)
Basicamente o que interessa para qualquer blogueiro no Blogger são dois lugares: abaixo do título dos artigos e no rodapé dos artigos. Nesses locais é que colocamos a maior parte dos códigos, resumos, imagens, banners, links e publicidade.
Para ver o código-fonte de seu blog, quando solicitado em algum tutorial ou mesmo para verificar o que vamos mostrar aqui, entre no painel do Blogger, vá ao menu "Layout" ~> "Editar HTML" e clique na opção "Expandir modelos de widgets" para ver o código-fonte por inteiro.
Aí está toda a estrutura de código que faz o seu blog funcionar. Por isso é tão importante, ante de mexer em qualquer coisa, ou usar um blog de testes ou fazer um backup completo de seu blog para evitar sustos na manipulação disso.
1. Abaixo do título dos posts
Basicamente os códigos e lugares ainda são os mesmos. Tudo o que você quiser que apareça abaixo do título de seus artigos, antes do corpo do texto, deve ser colocado imediatamente ACIMA das seguintes linhas:
<div class='post-body entry-content'>
<data:post.body/>
Aqui no [ Ferramentas Blog ] adiciono os botões de compartilhamento e de tempos em tempos algum anúncio. Uso condicionais para que só apareça na página da postagem. vou mostrar as linhas de condicionais no final desse artigo.
É praticamente o lugar mais privilegiado da estrutura de layout de qualquer blog ou site, por ser extremamente visível e tem uma chance bem grande de atrair o leitor para uma ação.
2. No rodapé dos posts
Também é uma área muito importante, pois se o leitor chegou até o final do texto é porque gostou de seu conteúdo e é aí que mora a sua chance de converter esse visitante em um parceiro, assinante de Feed/Newsletter, seguidor e principalmente continuar lendo outros posts.
Então, procure pelas seguintes linhas:
<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'>
Imediatamente ACIMA disso é a base do corpo de seu texto e o que é colocado aí pode até parecer integrado ao conteúdo. É exatamente aí que coloco os links de artigos relacionados, anúncios e ícones de redes-sociais, como pode ver no final de todos os meus postes.
Ainda no rodapé, é comum em alguns blogs que se coloque aí os links de marcadores, quantidade de comentários e até a data da postagem e o nome do autor do artigo. Para que algo fique abaixo dessas partes, há outras 3 linhas que compõem o rodapé, que são elas:
<div class='post-footer-line post-footer-line-1'>
<div class='post-footer-line post-footer-line-2'/>
<div class='post-footer-line post-footer-line-3'/>
A barra "/" que destaquei em vermelho nas linhas de código, podem ou não aparecer. Tudo o que você colocar abaixo, seja de uma ou de outra, comporá o rodapé padrão, bem distinto do corpo do texto. Aí também é possível usar os códigos condicionais para determinar quando certos elementos aparecerão ou não.
Linhas estruturais do Template do Blogger
Ha outras partes importantes no código-fonte de um layout do Blogger (Blogspot) que desempenham papeis básicos e que as vezes é preciso adicionar ou procurar coisas.
As variáveis
/* Variable definitions
====================
...Códigos das variáveis...
*/
Tudo o que ficar entre as linhas destacadas de roxo/lilás são as variáveis que determinam tamanho e cor de fontes, background e outras questões que podem ser modificadas no menu "Designer do Modelo" sem a menor dificuldade e você não precisa nunca mexer nisso.
Lugar do CSS
A estrutura de códigos do CSS ainda está toda acima da seguinte linha:
]]></b:skin>
Acredito que essa seja a parte mais importante de um blog, pois as características do layout estão todas aí. Com o CSS é que se define a aparência de tudo em seu blog (quando o layout é bem feito).
Mas agora nem é preciso mais ir aí para adicionar linhas de CSS em seu template. Isso pode ser feito pelo novo menu de criação, o "Designer do Modelo". Clique em "Avançado" e "Adicionar CSS". Dentro da caixa de texto, cole o que for p
reciso.
O corpo do blog e seu conteúdo
O código HTML funcional de seu blog está todo abaixo dessas linhas:
</head>
<body class='loading'>
Algumas vezes é preciso adicionar etilos (style) e scripts acima desses trechos.
Basicamente essas são as partes mais importantes. Toda atenção é necessária para não modificar nada errado e atrapalhar a estrutura de seu blog, por isso é importante o backup e seguir à risca os tutoriais, quando não se tem muita experiência.
A condicional para aparecer elementos de página
Basicamente é o mesmo código, uma condicional, que determina quando algo deve ou não aparecer. Há vários tipos, mas o mais comum é o que faz os elementos aparecerem apenas quando um artigo é aberto.
<b:if cond='data:blog.pageType == "item"'>
O que deseja que apareça só dentro do post.
</b:if>
O código indicado em azul é a condicional. O que ficar entre essas linhas só vai aparecer quando se entrar no artigo individualmente. Pode ser usado no roda-pé dos artigos ou baixo dos títulos.
Faça seus testes e modificações e aprenda a usar de forma eficiente as partes de seu blog para melhorar e personalizar cada vez mais.
Esse tutorial é uma reescrita do post "Configurando as partes dos Artigos do Blog".
Recomendamos que leia para aprofundar:
Hoje em dia todo blogueiro que quer ter um trabalho mais profissional tem que saber pelo menos o mínimo de HTML.Como o marcos lemos disse, nem que seja só para achar algumas partes em nosso template. Não vou fazer propaganda aqui, mas se você procurar no Google vai achar muitos sites legais que ensinam HTML ou até downloads de apostilas d HTML (legalmente)
Abraço.
o blogger tem que colocar novos modelos a ser editados tipo colunas são poucas as variedade cores etc.
mais esse tutorial ja é bom pra começar a editar temas.
Poxa, cuidado é bom para não revelar as técnicas, senão ficamos sem emprego 😛
Muito útil, pois ajuda entender melhor como o blogger funciona.
Pois demonstra também as variaveis html do blog.
O sol nasce para todos os bons profissionais. Ninguém precisa de ficar com medo de perder emprego! 🙂
Eu mesma, não tenho muita paciência para achar e lidar com código HTML. Acho grego! :)))
Realamente eé preciso saber um pouco de html…quando fiz meu curso Afff..a muito tempo…as coisas ainda eram diferentes…agora estou adorando as novas formas de trabalho…Parabéns pelo post.
Eu leio, releio e não entendo muita coisa de HTML, como disse a Camilli acho grego, as vezes penso que depois dos 60 fica mesmo difícil entender certas coisas!
Mesmo assim não desisto, estou montando o meu blog, um dia chego lá, agora que conhecí o ferramentasblog com certeza, com todas as dicas não é possível!!!
Pingback: Modelo de rodapé para posts no Blogger – Adsense, Artigos relacionados e ícones sociais | [ Ferramentas Blog ]