Thinkahead Think aHead

Ad Code

Cara membuat kolom subscribe youtube channel realtime di blogger/blogspot

Think aHead September 22, 2022

Moshi Moshi semuanya kali ini saya share widget subscribe box channel youtube dengan html dan css dan javascript di blog 

 pada postingan saya sebelumnya saya juga membagikan cara membuat popup subscribe channel youtube di blog anda bisa baca postingan saya sebelumnya jika ingin membuat munculkan model 

Widget kotak berlangganan YouTube, kali ini saya mendesainnya mirip dengan aslinya yang biasa kita temukan ketika memasukkan nama saluran di YouTube, dan juga menambahkan batas dan radius pada gambar profil yang tidak sepenuhnya bulat, untuk memperbesarnya. modern 

Widget ini sangat cocok untuk mereka yang ingin mempromosikan saluran YouTube mereka di blog mereka. Anda dapat meletakkannya di bawah posting atau di bilah sisi atau di mana pun Anda mau. 

Anda bisa melihat demonya dengan tombol di bawah ini, ok siapa yang mau, lihat di bawah caranya.

buka blogger > tema > edit html   salin css di bawah dan tempel di atas kode ]></b:skin>

Copy Code

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

lalu tempel <data:post.body/> kode HTML ini di mana Anda ingin menampilkan widget kotak berlangganan Youtube. Kalau mau ditaruh di bawah postingan bisa paste

. Biasanya kode ini lebih dari 1, tergantung template yang kamu pakai, cari saja setelah entri atau setelah entri, jika tidak demikian. Anda tahu, coba saja satu per satu

Copy Code

<div class='wc-ytbox-wrap'> <img src='https://1.bp.blogspot.com/18231283123.png' alt='thinkahead'/> <div class='wc-ytsub-nma'>Thinkahead</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>

dan terakhir tambahkan kode </body> di bawah kode di atas atau yang serupa

&lt;!--</body>--&gt;&lt;/body&gt;

Copy Code

<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://thinkaheadco.blogspot.com/</div> <script>/*<![CDATA[*/ /* kotak subscribe youtube channel realtime javascript murni by thinkahead */ var youtubeUser = 'GANTI DISINI'; //Id Youtube Channel var youtubeKey = 'GANTI DISINI'; //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>

Cara mendapatkan Youtube API key 

  - masuk ke <span class="code">https://console.cloud.google.com/apis/dashboard</span>

 - halaman dashboard, klik New Project  > isikan nama project sesuai keinginan > klik Create 

 - pilih menu Library > masukkan YouTube Data API v3 pada kolom pencarian 

 - YouTube Data API v3 klik kelola > buat kredensial 

 -pilih API pilih YouTube Data API v3 dan centang  data publik dan selanjutnya 

 Nice sudah beres, maka ini adalah widget live youtube channel subscription box yang dapat saya bagikan kali ini semoga bermanfaat dan terima kasih telah berkunjung.


wendy code
Think a Head
subcriber • vidio
SUBSCRIBE

subscribe youtube channel saya juga ya teman terima kasih

Think aHead

Diposting oleh Think aHead

Hai, perkenalkan nama kami Think aHead, kami membantu anda untuk belajar secara gratis. dan memberikan kalian template dengan mudah di download dan belajar anda menjadi lebih baik.

Posting Komentar

2 Komentar

Ad Code