Home / Blogging / Tutorial / Cara Buat List Youtube dan Subcriber Di Amp

Cara Buat List Youtube dan Subcriber Di Amp

Date - 


BLOG MOBILE.

Assalamualaikum semoga kita semua sehat dan di beri umur panjang aminn.

Pada kesempatan kali ini saya mau mencoba memposting cara cara membuat widget atau menampilkan list video YouTube dan Subcriber di blog valid AMP.
jadi ini bisa di terapkan di widget blog AMP atau di halaman postingan



DEMO

Langsung saja.
Langkah pertama
Silahkan hosting kode di bawah ini di GITHUB misalnya dengan ektensi HTML.

<!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=PLpQIKHeORRtMoqANlUYQ13gxIVaL-X2mT"; 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="UCCu_m8rEt5qFB6JLgadCfAQ" data-layout="full" data-count="default"></div>
</div>
</body>
</html>
Keterangan.
Silahkan ganti kode yang di tandai warna kuning dengan ID list YouTube anda dan ID Channels YouTube anda.selesi di hosting langkah Selanjutnya masuk RAWGIT lalu dapatkan kode alamat URL nya

Sampai di sini sudah selesai dan untuk penerapan di widget blog AMP 

• Masuk tata letak blog 
• Tambahan widget HTML JAVACRPIT 


<amp-iframe src="URL cdn.rawgit.com di sini" frameborder="0" scrolling="no" width="300" height="330" layout="responsive" sandbox="allow-forms allow-scripts allow-same-origin allow-popups"> </amp-iframe>
Dan ha si hasilnya seperti yang terlihat di bawah ini 

Share this

0 komentar

Posting Komentar

Berkomentarlah dengan sopan :)

Langganan: Posting Komentar (Atom)