Mil Trucos Blogger

Indice de entradas para Blogger que muestra todos los posts

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado
Esta es una de esas entradas en la que no sabia que titulo poner, pero creo que le he puesto el titulo más descriptivo posible, puesto que este índice de entradas o mapa del sitio muestra en una sola lista todas las entradas que hemos publicado en el blog y lo mejor es que es muy personalizable y que con un solo clic en la parte de “Fecha” puedes ordenar los posts también por su fecha de publicación.

Indice de entradas para Blogger que muestra todos los posts

El truco se ve de la siguiente manera:

Para agregar este truco en tu blog, solo tienes que ir al editor html de una página o entrada y añadir allí lo siguiente:

<div id="bp_toc" style="max-height:1300px;overflow:scroll;overflow-x:auto;">
</div>
<script src="http://joderinga.com/miltrucosblogger/script-sitemap-blogger.js" type="text/javascript"></script> <script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=loadtoc" type="text/javascript"></script>
<style scoped="" type="text/css">
#comments {display:none;}
</style> <style type='text/css'>
/* CSS Full Sitemap */
#bp_toc {background:#348AF3;color:#021630;margin:0 auto;padding:5px;}
span.toc-note {padding:20px;margin:0 auto;display:block;text-align:center;color:#FBFCFD;font-family:'Open Sans';font-weight:700;text-transform:uppercase;font-size:30px;line-height:normal;}
.toc-header-col1 {padding:10px;background-color:#EAF2FC;width:250px;}
.toc-header-col2 {padding:10px;background-color:#EAF2FC;width:75px;}
.toc-header-col3 {padding:10px;background-color:#EAF2FC;width:125px;}
.toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {font-size:13px;
text-decoration:none;color:#0C386D;font-family:'Open Sans';font-weight:700;letter-spacing: 0.5px;}
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
text-decoration:none;}
.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {background:#EAF2FC;padding:5px;padding-left:5px;font-size:89%}
.toc-entry-col1 a, .toc-entry-col2 a, .toc-entry-col3 a{color:#666;font-size:13px;}
.toc-entry-col1 a:hover, .toc-entry-col2 a:hover, .toc-entry-col3 a:hover{color:#0C386D;}
#bp_toc table {width:100%;margin:0 auto;counter-reset:rowNumber;}
.toc-entry-col1 {counter-increment:rowNumber;}
#bp_toc table tr td.toc-entry-col1:first-child::before {content: counter(rowNumber);min-width:1em;margin-right:0.5em;}
td.toc-entry-col2 {background:#fafafa;}
</style>
<a style="display:block;text-align:right;font:normal bold 8px Arial,Sans-Serif;text-decoration:none;margin:10px;" href="http://www.miltrucosblogger.com/" title="indice">Mil Trucos Blogger</a>

El CSS ha sido resaltado en color azul para que lo puedas identificar fácilmente y desde allí puedes personalizar los colores del índice.

0
Shares

Relacionados...

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

8 Comentarios

  1. Marzo 22, 2015    

    Lo he hecho pero no se pueden ver todas las entradas.
    Sale la imagen cortada.

    • Marzo 22, 2015    

      Hola amigo, indícame la URL donde pusiste el indice.

      Saludos

  2. Marzo 24, 2015    

    Lo intente poner pero no pude… me sale mal 🙁 no se si fue por que la puse en una entrada , y tal vez en un gabet si me salga…

    • Marzo 24, 2015    

      Hola Lucy, prueba con el nuevo código que he añadido, de seguro que ahora si te funciona el truco.

      Saludos (f)

  3. Julio 19, 2015    

    ¿Podría aclararme por qué después de funcionar perfectamente esta opción, instalada en mi blog hace ya algún tiempo, ahora ha dejado de funcionar? ¿Hay que hacer algún cambio? Me gustaba mucho cómo funcionaba. Muchas gracias.

  4. Julio 23, 2015    

    Hola.
    En primer lugar felicitarte por la ayuda que ofreces para blogger. Tenia instalado el índice de entradas del blog. Dejo de funcionar, he copiado segun las instrucciones indicadas, pero algo debo hacer mal. Te dejo el enlace con lo que me aparece http://adn-dna.blogspot.com.es/p/index-de-posts.html.
    Gracias por anticipado por la ayuda.
    Saludos cordiales

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Categorías

Síguenos en Facebook

Suscribete por Email

Introduce tu Correo:

Recibiras nuestros últimos posts en tu correo