01 diciembre 2010

Agregar Breadcrums a Blogger




Como pueden Ver Arriba eso es un Ejemplo de Breadcrums ^
Lo podemos añadir muy facil a Nuestro blog Añadiendo unos Pequeños Codigos.

Pasos a Seguir:


Vamos a Diseño/ Edición de HTML / Expandimos Artilugios y Buscamos:

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

Y justo Encima Pegamos el Siguiente Codigo:

<b:includable id='breadcrumbs' var='post'>
<!-- Breadcrumbs hack. By Hoctro 9/11/2006 http://hoctro.blogspot.com -->
<b:if cond='data:blog.pageType == "item"'>
<p class='breadcrumbs'>
<span class='post-labels'>
<b:if cond='data:post.labels'>
Estas En:
<a expr:href='data:blog.homepageUrl' rel='tag'>Inicio</a> &gt;
<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:if cond='data:post.title'>
&gt; <b><data:post.title/></b>
</b:if>
</b:if>
</span>
</p>
</b:if>
<!-- End of Breadcrums Hack -->
</b:includable>


Ahora Buscamos

<b:if cond='data:post.dateHeader'>


y Justo Encima le Pegamos esta Linea:

<b:include data='post' name='breadcrumbs'/>
Ahora en la Parte del CSS de la Plantilla, Mejor Dicho, ]]></b:skin> Pegamos justo antes el Siguiente Codigo:

.breadcrumbs {
background: #cccccc;
margin: 0 0 30px 0;
padding: 5px 10px 5px 10px;
border: 1px solid #E6E6E6;
}

Y asi tenemos los Breadcrums Listos :D


Configuracion Avanzada:


Lo que esta en Color Azul, Es el Texto que lo Podemos Editar, y el Color que también lo podemos Editar.

2 comentarios:

  1. Esta muy bueno! habia visto antes en otro blog que tenian agregados breadcrums pero no sabia como hacerlo.
    Gracias por el aporte :)

    ResponderEliminar

hola a todos, NO se aceptan comentarios como
"wow que blog, mi blog es.." osea, Spam,
todas las personas que comentan (si tienen su perfil habilitado) yo entro a su perfil y miro su blog.
los comentarios groseros e insultantes asi como fuera de lugar serán borrados sin aviso.

CONTACTO→ Expertoenblogs.blog@hotmail.com