Hai! Berikut ini 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 :)