Tab Mirror Video Streaming Valid AMP Responsive

Syahrul

Apa Kabar semuanya, pada kesempatan ini saya menyempatkan diri untuk membagikan tutorial yang mungkin bermanfaat buat kalian para blogger yang menggunakan Template AMP untuk blog fansub anime streaming atau fansub anime streaming, tutorial ini saya buat dikarenakan masih terbatasnya fitur dari template AMP itu sendiri, jadi mungkin dari tutorial ini sangat berguna untuk kalian yang sudah menggunakan template AMP.

Ok fitur kali ini sudah Full responsive, kenapa? jawabannya sudah dari Script AMP itu sendiri, dan untuk kecepatan loadnya jangan ditanya lagi, karena sudah fastload. Baiklah langsung saja kita mulai tutorial kali ini.

Tab Mirror Video Streaming Valid AMP Responsive

Pertama buka Blogger > Tema > Edit HTML, lalu cek atau Tambahkan script ini di atas </head> atau &lt;/head&gt;&lt;!--<head/>--&gt;,
Jika sudah ada, tidak perlu lagi ditambah script ini
<script async='async' custom-element='amp-video' src='https://cdn.ampproject.org/v0/amp-video-0.1.js'/>

Kedua, tambahkan CSS berikut ini dan simpan di bawah
<style amp-custom='amp-custom'> atau diatas </style>
/* Mirror Streaming Valid AMP By Arleth-desz.blogspot.com */
.mirror-tabs{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}
.mirror-tabs label{color:#FFF;-webkit-box-ordinal-group:2;-webkit-order:1;-ms-flex-order:1;order:1;display:block;padding:5px 8px;margin-right:0.2rem;cursor:pointer;background:#222;font-weight:bold;-webkit-transition:background ease 0.2s;transition:background ease 0.2s}
.mirror-tabs .tab{-webkit-box-ordinal-group:100;-webkit-order:99;-ms-flex-order:99;order:99;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;width:100%;display:none;padding:0px;background:#fafafa}
.mirror-tabs input[type="radio"]{position:absolute;opacity:0}
.mirror-tabs input[type="radio"]:checked + label{background:#2196f3}
.mirror-tabs input[type="radio"]:checked + label + .tab{display:block}
/* Responsive */
@media (max-width:45em){.mirror-tabs .tab,.mirror-tabs label{-webkit-box-ordinal-group:NaN;-webkit-order:initial;-ms-flex-order:initial;order:initial}.mirror-tabs label{width:100%;margin-right:0;margin-top:0.2rem}}

Save Template. Jika sudah disave, lalu buatlah post mirror streaming valid amp menggunakan markup HTML yang sudah saya sediakan dibawah ini
<div class="mirror-tabs">

  <input type="radio" name="mirror-tabs" id="vid1" checked="checked"/>
  <label for="vid1">SERVER 1</label>
  <div class="tab">
    <amp-video width="480"
  height="270"
  src="LINK VIDEO"
  poster="LINK GAMBAR"
  layout="responsive"
  controls=''>
  <div fallback=''>
    <p>Your browser doesn't support HTML5 video.</p>
  </div>
  <source type="video/mp4"
    src="LINK VIDEO">
</amp-video>
  </div>
  
  <input type="radio" name="mirror-tabs" id="vid2">
  <label for="vid2">SERVER 2</label>
  <div class="tab">
    <amp-video width="480"
  height="270"
  src="LINK VIDEO"
  poster="LINK GAMBAR"
  layout="responsive"
  controls=''>
  <div fallback=''>
    <p>Your browser doesn't support HTML5 video.</p>
  </div>
  <source type="video/mp4"
    src="LINK VIDEO">
</amp-video>
  </div>
  
  <input type="radio" name="mirror-tabs" id="vid3">
  <label for="vid3">SERVER 3</label>
  <div class="tab">
    <amp-video width="480"
  height="270"
  src="LINK VIDEO"
  poster="LINK GAMBAR"
  layout="responsive"
  controls=''>
  <div fallback=''>
    <p>Your browser doesn't support HTML5 video.</p>
  </div>
  <source type="video/mp4"
    src="LINK VIDEO">
</amp-video>
  </div>
  
</div>

DEMO

Ok tutorial kali ini selesai, sekarang kalian juga bisa upload video mp4 langsung dari blogger menggunakan markup html amp tutorial ini,

caranya Insert a Video > Add a video > Upload jika sudah di upload silahkan ambil Idcontent nya dan ganti XXXXXXXXXXXXXXXX dengan ID video yang kalian upload diblogger.
https://www.blogger.com/video-play.mp4?contentId=XXXXXXXXXXXXXXXX
Ok sekian dari tutorial kali ini saya mohon pamit dan sampai jumpa pada tutorial selanjutnya.
Related Posts
Disqus Comments