Desde hace un poco de tiempo estaba detrás de un plugin para Blogspot que tuviera más menos las mismas funcionalidades que tiene por ejemplo TOC Table of Content Plus para WordPress, es decir un iunstrumento que me permitiera mostrar el contenido del post subdividido por títulos y subtítulos. Algo parecido a lo que hace Wikipedia en sus artículos, para entendernos.
Primero porque estéticamente le da una presentación más organizada al post, por ejemplo si mi interés es solo descargar un aplicación voy directamente al párrafo Descargas sin perder tiempo. Y así con cualquier otro ejemplo.
Segundo porque a los efectos del SEO permite acortar las frases y el contenido lo que es positivo.
Recorriendo la Web encontré en MyBloggerTricks el plugin Create Table Of Contents (TOC) With Multi-level List In JavaScript que cumple sobradamente con este objetivo.
Los títulos los cuales clicados nos van a llevar a la parte del artículo en cuestión.
Aquí puedes personalizar color, tamaño y demás propriedades de las fuentes.
En el HTML de tu plantilla justo encima de ]]></b:skin> pega este código:
3.- Ahora busca <data:post.body/> y reemplázalo por este código:
Hasta ahora todas estas modificaciones iban en la plantilla del blog.
4.- Por única vez configurar las opciones de la entrada (veremos que en las entradas sucesivas la opción configurada ya queda fija).
5.- Colocas el siguiente código donde desees que aparezca el índice (siempre antes del primer encabezado):
Y para que el script se active debes inserir al final del artículo en formato HTML el siguiente código:
El esfuerzo vale la pena porque, a mi humilde criterio, el aspecto del blog mejora sensiblemente.
Primero porque estéticamente le da una presentación más organizada al post, por ejemplo si mi interés es solo descargar un aplicación voy directamente al párrafo Descargas sin perder tiempo. Y así con cualquier otro ejemplo.
Segundo porque a los efectos del SEO permite acortar las frases y el contenido lo que es positivo.
Recorriendo la Web encontré en MyBloggerTricks el plugin Create Table Of Contents (TOC) With Multi-level List In JavaScript que cumple sobradamente con este objetivo.
Como instalar el Plugin TOC.
Veamos paso a paso como modificar la plantilla:Modificaciones en la plantilla.
1.- Abre la plantilla HTML (recuerda siempre de hacer una copia de Backup) y justo encima de </head> pega este código:<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
<script type='text/javascript'>
//<![CDATA[
//*************TOC Plugin V2.0 by MyBloggerTricks.com
function mbtTOC2(){var a=1,b=0,c="";document.getElementById("post-toc").innerHTML=document.getElementById("post-toc").innerHTML.replace(/<h([\d]).*?>(.*?)<\/h([\d]).*?>/gi,function(d,e,f,g){return e!=g?d:(e>a?c+=new Array(e-a+1).join("<ol class='point"+a+"'>"):e<a&&(c+=new Array(a-e+1).join("</ol></li>")),b+=1,c+='<li><a href="#point'+b+'">'+f+"</a>",a=parseInt(e),"<h"+e+" id='point"+b+"'>"+f+"</h"+g+">")}),a&&(c+=new Array(a+1).join("</ol>")),document.getElementById("mbtTOC2").innerHTML+=c}function mbtToggle2(){var a=document.getElementById("mbtTOC2"),b=document.getElementById("Tog");"none"===a.style.display?(a.style.display="block",b.innerHTML="hide"):(a.style.display="none",b.innerHTML="show")}
//]]>
</script>
Por supuesto puedes personalizar y cambiar la fuente, es suficiente que esté instalada en tu plantilla. Con este script resolvemos en encabezado del gadget.
2.- Ahora tenemos que resolver la parte de abajo del gadget, es decir el “detalle” por decirlo de alguna manera.Los títulos los cuales clicados nos van a llevar a la parte del artículo en cuestión.
Aquí puedes personalizar color, tamaño y demás propriedades de las fuentes.
En el HTML de tu plantilla justo encima de ]]></b:skin> pega este código:
/*####TOC Plugin V2.0 by MyBloggerTricks####*/
.mbtTOC2{border:5px solid #f7f0b8;box-shadow:1px 1px 0 #EDE396;background-color:#FFFFE0;color:#707037;line-height:1.4em;margin:30px auto;padding:20px 30px 20px 10px; font-family:Oswald, arial;display: block;width: 70%;}.mbtTOC2 button{background:#FFFFE0; font-family:oswald, arial; font-size:22px;position:relative; outline:none;border:none; color:#707037;padding:0 0 0 15px;}.mbtTOC2 button a {color:#0080ff; padding:0px 2px;cursor:pointer;}
.mbtTOC2 button a:hover{ text-decoration:underline; }
.mbtTOC2 button span {font-size:15px; margin:0px 10px; }
.mbtTOC2 button span {font-size:15px; margin:0px 10px; }
.mbtTOC2 li{margin:10px 0; }
.mbtTOC2 li a {color:#0080ff; text-decoration:none; font-size:18px; text-transform:capitalize;}
.mbtTOC2 li a:hover {text-decoration: underline;}.mbtTOC2 li li {margin:4px 0px;}
.mbtTOC2 li li a{ color:#289728; font-size:15px;}
.mbtTOC2 li a {color:#0080ff; text-decoration:none; font-size:18px; text-transform:capitalize;}
.mbtTOC2 li a:hover {text-decoration: underline;}.mbtTOC2 li li {margin:4px 0px;}
.mbtTOC2 li li a{ color:#289728; font-size:15px;}
.mbtTOC2 ol{counter-reset:section1;list-style:none}
.mbtTOC2 ol ol{counter-reset:section2}
.mbtTOC2 ol ol ol{counter-reset:section3}
.mbtTOC2 ol ol ol ol{counter-reset:section4}
.mbtTOC2 ol ol ol ol ol{counter-reset:section5}
.mbtTOC2 ol ol{counter-reset:section2}
.mbtTOC2 ol ol ol{counter-reset:section3}
.mbtTOC2 ol ol ol ol{counter-reset:section4}
.mbtTOC2 ol ol ol ol ol{counter-reset:section5}
.mbtTOC2 li:before{content:counter(section1);counter-increment:section1;position:relative;padding:0 8px 0 0;font-size:18px}
.mbtTOC2 li li:before{content:counter(section1) "." counter(section2);counter-increment:section2;font-size:14px}
.mbtTOC2 li li li:before{content:counter(section1) "."counter(section2) "." counter(section3);counter-increment:section3}
.mbtTOC2 li li li li:before{content:counter(section1) "."counter(section2) "."counter(section3) "." counter(section4);counter-increment:section4}
.mbtTOC2 li li li li li:before{content:counter(section1) "."counter(section2) "."counter(section3) "." counter(section4)"." counter(section5);counter-increment:section5}
/*
.point2 {list-style-type:lower-alpha}
.point3 {list-style-type:lower-roman}
.point4 {list-style-type:disc}
.point2 {list-style-type:lower-alpha}
.point3 {list-style-type:lower-roman}
.point4 {list-style-type:disc}
*/
<div id="post-toc"><data:post.body/></div>
Reemplaza este código todas las veces que lo encuentres.Hasta ahora todas estas modificaciones iban en la plantilla del blog.
Modificaciones en el post (Modo HTML).
Las siguientes van dentro del post o artículo que estás escribiendo, pero atención: en modo HMTL:4.- Por única vez configurar las opciones de la entrada (veremos que en las entradas sucesivas la opción configurada ya queda fija).
5.- Colocas el siguiente código donde desees que aparezca el índice (siempre antes del primer encabezado):
<div class="mbtTOC2">
<button>Índice de contenidos <span>[<a onclick="mbtToggle2()" id="Tog">hide</a>]</span></button>
<div id="mbtTOC2"></div>
</div>
<button>Índice de contenidos <span>[<a onclick="mbtToggle2()" id="Tog">hide</a>]</span></button>
<div id="mbtTOC2"></div>
</div>
Y para que el script se active debes inserir al final del artículo en formato HTML el siguiente código:
<script>mbtTOC2();</script>
Conclusión.
Parece un poco complicado pero en realidad los códigos que vamos a tener que inserir constantemente son los dos últimos porque los tres primeros se colocan en la plantilla por primera y única vez.
Cómo incluir un indice tipo Wikipedia en las entradas de Blogger. Haz clic para Twittear
El esfuerzo vale la pena porque, a mi humilde criterio, el aspecto del blog mejora sensiblemente.
Si te ha gustado el artículo inscribete al feed clicando en la imagen más abajo para tenerte siempre actualizado sobre los nuevos contenidos del blog:
Espero que esta publicación te haya gustado. Si tienes alguna duda, consulta o quieras complementar este post, no dudes en escribir en la zona de comentarios. También puedes visitar Facebook, Twitter, Google +, Linkedin, Instagram, Pinterest y Feedly donde encontrarás información complementaria a este blog. COMPARTE EN!
Excelente plugin, no lo conocía. Ya lo estoy aplicando. Solo que algunas veces se repiten los números. Pueden decirme donde está el bug? Gracias
ResponderEliminarTienes que visualizar el código html de origen. Si por ejemplo usas Chrome clic destro sobre el doble numero vas a ver un codigo del tipo widget .post-body li { Si vas a la plantilla (recuerdo siempre de hacer una copia de backup) y lo buscas prueba a cancelarlo porque está copiado dos veces: una en la plantilla original y otra el en código del plugin. Si no funciona vuelve a la situación original. Recuerda que puedes hacerlo con Ctrl+Z. Te vuelve a mostrar la parte que has cancelado.
EliminarEste comentario ha sido eliminado por el autor.
ResponderEliminar@Alejandro Saiz Martino. Disculpa por la demora en responder al comentario. Recuérdate siempre de colocar los códigos en la versión HTML del post a publicar. El primer código del punto 5 va exactamente antes del primer encabezado (en mi caso es siempre un h3) y el segundo código va siempre al final de todo. Sería la última línea de código presente en el artículo en formato HTML.
EliminarHola tambien uso Blogger, deberías hacer un video de como hacerlo. buen dia.
ResponderEliminar@Alexander Trillo.- Estoy en eso. De cualquier manera el procedimiento es bastante sencillo y se entiende sin problemas. Gracias por comentar y participar en los contenidos del blog.
Eliminar