Membuat Multi Tab Streaming Video Responsive di Blogger

 Saya sering melihat situs situs film maupun anime menggunakan banyak server video streaming untuk menunjang layanan streaming dari situs tersebut. Setiap satu server video streaming dibuat satu tab diplayer videonya, jadi pengunjung situsnya bisa memilih server mana yang disukai untuk menonton video di situsnya.

 Dalam postingan kali ini kita akan memperindah lagi tampilan blog dengan menambahkan video ke dalam sebuah postingan. Sebetulnya bukan cara memasukan videonya kedalam postingan, akan tetapi Bagaimana Membuat Multi Tab Streaming Video Responsive secara sederhana tapi menarik untuk dilihat. Ini sangat cocok di pasangkan jika blog sobat tentang tutorial yang suka menyampaikannya dalam bentuk visual.

 Berikut ini langkah langkah Membuat Multi Tab Streaming Video Responsive di Blogger.

1. Langkah pertama apabila di template sobat belum terpasang Font Awesome, silahkan pasang terlebih dahulu kode di bawah ini sebelum kode </head>.

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"></link>

2. Selanjutnya pasang kode CSS dibawah ini dan letakkan di atas kode ]]></b:skin> atau </style>.

*, *:before, *:after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


main {
  min-width: 320px;
  max-width: 100%;
  padding: 10px;
  margin: 0 auto;
  background: #fff;
}

section {
  display: none;
  padding: 7px 0 0;
  border-top: 1px solid #ddd;
}

input {
  display: none;
}

label {
  display: inline-block;
  margin: 0 0 -1px;
  padding: 10px 15px;
  font-weight: 600;
  text-align: center;
  color: #bbb;
  border: 1px solid transparent;
}

label:before {
  font-family: fontawesome;
  font-weight: normal;
  margin-right: 10px;
}

label[for*='1']:before { content: 'f16a'; }
label[for*='2']:before { content: 'f1cc'; }
label[for*='3']:before { content: 'f194'; }


label:hover {
  color: #888;
  cursor: pointer;
}

input:checked + label {
  color: #555;
  border: 1px solid #ddd;
  border-top: 2px solid orange;
  border-bottom: 1px solid #fff;
}

#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3,
#tab4:checked ~ #content4 {
  display: block;
}

@media screen and (max-width: 100%) {
  label {
    font-size: 0;
  }
  label:before {
    margin: 0;
    font-size: 18px;
  }
}

@media screen and (max-width: 100%) {
  label {
    padding: 15px;
  }
}

3. Selanjutnya pada saat membuat postingan tambahkan kode dibawah ini pada mode penulisan HTML.

<main>
  <input checked="" id="tab1" name="tabs" type="radio" />
  <label for="tab1">Youtube</label>
    
  <input id="tab2" name="tabs" type="radio" />
  <label for="tab2">Drive</label>
    
  <input id="tab3" name="tabs" type="radio" />
  <label for="tab3">Video</label>
       
<section id="content1">
      . . . kode embed video kalian
</section>
    
  <section id="content2">
      . . . kode embed video kalian
  </section>
    
  <section id="content3">
        . . . kode embed video kalian
  </section>
</main>

2. Selesai. sekarang Sobat bisa publikasikan postingannya dan lihat hasilnya.Untuk demonya silahkan klik demo button dibawah ini.

 Demikian sobat penjelasan singkat saya mengenai Cara Membuat Multi Tab Streaming Video Responsive di Blogger. Apabila ada yang masih kurang paham sobat bisa bertanya melalui kolom komentar di bawah.

 Semoga postingan ini bermanfaat bagi sobat semua, terima kasih atas kunjungannya dan selamat mencoba.