Este artigo destina-se a pessoas que já têm conhecimentos de HTML e CSS, mas são principiantes na criação de templates para o Blogger.
Como funcionam os templates do Blogger?
Os templates do Blogger são ficheiros XML que incluem a totalidade da definição do layout. Listagens, páginas estáticas, pesquisa, blocos de conteúdo, está tudo lá. Até mesmo o CSS e Javascript estão lá incluídos.
No entanto, também é possível usar o Google Drive para alojar os ficheiros CSS e Javascript.
Embora se coloque no ficheiro de template todo o HTML do site, o ficheiro continua a ser uma definição em XML, e por isso as regras de sintaxe do XML aplicam-se.
A anatomia de um template do Blogger
Se fizer o download de um template e ler o seu código, verá que, embora tenha um cabeçalho XML mesmo no início, o elemento de raiz é a tag html. Aqui dentro encontrará os habituais head e body. Uma forma familiar de começar, as diferenças aparecem a partir deste ponto.
Secção Head
Na secção head encontrará, entre outros elementos, os elementos skin do Blogger (<b:skin><b:template-skin>). Dentro dos elementos skin encontrará todo o CSS do template.
Pode apagar a secção <b:template-skin> e deixar a secção <b:skin> vazia se pretende usar os seus próprios estilos.
<b:skin>
<![CDATA[ /* CSS styles */ ]]>
</b:skin>Se não for usar um ficheiro CSS externo, então coloque todo o seu CSS dentro da secção skin.
Como já mencionamos antes, isto é um ficheiro XML, logo o CSS não será interpretado correctamente. Por isso usa-se o elemento CDATA à volta do código CSS.
Secção Body
Aqui encontrará os elementos principais de um template: section, widget, includable e toda a estrutura HTML.
<b:section class='main' id='main' preferred='yes' showaddelement='no'>
<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'>
<b:includable id='nextprev'>
...
</b:includable>
<b:includable id='main' var='top'>
...
</b:includable>
<b:includable id='status-message'>
...
</b:includable>
<b:includable id='post' var='post'>
...
</b:includable>
</b:widget>
</b:section>O body pode conter HTML, CSS, Javascript e um ou mais elementos section.
The body can have HTML, CSS or JavaScript code and one or more sections.Cada section pode ter apenas um widget e cada widget tem de conter pelo menos um elemento includable (e apenas elementos deste tipo).
Dentro do includable é onde deve introduzir código HTML, CSS os Javascript.
Se for à àrea layout na administração do Blogger, pode ver toda a estrutura das páginas com diferentes secções e widgets. Estes são os mesmos que se encontram no template XML. Se alterar o XML eliminando, editando ou adicionando secções e widgets as alterações serão reflectidas nesta página.
Widgets
Widgets devem ter obrigatóriamente um elemento includable com id=”main”. É neste bloco que a maioria da acção acontece. Um widget pode ter outros includables com ids diferentes, mas estes devem ser chamados explicitamente para que o seu código seja executado:
<b:if cond='data:blog.pageType == "index"'>
<b:include name='nextprev'/>
</b:if>Os includables podem ser vistos como formas de dividir o código em blocos lógicos (uma espécie de funções).
Dentro do includable pode usar o código que necessitar. Em baixo tem um exemplo de um widget de tipo HTML. Mas também é possível alterar o código de outros tipos de widget, desde que o código faça parte to template pode ser alterado.
<b:widget id='HTML1' locked='false' title='Follow Us' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "index"'>
<div id="follow" class="block">
<h2 class="title"><data:title/></h2>
<ul>
<li class="rss">
<a href="#">RSS</a>
</li>
<li class="facebook">
<a href="#">Facebook</a>
</li>
<li class="gplus">
<a href="#">Google+</a>
</li>
</ul>
</div>
</b:if>
</b:includable>
</b:widget>Algo útil que deve saber sobre os widgets é que o seu id deve ser igual ao seu tipo (no exemplo em cima é HTML) seguido de um número. Este número é o elemento diferenciado que vai tornar o id único no template.
Especificar páginas. Condições e ciclos
É possível ter blocos de código condicional dentro do body ou dentro de elementos includable. Desta forma pode especificar diferentes comportamentos para diferentes tipos de páginas (listagens, posts ou páginas estáticas).
Pode especificar uma página de listagem da seguinte forma:
<b:if cond='data:blog.pageType == "index"'>
<!-- do something on a listing page -->
<b:else/>
<!-- do something else on all other pages -->
</b:if>Available values in data:blog.pageType property:
- item
- archive
- index
- static_page
Pode ser ainda mais específico e usar código para uma única pagina dado o seu URL:
<b:if cond='data:blog.url == "http://www.broculos.net/p/tags.html"'>
<!-- Stuff for the tags page -->
</b:if>
Or use Blogger’s data to target the homepage, for example:
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- Stuff for the homepage -->
</b:if>
You can loop through lists of data, like so:
<b:loop values='data:posts' var='post'>
<b:include data='post' name='post'/>
</b:loop>Dados Blogger
Pode ir buscar dados do Blogger usando o elemento <b:data>. Pode usa-lo para ir buscar tags, títulos, datas, URLs, etc. Este elemento é especifico ao seu contexto, por isso se estiver a trabalhar com um post do blog terá acesso a dados diferentes do que quando está a trabalhar com um widget. Consulte a lista extensiva de elementos <b:data> aqui.
Um exemplo de como se pode mostrar todas as tags de um post:
<b:if cond='data:post.labels'>
<ul class="tags">
<b:loop values='data:post.labels' var='label'>
<li>
<a expr:href='data:label.url + "?max-results=5"' rel='tag'><data:label.name/></a>
</li>
</b:loop>
</ul>
</b:if>