Si usas Blogger y quieres conocer un poco más sobre el, dejame darte una pequeña introducción sobre cómo funciona tu plantilla XML.
XML Blogger
XML Blogger es un lenguaje de programación que nos permite controlar el aspecto de nuestro blog en Blogger. Fue creado por los ingenieros de Google.
Este lenguaje no está hecho para desarrollares, el equipo de Blogger se encarga de realizar funciones y utilidades para hacer más fácil su trabajo, no el nuestro, ya que ellos son los desarrolladores.
Por esa razón, no existe una documentación oficial. La única persona que tiene acceso al código de Blogger es la experta de Google producto Blogger, soraya creadora de Blogger Code PE.
La información que voy a presentar es extraída de ese blog en conjunto con mi experiencia personal, solo explicaré los conceptos que he aprendido durante todo este tiempo que llevo usando Blogger, prepárate, vamos al lío.
Que es una plantilla XML
Si ya llevas muchos tiempos usado Blogger habrás descargado o comprado una plantilla para Blogger, que es un documento con una extensión xml al final.
Ese documento se encarga de administrar todo nuestro blog, desde el diseño hasta el punto lógico.
Además Blogger no sólo usa expresiones propia, sino que también usa etiquetas html, estilos en cascada css y Javascript para su aspecto y funcionamiento.
A continuación se muestra un ejemplo de una plantilla XML básica:
<!xml version='1.0' encoding='utf8'/>
<!DOCTYPE html>
<html b:defaultwidgetversion='2' b:layoutsVersion='3' b:responsive='true' b:css='false' b:js='true' >
<head>
<!-- title -->
<title><data:view.title/></title>
<!-- all-head-content -->
<b:include data='blog' name='all-head-content' />
<b:skin>
/*! Estilos de Blog */
</b:skin>
</head>
<body>
<!-- Default__Blog -->
<b:section id='Blog1' name='BlogPosts'>
<b:widget type='Blog'>
<b:includable id='main' var='top'>
</b:includable>
</b:widget>
</b:section>
<!-- /Default__Blog -->
</body>
</html>Esta plantilla básica es totalmente funcional, ya que las mayoría de datos que contienen son obligatorio y nunca son remplazado.
Pará qué Blogger considere que este código es una plantilla, necesitamos especificar 2 cosas una etiqueta b:skin y una etiqueta b:section que debe tener un Widget Blog que es donde carga las entradas, comentarios y páginacion.
Cuándo guarde el documento, Blogger nos dará como resultado una plantilla en blanco y cuándo salga de Blogger y vuelva abrí, la plantilla estará llena de códigos, y la razón es porque Blogger cree que estamos usado un tema suyo, de manera que si cambiamos la estructura las plantillas se daña, asi los tiene que dejar.
Respecto a los códigos que hay por defecto, son includable que tiene el Widget por defecto. Ahora vamos a ver un poco de código de Blogger para entender cómo funciona.
La sintaxis
Toda expresión o datos de Blogger comienza por la letra b, ejemplo <b:data.name/>, <b:data.name.name2/>. Blogger maneja los tipos de datos de cualquier lenguaje de programación, por ejemplo:
Tipo de datos
| Datos | Descripcion | Ejemplo |
|---|---|---|
| String | Cadena de caracteres | "Cadena de texto". |
| Number | Numeros | 1,2,3... 19.308 |
| Boolean | Boleanos | true/ false / yes / no |
| Array | Areglos | Amigos = ["alex", "luis", "mike"]; |
| Object | Objectos | Config = {color: blue, size: 12}; |
| Data | Datos | <data:post.title/> |
Nota: si vas a trabajar con Blogger toma el hábito de usar comillas simples en vez de comillas doble, Blogger utiliza muchos comillas simple en toda su etiqueta.
Etiqueta de estilos y diseño.
En blogger puedes agregar estilos para las diferentes parte del blog, puede usar la etiqueta b:skin o usar una etiqueta:
Si vas ultilizar la etiqueta b:skin tienes que aprender a usar las variables:
<Variable name='Main' description='color del makn' type='color' default='#fff' value='#f1f1f1' />
<style type='text/css'>
/* Agregar estilos */
Body{
color: $Main;
}
</style>Para profundizar b:skin - blogger code
Etiqueta de estructura de Blogger
Es importante conocer cuáles son las etiquetas de estructura de Blogger, para encontrar algún elemento y saber que esta pasado.
<b:section> esta etiqueta crea una sección para guardar los Widgets / Gadget de Blogger y contiene varios parámetros:
<b:section id='indetificador' name='namdSection' showaddelement='yes/no' cond='codicion' ads='yes'/>Para profundizar mas b:section - Blogger code
Widgets
<b:widget> esta etiqueta representa y hace referencia a un Widget de Blogger, aquí esta la lista completa de ellos.
- Atribution
- Blog
- BlogSearch
- Header
- Páginas
- Image
- Etiquetas
- Entrada destacada
- Formulario de contacto
- Text
- Popular posts
- HTML
<b:widget type='Text1' title='Atribution'>
<!-- includable -->
</b:widget>Para profundizar mas b:widget - Blogger code
Funciones de blogger
<b:includable> y <b:include> Son etiquetas que almacena un valor como bloques de código que se puede reutilizar, en la etiqueta includable se almacena la información, miestras que la etiqueta include devuelve la salida de datos:
<b:includable name='mytags'>
<!-- Código -->
</b:includable>
<b:include name='mytags'/>Nota: Las etiquetas includable solo están disponible en los Widgets de Blogger. Aunque hay algunos includable globales que se puede ultilizar en toda la plantilla XML, como por ejemplo:
<b:include data='blog' name='google-analytics'/>
<b:include data='blog' name='all-head-content'/>Para profundizar al respecto: includable - blogger code
El resultado de esta etiqueta podría ser el siguiente:
<!-- Ejemplo práctico para las etiquetas de estructura. -->
<footer class='footer'>
<b:section id='footer' name='pie de página'>
<b:widget id='Text1' type='Text1'>
<b:includable id='main'>
<!-- Resto del código -->
</b:includable>
</b:widget>
</b:section>
</footer>El resultado es el siguiente, un la sección que contiene un Widget de texto para los créditos de la página, así de fácil.
Etiquetas de programación.
<b:loops> puedes añadir ciclo en blogger, de forma más sencilla sin tener que programarlo como en otros lenguajes. Este ciclo se usa para extraer datos de un array. Por ejemplo, la etiqueta del blog:
<b:loops values='data:posts.labels' var='label'>
<data:label.name/>
<data:label.url>
</b:loops>Condicionales
<b:if>, <b:else>, <b:elseif> Esta etiqueta controla el flujo de ejecución de un programa( el programa interpreta el código linea por línea, de arriba a abajo), esta condicionales decide si algo se muestra o no.
<b:if cond='true'>
<!-- Muestra el código -->
<b:else/>
<!-- Caso contrario, false -->
</b:if>Blogger contiene un dato capaz de mostrar las diferentes vista del blog, view, ejemplo:
<b:loops values='data:posts' var='post'>
<b:if cond='data:view.isMultipleItems'>
<!-- {{Lista de entradas del blog}} -->
<b:elseif cond='data:view.isPost'/>
<!-- {{Post - Artículo}} -->
<b:if cond='data:view.isPage'/>
<!-- {{Página estática}} -->
</b:if>
</b:loops>Para profudizar mas - b:if b:else - Blogger code
b:switch, b:case y default: La etiqueta b:swich o interuptor, funciona prácticamente igual que if, sin embargo.
<b:swich value='data:view.isHomepage'>
<!-- codigo -->
<b:case value='item' />
<!-- item -->
<default>
<!-- default -->
</b:swich>Conclusión.
Aprender usar este lenguaje te ayudará a entender mejor tu tema y hacer modificaciones a futuro. Esta entrada ha sido gracias a Daniel Abel (zkreationts que me ha brindado bastante información útil sobre Blogger). Espero que haya gustado, si te interesa conocer un poco más sobre Blogger, aquí te dejo la página: bloggercode-blogconnexion.blogspot.com
Feliz día y gracias por pasar. 🙂