Multi Tab Streaming Responsive Blogger

Cara membuat tab streaming multi server ~ Hola gaes . . . ! Gimana kabarnya nih? Seperti kebanyakan para blogger di setiap postingannya pasti ada kata-kata basa-basinya yang kadang dia serasa ngobrol sama orang lain padahal cuman ama hatinya aja, miris ya haha. Ada juga tipe blogger yang suka bikin candaan di tulisannya tapi yang ketawa cuman dia doang. (gue itumah)

Seperti judul yang saya tulis di atas, dalam postingan kali ini kita akan mempercantik lagi tampilan blog dengan menambahkan video ke dalam sebuah postingan. Sebetulnya bukan cara masukan videonya sii melainkan Bagaimana Membuat Multi Tab Streaming Responsive secara sederhana tapi cantik gitu keliatannya. Hal ini cocok di pasangkan jika blog kalian seputar tentang tutorial yang suka menyampaikannya dalam bentuk visual. Netizen sekarang kan terbukti darurat membacanya ya, malah curcol.

Inspirasi ini saya dapat ketika berjelajah di codepen, kebetulan masyarakat disana pada mahir-mahir banget tentang hal-hal berbau bahasa web. Link asli dari kode multi tab ini bisa kalian akses disini yang buatnya itu abang Oliver Knoblich, terima kasih bang oliver atas kode cantiknya, semoga kota Star City menjadi lebih aman lagi, eh itu mah di the Arrow dah olivernya.

Baca Juga

Kebetulan di codepen kan sudah bisa di lihat outputnya dan bukan untuk video juga, namun imajinasi nakal saya berkata lain, gimana kalau kita pasang buat video nih pasti mantap kan seperti web-web besar streaming dimana pasti menyediakan berbagai server video untuk menunjang layanan streamingnya.

Cara Membuat Multi Tab Streaming di Blogspot

Preview

Youtube Drive Vimeo

Pertama, kita membutuhkan Font Awesome di template blog kita, jika belum ada coba pasang link css ini tepat di atas kode </head> pada Template > Edit HTML

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

Kedua, pasang kode css di bawah ini di Template > Edit HTML tempelkan tepat diatas  kode </b:skin> ataupun di dalam postingan mode HTML dan di apit oleh tag <style> .. css .. </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;
  }
}

Setelah css nya kalian pasang, sekarang kita lihat untuk cara pemanggilannya:

<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">Vimeo</label>
       
<section id="content1">
      . . . kode video kalian
</section>
    
  <section id="content2">
      . . . kode video kalian
  </section>
    
  <section id="content3">
        . . . kode video kalian
  </section>
</main>

\f16a, \f1cc, \f194 : kode ikon, kalian bisa ganti sesuai keinginan, kode ikon lainnya.

Jika kalian ikuti dari awal pasti sekarang sudah senyum-senyum karena sudah bisa, tapi bagi yang belum bisa kita bisa diskusikan di kolom komentar gaes. Demikian postingan tentang Cara Membuat Multi Tab Video Streaming di Blogger semoga bermanfaat, sampai jumpa di artikel lainnya.

Tweet