Widget Youtube Channel dengan API v3 dan Javascript

Jika Kalian adalah seorang blogger yang sekaligus merangkap sebagai youtuber, memasang tombol subscribe di blog bisa sangat berguna karena akan langsung terlihat oleh pengunjung.

Salah satu cara untuk menaikkan jumlah views pada video Youtube adalah dengan menambah jumlah subscribers.

Menambah jumlah Subscriber Youtube

Seperti yang diketahui, sekarang ini Youtube hanya akan melakukan review channel untuk dimonetasi AdSense jika jumlah subscribersnya sudah mencapai 1.000 orang dan telah mencapai 4.000 jam tayang dalam kurun waktu 12 bulan. Jadi untuk membantu mencapai target tersebut, mungkin tombol subscribe yang dipasang di blog ini bisa sedikit membantu.

Subscribe Button Youtube Channel dengan Youtube API v3

Pada artikel kali ini, saya akan berbagi tutorial pembuatan widget tombol subscribe youtube channel, dilengkapi dengan Jumlah Views, Video dan juga Subscriber yang terhubung dengan Youtube API v3.

Dengan memanfaatkan Youtube API, semua data yang tampil seperti Jumlah Views, Video dan Subscriber akan ter-sinkron secara realtime

Kelebihan lainya adalah, widget ini jauh lebih ringan jika dibandingkan dengan tombol subscribe yang disediakan Google Developer Tools.

Cara Membuat Widget Youtube Realtime dengan API v3

Baiklah langsung saja untuk tutorial pembuatanya. Silahkan ikuti langkah berikut ini.

Step 1 : Silakan masuk ke Dashboard Blogger Kalian. Kemudian pilih Tema lalu Edit HTML

Step 2 : Paste kode css berikut tepat diatas kode ]]></b:skin> atau di atas kode </style>

/* Widget Youtube card by KuyMase */

.ytOutBox{position:relative;overflow:hidden;padding:10px;border-radius:10px;background:#fff;box-shadow:rgba(0, 0, 0, 0.15) 0px 3px 3px 0px;}
.ytOutBox:before{content:'';display:block;position:absolute;bottom:0;left:0;width:70px;height:70px;background:rgba(155,170,175,0.12);background-repeat:no-repeat;border-radius:0 120px 0 0;transition:opacity .3s;z-index:2}
.ytWrap{width:100%;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:1px;border-radius:10px;border-top:1px solid var(--contentL);background-color:transparent}
.ytWrap:after{background:none repeat scroll 0 0 transparent;bottom:0;content:"";display:block;height:3px;left:50%;position:absolute;background:#ff0000;transition:width 0.3s ease 0s,left 0.3s ease 0s;width:0}
.ytWrap:hover:after{width:100%;left:0}
.ytLft{display:flex;align-items:center;justify-content:flex-start;heigt:100%;width:68%}
.profImg{position:relative;width:30%;margin:5px;padding:2px;display:flex;alighn-items:center}
span#views{position:absolute;z-index:1;top:27px;left:0;background:#fff;padding:5px 10px 5px 20px;border-radius:10px;font-weight:700;font-size:12px;box-shadow:rgba(50,50,93,0.25) 0 2px 5px -1px,rgba(0,0,0,0.3) 0 1px 3px -1px;transition:left 0.3s ease 0s,opacity 0.2s ease 0s;opacity:0}
.profImg:hover span#views{opacity:1;left:45px}
.profImg:hover img{transform:scale(1.15) rotate(0deg);border-radius:50% 50% 0;transition:all .2s ease}
.profImg img{position:relative;z-index:2;width:50px;height:50px;padding:5px;border-radius:0 50% 50%;background-color:#f2f2f2;box-shadow:rgba(50,50,93,0.25) 0 2px 5px -1px,rgba(0,0,0,0.3) 0 1px 3px -1px}
.nmWrap{height:auto;width:70%}
.chName{font-size:16px;font-weight:700;color:inherit;margin:1px 0}
.chName:after{content:'';background-image:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%231DA1F2' d='M11.528 1.6a.6.6 0 0 1 .944 0l1.809 2.3a.6.6 0 0 0 .635.207l2.815-.798a.6.6 0 0 1 .764.554l.11 2.925a.6.6 0 0 0 .393.54l2.747 1.01a.6.6 0 0 1 .292.897l-1.63 2.431a.6.6 0 0 0 0 .668l1.63 2.431a.6.6 0 0 1-.292.897l-2.747 1.01a.6.6 0 0 0-.392.54l-.111 2.925a.6.6 0 0 1-.764.554l-2.815-.798a.6.6 0 0 0-.636.206L12.473 22.4a.6.6 0 0 1-.944 0L9.72 20.1a.6.6 0 0 0-.635-.207l-2.815.798a.6.6 0 0 1-.764-.554l-.11-2.925a.6.6 0 0 0-.393-.54l-2.747-1.01a.6.6 0 0 1-.292-.897l1.63-2.431a.6.6 0 0 0 0-.668l-1.63-2.431a.6.6 0 0 1 .292-.897l2.747-1.01a.6.6 0 0 0 .392-.54l.111-2.925a.6.6 0 0 1 .764-.554l2.815.798A.6.6 0 0 0 9.72 3.9l1.81-2.3Z' stroke='%23fff' stroke-width='1.5'/%3E%3Cpath d='m9 12 2 2 4-4' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");margin-left:5px;width:16px;height:16px;background-size:16px 16px;background-repeat:no-repeat;display:inline-flex;position:relative;bottom:0;top:2px}
.ytSubs{display:flex;align-items:baseline;justify-content:flex-start;margin:0;padding:2px 0;font-size:12px;font-weight:500}
.ytSubs span:after,span#views:after{content:attr(data-text);margin-left:3px;font-weight:500;font-size:smaller}
.ytSubs span#subs{margin-right:2px;font-weight:600}
.ytSubs span#vids{margin:0 5px;font-weight:600}
.ytSubs span#vids:before{content:'\25CF';width:2px;margin-right:15px;display:inline-block;opacity:.6;position:relative;z-index:0}
.ytRht{display:flex;align-items:center;justify-content:center;width:32%;height:100%}
.subsBtn{text-decoration:none;font-size:small;font-weight:700;padding:8px 10px;border-radius:10px;color:#fff;background:#ff0000;text-transform:uppercase;box-shadow:rgba(50,50,93,0.25) 0 2px 5px -1px,rgba(0,0,0,0.3) 0 1px 3px -1px}
.subsBtn:hover{transform:scale(1.05);box-shadow:rgba(0,0,0,0.24) 0 3px 8px;transition:all .2s ease}

/*darkmode Sesuaikan Classnya*/
.drK .ytWrap{background:#000}
.drK .profImg img,.drK span#views{background:#000}
.drK .subsBtn{color:#fff}

Step 3 : Berikutnya silahkan paste kode HTML berikut.

Penempatan Widget

Jika ingin ditampilkan di bawah postingan maka bisa meletakkannya di bawah kode <data:post.body/> biasanya kode ini ada lebih dari 1. Silahkan Kalian coba satu persatu.

<!--[ Youtube Card by Kuymase.com ]-->
<div class='ytOutBox'>
<div class='ytWrap'>
  <div class='ytLft'>
    <!--[ Profil Picture ]-->
    <div class='profImg'>
      <img alt='Jorel Aristian' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwUu4D0GyU6GKOkWvXEXd-dTwQzuPHJVPF1xtxUW8XJgxsc88fhU7wtacPjjb4tKuaotCw5X25f-f_AIVP0LFCn_wQ0Fd1gGOueB9DeMnyEUNwkd6_2Q635GQsXE5P51v7BmWi-SZsT58/w224-h220-rw/' data-width='50px'/>
        <span data-text='Views' id='views'>...</span>
      </div>
    <div class='nmWrap'>
      <div class='chName'>Jorel Aristian</div>
      <div class='ytSubs'>
        <span data-text='Subs' id='subs'>...</span>
        <span data-text='Video' id='vids'>...</span>
        </div>
      </div>
    </div>
  <div class='ytRht'>
    <a class='subsBtn' href='javascript:;'>Subscribe</a>
    
    </div>
</div>
</div>

Nama & gambar channel masih manual, jadi silahkan disesuaikan

Pro Tips!

Kalian bisa membuat Widget baru diposisi yang sesuai, dan meletakan kode HTML dan Javascript dalamnya.

Step 4 : Berikutnya silahkan paste kode JavaScript berikut diatas tag penutup </body> atau </body>.

<script>/*<![CDATA[*/
  // Widget youtube API v3 by Kuymase.com
    const creator = 'www.kuymase.com' //don't delete this credit please!
    const youtubeKey = 'AIzaSyCEmCk964b9Bn3uuL1Y__QQrqoNB3t4Rs8';
    const youtubeUser = 'UC_bIYZ7crv35PWFKBzTt9Qg';
  
  eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('(0(c,d){2 B=c();0 g(a,b){1 3(b- -\'2y\',a)}0 Y(a,b){1 3(a- -\'2z\',b)}2A(!![]){1o{2 1p=-7(Y(-\'2B\',-\'2C\'))/Q*(7(Y(-\'2D\',-\'2E\'))/R)+-7(g(-\'2F\',-\'2G\'))/2H*(-7(g(-\'1q\',-\'2I\'))/Z)+7(g(-\'2J\',-\'2K\'))/2L+7(g(-\'2M\',-\'2N\'))/1r+-7(g(-\'2O\',-\'2P\'))/2Q+7(g(-\'2R\',-\'1q\'))/2S*(7(g(-\'1s\',-\'2T\'))/2U)+7(g(-\'2V\',-\'2W\'))/10;m(1p===d)2X;11 B[\'12\'](B[\'1t\']())}1u(2Y){B[\'12\'](B[\'1t\']())}}}(C,2Z));0 3(e,f){2 13=C();1 3=0(b,c){b=b-30;h u=13[b];m(3[\'1v\']===31){1w d=0(a){2 1x=\'32+/=\';h D=\'\',14=\'\',1y=D+d;S(h E=5,T,n,15=5;n=a[\'33\'](15++);~n&&(T=E%Z?T*34+n:n,E++%Z)?D+=1y[\'1z\'](15+10)-10!==5?35[\'36\'](37&T>>(-R*E&1r)):E:5){n=1x[\'38\'](n)}S(h U=5,1A=D[\'16\'];U<1A;U++){14+=\'%\'+(\'39\'+D[\'1z\'](U)[\'F\'](3a))[\'3b\'](-R)}1 3c(14)};3[\'1B\']=d,e=17,3[\'1v\']=!![]}2 v=13[5],G=b+v,18=e[G];m(!18){2 H=0(a){4[\'1C\']=a,4[\'o\']=[Q,5,5],4[\'1D\']=0(){1\'3d\'},4[\'1E\']=\'\\1F+\\x*\\1G(\\1G)\\x*{\\1F+\\x*\',4[\'1H\']=\'[\\1I|\\1J].+[\\1I|\\1J];?\\x*}\'};H[\'V\'][\'1K\']=0(){2 1L=1M 3e(4[\'1E\']+4[\'1H\']),1N=1L[\'3f\'](4[\'1D\'][\'F\']())?--4[\'o\'][Q]:--4[\'o\'][5];1 4[\'1O\'](1N)},H[\'V\'][\'1O\']=0(a){m(!3g(~a))1 a;1 4[\'1P\'](4[\'1C\'])},H[\'V\'][\'1P\']=0(a){S(h 19=5,1a=4[\'o\'][\'16\'];19<1a;19++){4[\'o\'][\'12\'](p[\'3h\'](p[\'3i\']())),1a=4[\'o\'][\'16\']}1 a(4[\'o\'][5])},1M H(3)[\'1K\'](),u=3[\'1B\'](u),e[G]=u}11 u=18;1 u},3(e,f)}0 y(a,b){1 3(b-\'3j\',a)}0 8(a,b){1 3(a- -\'3k\',b)}2 G=(0(){h 1b=!![];1 0(c,d){2 1Q=1b?0(){0 1R(a,b){1 3(b-\'3l\',a)}m(d){2 1S=d[1R(\'1T\',\'3m\')](c,17);1 d=1U,1S}}:0(){};1 1b=![],1Q}}()),v=G(4,0(){0 3n(a,b){1 3(b- -\'3o\',a)}2 1c={};0 I(a,b){1 3(a- -\'3p\',b)}1c[I(\'1V\',\'3q\')]=\'(((.+)+)+)\'+\'+$\';2 1d=1c;1 v[\'F\']()[\'3r\'](1d[I(\'1V\',-\'R\')])[I(\'3s\',\'3t\')]()[\'3u\'+\'r\'](v)[I(\'3v\',\'3w\')](1d[\'3x\'])});0 C(){2 1W=[\'3y\',\'3z\',\'3A\',\'3B\',\'3C\',\'3D\',\'3E\',\'3F\',\'3G\',\'3H\',\'3I\',\'3J\',\'3K\',\'3L\',\'3M\',\'3N\',\'3O\',\'3P\',\'3Q\',\'3R\',\'3S\',\'3T\',\'3U\',\'3V\',\'3W\',\'3X\',\'3Y\',\'3Z\',\'40\',\'41\',\'42\',\'43\',\'44\',\'45\',\'46\',\'47\',\'48\',\'49\',\'4a\',\'4b\',\'4c\',\'4d\',\'4e\',\'4f\',\'4g\',\'4h\',\'4i\',\'4j\',\'4k\',\'4l\',\'4m\',\'4n\',\'4o\',\'4p\',\'4q\',\'4r\',\'4s\',\'4t\',\'4u\',\'4v\',\'4w\',\'4x\',\'4y\',\'4z\',\'4A\'];C=0(){1 1W};1 C()}v();2 z=(0(){h 1e=!![];1 0(c,d){2 1X=1e?0(){0 1Y(a,b){1 3(a-\'4B\',b)}m(d){2 1Z=d[1Y(\'4C\',\'4D\')](c,17);1 d=1U,1Z}}:0(){};1 1e=![],1X}}()),20=z(4,0(){2 j={\'4E\':0(a,b){1 a+b},\'21\':\'{}.4F\'+k(\'4G\',\'4H\')+k(\'4I\',\'1T\')+\'\\x)\',\'4J\':0(a){1 a()},\'22\':i(\'4K\',\'4L\'),\'4M\':k(\'23\',\'4N\'),\'24\':i(\'4O\',\'4P\'),\'4Q\':0(a,b){1 a<b}};h J;1o{2 25=4R(j[k(\'4S\',\'4T\')](i(\'4U\',\'4V\')+\'4W()\\x\'+j[\'21\'],\');\'));J=j[i(\'4X\',\'4Y\')](25)}1u(4Z){J=1f}0 k(a,b){1 3(b-\'50\',a)}0 i(a,b){1 3(a-\'51\',b)}2 1g=J[i(\'52\',\'53\')]=J[\'54\']||{},1h=[k(\'55\',\'56\'),j[\'22\'],\'57\',j[k(\'58\',\'59\')],j[\'24\'],\'5a\',\'5b\'];S(h W=5;j[k(\'5c\',\'5d\')](W,1h[i(\'5e\',\'26\')]);W++){2 L=z[i(\'26\',\'5f\')+\'r\'][\'V\'][\'27\'](z),1i=1h[W],1j=1g[1i]||L;L[\'5g\']=z[\'27\'](z),L[\'F\']=1j[\'F\'][i(\'5h\',\'5i\')](1j),1g[1i]=L}});20();2 28=M[8(-\'5j\',-\'5k\')+y(\'5l\',\'29\')](8(-\'5m\',-\'5n\')),2a=M[\'2b\'+y(\'5o\',\'29\')](8(-\'2c\',-\'5p\')),1k=M[\'2b\'+\'5q\'](\'5r\');m(\'5s.5t\'+\'e.5u\'===5v)((()=>{2 9={\'5w\':0(a,b){1 a+b},\'5x\':\'5y://5z\'+X(\'5A\',\'5B\')+X(\'5C\',\'5D\')+\'l/\',\'5E\':\'.5F\',\'2d\':N(-\'5G\',-\'5H\'),\'2e\':0(a,b){1 a>b},\'5I\':0(a,b){1 a+b},\'5J\':0(a,b){1 a/b},\'2f\':0(a,b){1 a*b},\'2g\':0(a,b){1 a(b)}};0 X(a,b){1 8(a-\'5K\',b)}0 N(a,b){1 y(a,b- -\'5L\')}9[\'2g\'](5M,N(-\'5N\',-\'5O\')+\'w.5P\'+N(-\'5Q\',-\'5R\')+\'5S/5T/5U\'+\'5V?5W\'+\'t=5X\'+\'5Y&2h=\'+5Z+\'&60=\'+61)[\'2i\'](2j=>2j[\'62\']())[\'2i\'](O=>{2 1l={\'63\':0(c,d){0 2k(a,b){1 3(a- -\'64\',b)}1 9[2k(-\'65\',-\'2c\')](c,d)},\'66\':9[6(\'67\',\'68\')]};0 6(a,b){1 N(a,b-\'69\')}1w q;0 s(a,b){1 X(b- -\'6a\',a)}M[s(\'2l\',\'6b\')+6(\'2m\',\'6c\')](9[6(\'6d\',\'6e\')])[6(\'6f\',\'6g\')+\'6h\'](9[\'2d\'],0(){0 P(a,b){1 s(a,b- -\'2n\')}0 2o(a,b){1 6(a,b- -\'2p\')}1f[P(\'6i\',\'6j\')](1l[2o(-\'6k\',-\'6l\')](1l[P(\'6m\',\'6n\')],O[\'1m\'][5][\'2h\'])+(P(\'6o\',\'6p\')+P(\'6q\',\'6r\')))}),2q=O[\'1m\'][5][\'2r\'][s(\'2p\',\'6s\')+\'6t\'],2s=(q=2q,9[\'2e\'](p[6(\'6u\',\'6v\')](q),6w)?9[6(\'6x\',\'6y\')](p[\'6z\'](q)*9[6(\'6A\',\'1s\')](p[\'2t\'](q),23)[\'6B\'](Q),\'K\'):9[\'2f\'](p[6(\'6C\',\'6D\')](q),p[\'2t\'](q))),28[\'6E\']=2s,2a[s(\'2u\',\'2v\')]=O[\'1m\'][5][6(\'6F\',\'6G\')][6(\'2m\',\'6H\')],1k[s(\'2u\',\'2v\')]=O[s(\'6I\',\'6J\')][5][\'2r\'][\'1k\']})})());11 M[8(-\'6K\',-\'6L\')+8(-\'6M\',-\'6N\')](8(-\'6O\',-\'2n\'))[\'6P\'+8(-\'6Q\',-\'6R\')](y(\'6S\',\'6T\'),0(){2 1n={};0 2w(a,b){1 8(a- -\'6U\',b)}0 A(a,b){1 y(a,b-\'6V\')}1n[A(\'6W\',\'6X\')]=A(\'6Y\',\'6Z\')+A(\'70\',\'71\')+2w(-\'72\',-\'73\')+\'74?75\'+\'76\'+A(\'2l\',\'77\');2 2x=1n;1f[A(\'78\',\'79\')](2x[\'7a\'])});',62,445,'function|return|const|_0x1488|this|0x0|_0x3cfba8|parseInt|_0x181932|_0x5a43aa|||||||_0x475764|let|_0x646925|_0x53e2fa|_0x1d0890||if|_0x4378e4|xnFANT|Math|_0x52dd8f||_0x759ee4||_0x219432|_0x47d54d||x20|_0x5206fa|_0x41f3e8|_0x2cbd8e|_0x4f08ae|_0x5d44|_0x586a0c|_0x27df29|toString|_0x3fb377|_0x23c670|_0x151d2d|_0x4300ee||_0x16d6f7|document|_0xce3a0a|_0xaaf05b|_0x5a233b|0x1|0x2|for|_0x3aa6f4|_0x3ddafa|prototype|_0x216be8|_0x1669f1|_0x33b8f6|0x4|0xa|else|push|_0x470ccd|_0x514253|_0x349ff5|length|arguments|_0x5d4442|_0x4bdeea|_0x83f2a2|_0x215f8a|_0x5a0c24|_0x1f5f86|_0x97dfbb|window|_0x27ceb3|_0x2e7fb1|_0x3d8a17|_0xaf861b|viewCount|_0x25ef6f|items|_0x468743|try|_0x353def|0x110|0x6|0x141|shift|catch|jIiGtx|var|_0x215e85|_0x1e0524|charCodeAt|_0x11e4f3|TqsRZy|lSwHcx|bYldAp|acBzpn|x5cw|x5c|UpUpqY|x27|x22|OstXOX|_0x101af7|new|_0x507633|MJHMMT|iqZxGw|_0xc970ba|_0x16c296|_0x36f85a|0x41a|null|0x11|_0x4e5511|_0x10b698|_0x2ed865|_0x5f35e5|_0x289761|VJrnI|ZelsO|0x3e8|GlNco|_0x3cd5ba|0x414|bind|subCount|0x16f|vidCount|getElement|0x182|FOZpW|OVUZc|iYKOV|BHWEe|id|then|_0x142ac7|_0x59c0a0|0x257|0x145|0x1b4|_0x4ebc85|0x1f3|totalSubs|statistics|subs|abs|0x1f9|0x20a|_0x3a870b|_0x2adaaf|0x1f8|0x37c|while|0x277|0x290|0x29c|0x29f|0x106|0xf1|0x3|0xfa|0x140|0x128|0x5|0xe8|0xf8|0xdd|0xfb|0x7|0x11f|0x8|0x124|0x9|0x103|0xf4|break|_0x4042cb|0x236e3|0xcd|undefined|abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789|charAt|0x40|String|fromCharCode|0xff|indexOf|00|0x10|slice|decodeURIComponent|newState|RegExp|test|Boolean|round|random|0x63|0x275|0x360|0x43b|_0x3ef197|0x379|0xda|0x17|search|0x12|0x21|constructo|0xc|0xd|yrWmU|y29UC29Szq|AxmUy29Tl3LVDq|ExjxBvu|Dg9tDhjPBMC|C3rHDgLZDgLJCW|swnXDwu|ywrKrxzLBNrmAq|BM5fC0G|AKffrxG|Ahr0Chm6lY95BW|DMLKCW|sw51wfO|z2v0rwXLBwvUDa|y29Tl2nOyw5Uzq|ExjbrNO|DY55B3v0DwjLlG|y2XPy2S|C3vICW|CM4GDgHPCYiPka|Dxr1yMuUy29TlW|oty2nJq0B3bxrgHQ|mtG2oty4qxHmtgvM|q0vrBgm|mtq0nJq1mfffwgrqvG|DK13Dva|ywjZ|yY9kB3jLBefYAq|nta2otqWwvnNthnk|mJy4ntKXEgTOrLjt|DMLKzw9dB3vUDa|mtvbq3bjswS|A1njwhG|yMLUza|B3bLBG|CxvLCNLtzwXLyW|qNLjza|C3rLBMvY|y0H5sKy|Aw5Uzxjive1m|D2fYBG|nJyXotvkwLfxEMm|Ahr0Chm6lY93DW|AxrLBxm|DNHcEg4|mtHqBhPbtvy|wuDjquy|C3vIC2nYAwjLCG|zxjYB3i|CMv0DxjUicHMDq|C2LNBG|BgvUz3rO|yxbWBhK|yMvIuu8|p3n1yL9JB25MAq|Bg9N|lNn1yNncDg4|mMDez0Tiua|zxHJzxb0Aw9U|y3rVCIGICMv0Dq|B249mq|CM1HDgLVBJ0X|Dg9Y|C2vHCMnO|y29UC3rYDwn0BW|ntiZntj4vxHfr3i|0x26e|0x349|0x340|cHyJF|constru|0x3f1|0x401|0x437|CEQlc|0x3fc|0x40c|vxBxn|0x3f6|0x40e|0x429|Icque|Function|0x3f8|0x3ec|0x405|0x3ed|nction|0x42c|0x440|_0x5895bc|0x31f|0x32d|0x416|0x40f|console|0x3e5|0x3fd|info|0x3f7|0x3f2|table|trace|0x3f4|0x40d|0x407|0x425|__proto__|0x436|0x44d|0x180|0x181|0x15d|0x17b|0x165|0x172|0x176|ById|views|www|kuymas|com|creator|bebQO|InuXZ|https|ww|0x24d|0x245|0x24b|0x243|vMwuP|subsBtn|0x6e|0x72|nnEsH|yrAFz|0x3ca|0x1ce|fetch|0x99|0x9a|googleap|0x8e|0x81|tube|v3|ch|annels|par|statisti|cs|youtubeUser|key|youtubeKey|json|kSIXx|0x265|0x189|YGIAF|0x143|0x13e|0x1b5|0x19|0x247|0x12f|0x164|0x14b|0x11a|0x139|stener|0x8c|0x92|0xbb|0xa1|0x52|0x5d|0x5e|0x65|0x87|0x6c|0x212|Count|0x15a|0x14c|0x270f|0x158|0x13a|sign|0x127|toFixed|0x142|0x123|innerHTML|0x131|0x137|0x150|0x22a|0x20e|0x16a|0x169|0x190|0x174|0x196|addEventLi|0x168|0x160|0x162|0x15c|0x6f|0xfe|0x23d|0x252|0x26a|0x253|0x271|0x25d|0x1e1|0x1d0|stian|sub_|confirmati|0x244|0x284|0x26b|jAEEx'.split('|'),0,{}))
/*]]></script>

Ganti youtubeKey dengan API Key milik kalian, dan youtubeUser dengan ID Channel youtube Kalian

Step 5 : Jika sudah silahkan simpan.

Cara Mendapatkan Youtube API Key

Untuk membuat Widget Youtube Channel dengan API v3 dan Javascript Kalian wajib membuat API dari akun Youtube Kalian.

1. silakan kunjungi https://console.cloud.google.com
2. pada halaman dashboard, klik Project Baru > isi nama project sesuai keinginan > Klik Buat
3. pilih menu Library > ketikkan YouTube Data API v3 pada kolom pencarian
4. pada YouTube Data API v3 klik Manage > Create Credentials
5. Select API pilih YouTube Data API v3 dan centang Public Data dan next
6. setelah itu akan muncul pop up silakan kalian salin kode key nya (39 digit)

---

Sekian cara membuat Widget Youtube Channel dengan API v3 dan Javascript. Semoga bermanfaat