Pasos para crear pestañas
Primero, es necesario abrir tu blog en modo edición.
Luego, Es necesario dirigirse a Diseño como se ilustra en la siguiente imagen
Posteriormente, Buscas la parte que dice Todas las columnas y das clic en editar
Una vez hayas dado clic en la parte editar de la sección todas las columna te va a parecer lo siguiente, que es donde se encuentra la codificación de las pestañas
Antes de empezar a explicar los códigos de las pestañas en importante que sepas que esos códigos debes pegarlos como si ilustra abajo. Es decir en donde se encuentra el texto de color rojo.
_________________________________________________________________________________
<div id='mbwnavbar'>
<ul id='mbwnav'>
Aquí en esta parte es donde se van a a pegar los códigos de las pestañas. Te recomiendo mirar el código completo de pestañas del blog actual, que se encuentra en la parte final de esta página, para que tengas una idea genera. Luego continúa leyendo.
</ul></div>
___________________________________________________________________________________
Ahora te voy a suministrar los códigos para crear pestañas. Es muy importante tener en cuenta donde empiezan y donde terminan para que los copies y los pegues en el lugar correcto.
Código para crear una pestaña con link directo para abrir en la misma pestaña
El siguiente es el código. Es importante tener en cuenta donde empieza y donde termina. <li> Quiere decir que empieza el código y </li> quiere decir que cierra el código. Igual pasa con <a que indica que se abre y </a> que se cierra el código. Lo único que tienes que hacer es copiar y pegar. Posteriormente, pones el link y el nombre de la pestaña.
<li>
<a href='LINK'>Nombre de la Pestaña</a>
</li>
Ejemplo
<li>
<a href='https://learningvocabularythroughvideogames.blogspot.com/'>Home</a>
</li>
Código para crear una pestaña con link directo para abrir en otra pestaña
El siguiente es el código. Es importante tener en cuenta donde empieza y donde termina. <li> Quiere decir que empieza el código y </li> quiere decir que cierra el código. Igual pasa con <a que indica que se abre y </a> que se cierra el código. Adicionalmente, es muy importante tener en cuenta target="_blank" que indica abrir en una nueva pestaña. Lo único que tienes que hacer es copiar y pegar. Posteriormente, pones el link y el nombre de la pestaña.
<li>
<a href='LINK'target="_blank">Nombre de la Pestaña</a>
</li>
Ejemplo
<li>
<a href='https://learningvocabularythroughvideogames.blogspot.com/'target="_blank">Home</a>
</li>
Código para crear una pestaña desplegable y combinar los códigos de arriba
El siguiente es el código. Es importante tener en cuenta donde empieza y donde termina. <li> Quiere decir que empieza el código y </li> quiere decir que cierra el código. Igual pasa con <a que indica que se abre y </a> que se cierra el código. Adicionalmente, es muy importante tener en cuenta <ul> que indica donde empiezan a aparecer las las subpestañas desplegables y </ul> que cierra el ciclo de las pestañas desplegables . Lo único que tienes que hacer es copiar y pegar. Posteriormente, pones el link y el nombre de la pestaña.
<li>
<a href='#'>Nombre de la Pestaña</a>
<ul>
<li><a href='LINK'target="_blank">Nombre de la Subpestaña 1</a></li>
<li><a
href='LINK'target="_blank">Nombre de la Subpestaña 2</a> </li>
<li><a
href='LINK'>Nombre de la Subpestaña 3</a> </li>
<li><a
href='LINK'>Nombre de la Subpestaña 4</a> </li>
</ul>
</li>
Ejemplo
<li>
<a href='#'>Documents</a>
<ul>
<li><a href='https://docs.google.com/document/d/10Rh8mGSQGMXLr9K0R_5cliXE78GAMOse/edit?usp=sharing&ouid=112158890502914336563&rtpof=true&sd=true'target="_blank">Thesis</a></li>
<li><a
href='https://docs.google.com/spreadsheets/d/1vrbnWg4CO16kvQfMp7dWuo0jfkV4KCoowBUHi_px_ko/edit?usp=sharing'target="_blank">Literature Matrix</a> </li>
<li><a
href='https://docs.google.com/document/d/1CnoCbE9J5Red739EG7A6rO00wPYvGylA9CLSpwGxuJo/edit?usp=sharing'>Mapas</a> </li>
<li><a
href='https://miro.com/welcomeonboard/aXVaSjNSSWN5Y0Z2aHNVNnlXYmhUZzBuQ2kyWkZyeGRSSUdRVTFIZUdadXJUVFRsTVo3Vll6VVNVZnBtenRaMnwzMDc0NDU3MzU1NDI2MjU0NDI5'>Otros</a> </li>
</ul>
</li>
Código completo de pestañas del blog actual
Aquí te voy a compartir el código de pestañas de este blog para que tengas una idea
___________________________________________________________________________________
<div id='mbwnavbar'>
<ul id='mbwnav'>
<li>
<a href='https://learningvocabularythroughvideogames.blogspot.com/'>Home</a>
</li>
<li>
<a href='https://learningvocabularythroughvideogames.blogspot.com/2021/08/thesis-doc.html'>Documents</a>
<ul>
<li><a href='https://docs.google.com/document/d/10Rh8mGSQGMXLr9K0R_5cliXE78GAMOse/edit?usp=sharing&ouid=112158890502914336563&rtpof=true&sd=true'target="_blank">Thesis</a></li>
<li><a
href='https://docs.google.com/spreadsheets/d/1vrbnWg4CO16kvQfMp7dWuo0jfkV4KCoowBUHi_px_ko/edit?usp=sharing'target="_blank">Literature Matrix</a> </li>
<li><a
href='https://docs.google.com/document/d/1CnoCbE9J5Red739EG7A6rO00wPYvGylA9CLSpwGxuJo/edit?usp=sharing'target="_blank">Literature Review's Draft</a> </li>
<li><a
href='https://miro.com/welcomeonboard/aXVaSjNSSWN5Y0Z2aHNVNnlXYmhUZzBuQ2kyWkZyeGRSSUdRVTFIZUdadXJUVFRsTVo3Vll6VVNVZnBtenRaMnwzMDc0NDU3MzU1NDI2MjU0NDI5'target="_blank">Board</a> </li>
</ul>
</li>
<li>
<a href='https://learningvocabularythroughvideogames.blogspot.com/2021/08/thesis-slides.html'>Slides</a>
</li>
<li>
<a href='https://learningvocabularythroughvideogames.blogspot.com/2021/08/thesis-videos.html'>Videos</a>
</li>
<li>
<a href='https://learningvocabularythroughvideogames.blogspot.com/2021/08/thesis-tests.html'>Tests</a>
</li>
<li>
<a href='https://learningvocabularythroughvideogames.blogspot.com/2021/08/codigos.html'>Códigos</a>
</li>
</ul></div>
___________________________________________________________________________________