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&max-results=9999&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.
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.
Hayder Juvinao · marzo 22, 2015 a las 10:43 pm
Hola amigo, indícame la URL donde pusiste el indice.
Saludos
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.
Juvinao · julio 20, 2015 a las 4:57 pm
Hola Eugenia, te dejo el script para que lo descargues y lo alojes en tu propio hosting.
https://sites.google.com/site/miltrucosblogger/script/Script%20sitema%20MTB?attredirects=0&d=1
Reemplaza la línea http://joderinga.com/miltrucosblogger/script-sitemap-blogger.js en el código y reemplázala por la URL que te proporciones tu hosting.
Saludos
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
Juvinao · agosto 16, 2015 a las 2:37 am
Hola Joseph, te dejo el script para que lo descargues y lo alojes en tu propio hosting.
https://sites.google.com/site/miltrucosblogger/script/Script%20sitema%20MTB?attredirects=0&d=1
Reemplaza la línea http://joderinga.com/miltrucosblogger/script-sitemap-blogger.js en el código y reemplázala por la URL que te proporciones tu hosting.
Saludos