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.

Categorías: Trucos Blogger

8 comentarios

ROBERTO ROBERT · marzo 22, 2015 a las 10:41 pm

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

Lucy B · marzo 24, 2015 a las 12:41 pm

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…

    Hayder Juvinao · marzo 24, 2015 a las 7:22 pm

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

    Saludos (f)

Mª Eugenia · julio 19, 2015 a las 4:14 pm

¿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.

Josep M · julio 23, 2015 a las 10:59 pm

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 una respuesta

Marcador de posición del avatar

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