Cara Membuat Widget Playlist Youtube di Blogger Terbaru
Embed video di postingan blogger mungkin sudah biasa kalian dengar, Apalagi cara membuat tombol subscribe youtube di blogger tapi kalau embed playlist di widget blogger mungkin hanya beberapa saja yang sudah menerapkan seperti contohnya ada di blog kompi ajaib, Namum kang adhy hanya membuat tutorial untuk blogger yang sudah beralih ke AMP. Nah disini saya akan kasih tutorial Embed playlist youtube di blogger HTML biasa yang pastinya tidak akan mengganggu loading dari blog yang kamu punya.
#1. Pastikan kamu sudah membuat playlist di channel youtube kamu (Bisa juga ambil playlist dari channel orang lain)
Jika Kamu membuat playlist baru, masukkan nama playlist-nya.
Catatan: Menghapus playlist di tampilan desktop baru tidak dapat dilakukan untuk saat ini. Untuk mengedit atau menghapus playlist:
#2. Silahkan buka situs github lalu lakukan signup disana. https://github.com/join?source=header
Setelah mempunyai akun github, silahkan buat Repository di Github dengan cara klik logo + di pojokan kanan atas lalu pilih New Repository.
Ket pengisian Repository.
#3. Sekarang Klik Create New File, Silahkan kamu Copy kode HTML di bawah ini lalu pastekan di dalamnya.
Berikut kode embed playlist youtube untuk blogger.
<!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=PL9ZxAticqDMeaQ1-5HhfJJs4Iy8OkyIrT" 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="UC3ZSrn4nhZ2xJEISQpV3EfQ" data-layout="full" data-count="default"></div>
</div>
</body>
</html>
Langkah pertama untuk memasang playlist youtube di Blogger.
Yang pertama sekali harus kamu lakukan adalah membuat akun di Github, Apa itu Github? GitHub adalah layanan penginangan web bersama untuk proyek pengembangan perangkat lunak yang menggunakan sistem pengontrol versi Git dan layanan hosting internet. https://id.wikipedia.org/wiki/GitHub#1. Pastikan kamu sudah membuat playlist di channel youtube kamu (Bisa juga ambil playlist dari channel orang lain)
Berikut cara membuat playlist di youtube:
Membuat & menemukan playlist- Mulailah dengan video yang ingin dimasukkan ke dalam playlist.
- Di bawah video, klik Tambahkan ke .
- Pilih Tonton nanti, Favorit, atau playlist yang sudah dibuat, atau klik Buat playlist baru.
Jika Kamu membuat playlist baru, masukkan nama playlist-nya.
- Gunakan kotak drop-down untuk memilih setelan privasi playlist. Jika playlist disetel ke pribadi, hanya Kamu yang dapat melihatnya.
- Klik Buat.
- Untuk menemukan playlist Kamu, buka Panduan dan klik Koleksi.
Catatan: Menghapus playlist di tampilan desktop baru tidak dapat dilakukan untuk saat ini. Untuk mengedit atau menghapus playlist:
- Buka halaman channel Kamu.
- Pilih Edit tata letak.
- Kamu akan diarahkan ke desain lama untuk membuat perubahan.
#2. Silahkan buka situs github lalu lakukan signup disana. https://github.com/join?source=header
Setelah mempunyai akun github, silahkan buat Repository di Github dengan cara klik logo + di pojokan kanan atas lalu pilih New Repository.
- Untuk Repository Name silahkan kamu isikan sesuka hati kamu
- Deskripsi : Boleh diisi atau di kosongkan saja.
- Pilih Public karena akun kita gratisan.
- Initialize this repository with a README di Centang, Agar bisa upload dan membuat file baru di dalam folder Repository kita.
- Tekan Create Repository.
<!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=PL9ZxAticqDMeaQ1-5HhfJJs4Iy8OkyIrT" 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="UC3ZSrn4nhZ2xJEISQpV3EfQ" data-layout="full" data-count="default"></div>
</div>
</body>
</html>
Keterangan kode diatas.
- Kode yang di Bold Warna merah adalah kode dari URL Playlist yang akan di Embed.
- Kode yang di Bold Warna Pink adalah kode dari URL Channel kamu. (Itu adalah tombol subscribe channel)
Ingat nama dari file tersebut harus di akhiri dengan .html kemudian klik commit .
#4. Sekarang buka situs rawgit.com, Klik kanan pada nama file yang sudah kamu buat tadi lalu pilih "Copy Link Address" Pastekan di Situs Rawgit tadi.
Copy url yang sudah di convert tadi dan masukan pada kode HTML dibawah ini.
<iframe width="300"
height="241"
sandbox="allow-forms allow-scripts allow-same-origin allow-modals allow-popups"
frameborder="0"
scrolling="no"
allowfullscreen="allowfullscreen"
src="https://rawgit.com/perampokgoogle/Embed-Playlist/master/kodeembed.html">
</iframe>
#5. Sekarang tinggal kamu copy kode diatas dan pastekan di Widget blogger kamu. Cek demonya diblog berikut. http://www.carahackwifi.net/
Oke sobat saya rasa cukup segitu dulu ya info mengenai bagaimana cara pasang playlist youtube di blogger tanpa mengganggu speed template.
Agak ribet sih tapi saya percaya kalau kamu benar benar serius pasti bisa membuatnya, Kalau udah mentok kamu bisa bertanya via comment dibawah ini.
Credit script HTML Embed : http://www.kompiajaib.com/
Bagi kamu yang menggunakan Blog AMP kamu bisa baca tutorial nya disini : http://www.kompiajaib.com/2017/11/menampilkan-playlist-video-youtube-di.html
Script HTML Embed Playlist Youtube For Blogger Dowload disini
Script HTML Widget Playlist Youtube For Blogger Download disini.
Terimakasih kompi ajaib ^_^
Script HTML Widget Playlist Youtube For Blogger Download disini.
Terimakasih kompi ajaib ^_^
