Blogger- HTML/JavaScript Gadget

La estructura básica de un blog en Blogger se compone de varias partes esenciales que se construyen con HTML, CSS, JavaScript.

Dónde incluir CSS, HTML y JavaScript: https://youtu.be/G9UdwfBDiDo
Agregar código html/javascript a tu blog: https://youtu.be/YVHrWaTS2_U

Blogger utiliza HTML para la estructura básica de sus plantillas: Cualquier instrucción HTML debe ir necesariamente en el BODY de la página.

Encabezado: <header> Contiene el título del blog y la barra de navegación principal.
Contenido Principal: <main> Contiene los artículos del blog.
Barra Lateral: <aside> Contiene widgets y otros elementos adicionales.
Pie de página: <footer> Contiene la información de derechos de autor y enlaces adicionales.

El CSS en Blogger se incluye dentro de la etiqueta <b:skin> y se usa para estilizar el blog. El CSS da formato a una página web (colores, fuentes, alineación, márgenes, etc.). Los sitios dónde podemos incluir este tipo de código son los siguientes:

Entre las etiquetas <b:skin><![CDATA[/* y la de cierre ]]></b:skin>.
Entre los tags <style> y </style>.
En un fichero .css en texto plano con todas las reglas CSS, alojarlo en algún hosting y luego añadirlo a la plantilla cargándolo mediante el tag LINK y la URL correspondiente al fichero. Ejemplo:

<link href="http://loquesea.com/estilo.css" rel="stylesheet" type="text/css"/>


        xml
        
            
        
     
<!-- Theme CSS Style -->
<b:skin> <![CDATA[/*
   /* Aquí va el CSS */
   body { background-color: #f4f4f4; font-family: 'Roboto', sans-serif; }
   header {  background-color: #333;  color: white;  padding: 20px;  text-align: center;}
   main {   margin: 20px; }
   footer {  text-align: center;  padding: 10px;  background-color: #333;  color: white;}
]]></b:skin>

Encuentra la Etiqueta Body y el CSS/Estilos en tu Plantilla de Blogger https://youtu.be/ezTM9Uy9lb8?list=PLqGZ_jX_Rtu_kFdoM0YTbjZR62ub3hczJ Subir, alojar scripts Blogger o estilos CSS en DrobBox https://youtu.be/VtyB2wTeRfI

El código JavaScript funciona en gadgets tipo HTML/JavaScript. Sin embargo siempre es necesario teclearlo (o pegarlo) entre etiquetas <script> y </script> , en la configuración de diseño.


        xml
        
            
        
     
 <script type="text/javascript">
  document.addEventListener('DOMContentLoaded', function() {
    console.log('Blog cargado correctamente');
  });
</script>

También se puede añadir JavaScript, directamente en la plantilla, las opciones son:

En el HEAD: Es decir, lo podemos añadir entre <head> y <b:skin><![CDATA[/* o bien entre ]]></b:skin> y </head>, aunque lo recomendable es hacerlo en la segunda zona.
En el BODY: sin restricciones entre el <body> y </body>
También se puede añadir justo tras el BODY, o sea, entre </body> y </html>.


        xml
        
            
        
     
<script src='http://loquesea.com/codigo.js'></script>
<script src='http://loquesea.com/codigo.js'/>

...

El Blogger Markup Language (BML) utiliza etiquetas XML dentro de HTML. A continuación se muestra la estructura básica de cómo se usan estos elementos en una plantilla de Blogger:


        xml
        
            
        
     
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:css='false' b:defaultwidgetversion='2' b:layoutsVersion='3' b:responsive='true' 
 b:templateVersion='1.0.0' expr:class='data:blog.languageDirection' expr:dir='data:blog.languageDirection'
 expr:lang='data:blog.localeUnderscoreDelimited' 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>
    <meta charset="UTF-8"/>
    <title><data:blog.title/></title>
    <b:include name='theme-head'/>
    <b:include data='blog' name='all-head-content'/>

<!-- Theme CSS Style -->
<b:skin> <![CDATA[/*
   /* Aquí va el CSS */
   body { background-color: #f4f4f4; font-family: 'Roboto', sans-serif; }
   header {  background-color: #333;  color: white;  padding: 20px;  text-align: center;}
   main {   margin: 20px; }
   footer {  text-align: center;  padding: 10px;  background-color: #333;  color: white;}
]]></b:skin>
</head>
  <body>
    <!-- Header del Blog -->
    <header>
      <h1><data:blog.title/></h1>
    </header>

    <!-- Sección de Entradas -->
    <main>
      <b:section id='blog-posts' class='blog-posts' showaddelement='no'>
        <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
          <b:includable id='main'>
            <article>
              <h2><data:post.title/></h2>
              <div class="post-body">
                <data:post.body/>
              </div>
            </article>
          </b:includable>
        </b:widget>
      </b:section>
    </main>

    <!-- Sidebar (Widgets) -->
    <aside>
      <b:section id='sidebar' showaddelement='yes'>
        <b:widget id='Profile1' type='Profile' title='About Me'/>
        <b:widget id='Label1' type='Label' title='Labels'/>
      </b:section>
    </aside>

    <!-- Footer -->
    <footer>
      <p>Desarrollado por <data:blog.title/></p>
    </footer>
  </body>
</html>

Estructura básica BML, en una plantilla de Blogger

El BML utiliza etiquetas XML dentro de HTML. A continuación se muestra la estructura básica de cómo se usan estos elementos en una plantilla de Blogger: (Elementos principales de BML)

<b:include>: Permite incluir otros archivos o plantillas, como hojas de estilo o scripts.

<data:blog>: Accede a la información del blog, como el nombre, la URL, el número de publicaciones, entre otros.


        xml
        
            
        
     
<b:include data='blog' name='all-head-content'/>

Este tag incluye automáticamente el contenido necesario del encabezado, como metadatos y enlaces a recursos externos como CSS o JavaScript.

<b:skin>: Utilizado para definir el CSS de la plantilla. Todo el código CSS va dentro de esta etiqueta.


        html
        
            
        
     
<b:skin><![CDATA[
    /* Aquí va el CSS */
  ]]></b:skin>

El estilo del blog (CSS) va dentro de esta etiqueta. Aquí puedes personalizar cómo se verá tu blog.

<b:section>: Define secciones dentro de tu blog donde se mostrará contenido dinámico, por ejemplo, las publicaciones del blog o una lista de widgets.


        xml
        
            
        
     
<b:section id='search_top' name='Search (Top)' showaddelement='false'>
<b:section class='templateify-panel' id='templateify-panel' maxwidgets='2' name='Theme Options' showaddelement='no'>

<data:blog.title/>: Muestra el título del blog dinámicamente. Similarmente, otras etiquetas como <data:blog.url/> permiten acceder a otros datos del blog.


        xml
        
            
        
     
 <head> <!-- Head -->
<meta expr:content='data:blog.url.canonical' property='og:url'/>
<meta expr:content='data:blog.url.canonical' name='twitter:domain'/>
<title><data:blog.title/></title>
</head>

    <header> <!-- Header -->
      <h1><data:blog.title/></h1>
    </header>
    
    <footer> <!-- Footer -->
      <p>Powered by <data:blog.title/></p>
    </footer>

<data:post.body>: esta etiqueta muestra el contenido del cuerpo de la publicación. Utilizada dentro de la plantilla de cada post, es parte de la estructura dinámica que muestra contenido.


        html
        
            
        
     
<!-- Post Body Entry Content-->
<div class='post-body entry-content' id='post-body'>
  <data:post.body/>
</div>

<b:if> y <b:else>: Controlan la lógica condicional para mostrar u ocultar contenido basado en ciertas condiciones.


        xml
        
            
        
     
<div class='widget-content'>
    <b:if cond='data:content contains &quot;getPosts&quot; and data:widget.sectionId in [&quot;ticker&quot;,&quot;featured&quot;,&quot;content-section-1&quot;,&quot;content-section-2&quot;,&quot;sidebar&quot;,&quot;footer-col-1&quot;,&quot;footer-col-2&quot;,&quot;footer-col-3&quot;]'>
      <b:attr expr:value='data:content' name='data-shortcode'/>
      <b:attr cond='data:widget.sectionId in [&quot;footer-col-1&quot;,&quot;footer-col-2&quot;,&quot;footer-col-3&quot;]' name='data-is' value='footer'/>
      <b:elseif cond='data:title contains &quot;getMailchimp&quot;'/>
      <b:attr expr:value='data:title' name='data-shortcode'/>
      <b:else/>
      <data:content/>
    </b:if>
</div>

<b:loop>: Se usa para recorrer y repetir un conjunto de datos, como las publicaciones recientes o los comentarios de un post.


        xml
        
            
        
     
<!-- Definiendo el contenido pagelist-content -->
<b:includable id='pagelist-content'>
    <b:tag class='widget-content' name='div'>
      <ul class='link-list list-style'>
        <b:loop values='data:links' var='link'>
          <li><a expr:href='data:link.href'><data:link.title/></a></li>
        </b:loop>
      </ul>
    </b:tag>
  </b:includable>
<!-- Esto insertará el contenido definido -->
<b:include name='pagelist-content'/>

<b:widget>: Representa un widget de Blogger que puedes insertar, como etiquetas, archivos o seguidores.


        xml
        
            
        
     
<b:widget id='HTML51' locked='true' title='You might like' type='HTML' visible='false'>
    <b:widget-settings>
        <b:widget-setting name='content'>$results={3}</b:widget-setting>
    </b:widget-settings>
        <b:includable id='main'>
    <b:include name='html-content'/>
</b:includable>
</b:widget>

Blogger no soporta directamente TypeScript, PHP, o MySQL ya que es una plataforma basada en Google que no permite la ejecución de código del lado del servidor. Sin embargo, puedes usar JavaScript y bibliotecas que no requieran un backend personalizado.

Estructura del documento HTML: Tu plantilla debe estar en formato HTML5 con la declaración <!DOCTYPE html>.
Incluir los estilos CSS: Usa la etiqueta <b:skin> para definir los estilos personalizados que aplicarán a tu plantilla.
Añadir secciones dinámicas de Blogger: Usa las etiquetas <b:section> y <b:widget> para definir qué partes de tu blog serán dinámicas y qué contenido mostrará.
Insertar contenido dinámico específico: Usa etiquetas como <data:blog.title/>, <data:blog.url/> y <data:post.body/> para acceder y mostrar información del blog o de las publicaciones.
Incluir widgets o módulos: Usa <b:widget> para incluir widgets predefinidos en Blogger, como entradas populares, archivos del blog, o etiquetas.

Personalizar una plantilla en Blanco de Blogger: Heder y menú de navegación https://youtu.be/MbvJchW7RXs

Personalizar una plantilla en Blanco de Blogger: Carrusel con Card en Blogger https://youtu.be/AJoqOVXhTe8

...

Blogs Webs

Blogger- HTML/JavaScript Gadget

Estructura básica BML, en una plantilla de Blogger

El BML utiliza etiquetas XML dentro de HTML. A continuación se muestra la estructura básica de cómo se usan estos elementos en una plantilla de Blogger: (Elementos principales de BML)

Tags

Categories

Páginas publicadas

Random Posts

Tag Post-list

Popular Posts

Temario: Blog en Blogger

Blogger- Estructura básica de un Blog

Blogger Markup Language (BML)

Menu Footer Widget

Blogs Webs

Blogger- HTML/JavaScript Gadget

1- HTML/JavaScript Gadget

2- HTML en Blogger

3- CSS en Blogger

4- JavaScript en Blogger

5- El Blogger Markup Language (BML)

Estructura básica BML, en una plantilla de Blogger

El BML utiliza etiquetas XML dentro de HTML. A continuación se muestra la estructura básica de cómo se usan estos elementos en una plantilla de Blogger: (Elementos principales de BML)

6- TypeScript, PHP, y MySQL

7- Sintaxis para construir una plantilla en Blogger:

Social Plugin

Tags

Categories

Páginas publicadas

Random Posts

Tag Post-list

Popular Posts

Temario: Blog en Blogger

Blogger- Estructura básica de un Blog

Blogger Markup Language (BML)

Menu Footer Widget