Hacking Blogger - Programando Etiquetas

Para los curiosos que desean conocer la programación detrás de blogger pueden aplicar diversas etiquetas dentro del formato de blog. Estas etiquetas son formas simples que permiten hacer comandos if condicionales, formatos de expresión así como evaluación de valores.

En los siguientes ejemplos se van a crear componentes que van a trabajar del lado del servidor.

 

El contenido se organiza en Secciones y Widgets

 

Secciones

 <b:section id='header' class='header' maxwidgets="1" showaddelement="no">

</b:section>

• id (obligatorio): Un nombre único compuesto por letras y números solamente.
• class (opcional): Los nombres de clase comunes son "navbar", "header", "main", "sidebar" y "footer". Si cambias el tema más adelante, estos nombres ayudarán a Blogger a determinar cómo transferir tu contenido.
• maxwidgets (opcional): El número máximo de widgets que se permiten en esta sección. Si no especificas un límite, será ilimitado.
• showaddelement (opcional): Puede ser "yes" o "no". El valor predeterminado es "yes". Esto determina si en la pestaña "Elementos de la página" se mostrará el vínculo "Agregar un elemento de página" en esta sección.
• growth (opcional): Puede ser "horizontal" o "vertical". El valor predeterminado es "vertical". Esto determina si los widgets dentro de esta sección se ordenan uno al lado del otro o de forma apilada.

 

Widgets

 

<b:widget id='PageList1' locked='false' title='Páginas' type='PageList'>

 </b:widget>

 

 

• id (obligatorio): Puede contener letras y números únicamente, y cada ID de widget en tu tema debe ser única. Si quieres cambiar la ID de un widget, tienes que borrar ese widget y crear uno nuevo.
• type (obligatorio): Indica el tipo de widget.
• locked (opcional): Puede ser "yes" o "no". El valor predeterminado es "no". Un widget bloqueado (locked) no se puede mover ni borrar de la pestaña "Elementos de página".
• title (opcional): Si no se especifica un título para mostrar, se utilizará un título predeterminado, como "Lista1".
• pageType (opcional): Puede ser "all", "archive", "main" o "item". El valor predeterminado es "all". El widget se mostrará solo en las páginas designadas de tu blog. (Todos los widgets se muestran en la pestaña "Elementos de página", sin importar el pageType).
• mobile (opcional) Puede ser "only", "yes" o "no". El valor predeterminado es "default". Esto determina si el widget se mostrará en dispositivos móviles o no. Si el atributo para dispositivos móviles (mobile) tiene el valor "default", solo se mostrarán las secciones Header, Blog, Profile, PageList, AdSense y Attribution.

Los tipos válidos son

    BlogArchive
    Blog
    Feed
    Header
    HTML
    SingleImage
    LinkList
    List
    Logo
    BlogProfile
    Navbar
    VideoBar
    NewsBar

 

 

Link: 1

 

 

Las expresiones pueden usar simbolos +, -, !=, ==, < >, >=, <= 

 Negación con !

 

<b:if cond='!data:post.allowComments'>

 

Condicional con ? : 

 

 <a expr:class='data:post.allowComments ? "comments" : "no-comments"'

 

Evaluación de arrays

 

<b:if cond='data:blog.pageType in {"index", "archive"}'> 

Condicional con and y or

<b:if cond='data:blog.pageType == "index" and data:post.allowComments'>

Operaciones complejas dentro de etiquetas style usando EXPR

<div expr:style='"max-width: " + (data:width + 10) + "px;"'>

 

Condicionales con IF y ELSE

 

<b:if cond='condition'>
  [content to display if condition is true]
<b:elseif cond='another condition'/>
  [content to display if no previous if or elseif conditions have been true, and this elseif condition is true]
<b:else/>
  [content to display if no if or elseif conditions are met]
</b:if>

 

 

Los Módulos en Blogger

 

Los módulos se escriben con la etiqueta includable  

 

<b:includable id='main' var='thiswidget'>
  [insert whatever content you want here]
</b:includable>

 

Para ejecutar los módulos usar el comando

 

<b:include name='new' /> 

 

* Segun la documentación se puede colocar parametros DATA y COND para pasar parámetros o para condicionar su ejecución.

 

Mostrar valores en la plantilla

 

 Se hace con el comando DATA

<data:title/>

* En esta página tiene la lista de variables disponibles.

 

Llenar valores en las etiquedas de la plantilla

 

El comando EXPR permite convertir valores en etiquetas

<a expr:href='data:blog.homepageUrl'>Home</a>

<a expr:href='data:blog.homepageUrl + "feeds/posts/default"'>Posts RSS</a>

 

<a expr:class='data:post.allowComments ? "comment" : "no-comment">Comment</a>

Aplicar un class condicional

Variables complejas se puede calcular con EVAL

min-height: 

<b:eval expr="data:newWidth * data:height / data:width" />px;

 

<b:eval expr="data:post.labels[0].url" />

URl del primer label de un post

 

<b:eval expr='data:post.allowComments ? "Comment" : "Comments Disabled" />

Devuelve comment o "comments disabled" segun la configuración.

Variables

Tienen el tag b:With para aplicar variables, pero solo están disponible dentro de la etiqueta

<b:with var='style' value='"background-image: url(\"" + data:sourceUrl "\"); "+ " width: " + data:width + "px; " '>
 <div id='header-outer'>   
   <div id='header-inner' expr:style='data:style'>
     <h1>My Header</h1>
   </div>
 </div>
</b:with>

 

Links: 1 2 Tags

Para programar en Blogger, primero necesitas tener una cuenta de Google y crear un blog en la plataforma de Blogger. Una vez que tengas tu blog creado, puedes comenzar a programar utilizando el lenguaje HTML y CSS.

Aquí te presento algunos pasos básicos para programar en Blogger:

1. Accede a tu cuenta de Blogger y ve a la página de edición de tu blog.

2. Haz clic en el botón "Editar plantilla" para acceder al editor de plantillas de Blogger.

3. En el editor de plantillas, verás el código HTML y CSS que controla la apariencia y el diseño de tu blog.

4. Puedes hacer clic en cualquier parte del código para editarlo. También puedes agregar nuevo código HTML y CSS para personalizar el diseño de tu blog.

5. Una vez que hayas realizado los cambios que deseas, haz clic en el botón "Guardar" para guardar tus cambios.

Es importante tener en cuenta que la programación en Blogger requiere conocimientos de HTML y CSS. Si no tienes experiencia previa en estos lenguajes, es posible que tengas que dedicar tiempo a aprender antes de poder programar en Blogger de manera efectiva.

Ejemplos comunes para la presentación de post en un blog
 

<b:if cond='data:post.showBacklinks'>

Verdadero si tiene backlinkds

<b:if cond='data:blog.pageType == "item"'>

Verdadero si la pagina es un post page

<b:if cond='data:displayname != "JUAN"'>

Verdadero si el displayname no es igual a JUAN
    True if this is not Fred's display name.

<b:if data:blog.pageType == "static_page"'>

Verdadero para contenidos de tipo página estática

<b:if cond='data:post.numComments > 1'>

Verdadero si tiene más de un comentario

<b:if cond='data:blog.pageType in {"static_page", "item"}'> OR <b:if cond='{"static_page", "item"} contains data:blog.pageType'>

Verdadero para post o páginas

Estilos en Blogger

Se colocan dentro de la etiqueta <b:skin> </b:skin>donde se pueden crear variables personalizables desde la interface de blogger

 /*
  * Definiciones de las variables:
  *  <Variable name='bgcolor' description='Page Background Color'
      type='color' default='#fff'/>
  */

Tomando ejemplos de internet se tienen estos tipos de variables

/* Color Variable */
<Variable name="VAR1" description="Main color" type="color" default="#0DC143"  value="#0DC143"/>

/* Font Variable */
<Variable name="VAR2" description="Georgia bold size 16" type="font" default="bold 16px Georgia, serif" hideEditor="true"  value="bold 16px Georgia, serif"/>

/* Length Variable */
<Variable name="VAR3" description="Sidebar width" type="length" min="200px" max="350px" default="300px" value="325px"/>

/* Automatic Variable */
<Variable name="VAR4" description="Align element to the right" type="automatic" default="right" hideEditor="true" />

https://support.google.com/blogger/answer/46871?hl=es-419

Link 1