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"; 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 

Follow us on Instagram
@encepnurdin.id

More from Instagram...

Follow us on Facebook
@encepnurdin.id

Find us on Google Maps
@encepnurdin

Reactions:

Berbagi Itu Peduli :

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.

Jika merasa artikel ini bermanfaat ulas saya di google maps
https://g.page/encepnurdin/review
Buka Komentar
Aplikasi: Tambahkan aplikasi encepnurdin. id di smartphone tanpa install, buka encepnurdin. id dengan browser Chrome di smartphone lalu klik ikon 3 titikdi browser kemudian pilih "Tambahkan ke layar utama". Selanjutnya klik aplikasi encepnurdin. id dari layar utama smartphone Anda.

Yuk langganan artikel gratis