Como criar a estrutura xml do Blogger

2 minuto(s) de leitura

A XML¹ – eXtensible Markup Language – é uma linguagem de marcadores como a HTML e foi desenhada para descrever dados , a sua grande vantagem é que ela é extensível, ou seja, você não esta limitado a um certo número de tags, e pode criar as suas próprias tags, assim sendo ela é uma linguagem auto definível.

A XML não é uma linguagem que veio para substituir a HTML pois XML foi criada com um objetivo diferente da HTML.

Enquanto que a HTML foi criada para exibir dados e ela se preocupa como os dados serão exibidos, a XML foi criada para descrever dados e ela se preocupa com o que os dados são. A HTML está relacionada à como exibir dados, enquanto que a XML está relacionada em como descrever dados.

É fácil criar uma estrutura para o seu modelo, você só precisa de uma estrutura para criar sites usando HTML.

<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'/>
<title>Estrutura do Website</title>
</head>
<body>
<div id='wrapper'>
<header id='header-wrapper'>
</header>
<nav id='navigation'>
<ul>
<li><a href=''>Página Inicial</a></li>
<li><a href=''>Sobre</a></li>
</ul>
</nav>
<div class='clearfix'/>
<section id='outer-wrapper'>
<article id='article-wrapper'>
</article>
</section>
<div class='clearfix'/>
<aside id='sidebar-wrapper'>
</aside>
<div class='clearfix'/>
<footer id='footer-wrapper'>
<footer class='footer-left'>
Copyright &#169; &lt;script&gt;new Date().getFullYear()&gt;2010&amp;&amp;document.write(&quot;&quot;+new Date().getFullYear());&lt;/script&gt; <a href='/' rel='copyright'><data:blog.title/></a>
</footer>
<footer class='footer-right'>
Design por <a href='https://www.silvanaonline.blogspot.com/' target='_blank' title='Blogger'>Blog da Sil</a>
</footer>
</footer>
</div>
</body>
</html>

Mas, o Blogger usa XML para processar. Então, como implementar uma marcação HTML na marcação XML?

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:og='http://ogp.me/ns#'>
<head>
<meta charset='UTF-8'/>
<title><data:blog.title/></title>
</head>
<body>
<div id='wrapper'>
<header id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1'>
<b:widget id='Header1' locked='true' title='Basic Blogger Template (Header)' type='Header'></b:widget>
</b:section>
</header>
<nav id='navigation'>
<ul>
<li><a href=''>Página Inicial</a></li>
<li><a href=''>Sobre</a></li>
</ul>
</nav>
<div class='clearfix'/>
<section id='outer-wrapper'>
<article id='article-wrapper'>
<b:section class='main' id='main'>
<b:widget id='Blog1' locked='true' title='Blog Posting' type='Blog'></b:widget>
</b:section>
</article>
</section>
<div class='clearfix'/>
<aside id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' showaddelement='yes'></b:section>
</aside>
<div class='clearfix'/>
<footer id='footer-wrapper'>
<b:section class='footer' id='footer' showaddelement='yes'/>
<footer class='footer-left'>
Copyright &#169; &lt;script&gt;new Date().getFullYear()&gt;2010&amp;&amp;document.write(&quot;&quot;+new Date().getFullYear());&lt;/script&gt; <a href='/' rel='copyright'><data:blog.title/></a>
</footer>
<footer class='footer-right'>
Design by <a href='https://www.silvanaonline.blogspot.com/' target='_blank' title='Blogger'>Blog da sil</a>
</footer>
</footer>
</div>
</body>
</html>

Como é uma estrutura básica de marcação, precisamos adicionar essa marcação ao Blogger e salvar o modelo. Após isto, o Blogger, irá gerar uma marcação xml fornecida com:

<header id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1'>
<b:widget id='Header1' locked='true' title='Template Básico Blogger (Header)' type='Header'></b:widget>
</b:section>
</header>

<article id='article-wrapper'>
<b:section class='main' id='main'>
<b:widget id='Blog1' locked='true' title='Blog Posting' type='Blog'></b:widget>
</b:section>
</article>

<aside id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' showaddelement='yes'></b:section>
</aside>

<footer id='footer-wrapper'>
<b:section class='footer' id='footer' showaddelement='yes'></b:section>
</footer>

Você não precisa salvar esses modelos porque o Blogger deve ter um design / estilo para salvar com sucesso o modelo. Para o estilo, usamos apenas um estilo CSS básico.

Aqui está o modelo completo.


<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:og='http://ogp.me/ns#'>
<head>
<meta charset='UTF-8'/>
<title><data:blog.title/></title>

<b:skin><![CDATA[

/* Variable definitions
=======================

]]></b:skin>

<style type='text/css'>
/*
-----------------------------------------------
Blogger Template Style
Name         : Basic Blogger Template
Designer     : Sil Campos
Release      : July 2020
Version      : 1.0
License      : MIT
Email        : test@test.com
-----------------------------------------------
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:&#39;&#39;;content:none}table{border-collapse:collapse;border-spacing:0}
</style>

</head>
<body>
<div id='wrapper'>
<header id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1'>
<b:widget id='Header1' locked='true' title='Basic Blogger Template (Header)' type='Header'></b:widget>
</b:section>
</header>
<nav id='navigation'>
<ul>
<li><a href=''>Página Inicial</a></li>
<li><a href=''>Sobre</a></li>
</ul>
</nav>
<div class='clearfix'/>
<section id='outer-wrapper'>
<article id='article-wrapper'>
<b:section class='main' id='main'>
<b:widget id='Blog1' locked='true' title='Blog Posting' type='Blog'></b:widget>
</b:section>
</article>
</section>
<div class='clearfix'/>
<aside id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' showaddelement='yes'></b:section>
</aside>
<div class='clearfix'/>
<footer id='footer-wrapper'>
<footer class='footer-left'>
Copyright &#169; &lt;script&gt;new Date().getFullYear()&gt;2010&amp;&amp;document.write(&quot;&quot;+new Date().getFullYear());&lt;/script&gt; <a href='/' rel='copyright'><data:blog.title/></a>
</footer>
<footer class='footer-right'>
Design by <a href='https://www.silvanaonline.blogspot.com/' target='_blank' title='Blogger'>Blog da Sil</a>
</footer>
</footer>
</div>
</body>
</html>

Neste guia simples e detalhado, desejo que você já entenda como o Blogger gera uma marcação xml.

------

Fonte¹: Macoratti

Como criar a estrutura xml do Blogger

Talvez você goste destas postagens