Tutorial: Como criar templates para Blogger do zero

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.. .bem, minha voz não é para ser gravada kkkk, então deixo aqui para ser lido! 😀

​

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

<!DOCTYPE html>

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

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

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

• 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

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

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

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

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

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

[COLOR=#ff0000][B]<b:section id="cuepor de entradas">[/B]
[/COLOR][B][COLOR=#0000ff]<b:widget id="blog1" type="blog">[/COLOR][/B]
[B][COLOR=#008000]<b:includable id="main" var="top">
[/COLOR][COLOR=#ffa500]<b:loop values="data:pots" var="post">[/COLOR]
[/B][B][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]

<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 template 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 tags <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

<?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>

mickey3 disse:

Uau, parece muito bom para saber a estrutura fundamental de um blog no Blogger e assim fazer com que as pessoas percam um pouco o medo do código.

Clique para expandir...

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.. .bem, minha voz não é para ser gravada kkkk, 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 pelos 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 necessário como O Corpo de postagens, a sidebar, footer, header, 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][/B]
[B][COLOR=#008000]<b:includable id="main" var="top">
[/COLOR][COLOR=#ffa500]<b:loop values="data:pots" var="post">[/COLOR]
[/B][B][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 se incluam 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 isto no seu modelo de blogger poderão ver o resultado.

CRIAR SEÇÕES PARA GADGETS​

Adiciono isto 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 isto imediatamente poderemos ver em nosso blog a nova seção:

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

<b:section id='nuevos-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 economizar 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 == "item"'>
<title><data:blog.pageName/> | <data:blog.title/></title><b:else/><title><data:blog.pageTitle/></title>
</b:if>
<b:skin>
<=!=[=C=D=A=T=A=[
#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 que não se perderão.

Com certeza muitos estão pensando "MAS O QUE FAZEMOS COM ISSO" ou "ISTO 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 isto me despeço por hoje.. abraços a todos e SORTE EM SEUS PROJETOS!

Este botãozinho é grátis 😛

Clique para expandir...

zProblematico disse:

Excelente tutorial, esta semana o prêmio será seu sem dúvida alguma :drunk:

Clique para expandir...