Cara membuat postingan video di blog

Cara membuat postingan video di blog

  06:01:00    Seoke.com

---

           Jumpa lagi sahabat seoke.com semoga kalian di beri selalu kesehatan oleh yang maha kuasa.oke gays kali ini seoke.com akan membagikan tentang Cara membuat postingan video di blog,sahabat membuatuhkan video dalam postingan atau p8n mau di pasang dalam blog kalian silahkan copy paste code codenya di bawah ini dan bila sahabat membutuhkan kode kode seperti cara membuat navigasi silahkan baca di postingan seoke.com sebelumnya yang telah di postingan beberapa waktu lalu.

foto By www.cowfest.org

Dalam membuat video dalam postingan atau di pasang dalam blog kalian sungguh bisa di katakan sangat lah mudah dan gampang saat memasangkan kode kode tersebut.
kalian cukup copy paste code CSS di bawah ini dan letakan di atas kode ]]></b:skin> 

• CSS

#vid {
  margin-top: 20px;
}
#spin {
  width: 110px;
  height: 110px;
  background-color: #88CE02;
  border-radius: 50%;
  margin: auto;
  margin-top: 30px;
  border: 5px solid #333;
}
#spin .thumb {
  width: 25px;
  height: 25px;
  top: 20px;
  left: 20px;
  position: absolute;
  background-color: #333;
  border-radius: 50%;
}
#rail {
  background-color: #333;
  height: 5px;
  width: 360px;
  overflow: visible;
  margin: auto;
  margin-top: 40px;
  position: relative;
}
#rail .prog {
  height: 100%;
  position: absolute;
  background-color: #88CE02;
  opacity: 0.3;
}
#rail .thumb {
  background-color: #88CE02;
  width: 15px;
  height: 40px;
  border-radius: 3px;
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  z-index:1000;
}
#logo {
  border-radius: 50%;
  position: absolute;
  z-index: 5000;
  top: 20px;
  right: 20px;
}
#links {
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 50px;
  font-size: 13px;
  font-family: tahoma;
  color: #fff;
}
#links a {
  text-decoration: none;
  font-size: 2.3em;
  color: #fff;
}
#twitter {
  position: absolute;
  bottom: 15px;
  right: 20px;
}
#pens {
  position: absolute;
  bottom: 15px;
  left: 20px;
}

Setelah itu kalian cari kode </body> biasanya kode </body >tersebut selalu berada di badian bawah pada kode HTML.Dan letakan kode di bawah ini tepat di atasnya.

• JAVASCRIPT

<script type='text/javascript'>
var vid = document.getElementById("myVideo");
vid.onplay = function() {
    TweenLite.ticker.addEventListener('tick',vidUpdate);
};
vid.onpause = function() {
      TweenLite.ticker.removeEventListener('tick',vidUpdate);
}
vid.onended = function() {
      TweenLite.ticker.removeEventListener('tick',vidUpdate);
      vidUpdate();
};

var maxRX = 360 ,
    spin = document.querySelector('#spin') ,
    thumb = document.querySelector('#rail .thumb') ,
    prog = document.querySelector('#rail .prog') ;
Draggable.create(spin,{
  type:'rotation',
  bounds:{min:0,max:maxRX},
  onDrag:onDrag ,
  onPress:function(){ vid.pause()  },
  onRelease:function(){ vid.play()  }
});
Draggable.create(thumb,{
  type:'x',
  bounds:{minX:0,maxX:maxRX},
  onDrag:onDrag ,
  onPress:function(){ vid.pause()  },
  onRelease:function(){ vid.play()  }
});
function onDrag(){
  vid.currentTime = (this.x/maxRX)*vid.duration;
  if( this.target == spin ){
    TweenLite.set( thumb,{x:this.x}) ;
  }else{
    TweenLite.set( spin,{ rotation : this.x }) ;
  }
  TweenLite.set( prog , { width : this.x }) ;
};
function vidUpdate(){
  TweenLite.set( spin , {rotation:(vid.currentTime/vid.duration)*maxRX} ) ;
  TweenLite.set( thumb , {x:(vid.currentTime/vid.duration)*maxRX} ) ;
  TweenLite.set( prog , {width:(vid.currentTime/vid.duration)*maxRX} ) ;
};
</script>

Dan yang terakhir jika sahabat meminginkan video berada pada postingan kalian buka dashboar dan pilih entri baru,setelah berada pada halaman postinngan kalian pilih yang HTML dan masukan kode di bawah ini

• HTML 

<div id="vid">
  <video id="myVideo" controls autoplay>
  <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  <source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
</video>
  <div id="spin">
    <div class="thumb"></div>
  </div>
  <div id="rail">
    <div class="prog"></div>
    <div class="thumb"></div>
  </div>

dan publikasikan

NB jika kalian video tersebut berada dalam blog kalian cukup buka dashboar pilih TATA LETAK dan TAMBAHKAN WIDGET pilih HTML/JAVASCRIPT,letakan kode HTMLnya.Dan simpan

sahabat membutuhkan demo tersebut silahkan kunjungi demo nya di bawah ini

Terima kasih sahabat sudah berkunjung di postingan Cara membuat postingan video di blog,dan baca juga artikel terkait tentang Cara menginput code CSS pada HTML atau pengertian JAVACRIPT 
soke.com mengucapkan banyak Terima kasih yelah meluangkan watunya nerkunjung di blognya seoke.com yang selalu berusaha menyajikan kode kode HTML,CSS,JAVASCRIPT dan tutorial yang bisa kalian gunakan.

Share

Like

G+

Tweet

Tweet

Ditulis Oleh : Seoke.com Blogger

Terima kasih telah berkunjung di Cara membuat postingan video di blog.Silahkan kalian masukan mail kalian untuk berlangganan lewat mail tentang artikel terbaru dari SEOKE.COM.

Subscribe To Email!