Indice de entradas para Blogger que muestra todos los posts

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

8 thoughts on “Indice de entradas para Blogger que muestra todos los posts

Deja un comentario

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