Agregar un logotipo a Blogger

Este código es una plantilla de Blogger que define el comportamiento y visualización del logotipo de una página. Está compuesto de etiquetas específicas de Blogger (<b:widget>, <b:section>, etc.) y HTML. Aquí te explico los componentes y cómo reutilizar el código en otro blog.

main-logo

        
xml
        

            
        
     
<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> 

----------------------

¿Qué hace este código?

1. Contenedor del Logo: 
   La etiqueta <div class='header-logo'> contiene la sección del logotipo del encabezado.

2. Sección del Logotipo:
   La sección <b:section> tiene el ID 'main-logo', que permite agregar un widget de tipo "Header". Está configurado para mostrar un logotipo con algunas configuraciones personalizadas.

3. Widget del Logotipo:
   El widget está bloqueado (locked='true') y su título es "Autoeducación (cabecera)". Este widget contiene los siguientes elementos:

   • URL de la imagen del logo: Está definido en <b:widget-setting name='displayUrl'>. Es la URL que aloja la imagen del logo, en este caso, una imagen en blogger.googleusercontent.com.
   • Tamaño de la imagen: Las propiedades displayHeight y displayWidth definen la altura y el ancho de la imagen del logo.
   • Colocación de la imagen: El atributo imagePlacement está establecido en "REPLACE", lo que significa que la imagen reemplazará cualquier texto en esa posición.

4. Estilo y Responsividad:
   Hay una sección <b:includable id='behindImageStyle'> que asegura que la imagen sea adaptable y se muestre correctamente en diferentes dispositivos con el estilo apropiado.

5. Descripción Condicional:
   La descripción del blog se incluye solo cuando no se está viendo una página de un solo artículo (not data:view.isSingleItem).

6. Imagen del Logotipo:
   El elemento <b:includable id='image'> define cómo se muestra la imagen, con un enlace a la página principal del blog (expr:href='data:blog.homepageUrl'). También establece la imagen usando las etiquetas <img>.

Reutilización en otro blog

Para reutilizar este código en otro blog de Blogger, sigue los pasos a continuación:

1. Copiar el Código: Selecciona todo el código desde <div class='header-logo'> hasta </div>.

2. Acceder a Blogger:

   • Ve a tu panel de administración de Blogger.
   • Dirígete a Tema > Editar HTML.

3. Insertar el Código:

   • Busca la sección del header (encabezado) en tu plantilla.
   • Inserta el código copiado en la parte correspondiente al logo del encabezado.

4. Modificar la URL de la Imagen:
   Si deseas usar otro logotipo, cambia el valor dentro de <b:widget-setting name='displayUrl'> con la URL de la nueva imagen que desees mostrar.

5. Ajustar el Tamaño del Logo:
   Si la nueva imagen tiene dimensiones diferentes, ajusta los valores de displayHeight y displayWidth según el tamaño de tu nuevo logotipo.

Ejemplo visual

Aquí tienes una representación gráfica del flujo y disposición del código:

• Logo 📷
  

Este código te permite personalizar y reutilizar el diseño del logo en cualquier blog en Blogger fácilmente.