Foto de Pixabay:
Hoy les vamos a compartir como hacer una tabla de contenido sencilla para Blogger, para ubicarla dentro de las entradas sigue los
siguientes pasos que se explican en este tutorial.
Tabla de contenido 1
Tabla de contenido 2
Tabla de contenido 3
Primero, abre Blogger e ingresa en una entrada o página.
.png)
Segundo coloca la vista HTML
Tercero, ingresa el siguiente código.
Tabla de contenido uno:
<style>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"></link>
#HTML3 .widget-content{padding:0!important}
div{padding:0;overflow:overlay; }
al{margin:0!important;margin-bottom:0!important;border:1px;width:50%;padding:0;line-height:normal;float:left;text-align:left; overflow: hidden;padding-bottom:0!important; }
a:hover{
color:#1717FF
}
</style>
<div style="background-color: #eef1f5; font-family: Font Awesome 5 Free; font-size: 15px; font-weight: 700; margin-right: 100x; padding: 5px; text-align: center;">
<span style="font-family: helvetica;"><al> <a href="#a1"><span class="fa fa-check-square-o fa-xs" style="color: #1b8de7;"></span> Escriba su texto</a></al>
<al> <a href="#a1"><span class="fa fa-check-square-o fa-xs" style="color: #1b8de7;"></span> Escriba su texto</a></al>
<al> <a href="#a1"><span class="fa fa-check-square-o fa-xs" style="color: #1b8de7;"></span> Escriba su texto</a></al>
<al> <a href="#a1"><span class="fa fa-check-square-o fa-xs" style="color: #1b8de7;"></span> Escriba su texto</a></al>
<al> <a href="#a1"><span class="fa fa-check-square-o fa-xs" style="color: #1b8de7;"></span> Escriba su texto</a></al>
<al> <a href="#a1"><span class="fa fa-check-square-o fa-xs" style="color: #1b8de7;"></span> Escriba su texto</a></al></span>
</div>
Tabla de contenido dos:
<style>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"></link>
#HTML3 .widget-content{padding:0!important}
al{margin:0!important;margin-bottom:0!important;border:1px;width:100%;padding:0;line-height:normal;float:left;text-align:left; overflow: hidden;padding-bottom:22!important; background-color:#EDF3F4 ; }
el{margin:0!important;margin-bottom:0!important;border:1px;width:100%;padding:0;line-height:normal;float:left;text-align:left; overflow: hidden;padding-bottom:22!important; background-color:#FFFFFF ; }
div{padding:0;overflow:overlay; }
a:hover{
color:#02AAB5
}
</style>
<div style="background-color: #edf3f4; font-family: Font Awesome 5 Free; font-size: 15px; font-weight: 700; margin-right: 100x; padding: 5px; text-align: center;">
<al> <a href="#a1"><i class="fa fa-circle-o fa-xs" style="color: #2f72b4;"></i> Escriba su texto</a></al>
<el> <a href="#a1"><i class="fa fa-circle-o fa-xs" style="color: #3ecdf0;"></i> Escriba su texto</a></el>
<al> <a href="#a1"><i class="fa fa-circle-o fa-xs" style="color: #2f72b4;"></i> Escriba su texto</a></al>
<el> <a href="#a1"><i class="fa fa-circle-o fa-xs" style="color: #3ecdf0;"></i> Escriba su texto</a></el>
<al> <a href="#a1"><i class="fa fa-circle-o fa-xs" style="color: #2f72b4;"></i> Escriba su texto</a></al>
</div>
Tabla de contenido tres
<style>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"></link>
#HTML3 .widget-content{padding:0!important}
al{margin:0!important;margin-bottom:0!important;border:1px;width:50%;padding:0;line-height:normal;float:left;text-align:left; overflow: hidden;padding-bottom:22!important; background-color:#F7F6E9 ; }
el{margin:0!important;margin-bottom:0!important;border:1px;width:50%;padding:0;line-height:normal;float:left;text-align:left; overflow: hidden;padding-bottom:22!important; background-color:#F7F4C6 ; }
div{padding:0;overflow:overlay; }
a:hover{
color:#BDBDBD
</style>
<div style="background-color: #F7F4C6 ; text-align: center; solid #2F72B4; padding:5px; font-family:Font Awesome 5 Free;margin-right:100x;font-size:15px;font-weight:700 ">
<al> <a href="#a1"><i class="fa fa-circle-o fa-xs" style="color:#F08310 "></i> Escriba su texto</a></al>
<el> <a href="#a1"><i class="fa fa-circle-o fa-xs" style="color:#3ECDF0"></i> Escriba su texto</a></el>
<al> <a href="#a1"><i class="fa fa-circle-o fa-xs" style="color:#F08310 "></i> Escriba su texto</a></al>
<el> <a href="#a1"><i class="fa fa-circle-o fa-xs" style="color:#3ECDF0"></i> Escriba su texto</a></el>
<al> <a href="#a1"><i class="fa fa-circle-o fa-xs" style="color:#F08310 "></i> Escriba su texto</a></al>
<el> <a href="#a1"><i class="fa fa-circle-o fa-xs" style="color:#3ECDF0"></i> Escriba su texto</a></el>
</div>
Cuarto, no olvides ingresar el código de aterrizaje:
<a name="A1"></a>
<a name="A2"></a>
<a name="A3"></a>
En la parte del texto que va a colocar los hipervínculos. Si
tienes alguna duda, revisa el tutorial anterior: ¿Cómo colocar marcadores en Blogger?
Quinto, eso es todo dale clic en publicar.
Si tienes alguna duda pregúntanos.
Eso es todo, esperamos que esta información te sea útil.
No hay comentarios.:
Publicar un comentario