Cómo Agregar Pestañas de Videos en Blogger

Implementar jQuery Tabs en las entradas del blog se ha vuelto habitual, sobre todo cuando nuestro contenido es un blog de vídeos o series. Hoy les mostraré cómo crear pestañas en su blog de Blogger. Las pestañas ayudan a organizar diferentes secciones de contenido en un solo contenedor, lo que permite a los usuarios cambiar de un video a otro fácilmente sin usar el scroll.

El contenido con pestañas es una excelente manera de mostrar una gran cantidad de información en un espacio reducido al separar el contenido en diferentes paneles. Hay muchas formas de diseñar pestañas, pero la idea principal es la misma: hacer clic en una pestaña y que el contenido se muestre sin recargar la página.

IMPLEMENTAR JQUERY TABS EN BLOGGER

Para implementar jQuery Tabs en Blogger (pestaña para videos con opción de 3 botones), vamos a seguir los siguientes pasos:

1º Entrar a Blogger > Tema > Editar HTML. Aquí buscaremos la etiqueta de cierre </style> o ]]></b:skin> y colocaremos el código CSS justo antes del cierre.

ul.tabs{display:flex;width:100%;max-width:800px;margin:0 auto;padding:0;list-style:none;background:#050606;}ul.tabs li{flex:1;margin:0;padding:0;border-right:1px solid #333;}ul.tabs li:last-child{border-right:0;}ul.tabs li a{display:flex;align-items:center;justify-content:center;min-height:40px;padding:8px 5px;background:#1a1a1a!important;color:#ffffff!important;font-size:14px;text-decoration:none!important;text-align:center;box-sizing:border-box;transition:background .3s ease;}ul.tabs li a:hover,ul.tabs li.activa a{color:#ffffff!important;font-weight:700;background:#d54d52!important;}.contenedor_tab{width:100%;max-width:800px;margin:0 auto;background:#fff;border:1px solid #050606;border-top:0;box-sizing:border-box;}.contenido_tab{padding:15px;font-size:14px;box-sizing:border-box;}.contenido_tab iframe,.contenido_tab video{width:100%;height:auto;aspect-ratio:16/9;border:0;}

2º En el mismo Editar HTML de la plantilla blogger buscar el código de cierre </head>  y colocar antes del cierre el siguiente código Skript.

<script>$(document).ready(function(){$(&quot;.contenido_tab&quot;).hide();$(&quot;ul.tabs li:first&quot;).addClass(&quot;activa&quot;);$(&quot;.contenido_tab:first&quot;).show();$(&quot;ul.tabs li a&quot;).click(function(e){e.preventDefault();$(&quot;ul.tabs li&quot;).removeClass(&quot;activa&quot;);$(this).parent(&quot;li&quot;).addClass(&quot;activa&quot;);$(&quot;.contenido_tab iframe&quot;).each(function(){var src=$(this).attr(&quot;src&quot;);$(this).attr(&quot;src&quot;,&quot;&quot;);$(this).attr(&quot;src&quot;,src);});$(&quot;.contenido_tab video&quot;).each(function(){this.pause();});$(&quot;.contenido_tab&quot;).hide();$($(this).attr(&quot;href&quot;)).fadeIn();});});</script>

Si No tienen instalado en su plantilla blogger el código Jquery superior y los videos no se agrupan por defecto agrega este código arriba del código instalado.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js'/><script>

 

3º Ultimo paso para implementar el tabs o pestañas en nuestras entradas y paginas de blogger, debemos usar el siguiente código HTML en en la sección edición de entradas en blogger Vista HTML.

<!-- CONTENEDOR DE PESTAÑAS -->
<ul class="tabs">
  <li><a href="#tab1">Opción 1</a></li>
  <li><a href="#tab2">Opción 2</a></li>
  <li><a href="#tab3">Opción 3</a></li>
  <li><a href="#tab4">Opción 4</a></li>
  <!-- PARA AÑADIR OTRA PESTAÑA: Copia la línea de abajo y cambia #tab5 -->
  <!-- <li><a href="#tab5">Opción 5</a></li> -->
</ul>

<!-- CONTENEDOR DE VIDEOS -->
<div class="contenedor_tab">

  <!-- VIDEO 1 -->
  <div id="tab1" class="contenido_tab">
    <iframe src="https://www.youtube.com/embed/VIDEO_ID_1" allowfullscreen="true"></iframe>
  </div>

  <!-- VIDEO 2 -->
  <div id="tab2" class="contenido_tab">
    <iframe src="https://www.youtube.com/embed/VIDEO_ID_2" allowfullscreen="true"></iframe>
  </div>

  <!-- VIDEO 3 -->
  <div id="tab3" class="contenido_tab">
    <iframe src="https://www.youtube.com/embed/VIDEO_ID_3" allowfullscreen="true"></iframe>
  </div>

  <!-- VIDEO 4 -->
  <div id="tab4" class="contenido_tab">
    <iframe src="https://www.youtube.com/embed/VIDEO_ID_4" allowfullscreen="true"></iframe>
  </div>

  <!-- PARA AÑADIR OTRO VIDEO: Copia el bloque de abajo y cambia el id a tab5 -->
  <!-- 
  <div id="tab5" class="contenido_tab">
    <iframe src="https://www.youtube.com/embed/VIDEO_ID_5" allowfullscreen="true"></iframe>
  </div> 
  -->

</div>
<div style="clear: both;"></div>

Debemos reemplazar de la siguiente manera:
Opcion 1,2,3.4: Aquí podemos cambiar el titulo del botón de cambiar videos.
VIDEO_ID_1,2,3,4: En esta parte colocaremos el código de video de youtube que deseamos mostrar en nuestra publicación.

https://www.youtube.com/embed/VIDEO_ID_1: Tambien podemos eliminar todo esta parte y colocar enlace embed de otras plataformas de videos.

VIDEO TUTORIAL

RESULTADO FINAL

• Opción 1
• Opción 2
• Opción 3
• Opción 4