informasi investasi, informasi saham, informasi forex, informasi kripto, informasi saham hari ini, informasi forex hari ini, informasi kripto hari ini, fundamental saham, fundamental forex, fundamental kripto, berita investasi, berita saham, berita forex, berita kripto, berita saham hari ini, berita forex hari ini, berita kripto hari ini, artikel investasi, artikel saham, artikel forex, artikel kripto, prediksi saham, prediksi forex, prediksi kripto, analisa saham, analisa forex, analisa kripto, trading saham, trading forex, trading kripto, belajar trading saham, belajar trading forex, belajar trading kripto, panduan trading saham, panduan trading forex, panduan trading kripto, tips trading saham, tips trading forex, tips trading kripto.
image3

Cara Membuat Multi Tab Video Player pada Blogger

Published at September 2018
Content Category : Blogger
Tokocrypto Powered by Binance

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 :)

Bagikan :

CONVERSATION