Tutorial: Como criar templates para Blogger do zero

nxovoix disse:

Olá irmãos BETA mais uma vez começamos com um novo tutorial, no início estava gravando um vídeo sobre isso.. mas minha voz.. .bom, minha voz não é para ser gravada hahaha, então deixo aqui para ser lido! 😀

​

Primeiro explicaremos um pouco o que é a estrutura básica do BLOGGER, começaremos apagando tudo o que temos em nosso editor de modelos HTML.

ESTRUTURA BÁSICA
​

agora declaramos o formato do nosso modelo e a codificação assim:

Inserir CODE, HTML ou PHP:

<?xml version="1.0" encoding="UTF-8" ?>

Isso nos diz que nosso modelo estará baseado em XML em uma linguagem UTF8 por causa dos acentos e outros sinais que nosso idioma possui

Agora declaramos nosso HTML da seguinte forma

Inserir CODE, HTML ou PHP:

<!DOCTYPE html>

continuamos estruturando o esqueleto do nosso blog, isso é feito como se fosse qualquer documento HTML

Inserir CODE, HTML ou PHP:

<html lang="es">
[COLOR=#ff0000]<head>

</head>[/COLOR]
[COLOR=#0000ff]<body>

</body>[/COLOR]
</html>

Breve explicação:

• o HEAD é o cérebro do nosso blog ou página, aqui incluiremos todos os scripts que dominarão o comportamento e as funções do nosso blog.
• o BODY é o corpo e/ou esqueleto do nosso blog, aqui adicionaremos tudo o que for necessário como o Corpo de postagens, a barra lateral, rodapé, cabeçalho, etc

agora adicionaremos o espaço onde incluiremos todos os nossos estilos ao nosso blog, digamos que é onde colocamos a roupa no nosso corpo, para isso adicionaremos as etiquetas <b:skin></b:skin> dentro do nosso HEAD e isso ficaria assim:

Inserir CODE, HTML ou PHP:

<html lang="es">
[COLOR=#ff0000]<head>

[/COLOR][COLOR=#008000]<b:skin>

</b:skin>[/COLOR][COLOR=#ff0000]

</head>[/COLOR]
[COLOR=#0000ff]<body>

</body>[/COLOR]
</html>

Até aqui já temos nossa estrutura feita, agora devemos adicionar as seções que é onde irão todos os Gadgets e Widgets do nosso blog, isso é importante já que sem isso nosso blog não funcionará.

A primeira e a mais importante é o gadget onde aparecerão nossas postagens, para isso adicionamos a seguinte etiqueta:

Inserir CODE, HTML ou PHP:

[COLOR=#ff0000][B]<b:section id="cuepor de entradas">[/B]
[/COLOR][B][COLOR=#0000ff]<b:widget id="blog1" type="blog">[/COLOR]
[COLOR=#008000]<b:includable id="main" var="top">
[/COLOR][COLOR=#ffa500]<b:loop values="data:pots" var="post">[/COLOR]
[COLOR=#696969]<div class="top">
<div class="post-title"><data:post.title/><div>
<div class="post-body"><data:post.body/></div>
<div class="post-footer">Pise de Post</div>
</div>[/COLOR]
[/B][COLOR=#ffa500][B]</b:loop>[/B][/COLOR]
[B][COLOR=#008000]</b:includable>[/COLOR]
[/B][COLOR=#0000ff][B]</b:widget>[/B][/COLOR]
[B][COLOR=#ff0000]</b:section>[/COLOR][/B]

Breve explicação:

• VERMELHO: Isso indica a seção onde se situa o gadget BLOG (o que mostra as postagens)
• AZUL: Este indica que o que está dentro é um Widget que mostra as postagens.
• VERDE: Este permite que sejam incluídos os dados necessários para as postagens
• LARANJA: Esta etiqueta LOOP faz repetir a informação desejada quantas vezes for necessário, neste caso fará repetir a solicitação dos dados dos posts, a mesma quantidade de vezes da quantidade de postagens criadas, ou seja, se temos 50 postagens este repetirá 50 vezes a solicitação e assim mostrará as 50 postagens
• CINZA: isto é o corpo da postagem (estas estão baseadas nas etiquetas DATA)

PARA VER MAIS VARIÁVEIS DATA AQUI DEIXO UM PDF:

VER PDF - CLIQUE AQUI

​

ENTÃO... Nossa estrutura base se veria assim:

HTML:

<html lang="es">
<head>
<bkin>
/*AQUI CSS*/
</bkin>
</head>
<body>
<bection id="cuepor de entradas">
<b:widget id="blog1" type="blog">
<b:includable id="main" var="top">
<b:loop values="data:pots" var="post">
<div class="top">
<div class="post-title"><data:post.title/><div>
<div class="post-body"><data:post.body/></div>
<div class="post-footer">Pise de Post</div>
</div>
</b:loop>
</b:includable>
</b:widget>
</bection>
</body>
</html>

Se colocarem isso no seu modelo de blogger poderão ver o resultado.

CRIAR SEÇÕES PARA GADGETS​

Adiciono isso porque me parece que é muito importante e na época não percebi isso..
Para criar uma nova seção onde possamos colocar nossos Gadgets devemos adicionar este código:

Inserir CODE, HTML ou PHP:

<b:section id='[B][COLOR="#FF0000"]nuevos-gadgets[/COLOR][/B]'/>

VERMELHO: este é o id para poder dar o estilo em CSS a esta

adicionado isso imediatamente poderemos ver em nosso blog a nova seção:

​

nessas etiquetas <b:section> também podemos adicionar algumas configurações desta forma:

<b:section id='novos-gadgets' maxwidgets='1' showaddelement='yes'/>

VERMELHO: Indica o ID que identificará o CSS
AZUL: Este indica a quantidade de widgets que podem ser adicionados a esta seção.
VERDE: Este bloqueia a seção permitindo adicionar mais gadgets ou não

ESTRUTURA COMPLETA

​

Agora mostraremos como é uma estrutura completa, não explicaremos como desenvolvê-la porque se entendeu bem o que está acima... é só questão de acomodar o necessário e dar o CSS para que tudo fique no lugar.

Agora COMO É UMA ESTRUTURA COMPLETA?....
Imaginemos nossa estrutura humana, CABEÇA, CORPO e EXTREMIDADES, bem... desta mesma forma deve ser nossa estrutura:

Para poupar o tempo de muitos deixarei a estrutura que eu uso para criar meus modelos (só devem apagar toda a folha do seu modelo e substituí-la por esta)

HTML:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html 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'>

<head>
<b:include data='blog' name='all-head-content'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<title><data:blog.pageName/> | <data:blog.title/></title><b:else/><title><data:blog.pageTitle/></title>
</b:if>
<b:skin>
<![CDATA[
#contenedor-general {
width:960px; /*Ancho del blog*/
margin:0 auto 0; /*Centramos el contenido*/
padding:0; /*Evitamos espaciados internos*/
}

#cabecera {
margin:0 0 30px 0; /*Márgenes de la cabecera*/
height:100px; /*Alto de la cabecera*/
}

#cuerpo-entradas {
float:left; /*Alineación de las entradas a la izquierda*/
width:650px; /*Ancho de las entradas*/
padding:10px; /*Espaciados internos*/
}

#columna-lateral {
float:right; /*Alineación de la sidebar a la derecha*/
margin:0; /* Sin márgenes */
width:280px; /*Ancho de la sidebar*/
}

#pie-de-pagina {
padding:10px; /*Espaciados internos*/
margin:30px 0 0 0; /*Márgenes*/
}
]]></b:skin>
</head>
<body>  <div id="contenedor-general">
<div id="cabecera">
<b:section id="header" class="header" showaddelement="yes">
<b:widget id="Header1" locked="true" title="Cabecera del blog" type="Header"/>
</b:section>
</div>
<div id="cuerpo-entradas">
<b:section id="main" class="main" showaddelement="yes">
<b:widget id="Blog1" locked="true" title="Entradas del blog" type="Blog"/>
</b:section>
</div>
<div id="columna-lateral">
<b:section id="sidebar" class="sidebar" showaddelement="yes">
<b:widget id="Label1" locked="false" title="Categorías" type="Label"/>
</b:section>
</div>
<div style="clear:both" />
<div id="pie-de-pagina">
<b:section id="footer" class="footer" showaddelement="yes">
</b:section>
</div>
</div></body>
</html>

Como verão tudo está em ESPANHOL, assim não se perderão.

Com certeza muitos estão pensando "MAS O QUE FAZEMOS COM ISSO" ou "ISSO NÃO É NADA"... Vocês acham?.. como já mencionei antes agora tudo fica na sua imaginação e na sua vontade de querer aprender.. aqui deixo alguns links dos sites que eu fiz com esta simples folha de códigos:

• VineScope
• No Tengo Tele!
• GNula Clon
• ¡Cuánto cabrón! La mejor página de memes y viñetas en español

Com isso me despeço por hoje.. abraços a todos e SORTE EM SEUS PROJETOS!

Este botãozinho é grátis 😛

Clique para expandir...