Tablas de contenidos exclusivas para blogger
Hoy te traigo un pack completo de diferentes tablas de contenidos exclusivas para blogger y que puedes colocar con apenas unos clic, si no sabes de programación no importa, ya que el procedimiento de insertar una tabla de contenido en blogger en muy intuitivo y sencillo.
Puedes verlo en acción en el siguiente enlace: Tabla de contenido en blogger.
Para poder hacerlo funcionar en tu blogspot debes ver el siguiente vídeo:
TOC para blogger
Estilos CSS del plugins TOC Para Blogger
/*!
* TOC BLOGGER
* by tutorialbloggerorg.blogspot.com
* Insertar los estilos CSS antes de ]]></b:skin>
*/
.spoiler {
background-color:darkslategray;
color:white;
padding:.15384615384615385em;
margin:1em 0;
}
.spoiler-toggle,
.spoiler-toggle:focus,
.spoiler-toggle:hover,
.spoiler-toggle:active {
display:block;
margin:0;
padding:0 1.2em 0 .6em;
height:2em;
font:normal normal 100%/2em Helmet,FreeSans,Sans-Serif;
color:inherit;
text-decoration:none;
outline:none;
position:relative;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
cursor:pointer;
}
.spoiler-toggle:before {
content:"";
display:block;
float:right;
width:0;
height:0;
border-width:.3076923076923077em .3076923076923077em 0;
border-style:solid;
border-color:white transparent transparent;
margin:.9230769230769231em -.6em 0 0;
}
.spoiler-content {
padding:1em;
background-color:white;
color:#333;
}
.spoiler-state-expanded .spoiler-toggle {padding-bottom:inherit}
.spoiler-state-expanded .spoiler-toggle:before {
border-width:0 .3076923076923077em .3076923076923077em;
border-color:transparent transparent white;
margin-top:.8461538461538461em;
}
.spoiler-state-expanded .spoiler-content + .spoiler-toggle {
padding-top:inherit;
padding-bottom:0;
}
.spoiler-state-disabled .spoiler-toggle {
cursor:default;
cursor:not-allowed;
}
.spoiler-state-disabled .spoiler-toggle:before,
.spoiler-js .spoiler-state-collapsed .spoiler-content {display:none}
.spoiler-primary {background-color:steelblue}
.spoiler-success {background-color:mediumseagreen}
.spoiler-info {background-color:skyblue}
.spoiler-warning {background-color:sandybrown}
.spoiler-danger {background-color:salmon}
/* ignore this! */
#my-custom-id .spoiler-toggle {
font-weight:bold;
font-style:italic;
}
/* Table of Contents (TOC) */
#btn-cm{border:1px solid #dadada;border-radius:5px;background-color:#f9f9f9}
#btn_toc{font-weight:700;cursor:pointer;margin:10px}
#btn_toc:focus,#toc li:focus,.back_toc:focus{outline:none}
#btn_toc svg{vertical-align:middle}
#toc li{cursor:pointer}
#toc{display:grid}
.back_toc{cursor:pointer;text-align:right}
:target::before{content:"";display:block;height:40px;margin-top:-40px;visibility:hidden}
/* END ESTILOS CSS DEL PLUGINS TOC BLOGGER */Código javascript del plugins TOC Para Blogger
<!-- 1. Insertar esto despues de <head> | Plugins TOC Para Blogger | tutorialbloggerorg.blogspot.com -->
<script>document.documentElement.className += ' spoiler-js';</script>
<!-- 2. Insertar esto antes de </body> | Plugins TOC Para Blogger | tutorialbloggerorg.blogspot.com -->
<script type='text/javascript'>
//<![CDATA[
/**
* JavaScript Spoiler
* ------------------
*/
(function(w, d) {
var panel = d.getElementsByClassName('spoiler');
if (!panel) return;
for (var i = 0, len = panel.length; i < len; ++i) {
if (!panel[i].id) panel[i].id = 'spoiler-' + (i + 1);
}
function toggleSpoiler(elem, index) {
var toggle = d.createElement('a'),
toggleText = (elem[index].getAttribute('data-toggle-text') || ' ').split(' | '),
togglePlacement = elem[index].getAttribute('data-toggle-placement') && elem[index].getAttribute('data-toggle-placement') !== 'bottom' ? elem[index].getAttribute('data-toggle-placement') : 'bottom';
toggleText.push(toggleText[0]);
toggle.className = 'spoiler-toggle';
toggle.href = '#' + elem[index].id;
toggle.innerHTML = toggleText[/(^| )spoiler-state-collapsed( |$)/.test(elem[index].className) ? 0 : 1];
toggle.onclick = function() {
var target = this.parentNode,
isExpanded = /(^| )spoiler-state-expanded( |$)/.test(target.className),
isConnected = target.getAttribute('data-connection');
if (/(^| )spoiler-state-disabled( |$)/.test(target.className)) return false;
target.className = isExpanded ? target.className.replace(/(^| )spoiler-state-expanded( |$)/, '$1spoiler-state-collapsed$2') : target.className.replace(/(^| )spoiler-state-collapsed( |$)/, '$1spoiler-state-expanded$2');
this.innerHTML = toggleText[isExpanded ? 0 : 1];
if (isConnected) {
for (var i = 0, len = elem.length; i < len; ++i) {
var isConnectedTo = elem[i].getAttribute('data-connection'),
toggleTextSibling = (elem[i].getAttribute('data-toggle-text') || ' ').split(' | '),
togglePlacementSibling = elem[i].getAttribute('data-toggle-placement') && elem[i].getAttribute('data-toggle-placement') !== 'bottom' ? elem[i].getAttribute('data-toggle-placement') : 'bottom';
if (isConnectedTo && isConnected === isConnectedTo && target.id !== elem[i].id) {
elem[i].className = elem[i].className.replace(/(^| )spoiler-state-expanded( |$)/, '$1spoiler-state-collapsed$2');
elem[i].children[togglePlacementSibling === 'bottom' ? 1 : 0].innerHTML = toggleTextSibling[0];
}
}
}
return false;
};
toggle.onmousedown = false;
elem[index].insertBefore(toggle, togglePlacement == 'bottom' ? null : elem[index].firstChild);
}
for (var i = 0, len = panel.length; i < len; ++i) {
toggleSpoiler(panel, i);
}
})(window, document);
//]]>
</script>Código HTML del plugins TOC Para Blogger
<!-- Selecciona la tabla de contenido y coloca al inicio de tu post o articulo | Plugins TOC Para Blogger | tutorialbloggerorg.blogspot.com -->
<h1>1. Básic</h1>
<div class="spoiler spoiler-default spoiler-state-collapsed" data-toggle-text="Indice de Contenido">
<div class="spoiler-content">
<div id="toc">
<ol>
<li><a href="#toc_1" title="Cras ac justo at nibh ullamcorper efficitur">Cras ac justo at nibh ullamcorper efficitur</a></li>
<li><a href="#toc_2" title="Aenean nec sodales sapien">Aenean nec sodales sapien</a></li>
<li><a href="#toc_3" title="Praesent rhoncus eleifend augue">Praesent rhoncus eleifend augue</a></li>
<li><a href="#toc_4" title="Vivamus dictum quis felis eget hendrerit">Vivamus dictum quis felis eget hendrerit</a></li>
<li><a href="#toc_5" title="Curabitur sed euismod mauris">Curabitur sed euismod mauris</a></li>
</ol>
</div>
</div>
</div>
<h1>2. Default Expanded</h1>
<div class="spoiler spoiler-default spoiler-state-expanded" data-toggle-text="Indice de Contenido">
<div class="spoiler-content">
<div id="toc">
<ol>
<li><a href="#toc_1" title="Cras ac justo at nibh ullamcorper efficitur">Cras ac justo at nibh ullamcorper efficitur</a></li>
<li><a href="#toc_2" title="Aenean nec sodales sapien">Aenean nec sodales sapien</a></li>
<li><a href="#toc_3" title="Praesent rhoncus eleifend augue">Praesent rhoncus eleifend augue</a></li>
<li><a href="#toc_4" title="Vivamus dictum quis felis eget hendrerit">Vivamus dictum quis felis eget hendrerit</a></li>
<li><a href="#toc_5" title="Curabitur sed euismod mauris">Curabitur sed euismod mauris</a></li>
</ol>
</div>
</div>
</div>
<h1>3. Toggle Text Open/Close</h1>
<div class="spoiler spoiler-default spoiler-state-collapsed" data-toggle-text="Mostrar Indice | Cerrar Indice">
<div class="spoiler-content">
<div id="toc">
<ol>
<li><a href="#toc_1" title="Cras ac justo at nibh ullamcorper efficitur">Cras ac justo at nibh ullamcorper efficitur</a></li>
<li><a href="#toc_2" title="Aenean nec sodales sapien">Aenean nec sodales sapien</a></li>
<li><a href="#toc_3" title="Praesent rhoncus eleifend augue">Praesent rhoncus eleifend augue</a></li>
<li><a href="#toc_4" title="Vivamus dictum quis felis eget hendrerit">Vivamus dictum quis felis eget hendrerit</a></li>
<li><a href="#toc_5" title="Curabitur sed euismod mauris">Curabitur sed euismod mauris</a></li>
</ol>
</div>
</div>
</div>
<div class="spoiler spoiler-default spoiler-state-collapsed" data-toggle-text="Indice 1 | Indice 2 | Indice 3 | Close">
<div class="spoiler-content"><div id="toc">
<ol>
<li><a href="#toc_1" title="Cras ac justo at nibh ullamcorper efficitur">Cras ac justo at nibh ullamcorper efficitur</a></li>
<li><a href="#toc_2" title="Aenean nec sodales sapien">Aenean nec sodales sapien</a></li>
<li><a href="#toc_3" title="Praesent rhoncus eleifend augue">Praesent rhoncus eleifend augue</a></li>
<li><a href="#toc_4" title="Vivamus dictum quis felis eget hendrerit">Vivamus dictum quis felis eget hendrerit</a></li>
<li><a href="#toc_5" title="Curabitur sed euismod mauris">Curabitur sed euismod mauris</a></li>
</ol>
</div></div>
</div>
<h1>4. Toggle Placement</h1>
<div class="spoiler spoiler-default spoiler-state-collapsed" data-toggle-text="Indice de Contenido 1" data-toggle-placement="bottom">
<div class="spoiler-content"><div id="toc">
<ol>
<li><a href="#toc_1" title="Cras ac justo at nibh ullamcorper efficitur">Cras ac justo at nibh ullamcorper efficitur</a></li>
<li><a href="#toc_2" title="Aenean nec sodales sapien">Aenean nec sodales sapien</a></li>
<li><a href="#toc_3" title="Praesent rhoncus eleifend augue">Praesent rhoncus eleifend augue</a></li>
<li><a href="#toc_4" title="Vivamus dictum quis felis eget hendrerit">Vivamus dictum quis felis eget hendrerit</a></li>
<li><a href="#toc_5" title="Curabitur sed euismod mauris">Curabitur sed euismod mauris</a></li>
</ol>
</div></div>
</div>
<div class="spoiler spoiler-default spoiler-state-collapsed" data-toggle-text="Indice de Contenido 2" data-toggle-placement="top">
<div class="spoiler-content"><div id="toc">
<ol>
<li><a href="#toc_1" title="Cras ac justo at nibh ullamcorper efficitur">Cras ac justo at nibh ullamcorper efficitur</a></li>
<li><a href="#toc_2" title="Aenean nec sodales sapien">Aenean nec sodales sapien</a></li>
<li><a href="#toc_3" title="Praesent rhoncus eleifend augue">Praesent rhoncus eleifend augue</a></li>
<li><a href="#toc_4" title="Vivamus dictum quis felis eget hendrerit">Vivamus dictum quis felis eget hendrerit</a></li>
<li><a href="#toc_5" title="Curabitur sed euismod mauris">Curabitur sed euismod mauris</a></li>
</ol>
</div></div>
</div>
<h1>5. Custom Classes</h1>
<div class="spoiler spoiler-default spoiler-state-collapsed" data-toggle-text="Indice de Contenido 1">
<div class="spoiler-content"><div id="toc">
<ol>
<li><a href="#toc_1" title="Cras ac justo at nibh ullamcorper efficitur">Cras ac justo at nibh ullamcorper efficitur</a></li>
<li><a href="#toc_2" title="Aenean nec sodales sapien">Aenean nec sodales sapien</a></li>
<li><a href="#toc_3" title="Praesent rhoncus eleifend augue">Praesent rhoncus eleifend augue</a></li>
<li><a href="#toc_4" title="Vivamus dictum quis felis eget hendrerit">Vivamus dictum quis felis eget hendrerit</a></li>
<li><a href="#toc_5" title="Curabitur sed euismod mauris">Curabitur sed euismod mauris</a></li>
</ol>
</div></div>
</div>
<div class="spoiler spoiler-primary spoiler-state-collapsed" data-toggle-text="Indice de Contenido 2">
<div class="spoiler-content"><div id="toc">
<ol>
<li><a href="#toc_1" title="Cras ac justo at nibh ullamcorper efficitur">Cras ac justo at nibh ullamcorper efficitur</a></li>
<li><a href="#toc_2" title="Aenean nec sodales sapien">Aenean nec sodales sapien</a></li>
<li><a href="#toc_3" title="Praesent rhoncus eleifend augue">Praesent rhoncus eleifend augue</a></li>
<li><a href="#toc_4" title="Vivamus dictum quis felis eget hendrerit">Vivamus dictum quis felis eget hendrerit</a></li>
<li><a href="#toc_5" title="Curabitur sed euismod mauris">Curabitur sed euismod mauris</a></li>
</ol>
</div></div>
</div>
<div class="spoiler spoiler-success spoiler-state-collapsed" data-toggle-text="Indice de Contenido 3">
<div class="spoiler-content"><div id="toc">
<ol>
<li><a href="#toc_1" title="Cras ac justo at nibh ullamcorper efficitur">Cras ac justo at nibh ullamcorper efficitur</a></li>
<li><a href="#toc_2" title="Aenean nec sodales sapien">Aenean nec sodales sapien</a></li>
<li><a href="#toc_3" title="Praesent rhoncus eleifend augue">Praesent rhoncus eleifend augue</a></li>
<li><a href="#toc_4" title="Vivamus dictum quis felis eget hendrerit">Vivamus dictum quis felis eget hendrerit</a></li>
<li><a href="#toc_5" title="Curabitur sed euismod mauris">Curabitur sed euismod mauris</a></li>
</ol>
</div></div>
</div>
<div class="spoiler spoiler-info spoiler-state-collapsed" data-toggle-text="Indice de Contenido 4">
<div class="spoiler-content"><div id="toc">
<ol>
<li><a href="#toc_1" title="Cras ac justo at nibh ullamcorper efficitur">Cras ac justo at nibh ullamcorper efficitur</a></li>
<li><a href="#toc_2" title="Aenean nec sodales sapien">Aenean nec sodales sapien</a></li>
<li><a href="#toc_3" title="Praesent rhoncus eleifend augue">Praesent rhoncus eleifend augue</a></li>
<li><a href="#toc_4" title="Vivamus dictum quis felis eget hendrerit">Vivamus dictum quis felis eget hendrerit</a></li>
<li><a href="#toc_5" title="Curabitur sed euismod mauris">Curabitur sed euismod mauris</a></li>
</ol>
</div></div>
</div>
<div class="spoiler spoiler-warning spoiler-state-collapsed" data-toggle-text="Indice de Contenido 5">
<div class="spoiler-content"><div id="toc">
<ol>
<li><a href="#toc_1" title="Cras ac justo at nibh ullamcorper efficitur">Cras ac justo at nibh ullamcorper efficitur</a></li>
<li><a href="#toc_2" title="Aenean nec sodales sapien">Aenean nec sodales sapien</a></li>
<li><a href="#toc_3" title="Praesent rhoncus eleifend augue">Praesent rhoncus eleifend augue</a></li>
<li><a href="#toc_4" title="Vivamus dictum quis felis eget hendrerit">Vivamus dictum quis felis eget hendrerit</a></li>
<li><a href="#toc_5" title="Curabitur sed euismod mauris">Curabitur sed euismod mauris</a></li>
</ol>
</div></div>
</div>
<div class="spoiler spoiler-danger spoiler-state-collapsed" data-toggle-text="Indice de Contenido 6">
<div class="spoiler-content"><div id="toc">
<ol>
<li><a href="#toc_1" title="Cras ac justo at nibh ullamcorper efficitur">Cras ac justo at nibh ullamcorper efficitur</a></li>
<li><a href="#toc_2" title="Aenean nec sodales sapien">Aenean nec sodales sapien</a></li>
<li><a href="#toc_3" title="Praesent rhoncus eleifend augue">Praesent rhoncus eleifend augue</a></li>
<li><a href="#toc_4" title="Vivamus dictum quis felis eget hendrerit">Vivamus dictum quis felis eget hendrerit</a></li>
<li><a href="#toc_5" title="Curabitur sed euismod mauris">Curabitur sed euismod mauris</a></li>
</ol>
</div></div>
</div>
<h1>6. Custom ID</h1>
<div class="spoiler spoiler-default spoiler-state-collapsed" data-toggle-text="Indice de Contenido" id="my-custom-id">
<div class="spoiler-content"><div id="toc">
<ol>
<li><a href="#toc_1" title="Cras ac justo at nibh ullamcorper efficitur">Cras ac justo at nibh ullamcorper efficitur</a></li>
<li><a href="#toc_2" title="Aenean nec sodales sapien">Aenean nec sodales sapien</a></li>
<li><a href="#toc_3" title="Praesent rhoncus eleifend augue">Praesent rhoncus eleifend augue</a></li>
<li><a href="#toc_4" title="Vivamus dictum quis felis eget hendrerit">Vivamus dictum quis felis eget hendrerit</a></li>
<li><a href="#toc_5" title="Curabitur sed euismod mauris">Curabitur sed euismod mauris</a></li>
</ol>
</div></div>
</div>
<h1>7. Accordion</h1>
<div class="spoiler spoiler-success spoiler-state-expanded" data-toggle-text="Indice de Contenido 1" data-connection="A">
<div class="spoiler-content"><div id="toc">
<ol>
<li><a href="#toc_1" title="Cras ac justo at nibh ullamcorper efficitur">Cras ac justo at nibh ullamcorper efficitur</a></li>
<li><a href="#toc_2" title="Aenean nec sodales sapien">Aenean nec sodales sapien</a></li>
<li><a href="#toc_3" title="Praesent rhoncus eleifend augue">Praesent rhoncus eleifend augue</a></li>
<li><a href="#toc_4" title="Vivamus dictum quis felis eget hendrerit">Vivamus dictum quis felis eget hendrerit</a></li>
<li><a href="#toc_5" title="Curabitur sed euismod mauris">Curabitur sed euismod mauris</a></li>
</ol>
</div></div>
</div>
<div class="spoiler spoiler-success spoiler-state-collapsed" data-toggle-text="Indice de Contenido 2" data-connection="A">
<div class="spoiler-content"><div id="toc">
<ol>
<li><a href="#toc_1" title="Cras ac justo at nibh ullamcorper efficitur">Cras ac justo at nibh ullamcorper efficitur</a></li>
<li><a href="#toc_2" title="Aenean nec sodales sapien">Aenean nec sodales sapien</a></li>
<li><a href="#toc_3" title="Praesent rhoncus eleifend augue">Praesent rhoncus eleifend augue</a></li>
<li><a href="#toc_4" title="Vivamus dictum quis felis eget hendrerit">Vivamus dictum quis felis eget hendrerit</a></li>
<li><a href="#toc_5" title="Curabitur sed euismod mauris">Curabitur sed euismod mauris</a></li>
</ol>
</div></div>
</div>
<div class="spoiler spoiler-success spoiler-state-collapsed" data-toggle-text="Indice de Contenido 3" data-connection="A">
<div class="spoiler-content"><div id="toc">
<ol>
<li><a href="#toc_1" title="Cras ac justo at nibh ullamcorper efficitur">Cras ac justo at nibh ullamcorper efficitur</a></li>
<li><a href="#toc_2" title="Aenean nec sodales sapien">Aenean nec sodales sapien</a></li>
<li><a href="#toc_3" title="Praesent rhoncus eleifend augue">Praesent rhoncus eleifend augue</a></li>
<li><a href="#toc_4" title="Vivamus dictum quis felis eget hendrerit">Vivamus dictum quis felis eget hendrerit</a></li>
<li><a href="#toc_5" title="Curabitur sed euismod mauris">Curabitur sed euismod mauris</a></li>
</ol>
</div></div>
</div>
<div class="spoiler spoiler-danger spoiler-state-collapsed" data-toggle-text="Indice de Contenido 1" data-connection="B">
<div class="spoiler-content"><div id="toc">
<ol>
<li><a href="#toc_1" title="Cras ac justo at nibh ullamcorper efficitur">Cras ac justo at nibh ullamcorper efficitur</a></li>
<li><a href="#toc_2" title="Aenean nec sodales sapien">Aenean nec sodales sapien</a></li>
<li><a href="#toc_3" title="Praesent rhoncus eleifend augue">Praesent rhoncus eleifend augue</a></li>
<li><a href="#toc_4" title="Vivamus dictum quis felis eget hendrerit">Vivamus dictum quis felis eget hendrerit</a></li>
<li><a href="#toc_5" title="Curabitur sed euismod mauris">Curabitur sed euismod mauris</a></li>
</ol>
</div></div>
</div>
<div class="spoiler spoiler-danger spoiler-state-collapsed" data-toggle-text="Indice de Contenido 2" data-connection="B">
<div class="spoiler-content"><div id="toc">
<ol>
<li><a href="#toc_1" title="Cras ac justo at nibh ullamcorper efficitur">Cras ac justo at nibh ullamcorper efficitur</a></li>
<li><a href="#toc_2" title="Aenean nec sodales sapien">Aenean nec sodales sapien</a></li>
<li><a href="#toc_3" title="Praesent rhoncus eleifend augue">Praesent rhoncus eleifend augue</a></li>
<li><a href="#toc_4" title="Vivamus dictum quis felis eget hendrerit">Vivamus dictum quis felis eget hendrerit</a></li>
<li><a href="#toc_5" title="Curabitur sed euismod mauris">Curabitur sed euismod mauris</a></li>
</ol>
</div></div>
</div>
<div class="spoiler spoiler-danger spoiler-state-collapsed" data-toggle-text="Indice de Contenido 3" data-connection="B">
<div class="spoiler-content"><div id="toc">
<ol>
<li><a href="#toc_1" title="Cras ac justo at nibh ullamcorper efficitur">Cras ac justo at nibh ullamcorper efficitur</a></li>
<li><a href="#toc_2" title="Aenean nec sodales sapien">Aenean nec sodales sapien</a></li>
<li><a href="#toc_3" title="Praesent rhoncus eleifend augue">Praesent rhoncus eleifend augue</a></li>
<li><a href="#toc_4" title="Vivamus dictum quis felis eget hendrerit">Vivamus dictum quis felis eget hendrerit</a></li>
<li><a href="#toc_5" title="Curabitur sed euismod mauris">Curabitur sed euismod mauris</a></li>
</ol>
</div></div>
</div>
<h1>8. Disabled</h1>
<div class="spoiler spoiler-default spoiler-state-collapsed spoiler-state-disabled" data-toggle-text="Indice de Contenido">
<div class="spoiler-content"><div id="toc">
<ol>
<li><a href="#toc_1" title="Cras ac justo at nibh ullamcorper efficitur">Cras ac justo at nibh ullamcorper efficitur</a></li>
<li><a href="#toc_2" title="Aenean nec sodales sapien">Aenean nec sodales sapien</a></li>
<li><a href="#toc_3" title="Praesent rhoncus eleifend augue">Praesent rhoncus eleifend augue</a></li>
<li><a href="#toc_4" title="Vivamus dictum quis felis eget hendrerit">Vivamus dictum quis felis eget hendrerit</a></li>
<li><a href="#toc_5" title="Curabitur sed euismod mauris">Curabitur sed euismod mauris</a></li>
</ol>
</div></div>
</div>
<div class="spoiler spoiler-default spoiler-state-expanded spoiler-state-disabled" data-toggle-text="Indice de Contenido">
<div class="spoiler-content"><div id="toc">
<ol>
<li><a href="#toc_1" title="Cras ac justo at nibh ullamcorper efficitur">Cras ac justo at nibh ullamcorper efficitur</a></li>
<li><a href="#toc_2" title="Aenean nec sodales sapien">Aenean nec sodales sapien</a></li>
<li><a href="#toc_3" title="Praesent rhoncus eleifend augue">Praesent rhoncus eleifend augue</a></li>
<li><a href="#toc_4" title="Vivamus dictum quis felis eget hendrerit">Vivamus dictum quis felis eget hendrerit</a></li>
<li><a href="#toc_5" title="Curabitur sed euismod mauris">Curabitur sed euismod mauris</a></li>
</ol>
</div></div>
</div>
<br/><br/>
<h1>9. Minimalista</h1>
<br/>
<div id="btn-cm">
<div id="btn_toc" onclick="if (document.getElementById('toc').style.display === 'none') { document.getElementById('toc').style.display = 'block'; } else { document.getElementById('toc').style.display = 'none'; }" role="button" tabindex="0">Indice de Contenido <svg width="18" height="18" viewBox="0 0 24 24"><path fill="#000000" d="M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z" /></svg></div>
<div id="toc">
<ol>
<li><a href="#toc_1" title="Cras ac justo at nibh ullamcorper efficitur">Cras ac justo at nibh ullamcorper efficitur</a></li>
<li><a href="#toc_2" title="Aenean nec sodales sapien">Aenean nec sodales sapien</a></li>
<li><a href="#toc_3" title="Praesent rhoncus eleifend augue">Praesent rhoncus eleifend augue</a></li>
<li><a href="#toc_4" title="Vivamus dictum quis felis eget hendrerit">Vivamus dictum quis felis eget hendrerit</a></li>
<li><a href="#toc_5" title="Curabitur sed euismod mauris">Curabitur sed euismod mauris</a></li>
</ol>
</div>
</div>
<br/>
<!-- Coloca cada identificador en los titulos o subtitulos dentro de tu contenido, si tenes más subtitulos, solo crea más referencias así como identificadores | Plugins TOC Para Blogger | tutorialbloggerorg.blogspot.com -->
<h3 id="toc_1">Cras ac justo at nibh ullamcorper efficitur</h3>
<p>tu parrafo aquí<p/>
<div class="back_toc" onclick="document.getElementById('btn_toc').scrollIntoView(true);" role="button" tabindex="0">Volver al contenido ↑</div>
<h3 id="toc_2">Aenean nec sodales sapien</h3>
<p>tu parrafo aquí<p/>
<div class="back_toc" onclick="document.getElementById('btn_toc').scrollIntoView(true);" role="button" tabindex="0">Volver al contenido ↑</div>
<h3 id="toc_3">Praesent rhoncus eleifend augue</h3>
<p>tu parrafo aquí<p/>
<div class="back_toc" onclick="document.getElementById('btn_toc').scrollIntoView(true);" role="button" tabindex="0">Volver al contenido ↑</div>
<h3 id="toc_4">Vivamus dictum quis felis eget hendrerit</h3>
<p>tu parrafo aquí<p/>
<div class="back_toc" onclick="document.getElementById('btn_toc').scrollIntoView(true);" role="button" tabindex="0">Volver al contenido ↑</div>
<h3 id="toc_5">Curabitur sed euismod mauris</h3><p>tu parrafo aquí<p/>
<div class="back_toc" onclick="document.getElementById('btn_toc').scrollIntoView(true);" role="button" tabindex="0">Volver al contenido ↑</div>¿No logras hacer funcionar este plugins en tu blog?
Cuenta conmigo para implementar este plugins en tu blogger. Si quieres que lo haga yo por ti, porque no tienes tiempo ni ganas de hacerlo, solo debes:
¡Contrátame Aquí!