image3

welcome to my blog|hope be useful

Cara Membuat Multi Tab Video Player pada Blogger

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

TAGS : Blogger Blogger Widget CSS HTML

Share :

Blog ini tidak menyediakan URL / Link Download segala jenis Konten yang Bersifat Ilegal, seperti Crack, Patch, Serial Number, dan Sejenisnya.

PROFIT KONSISTEN DENGAN ROBOT TERBAIK :

FREE Trial Forex EA Trader
Forex Trend Detector
Dynamic Pro Scalper
Forex Diamond EA - Robot Forex Terbaik
WallStreet Forex Robot 2.0 Evolution
Volatility Factor 2.0

CONVERSATION