Creo que te refieres a un navegación por tabs, en worpdrees hay plugin pero en el caso de blogger las puedes poner asi:
HTML:
<div class="tab">
<button class="tablinks" onclick="openCity(event, 'opcion1')">Opcion 1</button>
<button class="tablinks" onclick="openCity(event, 'opcion2')">Opcion 2</button>
<button class="tablinks" onclick="openCity(event, 'opcion3')">Opcion 3</button>
</div>
<div class="tabcontent" id="opcion1" style="display:block;">
<iframe allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/IIYUyi2_sNU" width="560"></iframe>
</div>
<div class="tabcontent" id="opcion2">
<iframe allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/hzmpysD8Ql0" width="560"></iframe>
</div>
<div class="tabcontent" id="opcion3">
<iframe allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/d4hute00IAE" width="560"></iframe>
</div>
y crean un gadget de tipo javascript/ html ponen lo siguiente:
HTML:
<style>
body {font-family: Arial;}
/* Style the tab */
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
/* Style the buttons inside the tab */
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}
/* Create an active/current tablink class */
.tab button.active {
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
</style>
<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";
}
</script>
Disculpa por la pregunta de novato pero ese gadget que indicas, ¿Donde lo coloco? ¿En el codigo HTML de mi tema de blogspot?
(Actualizado...)
Lo puse en el cuerpo el gadget y funcionó. No entiendo como
😵
Osea no sé mucho de HMTL pero no entiendo como un gadget puede alterar las entradas del blog de esa manera.
Creí que la manera de hacerlo seria colocandolo en el codigo HTML de mi tema...
¡GRACIAS!
