Abaikan Jika Melihat Iklan Binary Options (Opsi Biner) pada Situs ini, Baca : Perbedaan Forex dengan Binary Options

Daftar Akun XM
image3

Cara Membuat Multi Tab Video Player pada Blogger

Daftar Akun Exness

Hai Blogger! Berikut adalah Cara untuk Membuat Multi Tab Video Player pada Blogger :



  • Buka Menu Themes, kemudian klik Edit HTML.
  • Tambahkan Kode ini sebelum Kode </b:skin>
  • Untuk memudahkan pencarian tekan Crtl dan F, ketik </b:skin> dan tekan Enter.

.built2bless-multitab-video button{background:#ff6600;color:#fff;border:none;padding: 8px 15px 8px 15px;font-size: 14px;font-weight: bold;border-radius: 5px 5px 0px 0px;text-transform:uppercase;cursor:pointer;-webkit-transition:all 300ms ease-in;-moz-transition:all 300ms ease-in;transition:all 300ms ease-in;} .built2bless-multitab-video button.active{color: #2d2d2d;background: #ff6600;} .built2bless-multitab-video-content>div{padding: 10px 10px 5px 10px;background:#ff6600;font-size: 14px;font-weight: bold;color:#fff;} .built2bless-multitab-video-content iframe{width:100%!important;height:400px;} @media screen and (max-width:960px){.built2bless-multitab-video-content iframe{max-height:90%}} @media screen and (max-width:768px){.built2bless-multitab-video-content iframe{max-height:75%}} @media screen and (max-width:600px){.built2bless-multitab-video-content iframe{max-height:60%}} @media screen and (max-width:480px){.built2bless-multitab-video-content iframe{height:auto!important;max-height:auto!important}}

  • Kemudian Letakkan Kode ini Diatas Kode </body> :

<script>
var myApp=angular.module('tabs',[]);
myApp.controller('shift_tabs',function(){
  this.activeTab;
  this.makeShift=function(e){
    this.activeTab=e;
  }
  this.isActive=function(f){
    if(f==this.activeTab){
      return true
    }
  }
});
</script>

  • Selanjutnya Kode Script ini diatas Kode </head> :

<script src='//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js'></script>

  • Dan Gunakan Kode ini Menampilkan Multi Tab Video Player :

<div class="outer" ng-app="tabs">
<div class="tabs" ng-controller="shift_tabs as shift">
<div class="built2bless-multitab-video" ng-init="shift.makeShift(1)">
<button ng-class="{active:shift.isActive(1)}" ng-click="shift.makeShift(1)">VIDEO 1</button>
      <button ng-class="{active:shift.isActive(2)}" ng-click="shift.makeShift(2)">VIDEO 2</button>
      <button ng-class="{active:shift.isActive(3)}" ng-click="shift.makeShift(3)">VIDEO 3</button>
    </div>
<div class="built2bless-multitab-video-content">
<div ng-show="shift.isActive(1)">
<iframe allowfullscreen="" frameborder="0" src="https://www.youtube.com/embed/
kode video youtube?rel=0"></iframe></div>
<div ng-show="shift.isActive(2)">
<iframe allowfullscreen="" frameborder="0" src="https://www.youtube.com/embed/
kode video youtube?rel=0"></iframe></div>
<div ng-show="shift.isActive(3)">
<iframe allowfullscreen="" frameborder="0" src="https://www.youtube.com/embed/
kode video youtube?rel=0"></iframe></div>
</div>
</div>
</div>

  • Contoh Hasil :



  • Ganti Bagian Kode Video Youtube dengan bagian belakang pada URL / Link Video Youtube.
  • Contoh URL / Link Video Youtube adalah https://www.youtube.com/watch?v=DHj7ejbL9cg maka cukup Ganti Bagian Kode Video Youtube dengan DHj7ejbL9c

Semoga Bermanfaat, Happy Blogging :)

KATEGORI KONTEN : Content Management System

BAGIKAN :

CONVERSATION

Daftar Akun XM