Tabla de Contenido o Índice Automático para Blogger | Prospera Ya
1 2Captcha 1 7 1 8 1 8.1 1 Acelera tu Internet 11 acelerar 1 acelerar chrome 1 acelerar computadora 6 acelerar internet 5 acelerar pc 1 ACG Player 1 ADBCH.TOP 2 AdBTC 3 Administrador de audio 1 adobe 1 ADVANCED SYSTEMCARE 1 Adzbazar 11 airtm 1 AirTm 2018 1 airtm bloqueado 3 airtm cajero 2 airtm transferencia bancaria 3 airtm tutorial 1 android 1 anotar 2 ANTIVIRUS 3 anuncios 2 aplicaciones 1 apo 1 App 1 Apps 1 arreglar-pc 1 artículos 3 Artificial 1 Asbucks 1 atiadvert 1 Aticlix 7 Audio 1 aumentar Internet 1 aumentar ram 1 aumentar velocidad del Internet 1 aviso.bz 1 ayuda 1 ayuda para perros 1 ayuda social 1 banco 1 BCH 1 Betfury 1 BETFURY Gana 25 Satoshi Cada 20 Minutos 1 BigBuxCoin 42 Bitcoin 21 Bitcoins 1 bitgames 1 Bitter.io 1 Blockchain 1 blogger 1 bluetooth 1 bots para forex 1 BPCLIX pagando sin limite de cobro 1 BPCLIX Que es y Como Funciona 1 brave 1 búsquedas 1 BuxInside 1 Buxvertise 1 cajero 3 Cambia dolares a Bolivares 1 Captcha 2 captchas 1 capturas de pantalla 1 caritas 1 CashFreed 1 CashTravel 1 chatGPT 1 Clipchamp 1 clixblue 1 Cloud System Booster 1 códigos 1 Coinbulb 1 Coinbulb Paga 1 Coineke Gana Dinero con Minería 1 coins 1 comedia 1 comisiones 1 Como Abrir 1 Como Cobrar en Coinbulb 1 como cobrar en neobux 1 Como Depositar 1 Como Funciona 4 Cómo Funciona AirTm 2 Como ganar bitcoins gratis 1 Cómo ganar bitcoins gratis 6 Como Ganar Bitcoins Gratis por ver Anuncios 23 Como Ganar Dinero 3 como ganar dinero con captchas 1 como ganar dinero con COS.TV 3 como ganar dinero con encuestas 1 Como Ganar Dinero con Neobux 1 Como Ganar Dinero con PTCSHARE 2 como ganar dinero desde casa 1 como ganar dinero en Internet 15 como ganar dinero por internet 1 como ganar dinero por Internet desde casa 4 Como Ganar Dinero. Prospera Ya 5 Como Ganar Dinero. Prospera Ya dinero online 2 Como Ganar Dogecoins por hora 1 Como Ganar Ethereum 1 Como Ganar Muchos Bitcoins de manera Automática 2 Como limpiar pc 1 Como Mejorar Optimizar y Acelerar Internet en Windows 1 Como Vincular o asociar la red de Facebook con YouTube 1 convertidores. texto 1 convertir 6 convertir dinero 1 convertir teléfono en micrófono 1 corregir problemas en realtek 1 cpa 1 crea-videos 1 Crear programas portables 4 criptomonedas 1 crisis 1 croclix 2 Cryptos 1 cursores 11 derrota la crisis 1 Descargar 1 desfragmentar ram 1 dibujar en pantalla windows 1 Diccionario 1 diccionario de negocios online 1 diccionario tecnico de negocio de Internet 1 Dichotomic 67 dinero 3 dinero a PayPal 1 dinero con tareas y encuestas 1 dinero con trabajos online 1 dinero desde casa 1 dinero en linea 1 dinero ganar-online 1 dinero gratis 17 dinero online 6 dinero por internet 1 diversión 1 dock 1 dolar 1 Dolares 1 DollarClix 1 driver sonido 3 Ecualizador 1 ecualizador paramétrico 1 ecualizadores 1 edición de audio 1 editor 1 editor de sonido. efectos especiales 1 efectos 1 efectos especiales 1 El Mejor Reproductor de Música y Audio para PC Windows 10 1 eliminar ruido 2 encuesta 1 encuestadoras 34 encuestas 2 encuestas remuneradas 1 encuestas. anuncios 1 encuestas. tareas 1 entretenimiento 2 Enviar 3 Enviar y Recibir Bitcoins 1 escribiendo 1 escribir 1 Estafa 1 estrategia de rejilla 1 estrategia martingala 1 estrategia para resolver encuestas 5 estrategias 1 Estrategias Doge 1 estudio de mercado 1 Ethereumclix 1 EverGreenzAdz 1 Everve 1 explicacion completa 2 Explicación Completa 1 extensiones 1 Familyclix 1 faucet 1 Faucets 1 Firefaucet 1 firefly 2 firefox 1 flechas 1 Foap 1 forex 1 formas 1 fotos 1 free cash como ganar dinero 1 FreeCash 1 FreeDogecoin 1 freedogecoins 1 Funcionamiento y Como Ganar Dinero? 8 gana 4 gana dinero desde casa 1 gana dinero en linea 2 gana dinero online 1 gana dinero por Internet 42 ganar 3 Ganar bitcoin 1 ganar con captchas 44 ganar dinero 2 ganar dinero a PayPal 1 Ganar dinero con CryptoTap 1 ganar dinero con emails 1 ganar dinero con inversión 1 ganar dinero con paidverts 2 ganar dinero con tareas 21 ganar dinero desde casa 1 ganar dinero en Internet 1 ganar dinero en la nube 1 ganar dinero minando 2 ganar dinero online 28 ganar dinero por internet 1 ganar dinero por internet en PayPal 1 Ganar Dinero Resolviendo Captchas 3 ganar dinero viendo videos 1 Ganar Dinero Viendo Anuncios 1 ganar dinero viendo videos 1 ganar rublos 1 ganar satoshis 8 ganar-dinero 1 generar trafico 1 GetPaidTo 1 gg2u 1 GiftHunterClub 1 givvyoffers 1 Glosario 1 Glosario técnico 1 Google 1 gpt 2 gptplanet explicación completa 1 gptplanet que es y cómo funciona 1 grabar audio 1 HeedYou 1 HeyPiggy 1 historia de King 1 Hombre Lobo en California 1 html 1 humor 2 I.A 1 I.A. 1 imagenes 1 InboxDollars 1 INERTIX 1 infinite-money 3 inteligencia 2 internet 1 inversion 1 inversión 1 Jokerbux 3 juegos 1 KIng 1 King-of-Prizes 1 Kolotibablo 1 Latinoamérica 1 liberar ram 4 limpiar 2 Limpiar pc 1 LiteGPT 1 LootUP 1 Los Mejores YOUTUBERS 1 Los Mejores YOUTUBERS de Habla Hispana más Famosos 1 LUFS 1 marketing 1 mascotas 1 Masterbots 1 Mathibux 1 mause 1 Mejor PTC en referidos Rentados 1 mejorar internet 1 mejorar ram 1 mejorar ram en windows 2 mejorar rendimiento 1 mejores 1 memory cleaner 1 Mensaje de Motivación Personal 1 meta-verso 1 micrófono 1 micrófono inalámbrico 1 micrófono karaoke 1 micrófono para pc 1 micrófono usb 1 minado 1 minar 2 minería 1 minería cruzada 1 minería hibrida 2 minitrabajos 1 Mobrog 2 money 1 Moneybux NUEVA PTC para Ganar Dinero Viendo Anuncios desde Casa 3 multimedia 3 muros de ofertas 2 música 1 navegador para minar 2 neobux 1 Neobux Nuevas Noticias 1 Neomoon 1 NexoBux 1 nexus 1 nomenclatura 1 normalizar-audio 1 Noticias Importantes Sobre AirTm 1 Nueva PTC pagando Sin Mínimo de Pago 1 Nueva Ptc para Ganar Dinero desde Casa 2018 1 obtener dinero en internet 1 obtener visita a tu web o blog 2 ofertas 1 Offernation 6 online 1 OpenAI 1 opera 1 Optimalbux 5 optimizar 1 optimizar google chrome 3 optimizar navegador 3 optimizar pc 1 optimizar ram 1 Optimizar TPC 3 optimizar windows 1 Optimizar y acelerar chrome al maximo 1 Optimizar y acelerar chrome al máximo 1 OPTIMIZAR Y ACELERAR NAVEGADORES 1 Optimizar y Acelerar Pc al Máximo sin Programas para Windows 10 1 Optimizar y acelerar Windows al maximo 1 Optimizar y acelerar Windows al máximo 1 Otohits 1 Paginas de captchas 1 paginas de ganar dinero 1 paginas de inversión 1 Paginas que NO pagan. Que hacer con ellas 1 PaidTap 1 Paidverts 1 paranoia 1 parsear 3 Paypal 1 PayPay 2 pc 1 Perfil para encuestas 1 Perfil Personal 1 perros 1 perros abandonados 1 perros rescatados 1 plata 1 Poderosos 1 Pointofix 1 Portabilizar programas 1 PrizeRebel 1 Problemas para acceder a la plataforma en Venezuela y Soluciones 1 procesador-pago 2 procesadores 1 procesadores de pago 1 programas 6 prospera 1 próspera 23 Prospera Ya 4 Prospera-ya 1 protypers 2 Pruebas de superación 5 ptc 1 PTCSHARE 1 Publipaid 1 Publipaid. ¿Que es 1 Que es y como Funciona. El Mejor cajero y Procesador del Momento 1 ram 1 RapidWorkers 1 raptor bot 1 RealResearch 1 Realtek 1 Realtek High Definition Audio 1 realtek windows 10 1 Reaper 1 recibir 1 Recibir Dinero 1 redes 1 redes sociales 6 referidos 1 Registrarse y Verificar Cuenta AirTm Desde Cualquier País 1 rendimiento 1 resaltar 2 resolver captchas 1 Respondent 1 retirar 1 Rewarding 1 Ricos 1 risa 1 robot de forex 1 Rocket GPT 2 rublos 1 RuCaptcha ganar con captchas 1 Salient Surveys 1 SCAM 1 Scarlet-Clicks 1 servicios 1 SO 1 sociales 1 Solucion para entrar en AirTm Venezuela 9 sonido 1 Sora 1 SpaceShooter 1 SproutGigs 1 Star-Clicks 1 SuperPay.Me 1 superpayme como funciona 2021 1 Surveyeah 1 Surveytime 1 Swagbucks 1 sweet 14 tareas 1 tarjeta 1 tarjeta-amazon 1 TeaserFast 1 Textbroker 1 texto 1 textos 1 tienda 1 TimeBucks 1 Timebucks que es y como funciona 5 trabajo 1 tradeo 1 Trading 1 tráfico orgánico 1 transacciones 1 trezor bot 9 ver anuncios 1 video 4 videos 1 Videos-Automatizados 1 viendo 1 visitas reales 1 Vista y XP 1 VoiceMeeter 2 voz 1 Wellclix 1 Wilneat 14 windows 1 wise memory 1 Wo Mic 1 Worker-Cash 1 YouGetProfit 3 YouTube 1 YOUTUFAME 1 Zetpay 1 Zoombucks

Tabla de Contenido o Índice Automático para Blogger

 Tabla de Contenido o Índice Automático para Blogger
Crear tabla de contenido en blogger

Para aquella personas que quieran realizar un índice o tabla de contenidos en un blog o web de blogger y que además aparezca en una pagina, post o entrada, hoy te enseñaremos como realizar esta tarea con unos sencillos pasos que se mostraran mas abajo.

¿Qué es o para que sirve una tabla de contenidos?

Bueno, en realidad existen muchos tipos de tablas para blogs, las cuales varían de acuerdo a su utilidad. Las hay tipo acordeón, las tablas normales, las tablas o Box para códigos, etc...Cada tipo de tabla tiene su función pero las famosas renombradas como tabla de contenidos se refieren a cajas construidas con código HTML para alojar un resumen o índice de algún tema en especial. Estas tablas son muy útiles, sobre todo para entradas muy largas llenas de títulos, subtítulos, encabezados. Además  es una herramienta muy buena para el lector y el SEO del dueño del blog o la web. En Blogger todavía no han desarrollado ningun script para hacer la ejecución de índices en automático y es por ello que vamos a tener que usar un poco de código. 
Por otro lado es bueno mencionar que existen plantillas prediseñadas para blogger, como la que yo uso, donde ya vienen herramientas para cajas o tablas de todo tipo.

Crear Tabla de contenidos en Blogger

Lo primero que vamos a realizar es ir a la configuración HTML de tu plantilla. Para ello solo entramos en blogger y buscamos la pestaña de Tema, hacemos click y luego abrimos el recuadro que dice personalizar. Una vez allí buscamos la pestaña HTML y la seleccionamos. Después se nos abrirá nuestra plantilla en su propio código. Luego y dentro de la plantilla buscaremos este código: </head>. Para hallarlo de forma fácil podemos copiar la expresión anterior y luego dentro de la plantilla de blogger hacemos un click en cualquier parte y después pulsamos la tecla control mas la tecla f de nuestro teclado. Luego de ello en la parte superior izquierda de blogger se abrirá un cuadro de búsqueda y allí pegaremos el código anterior. Damos enter y automáticamente aparecerá el código: </head>. Una vez visualizado, copiaremos y pegaremos el siguiente código por encima del anterior. 

<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="Ocultar"):(a.style.display="none",b.innerHTML="Mostrar")}
//]]>
</script>

Añadir estilos CCS

Luego de lo anterior tendremos que crear estilos al índice a traves de códigos CCS. Para ello buscaremos en la plantilla : ]]></b:skin> y por encima de este código pegaremos el que se muestra abajo:


[code type="CSS"]/*Tabla de contenido | Plugin V2.0 by MyBloggerTricks*/ .mbtTOC2{ border: 1px solid #54b2e9; /*Border*/ border-radius: 5px; box-shadow: 0px 0px 3px 1px #ddd; /*Sombra*/ background-color: #dbebf5; /*Color de fondo*/ margin: 30px auto; padding: 20px 10px; font-family: Oswald, arial; display: block; width: 100%; /*Ancho*/ } .mbtTOC2 button{ background:transparent; font-family:oswald, arial; font-size:22px; position:relative; outline:none; border:none; color:#2E2E2E; padding:0 0 0 15px; } .mbtTOC2 button a { color:#FF0313; padding:0px 2px; cursor:pointer; } .mbtTOC2 button a:hover{ text-decoration:underline; } .mbtTOC2 button span { font-size:15px; margin:0px 10px; } .mbtTOC2 li{margin:10px 0; } .mbtTOC2 li a { color:#EA1414; /*Color del titulo principal*/ text-decoration:none; font-size:20px; text-transform:capitalize; } .mbtTOC2 li a:hover { text-decoration: underline; } .mbtTOC2 li li {margin:4px 0px;} .mbtTOC2 li li a{ color:#040404; font-size:17px; } .mbtTOC2 .point3, .mbtTOC2 .point2{ padding: 0px 0px 0px 24px; } .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 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}[/code]

[success title="Nota" icon="check-circle"] Los estilos anteriores se pueden editar a tu manera. [/success]

Reemplazo de código

Aquí lo que vamos a realizar es simplemente buscar el código: <data:post.body/> en nuestra plantilla y luego sustituirlo por el código de abajo: 


[code type="HTML"]<div id="post-toc"><data:post.body/></div>[/code]

luego de todos los pasos anteriores ya podemos guardar los cambios en nuestra plantilla. Para mas información pueden visitar el video tutorial


Crear o Mostrar tabla - índice en una entrada, Post o pagina

Luego de haber realizado todos los cambios anteriores en tu plantilla de blogger, ya podemos implementar el índice en cualquier post o entrada. Lo único que hay que hacer es colocar en versión HTML el siguiente código dentro del post(se recomienda pegar el código después del primer párrafo).


[code type="HTML"]<div class="mbtTOC2"> <button>Tabla de contenido <span>[<a id="Tog" onclick="mbtToggle2()">Ocultar</a>]</span></button> <div id="mbtTOC2"></div> </div>[/code]

Luego para finalizar colocaremos este ultimo código al final de nuestro post en modo HTML: 

[code type="HTML"]<script>mbtTOC2();</script>[/code]

Conclusiones

Aunque para fabricar buenos post no es estrictamente necesario crear una tabla de contenidos, muchas veces para el lector es precisa sobre todo si el contenidos largo. Además de ello los artículos con índice claman seriedad y prestigio del escritor pues se esta tomando tiempo para ser ordenado. Así pues, en mi opinión es muy bueno usar índices en nuestras entradas pues nuestros lectores nos lo agradecerán  y ello también es muy bueno para incrementar el SEO.


Publicar un comentario

  1. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  2. Muchas gracias por el truco. Aparentemente sí se aplica en mi blog, pero en vista previa no puedo visualizar sí de verdad funciona a pesar de haber seguido todos los pasos. Se da la circunstancia de que lo he incorporado en una entrada que tengo programada para dentro de unas semanas, y aunque copio todo el código del HTML de esa entrada en un blog de prueba, tampoco parece aplicarse.

    Un saludo.

    ResponderEliminar
  3. ¿Cómo puedo eliminar la numeración de las tablas? Muchas gracias. Armindo.

    ResponderEliminar

[blogger]

Author Name

Formulario de contacto

Nombre

Correo electrónico *

Mensaje *

Imágenes del tema: Jason Morrow. Con la tecnología de Blogger.