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"/><!-- 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.
<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>.
<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 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>
<data:blog>: Accede a la información del blog, como el nombre, la URL, el número de publicaciones, entre otros.
<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.
<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.
<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.
<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. <!-- 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.
<div class='widget-content'>
<b:if cond='data:content contains "getPosts" and data:widget.sectionId in ["ticker","featured","content-section-1","content-section-2","sidebar","footer-col-1","footer-col-2","footer-col-3"]'>
<b:attr expr:value='data:content' name='data-shortcode'/>
<b:attr cond='data:widget.sectionId in ["footer-col-1","footer-col-2","footer-col-3"]' name='data-is' value='footer'/>
<b:elseif cond='data:title contains "getMailchimp"'/>
<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.<!-- 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.<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>- 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
...