Membuat Multi Tab Video Streaming Responsive Di Blog

Membuat Multi Tab Video Streaming Responsive Di Blog

Cara memasang multi tab video streaming responsive di blog

Pada postingan kali ini aku akan mengembangkan wacana multi tab video streaming. Kaprikornus kalian sanggup memasukan 3 (tiga video)bisa untuk pilihan chanel atau sanggup untuk menambah vido lanjutannya.

sanggup juga kalian menaruh beberapa video dengan kualitas yang berbeda, sanggup juga menaruh video dengan server yang berbeda, buat cadangan apa bila uploadan video / film di server yang satu tidak sanggup di play.

Demo Tampilan Multi Tab Video Streaming Responsive Di Blog

Nah bagi kalian yang igin memasang multi tab video streaming youtube responsive di blog, silahkan ikuti langkah demi langkah berikut ini.

  • Login ke Blogger.com
  • Masuk ke Tab Template-> Klik Edit HTML.
  • Cari Code </head>
  • Lalu masukan css dibawah ini sempurna di atas isyarat tadi. 
    •  <style type='text/css'> .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}} </style>
  • Selanjutnya cari isyarat </body>, masukan javascript berikut di atasnya. 
    •  <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>
    Multi tab video streaming responsive ini memerlukan ajax,jika di template teman belum terdapat scriptnya, silahkan masukan script berikut di atas isyarat </head> 
     <script src='//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js'></script>
    Jika di template agan sudah terpasang, lewati script ini.
  • Save template.

Cara memasang multi tab youtube responsive di postingan

  • Buat postingan baru, kemudian masuk ke tab html, lihat gambar.
    • Membuat Multi Tab Video Streaming Responsive Di Blog
  • Copy dan masukan html dibawah ini ke dalam postingan.. 
    •  <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)}'>HD 720p</button>       <button ng-click='shift.makeShift(2)' ng-class='{active:shift.isActive(2)}'>HD 720p</button>       <button ng-click='shift.makeShift(3)' ng-class='{active:shift.isActive(3)}'>BRRIP 1080p</button>     </div>     <div class='tab-content'>       <div ng-show='shift.isActive(1)'><iframe  src="https://www.youtube.com/embed/v8WjMiodcKo" frameborder="0" allowfullscreen></iframe></div>       <div ng-show='shift.isActive(2)'><iframe src="https://www.youtube.com/embed/Wjyf44hTDco" frameborder="0" allowfullscreen></iframe></div>       <div ng-show='shift.isActive(3)'><iframe  src="https://www.youtube.com/embed/CaObO42bjiI" frameborder="0" allowfullscreen></iframe></div>     </div>   </div> </div>
    Silahkan sesuaikan goresan pena HD 720p, HD 720p, BRRIP 1080p. dengan goresan pena yang kalian mau.
    Ganti juga url yang aku block ibarat https://www.youtube.com/embed/v8WjMiodcKo, dengan url video kalian.
  • Selesai, tinggal di publikasikan.

Cukup sekian dan terimakasih, agar artikel wacana Membuat Multi Tab Video Streaming Responsive Di Blog

Apabila ada yang mau bertanya, silahkan bertanya di kolom komentar.

video youtube responsive

Comments

Post a Comment

Popular posts from this blog

Cara Menciptakan Recent Comments Disqus

Image
Cara Membuat Widget Recent Comments Disqus Di Blog Cara Memasang Recent Comments Disqus Di Blogger , Pada postingan kali ini saya selaku admin blog mas tamvan akan menyebarkan tutorial memasang sebuah widget komentar disqus di website blogger. Widget Komentar terbaru ini khusus bagi kalian yang memasang komentar disqus di blognya, jadi kalo kalian memasang widget ini tapi tidak memasang komentar disqus atau tidak ada yang komentar di akun disqus kalian. maka tampilannya akan kosong. Buat kalian yang memasang komentar bawaan blogger, mungkin nanti saya akan posting d lalu hari.. Widget komentar disqus ini sangat simple kalian tinggal pasang dan udah jadi tinggal sesuain sendiri tampilannya dengan selera kalian. Okeh tanpa basa busuk lagi mari kita masuk ke tahap pemasangan widget recent comments disqus di blog. Login ke Blogger.com Masuk ke Tataletak , klik Tambahkan Gadget atau add widget Lalu cari dan klik HTML/Javascript , teladan lihat gambar. S...
Read more

Ox-Zm 2020 Blogger Template Seo Responsive Clean Css3

Image
Premium Blogger Template 2020 SEO, RESPONSIVE, Mobile Friendly Download Premium Blogger Templates 2020 Seo Responsive , hallo 2020 di awal bulan ini blog mas tamvan menciptakan template gres yang tentunya fast loading, clean, responsive, mobile friendly dan mobile ready. Untuk fitur dan tampilannya dapat lihat dibawah ini. Features Availability Responsive True Cek SEO True Cek Google Testing Tool Validator True Cek Google Page Speed True Cek GTMETRIX True Cek 2 Column Style Post True Google Friendly True Clean Typography True Minimalist True ...
Read more

Membuat Multi Tab Server Video Streaming Ibarat Layarkaca21

Image
Tutorial Cara Membuat Multi tab Video Streaming Click to Load Iframe Memasang Tab Pilihan Server Untuk Video Streaming di Blog , kali ini saya akan membagikan lagi sebuah widget untuk blog movie yang akan menampilkan beberapa pilihan server dan kualitas video yang berbeda ibarat pada wrbsite layar kaca Buat kalin yang menciptakan blog moveie tentunya harus menciptakan beberapa video / Film cadangan di server yang berbeda untuk jaga-jaga apabila di server yang satunya ada problem / sedang maintenance. Sebelumnya saya juga sudah pernah share artikel yang sama tapi pada tutorial sebelumnya video yang di pasang akan diload secara bersamaan dikala blog / halaman di buka. Nah pada widget Responsive Multi Tab Video Streaming ini video / iframe yang ada didalamnya akan di load dikala tombol button di klik . Makara tidak akan memberatkan loading blog kalian.. Demo Multi Tab Video Streaming Nah untuk tutorialnya kalian dapat ikuti langkah demi langkah dibawah ini Membuat Multi Tab S...
Read more