Vamos a mostraros como podemos insertar en nuestro blog un menú de pestañas verticales.
Lo podemos usar tanto en la pagina de inicio de nuestro blog, como insertarlo dentro de una entrada.
1º
Para insertarlo en la entrada de nuestro blog y usarlo como menú, realizamos los siguientes pasos.
Nos vamos a inicio de nuestro panel de blogger.
En Diseño > Añadir un gadget,
e incrustamos este código.
Guardamos
2º
Para insertarlo dentro de una entrada.
Nos dirigimos a la edición HTML y realizamos los cambios que necesitemos.
{font-family: "Lato", sans-serif;} 🔎Aquí podemos cambiar la tipografía
color: black; padding: 22px 16px;
width: 100%;🔎 Ancho
border: none;🔎 Borde
outline: none; text-align: left; 🔎 Alinear texto: izquierda;
cursor: pointer; 🔎 cursor: puntero;
transition: 0.3s; 🔎 transición: 0.3s;
font-size: 17px; 🔎 tamaño de fuente
} /* Change background color of buttons on hover *//🔎 * Cambiar el color de fondo de los botones al pasar el mouse * /
.tab button:hover { background-color: #ddd; 🔎Color de fondo
} /* Create an active/current "tab button" class *// 🔎* Crear una clase activa / actual de "botón de tabulación" * /
.tab button.active { background-color: #ccc; 🔎Color de fondo
}
/* Style the tab content */ .tabcontent 🔎* Estilo del contenido de la pestaña * /
float: left; padding: 0px 12px; border: 1px solid #ccc; 🔎 Borde width: 70%;🔎 Ancho border-left: none; height: 300px;🔎 Altura } </style> </head> <body>
Lo podemos usar tanto en la pagina de inicio de nuestro blog, como insertarlo dentro de una entrada.
1º
Para insertarlo en la entrada de nuestro blog y usarlo como menú, realizamos los siguientes pasos.
Nos vamos a inicio de nuestro panel de blogger.
En Diseño > Añadir un gadget,
e incrustamos este código.
Guardamos
2º
Para insertarlo dentro de una entrada.
Nos dirigimos a la edición HTML y realizamos los cambios que necesitemos.
ver código
- Copia este código.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box}
body {font-family: "Lato", sans-serif;}
/* Style the tab */
.tab {
float: left;
border: 1px solid #ccc;
background-color: #f1f1f1;
width: 30%;
height: 300px;
}
/* Style the buttons inside the tab */
.tab button {
display: block;
background-color: inherit;
color: black;
padding: 22px 16px;
width: 100%;
border: none;
outline: none;
text-align: left;
cursor: pointer;
transition: 0.3s;
font-size: 17px;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}
/* Create an active/current "tab button" class */
.tab button.active {
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
float: left;
padding: 0px 12px;
border: 1px solid #ccc;
width: 70%;
border-left: none;
height: 300px;
}
</style>
</head>
<body>
<h2>Vertical Tabs</h2>
<p>Click on the buttons inside the tabbed menu:</p>
<div class="tab">
<button class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen">London</button>
<button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
<button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</div>
<div id="London" class="tabcontent">
<h3>London</h3>
<p>London is the capital city of England.</p>
</div>
<div id="Paris" class="tabcontent">
<h3>Paris</h3>
<p>Paris is the capital of France.</p>
</div>
<div id="Tokyo" class="tabcontent">
<h3>Tokyo</h3>
<p>Tokyo is the capital of Japan.</p>
</div>
<script>
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>
</body>
</html>
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * {box-sizing: border-box} body {font-family: "Lato", sans-serif;} /* Style the tab */ .tab { float: left; border: 1px solid #ccc; background-color: #f1f1f1; width: 30%; height: 300px; } /* Style the buttons inside the tab */ .tab button { display: block; background-color: inherit; color: black; padding: 22px 16px; width: 100%; border: none; outline: none; text-align: left; cursor: pointer; transition: 0.3s; font-size: 17px; } /* Change background color of buttons on hover */ .tab button:hover { background-color: #ddd; } /* Create an active/current "tab button" class */ .tab button.active { background-color: #ccc; } /* Style the tab content */ .tabcontent { float: left; padding: 0px 12px; border: 1px solid #ccc; width: 70%; border-left: none; height: 300px; } </style> </head> <body> <h2>Vertical Tabs</h2> <p>Click on the buttons inside the tabbed menu:</p> <div class="tab"> <button class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen">London</button> <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button> <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button> </div> <div id="London" class="tabcontent"> <h3>London</h3> <p>London is the capital city of England.</p> </div> <div id="Paris" class="tabcontent"> <h3>Paris</h3> <p>Paris is the capital of France.</p> </div> <div id="Tokyo" class="tabcontent"> <h3>Tokyo</h3> <p>Tokyo is the capital of Japan.</p> </div> <script> function openCity(evt, cityName) { var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } tablinks = document.getElementsByClassName("tablinks"); for (i = 0; i < tablinks.length; i++) { tablinks[i].className = tablinks[i].className.replace(" active", ""); } document.getElementById(cityName).style.display = "block"; evt.currentTarget.className += " active"; } // Get the element with id="defaultOpen" and click on it document.getElementById("defaultOpen").click(); </script> </body> </html>
/* Style the tab */ 🔎Estilo de las pestañas
.tab {
float: left; 🔎En que lado se ven las pestañas. En este caso izquierdo
border: 1px solid #ccc; 🔎Estilo de borde de las pestañas, podemos escoger entre estos.
border: 1px solid #ccc; 🔎Estilo de borde de las pestañas, podemos escoger entre estos.
Cuenta con el ancho, el estilo, y el color
background-color: #f1f1f1; 🔎Este es el color de fondo:
width: 30%; 🔎ancho
height: 300px; 🔎altura
}
width: 30%; 🔎ancho
height: 300px; 🔎altura
}
/* Style the buttons inside the tab */ 🔎/ * Estilo de los botones dentro de la pestaña * /
.tab button { display: block; background-color: inherit; 🔎Color de fondocolor: black; padding: 22px 16px;
width: 100%;🔎 Ancho
border: none;🔎 Borde
outline: none; text-align: left; 🔎 Alinear texto: izquierda;
cursor: pointer; 🔎 cursor: puntero;
transition: 0.3s; 🔎 transición: 0.3s;
font-size: 17px; 🔎 tamaño de fuente
} /* Change background color of buttons on hover *//🔎 * Cambiar el color de fondo de los botones al pasar el mouse * /
.tab button:hover { background-color: #ddd; 🔎Color de fondo
} /* Create an active/current "tab button" class *// 🔎* Crear una clase activa / actual de "botón de tabulación" * /
.tab button.active { background-color: #ccc; 🔎Color de fondo
}
/* Style the tab content */ .tabcontent 🔎* Estilo del contenido de la pestaña * /
float: left; padding: 0px 12px; border: 1px solid #ccc; 🔎 Borde width: 70%;🔎 Ancho border-left: none; height: 300px;🔎 Altura } </style> </head> <body>
<h2>Vertical Tabs</h2>
<p>Click on the buttons inside the tabbed menu:</p>🔎 Encabezado
<div class="tab"> 🔎 Pestañas.. Cambiamos lo tachado por el nombre de nuestras pestañas
<button class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen">London</button>
<button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
<button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</div>
🔎 Pestañas.. Cambiamos lo tachado por el nombre de nuestras pestañas y lo subrayado por el contenido
<div id="London" class="tabcontent">
<h3>London</h3>
<p>London is the capital city of England.</p>
</div>
<div id="Paris" class="tabcontent">
<h3>Paris</h3>
<p>Paris is the capital of France.</p>
</div>
<div id="Tokyo" class="tabcontent">
<h3>Tokyo</h3>
<p>Tokyo is the capital of Japan.</p>
</div>
No hay comentarios:
Publicar un comentario
Deja tu comentario y en breve te contestaremos