Practica: Codigo-Personalizado

byMilton Rodriguez Lopez -

  Los lenguajes de programación más utilizados en ciberseguridad

Muestra o elimina el formato de escape de un archivo HTML eliminando rastros de caracteres ofensivos que podrían interpretarse erróneamente como marcado. Enlace: https://www.freeformatter.com/ 

 <!-- Vista Html con código de escape -->
<pre><code class="language-html">
  Formato con el código de escape 
</code></pre>
&lt;pre&gt;&lt;code class="language-html"&gt;
Escape de código HTML
&lt;/code&gt;&lt;/pre&gt;

Agregar el código en el Html, al final de body: Copiar y Agregar el siguiente codigo 
  <!-- Agregar "prism-okaidia.css" y "prism.js" debajo del Blogger Scripts -->
  <link href="//prismjs.com/themes/prism-okaidia.css" rel="stylesheet">
  <script src="//prismjs.com/prism.js" type="text/javascript"></script>


 <!-- Blogger Scripts -->
 <!-- Prism es un resaltador de sintaxis, extensible syntax highlighter-->
<link href='http://prismjs.com/themes/prism-okaidia.css' rel='stylesheet'/>
<script src='http://prismjs.com/prism.js' type='text/javascript'> </script>

<!-- complemento de Prism js para líneas-->
 <link href='https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.css' rel='stylesheet'/>
 <script src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.js'> </script>

<!-- Botón de Copiar: Prism Clipboard -->
<link href='https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/toolbar/prism-toolbar.min.css' rel='stylesheet'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/toolbar/prism-toolbar.min.js'> </script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js'> </script>

Copiar y Agregar el siguiente codigo en el area del html que desee mostrar el codigo con formato: Recuerde que se modifica el class="language- " segun el tipo de codigo a mostrar. 
<div class="container" style="margin: 15px 0px;">
<pre class="line-numbers"><code class="language-html">
Aquí va el código. Se modifica el class="language--html" 
segun el tipo de codigo a mostrar: -html, -css, -js
</code></pre>
</div>

Agregar Código con comentarios 
  <h2>.: Encabezado </h2>
  <ul><li>...Mostrar comentarios en listas antes del codigo...</li></ul>
<pre class="line-numbers"><code class="language-html">
Aquí va el código a mostrar: -html, -css, -js
</code></pre>
  <p>...Comentarios despues del codigo...</p>

Agregar al <head> " el link de bootstrap@5 " </head> 
<!-- CDN link de bootstrap@5.3   -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" />
Agregar al final del <body> el CDN de "bootstrap@5" 
<!--  CDN link de bootstrap@5.3 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
Dos Columnas contenedoras para Imagenes 
<!-- 2 Columnas contenedores para Imagenes-->
 <div id="imgVideo" class="container">
    <div class="row">
      <div class="col">
<div style="width: 20rem;">
    <!-- Primera Imagen  -->
    
    <div>
    </div>
</div>
      </div>
      <div class="col">
<div style="width: 20rem;">
    <!-- segunda Imagen  -->
    
    <div>
    </div>
</div>
      </div>
    </div>
</div>

Dos Columnas contenedoras de Videos: Sustituir el codigo del video youtube "ID-video" por el de su preferencia. 
<!-- 2 Columnas contenedores para Videos-->
<hr>
<h3>Titulo o Encabezado </h3>
<div id="imgVideo" class="container">
    <div class="row">
      <div class="col">
            <!-- Primer video  -->
<div style="width: 20rem;">
    <iframe height="200" width="300" class="BLOG_video_class"
        src="https://www.youtube.com/embed/ID-video" ></iframe>
    <div>
    <p>Nombre del video 1</p>
    </div>
</div>
      </div>
      <div class="col">
            <!-- 2do video  -->
<div style="width: 20rem;">
    <iframe height="200" width="300" class="BLOG_video_class"
        src="https://www.youtube.com/embed/ID-video" ></iframe>
    <div>
    <p>Nombre del video 2</p>
    </div>
</div>
      </div>
    </div>
</div>
<hr>

Agregar al <head> " el link de bootstrap@5 " </head> 

<!--  link de bootstrap@5.3 "  -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" />
Agregar al final del <body> el CDN de "bootstrap@5" 
<!--  CDN de "bootstrap@5.3" -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

Sustituya el "ID" por el numero "#" correspondiente, según la numeración, iniciando del uno "1", en las etiquetas: aria-controls="f-collapseID", data-bs-target="#f-collapseID" y id="f-collapseID", para que funcione el accordion-collapse. 
<!-- Agregar el contenido - Accordion-flush -->
<div class="accordion accordion-flush" id="AccordionFEx">
    <div class="accordion-item">
      <div class="accordion-header">
        <button aria-controls="f-collapse1" aria-expanded="false" class="accordion-button collapsed" data-bs-target="#f-collapse1" data-bs-toggle="collapse" type="button">
          <b>Titulo: flush-collapse1 </b>
        </button>
      </div>
      <div class="accordion-collapse collapse" data-bs-parent="#AccordionFEx" id="f-collapse1">
        <div class="accordion-body">
          Contenido: flush-collapse1 ...
        </div>
      </div>
    </div>
      <div class="accordion-item">
      <div class="accordion-header">
        <button aria-controls="f-collapse2" aria-expanded="false" class="accordion-button collapsed" data-bs-target="#f-collapse2" data-bs-toggle="collapse" type="button">
          <b>Titulo: flush-collapse2 </b>
        </button>
      </div>
      <div class="accordion-collapse collapse" data-bs-parent="#AccordionFEx" id="f-collapse2">
        <div class="accordion-body">
          Contenido: flush-collapse2 ...
        </div>
      </div>
    </div>
      <div class="accordion-item">
      <div class="accordion-header">
        <button aria-controls="f-collapse3" aria-expanded="false" class="accordion-button collapsed" data-bs-target="#f-collapse3" data-bs-toggle="collapse" type="button">
          <b>Titulo: flush-collapse3 </b>
        </button>
      </div>
      <div class="accordion-collapse collapse" data-bs-parent="#AccordionFEx" id="f-collapse3">
        <div class="accordion-body">
          Contenido: flush-collapse3 ...
        </div>
      </div>
    </div>
      <div class="accordion-item">
      <div class="accordion-header">
        <button aria-controls="f-collapse4" aria-expanded="false" class="accordion-button collapsed" data-bs-target="#f-collapse4" data-bs-toggle="collapse" type="button">
          <b>Titulo: flush-collapse4 </b>
        </button>
      </div>
      <div class="accordion-collapse collapse" data-bs-parent="#AccordionFEx" id="f-collapse4">
        <div class="accordion-body">
          Contenido: flush-collapse4 ...
        </div>
      </div>
    </div>
      <div class="accordion-item">
      <div class="accordion-header">
        <button aria-controls="f-collapse5" aria-expanded="false" class="accordion-button collapsed" data-bs-target="#f-collapse5" data-bs-toggle="collapse" type="button">
          <b>Titulo: flush-collapse5 </b>
        </button>
      </div >
      <div class="accordion-collapse collapse" data-bs-parent="#AccordionFEx" id="f-collapse5">
        <div class="accordion-body">
          Contenido: flush-collapse5 ...
        </div>
      </div>
    </div>
    <div class="accordion-item">
        <div class="accordion-header">
          <button aria-controls="f-collapse6" aria-expanded="false" class="accordion-button collapsed" data-bs-target="#f-collapse6" data-bs-toggle="collapse" type="button">
            <b>Titulo: flush-collapse6 </b>
          </button>
        </div>
        <div class="accordion-collapse collapse" data-bs-parent="#AccordionFEx" id="f-collapse6">
          <div class="accordion-body">
            Contenido: flush-collapse6 ...
          </div>
        </div>
      </div>
        <div class="accordion-item">
        <div class="accordion-header">
          <button aria-controls="f-collapse7" aria-expanded="false" class="accordion-button collapsed" data-bs-target="#f-collapse7" data-bs-toggle="collapse" type="button">
            <b>Titulo: flush-collapse7 </b>
          </button>
        </div>
        <div class="accordion-collapse collapse" data-bs-parent="#AccordionFEx" id="f-collapse7">
          <div class="accordion-body">
            Contenido: flush-collapse7 ...
          </div>
        </div>
      </div>
        <div class="accordion-item">
        <div class="accordion-header">
          <button aria-controls="f-collapse8" aria-expanded="false" class="accordion-button collapsed" data-bs-target="#f-collapse8" data-bs-toggle="collapse" type="button">
            <b>Titulo: flush-collapse8 </b>
          </button>
        </div>
        <div class="accordion-collapse collapse" data-bs-parent="#AccordionFEx" id="f-collapse8">
          <div class="accordion-body">
            Contenido: flush-collapse8 ...
          </div>
        </div>
      </div>
        <div class="accordion-item">
        <div class="accordion-header">
          <button aria-controls="f-collapse9" aria-expanded="false" class="accordion-button collapsed" data-bs-target="#f-collapse9" data-bs-toggle="collapse" type="button">
            <b>Titulo: flush-collapse9 </b>
          </button>
        </div>
        <div class="accordion-collapse collapse" data-bs-parent="#AccordionFEx" id="f-collapse9">
          <div class="accordion-body">
            Contenido: flush-collapse9 ...
          </div>
        </div>
      </div>
        <div class="accordion-item">
        <div class="accordion-header">
          <button aria-controls="f-collapse10" aria-expanded="false" class="accordion-button collapsed" data-bs-target="#f-collapse10" data-bs-toggle="collapse" type="button">
            <b>Titulo: flush-collapse10 </b>
          </button>
        </div>
        <div class="accordion-collapse collapse" data-bs-parent="#AccordionFEx" id="f-collapse10">
          <div class="accordion-body">
            Contenido: flush-collapse10 ...
          </div>
        </div>
      </div>
  </div>

Crear un indice del contenido de una pagina o Entrada

Para mostar un Indice o Tabla de Contenido en una Entrada/pagina/Articulo debes hacer lo siguiente:
Paso 1: Entrar a Blogger, Crear una Entrada, entrar a la Vista HTML, debes copiar y pegar el siguiente código: donde quieres que aparezca tu Tabla de Contenido. Puede ser en la primera linea ó en el segundo parrafo. 

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

Paso 2: copiar y pegar el código siguiente hasta el final de tu entrada o pagina (Articulo del blog): Esto permitira que se identifiquen todos los encabezados y subtitulos del articulo. 

 <script>mbtTOC2();</script>

Paso 3:Entrar a Blogger/Tema/Personalizar/Editar HTML, copiar y pegar el código siguiente en la plantilla de Blogger:. Una vez allí busca la etiqueta </head> y pega el código en la parte superior del </head> 

 <!-- CREAR una TABLA de CONTENIDOS en Blogger  -->
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
<script type='text/javascript'> 
//<![CDATA[ 
//************* TOC Plugin V2.0  
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>

Paso 4: Añadir los códigos CSS en la plantilla de Blogger: busca la etiqueta ]]></b:skin> y arriba de él, pega los siguientes estilos/css:

 /* Indice - Tabla de contenido | Plugin V2.0 */
.mbtTOC2{
border: 1px solid #8e8e8e; /*Border*/
border-radius: 5px;
box-shadow: 0px 0px 3px 1px #ddd; /*Sombra*/
background-color: #f1f1f1; /*Color de fondo*/
margin: 5px auto;
padding: 5px 10px;
font-family: Roboto, sans-serif, Oswald, arial;
font-weight: 400;
display: block;
width: 100%; /*Ancho*/
}

.mbtTOC2 button{
background:transparent;
font-family:oswald, arial; font-size:20px;
position:relative;
outline:none;
border:none;
color: #066613;  /*  verde= #066613   negro= #2E2E2E   */
padding:0 0 0 10px;
}

.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;color: red;
}

.mbtTOC2 li{margin:10px 0; }

.mbtTOC2 li:before{color:red; }

.mbtTOC2 li a {
color: #000; /*Color del titulo principal*/
text-decoration:none;
font-size:17px;
}

.mbtTOC2 li a:hover {
text-decoration: underline;
  background-color: #f3efd9;
  font-size: 19px;
}
.mbtTOC2 li li {margin:4px 0px;}

.mbtTOC2 li li a{
color: #070bf0f6   /*  azul= #070bf0f6  negro= #040404 */;
font-size:16px;
}

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

Paso 5: Buscar el código <data:post.body/> y reemplazarlo por el código siguiente: 

 <div id="post-toc"><data:post.body/></div>

Listo, Guardar cambios y abrir el articulo para visualizar el Indice creado automaticamente. Nota: para crear un indice o tabla de contenido en otro articulo o entrada de tu blog, solo deberas repetir los pasos 1 y 2, ya que los pasos siguientes ya no seran necesarios, poruqe la plantilla HTML/XML conservara la configuración previa.

Para crear una Tabla de contenido por Etiqueta / Categoria, para las entradas de tu blog en Blogger, copia y pega el siguiente codigo en una  Entrada o Pagina de tu blog, de blogger. Luego sustituye la blogUrl: por el de tu Página Web. blogUrl: "https://practica-blogz.blogspot.com/" = Dirección de su Blog URL. Posteriormente Guardar cambio y Listo. Luego Agregar el enlace al menu de tu preferencia 

<!-- Tabla de contenido -->
<div>
<div class="tabla-contenidos">
  <div class="text-tabla">
     <b style="color: white;">Tabla de contenido por Etiqueta / Categoria </b>
  </div>
<div id="tabla-cont">
  <span class="loading">Cargando...</span>
  <div class="separator" style="clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ-c8oS6Z316otHEvTNYeVNaO8eADVf7zEVfrmW9flO7zKIjGEwMnQWmHip3JhPpjxGcK3ZBbK4UCmfBymCSYIiLwATz4LAKIB5HXZbJTqFoBJ-ahKtyASLotbiGJR3_w5BxsnbscUyss5bViQmQ3mMIPW8OeWeDcvbQOHbYYiZovU_ZgQNq3PJMHNYgZJ/s677/Tabla%20de%20contenido.png" style="display: block; padding: 1em 0px; text-align: center;"><img alt="" border="0" data-original-height="268" data-original-width="677" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ-c8oS6Z316otHEvTNYeVNaO8eADVf7zEVfrmW9flO7zKIjGEwMnQWmHip3JhPpjxGcK3ZBbK4UCmfBymCSYIiLwATz4LAKIB5HXZbJTqFoBJ-ahKtyASLotbiGJR3_w5BxsnbscUyss5bViQmQ3mMIPW8OeWeDcvbQOHbYYiZovU_ZgQNq3PJMHNYgZJ/s600/Tabla%20de%20contenido.png" width="600" /></a></div> 
  </div></div>

<script type="text/javascript">
var tabbedTOC = {
    blogUrl: "https://practica-blogz.blogspot.com/", // Dirección de su Blog URL
    containerId: "tabla-cont",
    activeTab: 1, 
    showDates: false, 
    showSummaries: false,
    numChars: 200, 
    showThumbnails: false, 
    thumbSize: 40, 
    noThumb: "https://3.bp.blogspot.com/-vpCFysMEZys/UOEhSGjkfnI/AAAAAAAAFwY/h1wuA5kfEhg/s72-c/grey.png", 
    monthNames: [ 
        "Enero",
        "Febrero",
        "Marzo",
        "Abril",
        "Mayo",
        "Junio",
        "Julio",
        "Agosto",
        "Septiembre",
        "Octubre",
        "Noviembre",
        "Diciembre"
    ],
    newTabLink: true, 
    maxResults: 99999, 
    preload: 0, 
    sortAlphabetically: true, 
    showNew: 7, 
    newText: " - <em style='color:blue;'> Nuevo!</em>" 
};
    
</script>

<!-- Codigo JS tabla-cont.js -->
<script type="text/javascript">
var tabbedTOC_defaults = {
	blogUrl: "https://www.ayudadeblogger.com/", // Blog URL
	containerId: "tabla-cont", // Recipiente ID
	activeTab: 1, // El índice de pestaña activa predeterminado (predeterminado: la primera pestaña)
	showDates: false, // true para mostrar la fecha de publicación
	showSummaries: false, // true para mostrar los resúmenes de las publicaciones
	numChars: 200, // Número de caracteres de resumen
	showThumbnails: false, // True para mostrar las miniaturas de las publicaciones (no recomendado)
	thumbSize: 40, // Thumbnail size - Tamaño de miniatura
	noThumb: "https://3.bp.blogspot.com/-vpCFysMEZys/UOEhSGjkfnI/AAAAAAAAFwY/h1wuA5kfEhg/s72-c/grey.png", // No thumbnail URL
	monthNames: [ // Array of month names - Matriz de nombres de meses
		"Januari",
		"Februari",
		"Maret",
		"April",
		"Mei",
		"Juni",
		"Juli",
		"Agustus",
		"September",
		"Oktober",
		"November",
		"Desember"
	],
	newTabLink: true, // Open link in new window?
	maxResults: 99999, // Maximum posts result
	preload: 0, // Load the feed after 0 seconds (option => time in milliseconds || "onload")
	sortAlphabetically: true, // `false` to sort posts by date
	showNew: false, // `false` to hide the "New!" mark in most recent posts, or define how many recent posts are to be marked
	newText: " - <em style='color:red;'>Baru!</em>" // HTML for the "New!" text
};

for (var i in tabbedTOC_defaults) {
	tabbedTOC_defaults[i] = (typeof(tabbedTOC[i]) !== undefined && typeof(tabbedTOC[i]) !== 'undefined') ? tabbedTOC[i] : tabbedTOC_defaults[i];
}

function clickTab(pos) {
	var a = document.getElementById(tabbedTOC_defaults.containerId),
		b = a.getElementsByTagName('ol'),
		c = a.getElementsByTagName('ul')[0],
		d = c.getElementsByTagName('a');
	for (var t = 0; t < b.length; t++) {
		b[t].style.display = "none";
		b[parseInt(pos, 10)].style.display = "block";
	}
	for (var u = 0; u < d.length; u++) {
		d[u].className = "";
		d[parseInt(pos, 10)].className = "active-tab";
	}
}

function showTabs(json) {

	var total = parseInt(json.feed.openSearch$totalResults.$t,10),
		c = tabbedTOC_defaults,
		entry = json.feed.entry,
		category = json.feed.category,
		skeleton = "",
		newPosts = [];

	for (var g = 0; g < (c.showNew === true ? 5 : c.showNew); g++) {
		if (g == entry.length) break;
		entry[g].title.$t = entry[g].title.$t + (c.showNew !== false ? c.newText : '');
	}

	entry = c.sortAlphabetically ? entry.sort(function(a,b) {
		return (a.title.$t.localeCompare(b.title.$t));
	}) : entry;
	category = c.sortAlphabetically ? category.sort(function(a,b) {
		return (a.term.localeCompare(b.term));
	}) : category;

	// Build the tabs skeleton
	skeleton = '<span class="divider-layer"></span><ul class="toc-tabs">';
	for (var h = 0, cen = category.length; h < cen; h++) {
		skeleton += '<li class="toc-tab-item-' + h + '"><a href="javascript:clickTab(' + h + ');">' + category[h].term + '</a></li>';
	}
	skeleton += '</ul>';

	// Bulid the tabs contents skeleton
	skeleton += '<div class="toc-content">';
	for (var i = 0, cnt = category.length; i < cnt; i++) {
		skeleton += '<ol class="panel" data-category="' + category[i].term + '"';
		skeleton += (i != (c.activeTab-1)) ? ' style="display:none;"' : '';
		skeleton += '>';
		for (var j = 0; j < total; j++) {
			if (j == entry.length) break;
			var link, entries = entry[j],
				pub = entries.published.$t, // Get the post date
				month = c.monthNames, // Month array from the configuration
				title = entries.title.$t, // Get the post title
				summary = ("summary" in entries && c.showSummaries === true) ? entries.summary.$t.replace(/<br ?\/?>/g," ").replace(/<.*?>/g,"").replace(/[<>]/g,"").substring(0,c.numChars) + '&hellip;' : '', // Get the post summary
				img = ("media$thumbnail" in entries && c.showThumbnails === true) ? '<img class="thumbnail" style="width:'+c.thumbSize+'px;height:'+c.thumbSize+'px;" alt="" src="' + entries.media$thumbnail.url.replace(/\/s72(\-c)?\//,"/s"+c.thumbSize+"-c/") + '"/>' : '<img class="thumbnail" style="width:'+c.thumbSize+'px;height:'+c.thumbSize+'px;" alt="" src="' + c.noThumb.replace(/\/s72(\-c)?\//,"/s"+c.thumbSize+"-c/") + '"/>', // Get the post thumbnail
				cat = (entries.category) ? entries.category : [], // Post categories
				date = (c.showDates) ? '<time datetime="' + pub + '" title="' + pub + '">' + pub.substring(8,10) + ' ' + month[parseInt(pub.substring(5,7),10)-1] + ' ' + pub.substring(0,4) + '</time>' : ''; // Formated published date
				
			for (var k = 0; k < entries.link.length; k++) {
				if (entries.link[k].rel == 'alternate') {
					link = entries.link[k].href; // Get the post URL
					break;
				}
			}
			for (var l = 0, check = cat.length; l < check; l++) {
				var target = (c.newTabLink) ? ' target="_blank"' : ''; // Open link in new window?
				// Write the list skeleton only if at least one of the post...
				// ... has the same category term with one of the current categories term list
				if (cat[l].term == category[i].term) {
					skeleton += '<li title="' + cat[l].term + '"';
					skeleton += (c.showSummaries) ? ' class="bold"' : '';
					skeleton += '><a href="' + link + '"' + target + '>' + title + date + '</a>'; 
					skeleton += (c.showSummaries) ? '<span class="summary">' + img + summary + '<span style="display:inline;clear:both;"></span></span>' : '';
					skeleton += '</li>';
				}
			}
		}
		skeleton += '</ol>';
	}

	skeleton += '</div>';
	skeleton += '<div style="clear:both;"></div>';
	document.getElementById(c.containerId).innerHTML = skeleton;
	clickTab(c.activeTab-1);

}

(function() {
	var h = document.getElementsByTagName('head')[0],
		s = document.createElement('script');
		s.type = 'text/javascript';
		s.src = tabbedTOC_defaults.blogUrl + '/feeds/posts/summary?alt=json-in-script&max-results=' + tabbedTOC_defaults.maxResults + '&orderby=published&callback=showTabs';
	if (tabbedTOC_defaults.preload !== "onload") {
		setTimeout(function() {
			h.appendChild(s);
		}, tabbedTOC_defaults.preload);
	} else {
		window.onload = function() {
			h.appendChild(s);
		};
	}
})();

</script>
  
<!--CDN tabla-cont.js
	<script src="https://cdn.statically.io/gh/Ayudadeblogger/tabla-contenido/main/tabla-cont.js" type="text/javascript"></script>
--> 
  
<style>
  .tabla-contenidos {
    background-color: #130757;
    max-width: 100%;
    border-radius: 12px;
    padding: 16px 24px;
    position: relative;
}
  .text-tabla {
    font-size: 16px;
    line-height: 26px;
    font-weight: 400;
    letter-spacing: -.5px;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-family: Google Sans,arial,sans-serif;
    letter-spacing: .1px;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 20px;
    text-align: center;
}
  #tabla-cont {
  margin:0 auto;
  background-color:#fff;
  -webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);
  -moz-box-shadow:0 1px 3px rgba(0,0,0,.4);
  box-shadow:0 1px 3px rgba(0,0,0,.4);
  overflow:hidden;
  position:relative;
  color:#333;
    padding: 14px;
    border-radius: 8px;
}

#tabla-cont .loading {
  display:block;
  padding:5px 10px;
  font:normal bold 10px Arial,Sans-Serif;
  color:white;
}

#tabla-cont ul,
#tabla-cont ol,
#tabla-cont li {
  margin:0 0;
  padding:0 0;
  list-style:none;
}

#tabla-cont .toc-tabs {
  width:30%;
  float:left;
}

#tabla-cont .toc-tabs li a {
  display:block;
  display:inline;
  font:normal bold 12px/28px Arial,Sans-Serif;
  overflow:hidden;
  text-overflow:ellipsis;
  color:#222;
  text-transform:uppercase;
  text-decoration:none;
  padding: 5px 12px;
  cursor:pointer;
}

#tabla-cont .toc-tabs li a:hover {
  background-color:#3f51b5;
  color:white;
}

#tabla-cont .toc-tabs li a.active-tab {
  background-color:#3f51b5;
  color:white;
  -webkit-box-shadow:-2px 2px 2px rgba(0,0,0,.5);
  -moz-box-shadow:-2px 2px 2px rgba(0,0,0,.5);
  box-shadow:-2px 2px 2px rgba(0,0,0,.5);
  position:relative;
  z-index:5;
  margin:0 -1px 0 0;
  border-bottom: 4px solid #000;
}

#tabla-cont .toc-content,
#tabla-cont .divider-layer {
  width:70%;
  float:right;
  background-color:white;
  border-left:5px solid #3f51b5;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}

#tabla-cont .divider-layer {
  float:none;
  display:block;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  -webkit-box-shadow:0 0 7px rgba(0,0,0,.7);
  -moz-box-shadow:0 0 7px rgba(0,0,0,.7);
  box-shadow:0 0 7px rgba(0,0,0,.7);
}

#tabla-cont .panel {
  position:relative;
  z-index:5;
  font:normal normal 13px Arial,Sans-Serif;
}

#tabla-cont .panel li a {
    display: block;
   display:inline;
    position: relative;
    font-weight: bold ;
    font-size: 14px;
    text-decoration: none;
    outline: none;
    overflow: hidden;
    padding: 5px 9px;
    color: #222;
}

    #tabla-cont .panel  li {
  padding: 3px 8px;
}
  
  #tabla-cont .panel  li a:hover {
  background-color:#0f0a42;
  color:white;
  padding: 7px 12px;
}
  
#tabla-cont .panel li time {
  display:block;
  font-style:italic;
  font-weight:normal;
  font-size:13px;

  color:#666;
  float:right;
}

#tabla-cont .panel li .summary {
  display:block;
 
  padding:10px 12px 10px;
  font-style:italic;
  border-bottom:4px solid #3f51b5;
  overflow:hidden;
}

#tabla-cont .panel li .summary img.thumbnail {
  float:left;
  display:block;
  margin:0 8px 0 0;
  padding: 5px 4px;
  width:72px;
  height:72px;
  border:1px solid #dcdcdc;
  background-color:#fafafa;
}

#tabla-cont .panel li:nth-child(even) {
}

#tabla-cont .panel li a:hover,
#tabla-cont .panel li a:focus,
#tabla-cont .panel li a:hover time,
#tabla-cont .panel li.bold a {
box-shadow: 5px 5px 25px 0px rgb(46 61 73 / 20%);
    border-radius: 0.375rem;
    transition: all 0.3s ease;
  outline:none;
}

#tabla-cont .panel li.bold a:hover,
#tabla-cont .panel li.bold a:hover time {
  background-color:#222;
}

@media (max-width:700px) {

  #tabla-cont .toc-tabs,
  #tabla-cont .toc-content {
    float:left;
    width:100%;
    display:block;
  }
  #tabla-cont .toc-tabs li {
    display:inline;
    float:left;
  }

  #tabla-cont .toc-content {
    border:none;
  }
  #tabla-cont .divider-layer,
  #tabla-cont .panel li time {
    display:none;
  }
}
</style>
</div>


<div>
  <h3 style="text-align: center; color: #ff6200;"><b>Tabla de contenido</b></h3>
  <ol style="color: #ff6200; text-align: left;">
    <li><a href="" target="_blank">Tema-n</a></li>
    <li><a href="" target="_blank">Tema-n</a></li>
    <li><a href="" target="_blank">Tema-n</a></li>
    <li><a href="" target="_blank">Tema-n</a></li>
  </ol>
</div>

 ...

Tags

Entradas que pueden interesarte

Artículo Anterior Artículo Siguiente