Breadcumbs en Blogger

Breadcumbs en Blogger


Al igual que una barra de dirección en un navegador de archivos, los breadcumbs muestran la posición actual del usuario en nuestro sitio utilizando las etiquetas como carpetas.

Vista previa de los breadcumbs en Blogger:


¿Cómo insertarlo en Blogger?:

Paso 1: Integrando en la plantilla los breadcumbs:

Primero, vamos a ''Diseño/Edición HTML'', marcamos ''Expandir plantillas de artilugios'' y buscamos el código siguiente y le añadimos lo que está en verde:

<b:includable id='main' var='top'>
<!-- posts -->
<div class='blog-posts hfeed'>
<!-- deshabilitar status message
<b:include data='top' name='status-message'/>
deshabilitar status message -->
<b:include data='posts' name='breadcrumb'/>

<data:adStart/>

 Ahora buscaremos un poco mas arriba la siguiente línea:

<b:includable id='main' var='top'>

Sobre esta, añadiremos la siguiente:

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='breadcrumbs'>
Estás en: <a expr:href='data:blog.homepageUrl' rel='tag'>Inicio</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 == &quot;true&quot;'> &#187;
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
</b:loop>
&#187; <span><data:post.title/></span>
</b:if>
</b:loop>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<div class='breadcrumbs'>
Estás en: <a expr:href='data:blog.homepageUrl'>Inicio</a> &#187; Archivos de <data:blog.pageName/>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
Estás en: <a expr:href='data:blog.homepageUrl'>Inicio</a> &#187; Mostrando todas las entradas
<b:else/>
Estás en: <a expr:href='data:blog.homepageUrl'>Inicio</a> &#187;  <data:blog.pageName/>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>

Guardamos los cambios y listo:



Paso 2: Añadiendo los estilos:

Buscamos la siguiente zona en la plantilla:
]]></b:skin>

Sobre esta, pegaremos el siguiente código:

.breadcrumbs {
border-top: 2px ridge #DADADA; /* borde superior */
border-right: 2px ridge #DADADA; /* borde derecho */
border-left: 2px ridge #DADADA; /* borde izquierdo */
border-bottom: 2px ridge #DADADA; /* borde inferior */
background: #FFFFFF; /* color del fondo */
padding: 5px; /* espaciado del contenido en los bordes */
margin-top: 10px;
margin-bottom: 10px;
}

Modificamos los colores, los bordes, márgenes, etc. a gusto y guardamos los cambios:
Artículo aleatorio
BuySellAds
BuySellAds
BuySellAds
BuySellAds
BuySellAds
Artículos destacados
Marca de agua en las imágenes con CSS # - Marca de agua en las imágenes con CSS
Botones para subir y bajar en Blogger # - Botones para subir y bajar en Blogger
Insertar una página externa en una entrada en Blogger # - Insertar una página externa en una entrada en Blogger
Efecto de desenfoque con CSS # - Efecto de desenfoque con CSS
Ocultar entradas con determinada etiqueta en el inicio de Blogger # - Ocultar entradas con determinada etiqueta en el inicio de Blogger