୨୧ Cómo crear un menú de navegación para Blogger ୨୧

Un menú de navegación es una de las mejores formas de mantener nuestro blog organizado y hacer que sea más fácil encontrar nuestras entradas.

En este tutorial vamos a crear un menú cute para colocar debajo de la cabecera de nuestro blog y conectarlo con las etiquetas de nuestras entradas.

｡･:˚:✧｡･:˚:✧｡･:˚:✧｡･:˚:✧

୨୧ 01. Organiza tus etiquetas

Primero piensa en las categorías principales de tu blog.

Por ejemplo:

Tutoriales
Recursos
Blogger
Reseñas de anime
My Wishlist

Cada entrada deberá tener la etiqueta correspondiente para que aparezca dentro de esa categoría.

╭─────────────── ୨୧ ───────────────╮

୨୧ 02. Crea el menú

Ve a:

Blogger → Diseño → Añadir un gadget → HTML/JavaScript

Pega este código:

<style>
.cute-nav {
  width: 100%;
  text-align: center;
  padding: 15px 5px;
  font-family: "Trebuchet MS", sans-serif;
}

.cute-nav a {
  display: inline-block;
  text-decoration: none !important;
  color: #9b7184 !important;
  background: #fffafd;
  border: 1px solid #efd9e4;
  border-radius: 14px;
  padding: 9px 16px;
  margin: 4px 2px;
  font-size: 12px;
  letter-spacing: 1px;
  transition: all 0.3s ease;
}

.cute-nav a:hover {
  background: #fce8f1;
  transform: translateY(-3px);
}

.cute-nav .decoracion {
  color: #d99ab7;
  letter-spacing: 4px;
  margin: 8px;
}
</style>

<div class="cute-nav">

  <div class="decoracion">
    ୨୧ ──────── ୨୧
  </div>

  <a href="/">♡ HOME</a>

  <a href="/search/label/Tutoriales">♡ TUTORIALES</a>

  <a href="/search/label/Recursos">♡ RECURSOS</a>

  <a href="/search/label/Blogger">♡ BLOGGER</a>

  <a href="/search/label/Rese%C3%B1as%20de%20anime">♡ RESEÑAS DE ANIME</a>

  <a href="/search/label/My%20Wishlist">♡ MY WISHLIST</a>

  <a href="/p/about-me.html">♡ ABOUT ME</a>

  <div class="decoracion">
    ♡ ─── ꕤ ─── ♡
  </div>

</div>

｡･:˚:✧｡･:˚:✧｡･:˚:✧｡･:˚:✧

୨୧ 03. Personaliza tu menú

Puedes cambiar los nombres de las secciones y sus enlaces.

Por ejemplo:

<a href="/search/label/Tutoriales">♡ TUTORIALES</a>

Tutoriales debe coincidir con el nombre exacto de la etiqueta que utilizas en tus entradas.

También puedes cambiar los colores, el tamaño, los símbolos y el estilo de los botones para combinarlo con tu blog.

╭─────────────── ୨୧ ───────────────╮

୨୧ 04. ¿Páginas o etiquetas?

No necesitas crear una página para cada categoría.

Las secciones que contienen publicaciones pueden utilizar etiquetas:

♡ Tutoriales
♡ Recursos
♡ Blogger
♡ Reseñas de anime
♡ My Wishlist

Mientras que las páginas estáticas pueden utilizarse para cosas como:

୨୧ About Me
୨୧ Contacto

Así tu menú se actualizará automáticamente cada vez que publiques una nueva entrada con la etiqueta correspondiente.

╰─────────────── ୨୧ ───────────────╯

୨୧ Resultado

El resultado será un menú debajo de nuestra cabecera que nos permitirá navegar fácilmente por las diferentes secciones del blog.

୨୧ ── ♡ ── ꕤ ── ♡ ── ୨୧

Un pequeño detalle que hace que nuestro blog se sienta mucho más organizado y, sobre todo, mucho más nuestro.

♡ ୨୧ ₊˚⊹ happy blogging ⊹˚₊ ୨୧ ♡