quarta-feira, 29 de junho de 2016

Multi tab video streaming para Blogger

multi-tab-video-streaming-for-blogger-embed


Hoje vamos compartilhar esse grande tutorial de mastamvan multi tab video streaming isso é muito util quando desejamos apresentar 3 tipos de videos diferentes em uma unica frame também facilita para o Blogueiro a poupar tempo quando isso tem por objetivo por exemplo uma video aula de sequencia é muito importante vai criar interação entre abas alternadas para verificar o próximo video e o melhor é que isso é embed na própria página do Blogger então para adicionar isso a seu Blogger siga os passos.


Adicionando multi tab video streaming para Blogger.

Faça login no Blogger em seguida va no menu modelo 
>> então editar HTML/JavaScript com as teclas combinadas CTRL+F Busque por ]]></b:skin> ou </style> e logo acima disso copie o seguinte código.


.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;
}

Agora procure por </body> e acima disso cole o seguinte código.


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

Então procure por </head> adicione o código acima disso. 

<script src='//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js'></script>

Salve o template.

Então agora ao criar um post clique na aba html como mostra a figura copie e cole o código

post-mode-blogger


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

Não esqueça de substituir os links que deseja pelo que esta realçado em amarelo salve e pronto.




NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post

Nenhum comentário:

Postar um comentário

NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post
 

Delivered by FeedBurner