Skip to main content

Cara Buat List Youtube dan Subcriber Di Amp

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



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&quot; 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 
Reaksi:

Berbagi Itu Peduli :

Comment Policy: Gunakanlah kontak komentar ini dengan bijak jangan buat link atau spam, Jika berkenan silahkan terlebih dahulu, Follow this blog

Selanjutnya tuliskan komentar anda sesuai dengan topik postingan ini.

Centang kotak Beritahu saya untuk mendapatkan notifikasi balasan via email.

Untuk komentar secara Private silahkan masuk ke Messaging Google