Cara Membuat Kotak Subscribe Realtime Di Blog

 

Hiirotaku - Membuat kotak subscribe biasa memasang lah sudah terlalu mainstream, nah pada artikel kali ini kita akan memasang kotak subscribe yang akan secara otomatis menghitung jumlah subscribe dan jumlah video secara realtime, menarik bukan?

Langkah - Langkah Memasang Kotak Subscribe Youtube Realtime

1. Seperti biasa ke halaman blogger > tema > edit html > lalu cari kode ]]></b:skin> dan salin kode css berikut tepat di atasnya

/* widget kotak subscribe youtube */
.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)}

2. Lalu letakkan kode html berikut di bawah kode <data:post.body/>, kode disamping ini biasanya memiliki 1 sampai 3 kode, kalian coba mencobanya satu per satu ( pilihan ini jika kalian ingin kotak subscribenya dibawah artikel. Namun jika tidak, kalian bisa pasang di bagian widget yang kalian suka )

<div class='wc-ytbox-wrap'>
<img src='https://1.bp.blogspot.com/-CQ59PTNOqDk/YQo_eSbow1I/AAAAAAAAC6I/dLoXG2UqOT8K7FERfXQvK3g2ICLqW83QACNcBGAsYHQ/s320/wendycode-logo.png' alt='hiirotaku'/>
<div class='wc-ytsub-nma'>Hiirotaku</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>

Catatan : bagian yang saya tandai bisa di ganti dengan gambar dan nama kalian masing - masing

3. Terakhir letakkan kode di bawah ini di atas kode </body>

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

Catatan : bagian yang saya tandai bisa di ganti dengan id youtube dan youtube key milik kalian, namun jika belum memiliki bisa ikuti langkah - langkah berikut

Membuat Youtube API Key

1. Kunjungi https://console.cloud.google.com/apis/dashboard

2. Pada dashboard klik Project Baru > isi nama project ( terserah ) > buat

3. Pilih menu Library > ketik youtube data api v3 pada kolom pencarian

4. Dibagian youtube data api v3 > klik manage > create credentials

5. Select api pilih youtube data api v3 dan centang public > next

6. Muncul kodenya dan kalian salin kode tersebut pada kode di atas yang di tandai tadi

Ok itu saja, jika masih bingung bagaimana cara membuat api key youtube, kalian bisa mencari video tutorialnya di youtube karena banyak sekali. Sekian Sampai Jumpa..