Plantilla News --Estructura BLM

Una plantilla es un modelo que se puede utilizar para crear otros documentos.

Top Bar

El Main Top Bar es un elemento de la interfaz de usuario que se coloca en la parte superior de una página web o aplicación. Suele contener elementos de navegación principales como:

Menús de navegación (links a secciones importantes del sitio)
Logo o nombre de la página
Barra de búsqueda
Iconos de redes sociales o enlaces rápidos
Botones de inicio de sesión o registro
Notificaciones o iconos de usuario

  <!-- Main Top Bar -->
 <div id='top-bar'>
    <div class='container row'>
        <b:section class='top-bar-nav' id='top-bar-nav' maxwidgets='1' name='Top Navigation' showaddelement='yes'>
          <b:widget id='LinkList72' locked='true' title='Link List' type='LinkList' version='2' visible='true'>
            <b:widget-settings>
              <b:widget-setting name='link-3'>https://biologiamedica0.wordpress.com/identidad/</b:widget-setting>
              <b:widget-setting name='sorting'>NONE</b:widget-setting>
              <b:widget-setting name='text-1'>🏄&#8205;&#9794;&#65039;-Me</b:widget-setting>
              <b:widget-setting name='link-1'>https://biologiamedica0.wordpress.com/acerca-de/</b:widget-setting>
              <b:widget-setting name='text-0'>🏡-Inicio</b:widget-setting>
              <b:widget-setting name='link-2'>https://biologiamedica0.wordpress.com/contacto/</b:widget-setting>
              <b:widget-setting name='text-3'>👨&#8205;🦱-Identidad</b:widget-setting>
              <b:widget-setting name='link-0'>/</b:widget-setting>
              <b:widget-setting name='text-2'>&#9742;&#65039;-Contacto</b:widget-setting>
            </b:widget-settings>
            <b:includable id='main'>
              <b:include name='content'/>
            </b:includable>
            <b:includable id='content'>
              <div class='widget-content'>
                <ul>
                  <b:loop values='data:links' var='link'>
                    <li><a expr:href='data:link.target'><data:link.name/></a></li>
                  </b:loop>
                </ul>
              </div>
            </b:includable>
          </b:widget>
        </b:section>

      <!-- Top Social -->
        <b:section class='top-bar-social social social-color' id='top-bar-social' maxwidgets='1' name='Social Top' showaddelement='yes'>
          <b:widget id='LinkList73' locked='true' title='Link List' type='LinkList' version='2' visible='true'>
            <b:widget-settings>
              <b:widget-setting name='link-5'>https://t.me/cardiacischemiology</b:widget-setting>
              <b:widget-setting name='link-6'>https://www.tiktok.com/@cardiacischemiology</b:widget-setting>
              <b:widget-setting name='link-3'>https://es.pinterest.com/cardiacischemiology/</b:widget-setting>
              <b:widget-setting name='link-4'>https://github.com/Milton-Rodrig/</b:widget-setting>
              <b:widget-setting name='text-1'>x-twitter</b:widget-setting>
              <b:widget-setting name='text-0'>facebook</b:widget-setting>
              <b:widget-setting name='text-3'>pinterest</b:widget-setting>
              <b:widget-setting name='text-2'>youtube</b:widget-setting>
              <b:widget-setting name='text-5'>telegram</b:widget-setting>
              <b:widget-setting name='text-4'>github</b:widget-setting>
              <b:widget-setting name='text-6'>tiktok</b:widget-setting>
              <b:widget-setting name='sorting'>NONE</b:widget-setting>
              <b:widget-setting name='link-1'>https://twitter.com/MiltonR98079502</b:widget-setting>
              <b:widget-setting name='link-2'>https://www.youtube.com/@cardiacischemiologydr.milt2976</b:widget-setting>
              <b:widget-setting name='link-0'>https://es-la.facebook.com/myfacesocial</b:widget-setting>
            </b:widget-settings>
            <b:includable id='main'>
              <b:include name='content'/>
            </b:includable>
            <b:includable id='content'>
              <div class='widget-content'>
                <ul>
                  <b:loop values='data:links' var='link'>
                    <li expr:class='data:link.name'><a expr:href='data:link.target' expr:title='data:link.name' target='_blank'/></li>
                  </b:loop>
                </ul>
              </div>
            </b:includable>
          </b:widget>
        </b:section>

  <div class='clearfix'/>
    </div>
  </div>

Ticker-posts

Un ticker-posts es una barra deslizante o animada que muestra las publicaciones más recientes del blog o de un sitio web. Se suele utilizar para destacar contenido importante o reciente de una manera visible y dinámica, haciendo que las publicaciones o noticias vayan desplazándose automáticamente, ya sea de izquierda a derecha, de abajo hacia arriba, o de cualquier otra dirección.

<!-- Breaking Wrapper -->
<div id='break-wrapper-outer'>
  <!--   ticker-posts  -->
  <div class='row' id='break-wrapper'>
      <b:section id='break-section' maxwidgets='1' name='News Ticker' showaddelement='yes'>
          <b:widget id='HTML2' locked='false' title='Hot Posts' type='HTML' visible='true'>
              <b:widget-settings>
                  <b:widget-setting name='content'>10/recent/ticker-posts</b:widget-setting>
              </b:widget-settings>
              <b:includable id='main'>
                  <b:include name='widget-title' />
                  <div class='widget-content'>
                      <data:content />
                  </div>
              </b:includable>
          </b:widget>
      </b:section>
  </div>
</div>
<div class='clearfix' />

-------

Main Menu

Menú principal

....

<!-- Header Wrapper -->
<div id="header-wrap">
  <div class="mobile-menu-wrap">
    <div class="mobile-menu" />
  </div>
  <div class="container row">
    <div class="header-logo">
        <!-- Aqui va el codigo del logo -->
    </div>

    <div class="header-menu">
        <!-- Aqui va el Codigo del menu principal -->
    </div>

    <div id="nav-search">
        <!-- Aqui va el codigo del nav-search  -->
    </div>
    <span class="show-search" />
    <span class="mobile-menu-toggle" />
  </div>
</div>

Logo

<div class='header-logo'>
        <b:section class='main-logo' id='main-logo' maxwidgets='1' name='Header Logo' showaddelement='yes'>
          <b:widget id='Header1' locked='true' title='Autoeducación (cabecera)' type='Header' version='2' visible='true'>
            <b:widget-settings>
              <b:widget-setting name='displayUrl'>https://blogger.googleusercontent.com/img/a/AVvXsEi12_asNqz7qeAU-A_XqIb767BcxATvuXCNAx_BYHS_pezm3OxxZTDdelLGho-0BKicoJPv0DvEKW_OTAHqSQSV4ysuJGPCXPTlxpWsMBdUX0oee5Rhz2869Wc5MACm4Lo5spaFNquWRdXyrhC3EQvMolj7LKt6YrZjnDhCVA8DZP3Rof2U8gt0h8L_CFg=s151</b:widget-setting>
              <b:widget-setting name='displayHeight'>151</b:widget-setting>
              <b:widget-setting name='sectionWidth'>150</b:widget-setting>
              <b:widget-setting name='useImage'>true</b:widget-setting>
              <b:widget-setting name='shrinkToFit'>true</b:widget-setting>
              <b:widget-setting name='imagePlacement'>REPLACE</b:widget-setting>
              <b:widget-setting name='displayWidth'>150</b:widget-setting>
            </b:widget-settings>
            <b:includable id='main' var='this'>
      <div class='header-widget'>
        <b:include cond='data:imagePlacement in {&quot;REPLACE&quot;, &quot;BEFORE_DESCRIPTION&quot;}' name='image'/>
        <b:include cond='data:imagePlacement == &quot;BEHIND&quot;' name='title'/>
<b:include cond='not data:view.isSingleItem' name='super.description'/>
      </div>
    </b:includable>
            <b:includable id='behindImageStyle'>
    <b:if cond='data:sourceUrl'>
      <b:include cond='data:this.image' data='{                    image: data:this.image,                    selector: &quot;.header-widget&quot;                  }' name='responsiveImageStyle'/>
      <style type='text/css'>
        .header-widget {
          background-position: <data:blog.locale.languageAlignment/>;
          background-repeat: no-repeat;
        }
      </style>
    </b:if>
  </b:includable>
            <b:includable id='description'>
          <!-- Don't show description on the item page -->
          <b:include cond='not data:view.isSingleItem' name='super.description'/>
        </b:includable>
            <b:includable id='image'>
      <a class='header-image-wrapper' expr:href='data:blog.homepageUrl'>
        <img expr:alt='data:blog.title.escaped' expr:data-height='data:height' expr:data-width='data:width' expr:src='data:image'/>
      </a>
    </b:includable>
            <b:includable id='title'>
    <h1>
      <b:tag cond='data:view.url != data:blog.homepageUrl' expr:href='data:blog.homepageUrl' name='a'>
        <data:title/>
      </b:tag>
    </h1>
  </b:includable>
          </b:widget>
        </b:section>
      </div>

Menú

<div class='header-menu'>
        <b:section class='main-menu' id='main-menu' maxwidgets='1' name='Main Menu' showaddelement='yes'>
          <b:widget id='LinkList74' locked='true' title='menú principal' type='LinkList' version='2' visible='true'>
            <b:widget-settings>
              <b:widget-setting name='text-9'>__📙Cx Gastrointest-2</b:widget-setting>
              <b:widget-setting name='text-8'>__📙Cx Gastrointest-1</b:widget-setting>
              <b:widget-setting name='text-1'>📚 Medicina</b:widget-setting>
              <b:widget-setting name='text-0'>🏡Home</b:widget-setting>
              <b:widget-setting name='text-3'>_📚Cirugia General</b:widget-setting>
              <b:widget-setting name='text-2'>_📕Cx Laparoscopica</b:widget-setting>
              <b:widget-setting name='text-5'>__📙Cx Oncologica</b:widget-setting>
              <b:widget-setting name='text-4'>__📙Cx Metabolica</b:widget-setting>
              <b:widget-setting name='text-7'>__📙Cx Cardiovascular</b:widget-setting>
              <b:widget-setting name='text-6'>__📙Cx de torax</b:widget-setting>
              <b:widget-setting name='text-55'>Mega Menu</b:widget-setting>
              <b:widget-setting name='text-51'>__🗄&#65039; </b:widget-setting>
              <b:widget-setting name='text-52'>_👩&#8205;💻 xx </b:widget-setting>
              <b:widget-setting name='text-53'>_👩&#8205;💻 xx </b:widget-setting>
              <b:widget-setting name='text-54'>_👩&#8205;💻 xx </b:widget-setting>
              <b:widget-setting name='text-50'>__🗄&#65039; Edicion y presentacion </b:widget-setting>
              <b:widget-setting name='shownum'>100</b:widget-setting>
              <b:widget-setting name='link-17'>https://investigacion-biomedica.blogspot.com/</b:widget-setting>
              <b:widget-setting name='link-16'>https://biologiamedica0.wordpress.com/</b:widget-setting>
              <b:widget-setting name='link-19'>#</b:widget-setting>
              <b:widget-setting name='link-18'>#</b:widget-setting>
              <b:widget-setting name='link-1'>https://biologiamedica0.wordpress.com/</b:widget-setting>
              <b:widget-setting name='link-13'># </b:widget-setting>
              <b:widget-setting name='text-48'>__🗄&#65039; Drive </b:widget-setting>
              <b:widget-setting name='link-2'>https://biologiamedica0.wordpress.com/2023/10/20/modulo-cirugia-laparoscopica/</b:widget-setting>
              <b:widget-setting name='link-12'># </b:widget-setting>
              <b:widget-setting name='text-49'>__🗄&#65039; Formularios </b:widget-setting>
              <b:widget-setting name='link-15'># </b:widget-setting>
              <b:widget-setting name='link-0'>/</b:widget-setting>
              <b:widget-setting name='link-14'># </b:widget-setting>
              <b:widget-setting name='text-44'>__📂Power-point </b:widget-setting>
              <b:widget-setting name='text-45'>__📂Excel </b:widget-setting>
              <b:widget-setting name='link-11'># </b:widget-setting>
              <b:widget-setting name='text-46'>__📂Access </b:widget-setting>
              <b:widget-setting name='link-10'># </b:widget-setting>
              <b:widget-setting name='text-47'>_👩&#8205;💻 Goglee Docs </b:widget-setting>
              <b:widget-setting name='link-9'># </b:widget-setting>
              <b:widget-setting name='text-40'>_Comandos-Windows</b:widget-setting>
              <b:widget-setting name='text-41'>📒Informatica</b:widget-setting>
              <b:widget-setting name='link-7'># </b:widget-setting>
              <b:widget-setting name='text-42'>_👩&#8205;💻 Oficina </b:widget-setting>
              <b:widget-setting name='link-8'># </b:widget-setting>
              <b:widget-setting name='text-43'>__📂Word </b:widget-setting>
              <b:widget-setting name='link-5'>
          https://biologiamedica0.wordpress.com/2023/11/16/modulo-cirugia-oncologica/</b:widget-setting>
              <b:widget-setting name='link-6'># </b:widget-setting>
              <b:widget-setting name='link-3'>#</b:widget-setting>
              <b:widget-setting name='link-4'>https://biologiamedica0.wordpress.com/2024/03/29/modulo-cirugia-metabolica/</b:widget-setting>
              <b:widget-setting name='link-28'># </b:widget-setting>
              <b:widget-setting name='link-27'># </b:widget-setting>
              <b:widget-setting name='link-29'># </b:widget-setting>
              <b:widget-setting name='link-24'># </b:widget-setting>
              <b:widget-setting name='text-37'>_Desarrollo-software</b:widget-setting>
              <b:widget-setting name='link-23'># </b:widget-setting>
              <b:widget-setting name='text-38'>_Elect--Mecatrónica </b:widget-setting>
              <b:widget-setting name='link-26'># </b:widget-setting>
              <b:widget-setting name='text-39'>_Herram-programación</b:widget-setting>
              <b:widget-setting name='link-25'>https://bioanalisis-clinico-auto-aprendizaje.blogspot.com/</b:widget-setting>
              <b:widget-setting name='link-20'># </b:widget-setting>
              <b:widget-setting name='text-33'>_Cloud computing</b:widget-setting>
              <b:widget-setting name='text-34'>_Desarrollo Web</b:widget-setting>
              <b:widget-setting name='link-22'># </b:widget-setting>
              <b:widget-setting name='text-35'>_Pasatiempos</b:widget-setting>
              <b:widget-setting name='link-21'># </b:widget-setting>
              <b:widget-setting name='text-36'>_Autoeducación</b:widget-setting>
              <b:widget-setting name='text-30'>📚Mis-blogs</b:widget-setting>
              <b:widget-setting name='text-31'>_Medicina-Cirugia</b:widget-setting>
              <b:widget-setting name='text-32'>_Blogs Webs</b:widget-setting>
              <b:widget-setting name='link-39'>https://miltonherramientasdeprogramacion.blogspot.com/</b:widget-setting>
              <b:widget-setting name='link-38'>https://electronicaymecatronicabasica.blogspot.com/</b:widget-setting>
              <b:widget-setting name='text-26'>_&#10084;&#65039; Cardiologia </b:widget-setting>
              <b:widget-setting name='link-35'>https://miltonpasatiempos.blogspot.com/</b:widget-setting>
              <b:widget-setting name='text-27'>_🚨 Radiologia </b:widget-setting>
              <b:widget-setting name='link-34'>https://desarrolloweb-parte1.blogspot.com/</b:widget-setting>
              <b:widget-setting name='text-28'>_🧰-Instrumental-Qx</b:widget-setting>
              <b:widget-setting name='link-37'>https://fundamentosdeldesarrollodesoftware.blogspot.com/</b:widget-setting>
              <b:widget-setting name='text-29'>_📚-Qx</b:widget-setting>
              <b:widget-setting name='link-36'>https://autoeducaciononline.blogspot.com/</b:widget-setting>
              <b:widget-setting name='text-22'>__📊-Publica-Artículo </b:widget-setting>
              <b:widget-setting name='link-31'>https://www.blogger.com/profile/12668539291580415274</b:widget-setting>
              <b:widget-setting name='text-23'>__📊-Bioestadistica </b:widget-setting>
              <b:widget-setting name='link-30'>https://biologiamedica0.wordpress.com/</b:widget-setting>
              <b:widget-setting name='text-24'>__📊-SPSS</b:widget-setting>
              <b:widget-setting name='link-33'>https://miltondesarrolloweb.blogspot.com/</b:widget-setting>
              <b:widget-setting name='text-25'>_🔬 Laboratorio clinico</b:widget-setting>
              <b:widget-setting name='link-32'>http://blogswebmiltonrodriguez.blogspot.com/ </b:widget-setting>
              <b:widget-setting name='text-20'>__📊-Informe Final </b:widget-setting>
              <b:widget-setting name='link-40'>https://aprendecomandoscmdwindows.blogspot.com/</b:widget-setting>
              <b:widget-setting name='text-21'>__📊-Defensa-Tesis</b:widget-setting>
              <b:widget-setting name='text-19'>__📊-Diseño metodolog </b:widget-setting>
              <b:widget-setting name='link-49'>#</b:widget-setting>
              <b:widget-setting name='text-15'>__📙Cx Urologia-Transplante</b:widget-setting>
              <b:widget-setting name='link-46'>#</b:widget-setting>
              <b:widget-setting name='text-16'>_📗 BiologiaMedica</b:widget-setting>
              <b:widget-setting name='link-45'>#</b:widget-setting>
              <b:widget-setting name='text-17'>_📊 Investigación BM</b:widget-setting>
              <b:widget-setting name='link-48'>#</b:widget-setting>
              <b:widget-setting name='text-18'>__📊-Protocolo-Investig </b:widget-setting>
              <b:widget-setting name='link-47'>#</b:widget-setting>
              <b:widget-setting name='text-11'>__📙Cx Trauma 2</b:widget-setting>
              <b:widget-setting name='link-42'>#</b:widget-setting>
              <b:widget-setting name='text-12'>__📙Cx Hepatobiliar</b:widget-setting>
              <b:widget-setting name='link-41'>#</b:widget-setting>
              <b:widget-setting name='text-13'>__📙Cx de Hernias</b:widget-setting>
              <b:widget-setting name='link-44'>#</b:widget-setting>
              <b:widget-setting name='text-14'>__📙Cx Cabeza-Cuello</b:widget-setting>
              <b:widget-setting name='link-43'>#</b:widget-setting>
              <b:widget-setting name='link-51'>#</b:widget-setting>
              <b:widget-setting name='text-10'>__📙Cx Trauma 1</b:widget-setting>
              <b:widget-setting name='link-50'>#</b:widget-setting>
              <b:widget-setting name='sorting'>NONE</b:widget-setting>
              <b:widget-setting name='link-53'>#</b:widget-setting>
              <b:widget-setting name='link-52'>#</b:widget-setting>
              <b:widget-setting name='link-55'>random/mega-menu</b:widget-setting>
              <b:widget-setting name='link-54'>#</b:widget-setting>
            </b:widget-settings>
            <b:includable id='main'>
              <b:include name='content'/>
            </b:includable>
            <b:includable id='content'>
              <ul id='main-menu-nav' role='menubar'>
                <b:loop values='data:links' var='link'>
                  <li><a expr:href='data:link.target' role='menuitem'><data:link.name/></a></li>
                </b:loop>
              </ul>
            </b:includable>
          </b:widget>
        </b:section>
      </div>

Búsqueda

<div id='nav-search'>
        <form class='search-form' expr:action='data:blog.searchUrl' role='search'>
          <input autocomplete='off' class='search-input' expr:placeholder='data:messages.searchThisBlog' name='q' type='search' value=''/>
          <span class='hide-search'/>
        </form>
      </div>
      <span class='show-search'/>
      <span class='mobile-menu-toggle'/>
    </div>

Carrusel de imágenes o contenido

<b:if cond="data:view.isHomepage">
    <!-- Slider Wrapper -->
    <div id="slider-wrapper-outer">
        <div class="row shrink-wrapper" id="slider-wrapper">
            <b:section class="section" id="slider-section" maxwidgets="1" name="Main Slider" showaddelement="yes">
                <b:widget id="HTML29" locked="false" title="Subscribe Us" type="HTML" visible="true">
                    <b:widget-settings>
                        <b:widget-setting name="content">7/recent/slider</b:widget-setting>
                    </b:widget-settings>
                    <b:includable id="main">
                        <b:include name="widget-title" />
                        <div class="widget-content">
                            <data:content />
                        </div>
                    </b:includable>
                </b:widget>
            </b:section>
        </div>
    </div>
</b:if>
<div class="clearfix" />

Post Destacados

<!-- Featured Wrapper -->
<b:if cond="data:view.isHomepage">
    <div id="hot-wrapper">
        <b:section class="section" id="hot-section" maxwidgets="1" name="Hot Posts" showaddelement="yes">
            <b:widget id="HTML7" locked="false" title="Destacados" type="HTML" visible="true">
                <b:widget-settings>
                    <b:widget-setting name="content">recent/hot-posts</b:widget-setting>
                </b:widget-settings>
                <b:includable id="main">
                    <b:include name="widget-title" />
                    <div class="widget-content">
                        <data:content />
                    </div>
                </b:includable>
            </b:widget>
        </b:section>
    </div>
    <div class="clearfix" />
</b:if>

Encabezado

 Aquí va el código a mostrar

Widget: Columna Izquierda

<b:widget id="HTML8" locked="false" title="Informática" type="HTML" visible="true">
  <b:widget-settings>
      <b:widget-setting name="content">3/Informática/col-left</b:widget-setting>
  </b:widget-settings>
  <b:includable id="main">
      <b:include name="widget-title" />
      <div class="widget-content">
          <data:content />
      </div>
  </b:includable>
</b:widget>

Widget: Columna derecha

<b:widget id='HTML9' locked='false' title='Educatición' type='HTML' visible='true'></b:widget>
<b:widget-settings>
    <b:widget-setting name='content'>3/Cursos educativos/col-right</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
    <b:include name='widget-title' />
    <div class='widget-content'>
        <data:content />
    </div>
</b:includable>
</b:widget>

Widget: "feat-big"

<b:widget id="HTML65" locked="false" title="Business" type="HTML" visible="true">
    <b:widget-settings>
        <b:widget-setting name="content">Marketing/feat-big</b:widget-setting>
    </b:widget-settings>
    <b:includable id="main">
        <b:include name="widget-title" />
        <div class="widget-content">
            <data:content />
        </div>
    </b:includable>
</b:widget>

Widget: grid-small

<b:widget id="HTML13" locked="false" title="Desarrollo web" type="HTML" visible="true">
    <b:widget-settings>
        <b:widget-setting name="content">3/Desarrollo web/grid-small</b:widget-setting>
    </b:widget-settings>
    <b:includable id="main">
        <b:include name="widget-title" />
        <div class="widget-content">
            <data:content />
        </div>
    </b:includable>
</b:widget>

Widget: "Mini Carousel"

<b:widget id="HTML15" locked="false" title="Mini Carousel" type="HTML" visible="true">
    <b:widget-settings>
        <b:widget-setting name="content">5/Informática/mini-slide</b:widget-setting>
    </b:widget-settings>
    <b:includable id="main">
        <b:include name="widget-title" />
        <div class="widget-content">
            <data:content />
        </div>
    </b:includable>
</b:widget>

Widget de entradas del blog

<b:section class='main' id='main' maxwidgets='1' name='Main Posts' showaddelement='yes'>
          <b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog' version='2' visible='true'>
            <b:widget-settings>
              <b:widget-setting name='commentLabel'>Comments</b:widget-setting>
              <b:widget-setting name='showShareButtons'>true</b:widget-setting>
              <b:widget-setting name='authorLabel'>by</b:widget-setting>
              <b:widget-setting name='style.unittype'>TextAndImage</b:widget-setting>
              <b:widget-setting name='timestampLabel'/>
              <b:widget-setting name='reactionsLabel'/>
              <b:widget-setting name='showAuthorProfile'>true</b:widget-setting>
              <b:widget-setting name='style.layout'>1x1</b:widget-setting>
              <b:widget-setting name='showLocation'>false</b:widget-setting>
              <b:widget-setting name='showTimestamp'>false</b:widget-setting>
              <b:widget-setting name='postsPerAd'>1</b:widget-setting>
              <b:widget-setting name='style.bordercolor'>#ffffff</b:widget-setting>
              <b:widget-setting name='showDateHeader'>false</b:widget-setting>
              <b:widget-setting name='style.textcolor'>#ffffff</b:widget-setting>
              <b:widget-setting name='showCommentLink'>false</b:widget-setting>
              <b:widget-setting name='style.urlcolor'>#ffffff</b:widget-setting>
              <b:widget-setting name='postLocationLabel'>Location:</b:widget-setting>
              <b:widget-setting name='showAuthor'>true</b:widget-setting>
              <b:widget-setting name='style.linkcolor'>#ffffff</b:widget-setting>
              <b:widget-setting name='style.bgcolor'>#ffffff</b:widget-setting>
              <b:widget-setting name='showLabels'>true</b:widget-setting>
              <b:widget-setting name='postLabelsLabel'>Tags</b:widget-setting>
              <b:widget-setting name='showBacklinks'>false</b:widget-setting>
              <b:widget-setting name='showInlineAds'>false</b:widget-setting>
              <b:widget-setting name='showReactions'>false</b:widget-setting>
            </b:widget-settings>
            <b:includable id='main' var='this'>
<b:include name='homePostsHeadline'/>
              <b:include name='searchMessage'/>
              <div class='blog-posts hfeed container'>
                <b:class cond='data:view.isMultipleItems' name='index-post-wrap'/>
                <b:class cond='data:view.isSingleItem' name='item-post-wrap'/>
                <b:tag class='grid-posts' cond='data:view.isMultipleItems' name='div'>
                  <b:loop index='i' values='data:posts' var='post'>
                    <b:include data='post' name='postCommentsAndAd'/>
                  </b:loop>
                </b:tag>
              </div>
              <b:include cond='data:view.isMultipleItems' name='indexBlogPager'/>
              <b:include name='feedLinks'/>
<b:include name='messagesJs'/>
            </b:includable>

Este código en Blogger crea un widget de entradas del blog dentro de una sección, que muestra las publicaciones principales en una página. A continuación, te explico los componentes clave:

<b:section class='main' id='main' ...>
- Define una sección de Blogger donde se colocarán los widgets.
- id='main': Identificador único de esta sección.
- maxwidgets='1': Permite un máximo de un widget en esta sección.
- name='Main Posts': Nombre de la sección para identificarla en el panel de diseño de Blogger.
- showaddelement='yes': Permite agregar widgets desde el panel de administración de Blogger.
<b:widget id='Blog1' ...>
- Crea un widget de entradas del blog. Este es el widget predeterminado en Blogger para mostrar publicaciones.
- id='Blog1': Identificador del widget.
- locked='true': Indica que este widget está bloqueado para edición desde el panel de Blogger.
- title='Entradas del blog': Título del widget que aparecerá en la página.
- type='Blog': El tipo de widget es "Blog", lo que significa que mostrará entradas.
- version='2': Versión del widget que permite nuevas características.
<b:widget-settings>
- Contiene las configuraciones del widget. Las configuraciones ajustan cómo se muestran las entradas:
  - commentLabel: Texto para los comentarios, en este caso, "Comments".
  - showShareButtons: true permite mostrar botones de compartir en redes sociales.
  - authorLabel: Muestra el autor de las publicaciones con la etiqueta "by".
  - style.unittype: Configura el estilo de presentación como "TextAndImage" (texto con imagen).
  - showAuthorProfile: true muestra el perfil del autor.
  - style.layout: Define el layout como "1x1", una sola columna.
  - Otras configuraciones personalizan colores, etiquetas, visibilidad de elementos como fecha, etiquetas, enlaces de comentarios, etc.
<b:includable id='main'>
- Define la plantilla que se reutiliza para mostrar las entradas.
<b:include name='homePostsHeadline'/>
- Inserta el título de las publicaciones en la página principal.
<b:include name='searchMessage'/>
- Inserta un mensaje para la búsqueda, si es necesario.
<div class='blog-posts hfeed container'>
- Contenedor para las publicaciones del blog.
<b:loop index='i' values='data:posts' var='post'>
- Ciclo que recorre las publicaciones (data:posts) y muestra cada una.
- <b:include data='post' name='postCommentsAndAd'/>: Incluye los comentarios y la publicidad en las publicaciones.
<b:include cond='data:view.isMultipleItems' name='indexBlogPager'/>
- Inserta un paginador si hay múltiples publicaciones.
<b:include name='feedLinks'/>
- Inserta enlaces al feed RSS.
<b:include name='messagesJs'/>
- Inserta un script JavaScript necesario para mostrar los mensajes de Blogger.

¿Cómo reutilizarlo en otro blog de Blogger?

Copia el código completo y pégalo en la sección de HTML de la plantilla de tu blog de Blogger.
Verifica la estructura de tu plantilla:
- Asegúrate de que tu plantilla tenga una estructura compatible con secciones (<b:section>) y widgets (<b:widget>).
Personalización:
- Si deseas cambiar el título del widget, edita el atributo title='Entradas del blog'.
- Personaliza el número de publicaciones mostradas, el estilo y la disposición de los elementos (colores, etiquetas, botones de compartir) mediante los ajustes en <b:widget-settings>.
Configuración visual:
- Asegúrate de que tu plantilla tenga CSS adecuado para el diseño del blog y las publicaciones.
Ajustes adicionales:
- Si quieres mostrar las publicaciones en varias páginas o cambiar la forma en que se organizan (paginador, layout), puedes modificar los valores dentro de <b:widget-settings>.

Este código es totalmente reutilizable en cualquier blog de Blogger, siempre que la estructura básica de la plantilla soporte widgets y secciones.

Información sobre el autor, comentarios, backlinks

<b:includable id='aboutPostAuthor'>
              <div class='about-author'>
                <div class='avatar-container'>
                  <b:if cond='data:post.author.authorPhoto.image'>
                    <img class='author-avatar' expr:alt='data:post.author.name' expr:src='data:post.author.authorPhoto.image resizeImage 100'/>
                    <b:else/>
                    <img class='author-avatar' expr:alt='data:post.author.name' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjKCHyhwqgDuixaKxcLPPXBGYLZ-LIpGYo_T0jUacMOXN2toQTc9GBLOLJk4kZJUPiS_XDWKlAuQCN-D_54j4vc-UIzboSbKdWAJcyJRGotsJUzrWl1-8_mqV8PxM0aYuH9TTSqyTfxRSM/s100/avatar.png'/>
                  </b:if>
                </div>
                <h3 class='author-name'>
                  <span><data:messages.postedBy/></span><a expr:alt='data:post.author.name' expr:href='data:post.author.profileUrl' target='_blank'> <data:post.author.name/></a>
                </h3>
                <span class='author-description'><data:post.author.aboutMe/></span>
              </div>
            </b:includable>
            <b:includable id='addComments'>
              <a expr:href='data:post.commentsUrl' expr:onclick='data:post.commentsUrlOnclick'>
                <b:message name='messages.postAComment'/>
              </a>
            </b:includable>
            <b:includable id='backLinks' var='post'>
              <b:comment>Disabled</b:comment>
            </b:includable>
            <b:includable id='blogThisShare'>
  <b:with value='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=270,width=475\&quot;); return false;&quot;' var='onclick'>
    <b:include name='platformShare'/>
  </b:with>
</b:includable>

Este fragmento de código en Blogger está diseñado para mostrar información sobre el autor de la publicación, agregar un enlace a los comentarios, desactivar retroenlaces (backlinks), y compartir la publicación en redes sociales. Explicaré cada parte de forma precisa:

<b:includable id='aboutPostAuthor'>
- Este bloque crea un componente reutilizable con el ID aboutPostAuthor, que se refiere a la sección de información sobre el autor del post.
<div class='about-author'>
- Un contenedor que agrupa la información del autor del post.
Foto del autor:
- <b:if cond='data:post.author.authorPhoto.image'>: Si el autor tiene una foto asociada, se muestra con la etiqueta <img>.
- expr:src='data:post.author.authorPhoto.image resizeImage 100': Muestra la imagen del autor y la redimensiona a 100px.
- <b:else/>: Si no hay imagen del autor, muestra una imagen predeterminada (avatar.png).
Nombre del autor:
- <h3 class='author-name'>: Muestra el nombre del autor con un enlace a su perfil.
- <a expr:href='data:post.author.profileUrl' target='_blank'>: El nombre del autor enlaza a su perfil, abriendo en una nueva pestaña.
Descripción del autor:
- <span class='author-description'><data:post.author.aboutMe/></span>: Muestra una breve descripción del autor si está disponible en su perfil.

<b:includable id='addComments'>
- Componente que muestra un enlace a la sección de comentarios.
- <a expr:href='data:post.commentsUrl'>: Crea un enlace dinámico que apunta a la URL de los comentarios del post.

<b:includable id='backLinks'>
- Sección para los backlinks (retroenlaces) de la publicación.
- <b:comment>Disabled</b:comment>: Actualmente está desactivado con un comentario, lo que significa que esta función no está habilitada.

<b:includable id='blogThisShare'>
- Sección para compartir la publicación en redes sociales.
- <b:with value='"window.open(this.href, \"_blank\", \"height=270,width=475\"); return false;"' var='onclick'>: Define el comportamiento para compartir en una ventana emergente con dimensiones específicas.
- <b:include name='platformShare'/>: Instrucción para incluir las opciones de compartir en plataformas sociales.

¿Cómo reutilizarlo en otro blog de Blogger?

Copiar el código y pegarlo en la plantilla de tu blog de Blogger, preferiblemente en la sección de publicaciones o en el lugar donde desees que aparezca la información sobre el autor, los comentarios y las opciones para compartir.
Ajustes personalizados:
- Estilo y clases: Puedes modificar las clases CSS, como author-avatar, author-name, y author-description, para que coincidan con el diseño de tu blog.
- Imagen predeterminada: Cambia la URL https://4.bp.blogspot.com/.../avatar.png si deseas usar una imagen predeterminada diferente para los autores sin foto.
- Descripción del autor: Si los autores de tu blog no tienen una descripción en su perfil, esta parte del código puede quedar vacía.
Compartir en redes sociales:
- Si quieres personalizar las opciones de compartir, asegúrate de revisar o modificar el bloque <b:include name='platformShare'/> para incluir los botones de las plataformas que prefieras.
Activar o desactivar Backlinks:
- Si deseas habilitar los retroenlaces (backlinks), elimina o modifica el comentario <b:comment>Disabled</b:comment> y agrega el código necesario para mostrar los backlinks.

Este código es fácil de reutilizar y ajustar según las necesidades de cualquier blog en Blogger, ya que hace uso de las funciones dinámicas que ofrece la plataforma para personalizar el contenido.

Uso de widget con codigo HTML

<b:if cond='data:view.isHomepage'>
      <!-- featured-posts-3 -->
    <div class='clearfix'/>
    <div class='featured-posts section' id='featured-posts-3' name='Featured Section 1'>
    
      <div class='widget HTML' data-version='2' id='HTML10'>
        <div class='widget-title'>
          <h3 class='title'>Food</h3>
        </div>
        <div class='widget-content'>3/Marketing/feat-list</div>
      </div>
      
      <div class='widget HTML' data-version='2' id='HTML6'>
        <div class='widget-title'>
          <h3 class='title'>Photography</h3>
        </div>
        <div class='widget-content'>6/Informática/grid-post</div>
      </div>
      
      <div class='widget HTML' data-version='2' id='HTML12'>
        <div class='widget-title'>
          <h3 class='title'>Nature</h3>
        </div>
        <div class='widget-content'>3/Cursos educativos/grid-small</div>
      </div>
    </div>
    <div class='clearfix'/>
    <!-- *** -->
</b:if>

-------

Plantilla News --Estructura BLM - Blogger

1- Top Bar 👉

Top Bar

2- Ticker-posts 👉

Ticker-posts

3- Menú principal 👉

Main Menu

Logo

Menú

Búsqueda

4- Carrusel de imágenes o contenido 👉

Carrusel de imágenes o contenido

5- Widget: Post Destacados 👉

Post Destacados

Encabezado

6- Widget: Columna Izquierda 👉

Widget: Columna Izquierda

7- Widget: Columna derecha 👉

Widget: Columna derecha

8- Widget: "feat-big" 👉

Widget: "feat-big"

9- Widget: grid-small 👉

Widget: grid-small

10- Widget: "Mini Carousel" 👉

Widget: "Mini Carousel"

11- Widget de entradas del blog

Widget de entradas del blog

¿Cómo reutilizarlo en otro blog de Blogger?

12- Información: autor, enlaces, comentarios, backlinks

Información sobre el autor, comentarios, backlinks

¿Cómo reutilizarlo en otro blog de Blogger?

13- Uso de widget con codigo HTML

Uso de widget con codigo HTML