cara membuat frame vidio multy tab
 |
| cara membuat frame vidio multy tab |
Tutorial kali ini saya akan coba share cara membuat frame vidio multy tab responsif buat blog fansub anime
Tab bisa kalian ganti sesuai selera kalian busa dibikin kualitas server atau yang lain nya.
buat yang berminat langsung saja ikuti cara di bawa ini :
-Login ke bloger
-kemudian pilih template dan Edit HTML
-Kemudian cari code "</b:skin>" dengan cara klik CTRL+F
-Kalau sudah ketemu pastekan code di bawah ini tepat di atas code </b:skin>
CCS </> frame video multy tab
.tab-buttons{
overflow:auto;
text-align: center;
}
.tab-buttons button{
background:#363f45;
color:#feb41c;
border:none;
padding:10px 20px;
font:700 15px 'segoe ui',sans-serif;
text-transform:uppercase;
cursor:pointer;
-webkit-transition:all 300ms ease-in;
-moz-transition:all 300ms ease-in;
transition:all 300ms ease-in;
}
.tab-buttons button.active{
color: #fff;
background: #5e7c88;
}
.tab-content>div{
padding:20px;
background:#5e7c88;
font:400 16px 'segoe ui',sans-serif;
color:#fff;
}
.tab-content iframe{width:100%!important;height:400px;}
@media screen and (max-width:960px){
.tab-content iframe{max-height:90%}}
@media screen and (max-width:768px){
.tab-content iframe{max-height:75%}}
@media screen and (max-width:600px){
.tab-content iframe{max-height:60%}}
@media screen and (max-width:480px){
.tab-content iframe{height:auto!important;max-height:auto!important}}
-Jangan dulu keluar cari code "</body>"
-Dan paste kan code di bawah ini tepat di atasnya :
javascript </> frame video multy tab
<style>
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
}
}
});
</style>
Oh ya sobat catatan buat bikin frame vidio multy tab responsif ini memerlukan sebuah ajax.
Jika dalam Template kalian sudah memilikinya skip langkah ini.
Jika belum silahkan kalian pasang code di bawa ini tepat di atas code "</head>"
javascript </> frame video multy tab
<script src='//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js'></script>
Kalau sudah simpan template.
Sekarang kita masuk ke postingan pastekan code di bawa ini di dalam postingan "ingat jangan pada Compose harus pada HTML"
HTML </> frame video multy tab
<div class='outer' ng-app='tabs'>
<div class='tabs' ng-controller='shift_tabs as shift'>
<div class='tab-buttons' ng-init='shift.makeShift(1)'>
<button ng-click='shift.makeShift(1)' ng-class='{active:shift.isActive(1)}'>Judul tab 1</button>
<button ng-click='shift.makeShift(2)' ng-class='{active:shift.isActive(2)}'>Judul tab 1</button>
<button ng-click='shift.makeShift(3)' ng-class='{active:shift.isActive(3)}'>Judul tab 1</button>
</div>
<div class='tab-content'>
<div ng-show='shift.isActive(1)'><--Vidio Kalian di sini--></div>
<div ng-show='shift.isActive(2)'><--Vidio Kalian di sini--></div>
<div ng-show='shift.isActive(3)'><--Vidio Kalian di sini--></div>
</div>
</div>
</div>
Ganti :
Judul tab dengan judul yang kalian inginkan
Warna merah adalah tempat vidio kalian
Oke sekian teturial kali ini Sampai ketemu di post dan tutorial berikutnya.Terimakasih
Terimakasih sebelumnya telah mengunjungi blog ini semoga bisa bermanfaat buat kalian semua.Mari kita budayakan post coment sebagai sarana bersilatuhrahmi walau tak saling kenal,walau tak saling dekat setidaknya kita bisa saling bertukarpikiran atau hanya sebatas support dalam postingan comment.Terimakasih semoga blog ini bisa lebih baik lagi kedepan.