Amp html Blog- Membuat widget video list dan subscribs chanel di sidebar untuk blog
amp caranya bisa anda baca artikelnya di sini.
Widget berlanganan chanel youtube dan
video list ini sebenarnya dari adi suryadi pemilik situs
kompi ajaib.Widget ini bisa di pasang di sidebar blog dengan fitur subscribe
ke chanel kita di youtube.Dengan widget ini di harapkan pengunjung blog
yang melihatnya bisa mensubscribe dan tentunya akan menambah bilangan subscriber chanel kita.
Memasang Widget Subscribe Youtube Dan Video List Di Blog AMP html
Seperti biasa karena pada template amp tidak dapat memasang javascript maka kita harus hostingakan code di bawah di github.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Channel Youtube</title>
<meta content='width=device-width, initial-scale=1' name='viewport'>
<link href='https://fonts.googleapis.com/css?family=Roboto:100,200,300,400italic,400,500,500italic,700,700italic,900' rel='stylesheet' type='text/css'/>
<style>
body { background-color:white; margin:0; padding:0; color:#212121; font-family:Roboto,Arial,sans-serif; }
a { color:#212121; text-decoration:none; }
a:hover {color:#0379C4}
iframe{border:0}
h4{margin:2px 0 0;font-size:14px}
.sub-box{ padding:0 5px 5px; border:1px solid #dedede; border-top:none; border-radius:0 0 3px 3px }
</style>
</head>
<body>
<div style="text-align:center;margin:0 auto;width:100%;">
<div style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;margin:0;">
<iframe src="https://www.youtube.com/embed/videoseries?list=PLRvPq6tgBslGebaNhuFav26H3eN830hj7"; style="border:0;position:absolute;top:0;left:0;width:100%;height:100%;" allowfullscreen>
</iframe>
</div>
</div>
<div class="sub-box">
<h4>Subscribe me</h4>
<script src="https://apis.google.com/js/platform.js"></script>
<div class="g-ytsubscribe" data-channelid="UCRel3hGTFCDbMFmY1c1EykA" data-layout="full" data-count="default">
</div>
</div>
</body>
</html>
Perhatikan kode yang di tanda kuning pertama,kode kode itu
adalah kode ID Video list dan kode kuning yang kedua adalah
kode ID Chanel youtube.silakan ganti kedua kode di atas dengan milik anda.
Untuk cara Css,Html dan javascript dihosting di github anda bisa baca artikelnya di sini.
Contoh widget yang sudah jadi kurang lebih kodenya akan menjadi seperti ini
<amp-iframe src="https://cdn.rawgit.com/wanwakek/HTML/c93855f5/youtube_List.html" frameborder="0" scrolling="no" width="300" height="250" layout="responsive" sandbox="allow-forms allow-scripts allow-same-origin allow-popups"> </amp-iframe>