¿Cómo agregar navegación de Migas de Pan o Breadcrumbs en blogger?

La navegación de Migas de Pan o Breadcrumbs es una forma increíble de ayudar a los visitantes de tu blog y les permite navegar fácilmente por las página. Es una forma perfecta e ideal para permitir al visitante navegar a la página anterior con facilidad. La barra de navegación muestra la página de inicio y la página de categoría vinculadas a esa publicación para que el visitante pueda realizar un seguimiento de la categoría deseada y ver más contenidos sobre esa categoría en particular. Así que hoy, vamos a explicar la forma más fácil de agregar navegación de Migas de Pan o Breadcrumbs al blog de blogger y también discutiremos algunas de sus principales ventajas también. Así que iniciemos y si tu tienes una manera mas sencilla te invito a comentar cual es o si hay duda adelante en los comentarios.



Antes de ir directamente al tutorial, sepamos qué es navegación de Migas de Pan o Breadcrumbs.

¿Qué es la navegación de Migas de Pan o Breadcrumbs?

Las rutas de navegación son los enlaces de navegación que permiten al usuario seguir su ubicación en un sitio web. Proporciona una interfaz fácil de usar para que el usuario pueda volver a la categoría adjunta a la página aterrizada. La navegación de Migas de Pan o Breadcrumbs generalmente aparece horizontalmente arriba del título de la publicación. Echemos un vistazo a cómo se ve la navegación de Migas de Pan o Breadcrumbs:

¿Por qué utilizar navegación de Migas de Pan o Breadcrumbs?

Al agregar navegación de navegación al blog de tu blogger, debes comprender sus ventajas y ver cómo te beneficiará esto. Así que voy a enumerar algunas de las principales razones puntuales.

• Fácil de rastrear: como mencioné anteriormente, la navegación de las migas de pan rastrea de vuelta a la categoría relacionada y a la página de inicio con un solo clic.
• Reduce la tasa de rebote: ¡ sin dudas! Cuando proporcionas una interfaz fácil de usar a tu visitante, definitivamente reducirá la tasa de rebote de tu blog.
• Indica la ubicación: Sí, la navegación de rutas de navegación les dice a los visitantes su ubicación en tu sitio web, lo que les permite una gran facilidad de uso en general.

¿Cómo agregar la navegación de Migas de Pan o Breadcrumbs en el blog de Blogger?

Vaya a Blogger.com Dashboard >> Theme> Haz una copia de seguridad de tu blog antes de realizar cambios.

Ahora selecciona Editar HTML.

Luego, busca la etiqueta <div class = 'blog-posts hfeed'> (use Ctrl + F para buscar rápidamente) y justo debajo de ella pegue la siguiente codificación XML. No hagas cambios en la codificación; de lo contrario, no funcionaría correctamente. Una vez hecho, guardar la plantilla.

Nota: Puedes encontrar dos etiquetas <div class = 'blog-posts hfeed'> , asegúrese de tener que trabajar con la primera

<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- No breadcrumb on home page -->
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- breadcrumb for the post page -->
<ul id='breadcrumbs-bbeginner'>
<li><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></li>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == &quot;true&quot;'>
<li><a expr:href='data:label.url' rel='tag'><data:label.name/></a></li>
</b:if>
</b:loop>
<b:else/>
</b:if><li><a class='current'><data:post.title/></a></li>
</b:loop>
</ul>
<b:else/>
</b:if></b:if>

Ahora, busque la etiqueta </ b: skin> y justo encima pegue la siguiente codificación CSS.

#breadcrumbs-bbeginner {
  background: #eee;
  width:620px;
  margin-left:20px;
  border-width: 1px;
  font-family:Verdana, sans-serif;
  margin-top:40px;
  text-transform: uppercase;
  border-style: solid;
  border-color: #f5f5f5 #e5e5e5 #ccc;
  border-radius: 5px;
  box-shadow: 0 0 2px rgba(0,0,0,.2);
  overflow: hidden;
}
#breadcrumbs-bbeginner  li{
  float: left;
}
#breadcrumbs-bbeginner  a{
  padding: .7em 1em .7em 2em;
  float: left;
  text-decoration: none;
  color: #444;
  position: relative;
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
  background-color: #ddd;
  background-image: linear-gradient(to right, #f5f5f5, #ddd);
}
#breadcrumbs-bbeginner  li:first-child a{
  padding-left: 1em;
  border-radius: 5px 0 0 5px;
}
#breadcrumbs-bbeginner  a:hover{
  background: #fff;
}
#breadcrumbs-bbeginner  a::after,
#breadcrumbs-bbeginner  a::before{
  content: "";
  position: absolute;
  top: 50%;
  margin-top: -1.5em;
  border-top: 1.5em solid transparent;
  border-bottom: 1.5em solid transparent;
  border-left: 1em solid;
  right: -1em;
}
#breadcrumbs-bbeginner a::after{
  z-index: 2;
  border-left-color: #ddd;
}
#breadcrumbs-bbeginner  a::before{
  border-left-color: #ccc;
  right: -1.1em;
  z-index: 1;
}
#breadcrumbs-bbeginner  a:hover::after{
  border-left-color: #fff;
}
#breadcrumbs-bbeginner  .current,
#breadcrumbs-bbeginner  .current:hover{
  font-weight: bold;
  background: none;
}
#breadcrumbs-bbeginner  .current::after,
#breadcrumbs-bbeginner .current::before{
  content: normal;
}
ul{
  margin: 0;
  padding: 0;
  list-style: none;
}
#breadcrumbs-bbeginner .current,
#breadcrumbs-bbeginner .current:hover{
  font-weight: normal;
  background: none;
}
#breadcrumbs-bbeginner .current::after,
#breadcrumbs-bbeginner .current::before{
  content: normal;
}

Con lo anterior hecho la navegación de Migas de Pan o Breadcrumbs se ha agregado con éxito al blog de tu blogger. Puede personalizar el CSS anterior según su aspecto deseado.

Además, esta navegación de migas de pan no afectará tu puntuación de SEO, así que no dudes en utilizarla.

Personalización (opcional):

1. Para cambiar el ancho de la barra de navegación de Migas de Pan o Breadcrumbs, simplemente busca ancho: 620px; y cambia el valor.
2. Si quieres cambiar el estilo de la fuentebusca font-family:Verdana, sans-serif; y reemplazalo por el código que quieras.
3. También puedes cambiar el color de fondo cambiando el fondo: #eee; con el código de color de tu elección.