-->

Cómo añadir breadcrumbs en Blogger

CÓMO AÑADIR BREADCRUMBS EN BLOGGER

En el artículo de hoy vamos a ver cómo añadir breadcrumbs a nuestro blogger y explicar las ventajas que aportan los breadcrums o migas de pan al posicionamiento SEO de nuestro Blog o página web.

Los breadcrums o rastro de migas de pan es una técnica de navegación utilizada en páginas web cuya característica principal es que permite al usuario conocer exactamente la estructura interna de nuesro blog o página web lo que le permite navergar de manera fácil e intuitiva por ella.

VENTAJAS DE UTILIZAR BREADCRUMBS

Las ventajas de utilizar breadcrumbs o migas de pan en nuetro blog o página web son innumerables, a continuación mostramos las ventajas que consideramos más significativas:
  • Los breadcrumbs facilitan el acceso directo a determinadas categorías o páginas si tener que pasar por el home de la web.

  • Los breadcrumbs o migas de pan permiten al usuario crear un modelo mental del mapa del sitio, con lo que le será más fácil navegar por la web y acceder a los contenidos.

  • Los breadcrumbs son un elemento de navegación que ocupan poco espacio y ofrecen mucha información.

  • Los breadcrumbs pueden aparecer en los resultados de las páginas de búsqueda de Google con lo que aportan información adicional al usuario del buscador.

  • Los breadcrumbs mejoran la usabilidad de nuestra página web o blog.

  • Los breadcrumbs mejoran los enlaces internos de nuestra página web.

CONCLUSIÓN SOBRE LOS BREADCRUMBS

Los breadcrumbs o migas de pan es de esas mejoras que requieren muy poco esfuerzo y que tienen un alto impacto por lo que recomiendo a todos los lectores que se animen y los introduzcan en sus respectivas páginas web o blogs.

AÑADIR BREADCRUMS EN BLOGGER

Vamos a ver mediante un ejemplo práctico la manera de implementar los breadcrums en nuestro blogger
  1. Nos dirigimos al menú Plantilla de nuestro panel de control de Blogger y pulsamos el botón Editar HTML.

  2. Dentro del código de nuestra plantilla pulsamos las teclas CTRL + F y buscamos el siguiente texto
    <b:include data='top' name='status-message'/>

  3. Reemplazar el código e arriba por el siguiente:
    <b:include data='top' name='status-message'/>
    <b:include data='posts' name='breadcrumb'/>

  4. Buscar el siguiente texto en el código de nuestra plantilla pulsando CTRL + F:
    <b:includable id='main' var='top'>

  5. Reemplazar el código de arriba por el siguiente:
    <b:includable id='breadcrumb' var='posts'>
    <b:if cond='data:blog.homepageUrl == data:blog.url'>
    <!-- No añadimos los breadcrumb en la home de nuestro blogger -->
    <b:else/>
    <b:if cond='data:blog.pageType == "item"'>
    <!-- Añadimos los breadcrumb en los post -->
    <p class='breadcrumbs'>
    <span class='post-labels'>
    <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
    <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 == "true"'> »
    <a expr:href='data:label.url' rel='tag'><data:label.name/></a>
    </b:if>
    </b:loop>
    <b:else/>
    »Unlabelled
    </b:if>
    » <span><data:post.title/></span>
    </b:loop>
    </span>
    </p>
    <b:else/>
    <b:if cond='data:blog.pageType == "archive"'>
    <!-- Añadimos los breadcrumb para las etiquetas y las páginas de búsquedas -->
    <p class='breadcrumbs'>
    <span class='post-labels'>
    <a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/>
    </span>
    </p>
    <b:else/>
    <b:if cond='data:blog.pageType == "index"'>
    <p class='breadcrumbs'>
    <span class='post-labels'>
    <b:if cond='data:blog.pageName == ""'>
    <a expr:href='data:blog.homepageUrl'>Home</a> » All posts
    <b:else/>
    <a expr:href='data:blog.homepageUrl'>Home</a> » Posts filed under <data:blog.pageName/>
    </b:if>
    </span>
    </p>
    </b:if>
    </b:if>
    </b:if>
    </b:if>
    </b:includable>
    <b:includable id='main' var='top'>
    <!--Breadcrumbs por http://tutorialesyopiniones.blogspot.com.es/-->

  6. Buscar el siguiente texto en la plantilla ]]></b:skin>

  7. Pegar el siguiente código justo antes el texto que hemos buscado en el punto exterior:
    /* Breadcrumbs por http://tutorialesyopiniones.blogspot.com.es/ */ .breadcrumbs {
    padding:5px 5px 5px 0px;
    margin: 0px 0px 15px 0px;
    font-size:95%;
    line-height: 1.4em;
    border-bottom:3px double #e6e4e3;
    }

  8. Pulsa el botón Guardar.

Si te ha gustado el artículo sobre cómo añadir breadcrumbs en Blogger puedes colaborar con este Blog visitando a nuestros patrocinadores, con esto me ayudarás a mantener el Blog y pueda escribir más artículos.

ARTÍCULOS QUE TE PUEDEN INTERESAR

Cómo guardar la configuración de una red wifi en Windows 7
Cómo abrir puertos windows 7
Atajos de teclado de Windows
Windows 7 no muestra la fecha

Etiquetas: ,