De Blog a Marca: Por qué tu Página de Inicio es tu Mejor Aliada

Celia Esgar septiembre 02, 2025


página de inicio en blogger


Como autor, tu blog es tu casa digital. Pero, ¿qué pasa si la puerta de entrada no muestra la belleza de lo que hay dentro? 

Convertir tu página de inicio en una página de aterrizaje (landing page) es la forma más efectiva de guiar a tus lectores, mostrar tu trabajo de un vistazo y, en última instancia, construir una marca profesional. No importa si usas una plataforma como Blogger; con unos pocos ajustes, puedes crear una página que lo tiene todo.

A continuación, te muestro cómo puedes personalizar tu espacio para que venda tus libros y te ayude a conectar con tus lectores.

Puedes echar un vistazo a la mía si no me crees.

pagina sin sidebar en blogger



Paso 0: La Página de Bienvenida sin Barra Lateral


El primer paso es crear el lienzo en blanco para tu página de bienvenida. Queremos una página limpia, sin la barra lateral (sidebar) típica de un blog, y con el contenido centrado.

1. Crea una Nueva Página en Blogger:

En tu panel de control, ve a "Páginas" y haz clic en "Nueva página".


2. Pega el Código Base:

Dentro del editor de páginas, haz clic en el icono del lápiz y selecciona "Vista HTML". Ahora, pega este código completo:


HTML
<style>
/* Oculta la barra lateral de la página */
#sidebar-wrapper {
  display: none !important;
}

/* Expande el contenedor principal de la página a todo el ancho */
#main-wrapper {
  width: 100% !important;
  float: none !important;
}

/* Elimina el ancho fijo del contenedor padre si existe */
.container {
  max-width: 100% !important;
}

/* Alinea el título de la página y el texto del contenido al centro */
.item-post h1.post-title {
  text-align: center !important;
}
</style>

<div style="max-width: 900px; margin: 0 auto;">
  </div>


3. Publica la Página:

Asigna un título (por ejemplo, "Bienvenidos") y pulsa en "Publicar". Esta será la página que personalizaremos.



Muestra tus Obras de Amazon con una Galería Visual


Una galería de portadas es mucho más efectiva que un listado de enlaces. Este código te permitirá crear un carrusel de tus novelas que se ve fantástico en cualquier dispositivo, ya sea ordenador o móvil.

Código de la Galería de Libros Horizontal:


HTML
<div class="book-showcase-section">
  <h2 class="section-title">Mis Novelas en Amazon</h2>
  <div class="book-horizontal-scroll">
    <a href="URL-DEL-LIBRO-1-AMAZON" target="_blank" class="book-item">
      <img src="URL-DE-PORTADA-1.jpg" alt="Portada de la novela 1">
    </a>
    <a href="URL-DEL-LIBRO-2-AMAZON" target="_blank" class="book-item">
      <img src="URL-DE-PORTADA-2.jpg" alt="Portada de la novela 2">
    </a>
    <a href="URL-DEL-LIBRO-3-AMAZON" target="_blank" class="book-item">
      <img src="URL-DE-PORTADA-3.jpg" alt="Portada de la novela 3">
    </a>
    <a href="https://amzn.eu/d/05YBG7D" target="_blank" class="book-item">
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgWipQuFNI9V41lYgXLuNM__5gyuhqPveSG0b59xclgHhEwzULjnQsk7scDYQivyNhQBurzgySngUsuCbTs2BmsqJqeFYFgbRFRAS9hQgoVWTNzFw0yTGUJ_-NXv28FrakkrQ1wJpJmCl5z3VepSYu0TzTIFlKjS-TLfhx_7YnFbk17Bqvwl4fMIkGoat/w230-h320/Captura%20de%20pantalla%202025-05-18%20101347.png=w253-h352-p-k-no-nu" alt="Portada de la novela 4">
    </a>
    <a href="https://amzn.eu/d/fBTTh1S" target="_blank" class="book-item">
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIBGbOUq2uzGFDUB8AJ3wNw8_CpU4lPRAZ2EwH0lYeYm1h7KUZV92hmvWKC-nwkQN4BEeOFKGNXcWKLYK-D0bGRoY64r3ByP_SqgCHLFSNkLOo7I91q-JGCXvFWbHUx6p6wIflgjHhN1XCxSYYm0uEIcYYYgKzrsvwjIttQRdqoplsxwn0dAUzWJrq4AN/s320/Captura%20de%20pantalla%202025-06-11%20095953.png=w223-h352-p-k-no-nu" alt="Portada de la novela 5">
    </a>
    <a href="https://amzn.eu/d/2VLyonW" target="_blank" class="book-item">
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjloVxAfAXE7K6xP8CA5sshzk24zPB0zOHs_dRKZkMlX5krpqU_S3MgyynNvmxL6dQWqZS-FE9ACr2F17pvNqMrk-Mdd7XPg6bVEBGbZREQZSiO-H-P17jF6TGQwSnpA9TstoYDBAt-RI50O3UmkqHiQUqGB0Sgel6JzVwNxfohGO3PG_7Z7glPYjEHHCbK/w204-h320/Captura%20de%20pantalla%202025-05-18%20101849.png=w224-h352-p-k-no-nu" alt="Portada de la novela 6">
    </a>
  </div>
</div>

<style>
.book-showcase-section {
  margin: 50px auto;
  padding: 0 20px;
  text-align: center;
}
.section-title {
  margin-bottom: 30px;
}
.book-horizontal-scroll {
  display: flex;
  flex-wrap: nowrap;
  gap: 15px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 20px;
  justify-content: flex-start;
}
.book-item {
  flex: 0 0 auto;
  width: 150px;
  display: block;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
}
.book-item:hover {
  transform: translateY(-5px);
}
.book-item img {
  width: 100%;
  height: auto;
  display: block;
}
.book-horizontal-scroll::-webkit-scrollbar {
  height: 8px;
}
.book-horizontal-scroll::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
}
.book-horizontal-scroll::-webkit-scrollbar-track {
  background: transparent;
}
</style>


En esta tienes seis, pero puedes añadir todas las que quieras repitiendo el fragmento:
<a href="URL-DEL-LIBRO-1-AMAZON" target="_blank" class="book-item"> <img src="URL-DE-PORTADA-1.jpg" alt="Portada de la novela 1"> </a>

  • Cómo Usarlo: Simplemente reemplaza URL-DEL-LIBRO con el enlace de Amazon y URL-DE-PORTADA con el enlace de la imagen de tu libro.


Dirige a tus Lectores a tus Productos Exclusivos


¿Ofreces ediciones especiales o merchandising? 

Crea dos botones que llamen la atención. Con el siguiente código, tendrás un botón rosa para tus libros firmados y uno marrón para las cajas literarias, que se apilarán en móviles.

Código de Botones:


HTML
<div class="reader-buttons-container">
  <a href="URL-LIBROS-FIRMADOS" class="reader-button button-pink">
    Mis Libros Firmados
  </a>
  <a href="URL-CAJAS-LITERARIAS" class="reader-button button-brown">
    Cajas Literarias
  </a>
</div>

<style>
/* --- Estilos para los botones de Lectores --- */
.reader-buttons-container {
  display: flex;
  flex-wrap: wrap; 
  gap: 20px; 
  justify-content: center;
  margin: 40px auto; 
  max-width: 900px;
  padding: 0 20px;
}
.reader-button {
  flex: 1 1 200px;
  display: inline-block;
  padding: 15px 30px;
  border-radius: 30px;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.1em;
  text-align: center;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  white-space: nowrap;
}
.button-pink {
  background-color: #cd7195; /* Color del botón principal */
  color: #fff !important;
}
.button-pink:hover {
  background-color: #bc9884; /* Color en hover */
  transform: translateY(-3px);
  color: #fff !important;
}
.button-brown {
  background-color: #bc9884; /* Color del botón principal */
  color: #fff !important;
}
.button-brown:hover {
  background-color: #cd7195; /* Color en hover */
  transform: translateY(-3px);
  color: #fff !important;
}
.reader-button:visited {
  color: #fff !important;
}
@media (max-width: 768px) {
  .reader-buttons-container {
    flex-direction: column;
    align-items: center;
  }
  .reader-button {
    width: 85%;
    max-width: 300px;
    padding: 12px 20px;
  }
}
</style>


  • Cómo Usarlo: Reemplaza URL-LIBROS-FIRMADOS y URL-CAJAS-LITERARIAS con los enlaces a tus respectivas páginas. 
Para cambiar los colores, solo necesitas modificar los códigos hexadecimales (#cd7195 y #bc9884) en los comentarios.


Muestra tus Últimas Entradas de Blog Automáticamente


No dejes que tu blog se estanque. Muestra las publicaciones más recientes de forma automática para que tus lectores siempre tengan algo nuevo que leer.

Código para Últimas Entradas:


HTML
<hr style="border: 0; height: 1px; background-color: #eee; margin: 40px auto; max-width: 600px;">
<div class="blog-posts-section">
  <h2 class="section-title">Últimas entradas del blog</h2>
  <div class="blog-posts-container">
    <p>Cargando entradas...</p>
  </div>
</div>
<style>
.blog-posts-section {
  margin: 50px auto;
  padding: 0 20px;
  max-width: 900px;
  text-align: center;
}
.blog-posts-container {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center;
  margin-top: 30px;
}
.post-item {
  flex: 1 1 250px;
  background-color: #f9f9f9; /* Color de fondo de la tarjeta */
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
  text-align: left;
}
.post-item:hover {
  transform: translateY(-5px);
}
.post-item h3 {
  font-size: 1.3em;
  margin-bottom: 10px;
  color: #333; /* Color del título de la entrada */
}
.post-item a {
  text-decoration: none;
  color: #333; /* Color del texto del enlace */
}
.post-item p {
  font-size: 0.9em;
  color: #777; /* Color del texto de la entrada */
}
@media (max-width: 768px) {
  .blog-posts-container {
    flex-direction: column;
  }
}
</style>
<script>
  function loadBlogPosts() {
    const blogUrl = 'URL-DE-TU-BLOG'; // Reemplaza con la URL principal de tu blog
    const maxPosts = 6;
    const script = document.createElement('script');
    script.src = `${blogUrl}/feeds/posts/default?alt=json-in-script&max-results=${maxPosts}&callback=displayPosts`;
    document.body.appendChild(script);
  }
  function displayPosts(data) {
    const postsContainer = document.querySelector('.blog-posts-container');
    postsContainer.innerHTML = '';
    if (data.feed.entry && data.feed.entry.length > 0) {
      data.feed.entry.forEach(post => {
        const postTitle = post.title.$t;
        const postUrl = post.link.find(link => link.rel === 'alternate').href;
        const postContent = post.content ? post.content.$t : '';
        const postSnippet = postContent.replace(/<[^>]*>?/gm, '').substring(0, 150) + '...';
        const postHtml = `
          <div class="post-item">
            <a href="${postUrl}">
              <h3>${postTitle}</h3>
            </a>
            <p>${postSnippet}</p>
          </div>
        `;
        postsContainer.innerHTML += postHtml;
      });
    } else {
      postsContainer.innerHTML = '<p>No se encontraron entradas del blog.</p>';
    }
  }
  window.addEventListener('load', loadBlogPosts);
</script>


  • Cómo Usarlo: Simplemente reemplaza URL-DE-TU-BLOG por la URL de tu blog principal, como https://tudominio.com.


Crear tu Comunidad con una Newsletter


Una newsletter es la forma más directa de construir una base de lectores leales. Plataformas como MailerLite o Mailchimp son perfectas para empezar. Solo necesitas crear un formulario de suscripción y enlazarlo con un botón en tu página de bienvenida.

Código de Botón de Newsletter:


HTML
<div class="lead-magnet-cta">
  <p class="cta-instruction">¿Quieres unirte a mi comunidad y no perderte nada? Haz clic en el botón.</p>
  <a href="URL-DE-TU-NEWSLETTER" class="cta-button">Unirme a la Newsletter</a>
</div>

<style>
.cta-button {
  display: inline-block;
  background-color: #cd7195; /* Color del botón principal */
  color: #fff !important;
  padding: 12px 25px;
  border-radius: 30px;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.1em;
  margin-top: 20px;
  transition: background-color 0.3s ease, color 0.3s ease;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.cta-button:hover {
  background-color: #bc9884; /* Color en hover */
  color: #fff !important;
}
.cta-button:visited {
  color: #fff !important;
}
.cta-instruction {
  font-size: 1.1em;
  line-height: 1.6;
  margin-bottom: 20px;
}
</style>


  • Cómo Usarlo: Reemplaza URL-DE-TU-NEWSLETTER con el enlace a tu página de suscripción.


Una vez que tengas tu página de bienvenida lista y publicada, el último paso es decirle a tu blog que la muestre como página principal. La forma más fiable de hacerlo es con un código de redirección.

Aquí te explico exactamente cómo hacerlo para que funcione sin errores.


Cómo Establecer tu Página de Bienvenida como Principal


  • Obtén la URL de tu página: Ve a la página que acabas de crear y copia la URL completa. Por ejemplo: https://tudominio.com/p/bienvenida.html.

  • Edita el HTML de tu tema:

En tu Panel de control de Blogger, ve a Tema.
Haz clic en los tres puntos y selecciona Editar HTML.

  • Pega el código de redirección:

Busca la etiqueta <head> y pega el siguiente código justo debajo.

Importante: Asegúrate de reemplazar URL-DE-TU-PAGINA con la URL de la página que has copiado en el primer paso.


<script>
  // Cambia 'URL-DE-TU-PAGINA' por la dirección de tu página de destino.
  const homePageUrl = 'URL-DE-TU-PAGINA';

  // Esta condición verifica si la URL actual es exactamente la página de inicio.
  if (window.location.pathname === '/') {
    window.location.replace(homePageUrl);
  }
</script>




  • Guarda los cambios:

Haz clic en el icono del disquete para guardar los cambios de tu plantilla.

¡Eso es todo! Con este código, cualquier visitante que entre a la página principal de tu blog será redirigido a tu página de bienvenida, garantizando que tu trabajo se muestre de forma profesional desde el primer momento.


***


No tener una presencia digital profesional es como esconder tus libros en un cajón. Es posible que los lectores no te encuentren o que se marchen si la primera impresión no refleja el trabajo que hay detrás. Un blog profesional es una herramienta sencilla y poderosa que te da control total sobre tu narrativa de marca.

Si el código te parece abrumador, no te preocupes. Conozco la frustración de querer algo perfecto y no tener el tiempo o el conocimiento para hacerlo realidad. 

Si deseas una página sencilla para mostrar tus libros y conectar con tus lectores, puedo ayudarte a crearla de forma profesional y elegante. Puedes encontrar más información sobre mis servicios de diseño para escritores en
https://www.celiaesgarbooks.com/p/servicios-de-diseno-para-escritores.html.

Cuéntame ¿qué código te ha resultado más útil?
Celia Esgar

Publicado por Celia Esgar

¡Hola! Soy Celia Esgar, filóloga y creativa apasionada del Romance y la Fantasía. Mi vida siempre ha girado en torno a la creatividad en distintos ámbitos y ahora, después de casi diez años como diseñadora gráfica y web freenlace, he retomado el placer de la escritura.

Publicar un comentario

0 Comentarios

Tu opinión es importante ¡gracias por compartir!