How to Add Cookie Based Subscribe to Unlock Content in Blogger

Hi to all, here I am going to tell you all about how to add cookie based subscribe to unlock content in blogger website easily in just ew minutes by using CSS and JavaScript.

By adding this cookie based subscribe button, you can increase your subscribers in YouTube or any other social media platform by adding your social media platform URL.

And also by adding this subscribe button, users might feel discomfort, for that I have used script based on cookie, once you click on subscribe then it won't appear again and again when you refresh the page and when you remove cookie then you will see the subscribe to unlock banner again.

By adding this CSS and JavaScript in your blogger website, will not effect your post speed or ranking or SEO, so you can use it any blogger website template.

Read the below provided steps carefully and completely, if you leave any one strep then you may face errors while saving the pasted code in your blogger theme editor, so read the article till end.

Steps to Add Cookie Based Subscribe to Unlock

Step-1: First of all you need to login to your blogger website dashboard by using your login credentials.

Step-2: Go to blogger dashboard -> Click on Theme section -> Click on Arrow Icon -> Click on Backup -> Click on Download -> Download your website Theme.

Step-3: Go to blogger dashboard -> Click on Theme section -> Click on Arrow Icon -> Click on Edit HTML -> Theme Editor.

Step-4: Copy the below provided CSS and JavaScript code.

<b:if cond='data:view.isPost'> <style> /* sub to unlock by tialwizards */ .STU_OVERLAY{display: grid;position: fixed;height: 100%;width: 100%;top: 0px;left: 0px;background:rgba(0,0,0,.5);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(4px);place-items: center;z-index: 999999;} .tw123_STU{ max-width: 400px; height: auto; background: #fefefe; margin: 0 auto; border-radius: 5px; box-sizing: border-box; padding: 28px 14px; user-select: none;border:1px solid #666; display: flex; } .at_is_text { display: flex; color: #666; padding: 0 10px; justify-content: space-between; font-size: 18px; } .checking_registration_{margin-top:10px;display:none;color:#d6b810;text-align:center} .btn_at_ { display: flex; position: relative; justify-content: center; margin: 0 auto; border: none; padding: 6px 25px; background: #db1a1a; color: #fff;width:200px; border-radius: 5px; font-weight: 700; font-size: 16px; cursor: pointer; outline: 0; } span.ic-youtube{left: 13px; position: relative; } span.ic-youtube:before{content:'';top: 2px;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10,15L15.19,12L10,9V15M21.56,7.17C21.69,7.64 21.78,8.27 21.84,9.07C21.91,9.87 21.94,10.56 21.94,11.16L22,12C22,14.19 21.84,15.8 21.56,16.83C21.31,17.73 20.73,18.31 19.83,18.56C19.36,18.69 18.5,18.78 17.18,18.84C15.88,18.91 14.69,18.94 13.59,18.94L12,19C7.81,19 5.2,18.84 4.17,18.56C3.27,18.31 2.69,17.73 2.44,16.83C2.31,16.36 2.22,15.73 2.16,14.93C2.09,14.13 2.06,13.44 2.06,12.84L2,12C2,9.81 2.16,8.2 2.44,7.17C2.69,6.27 3.27,5.69 4.17,5.44C4.64,5.31 5.5,5.22 6.82,5.16C8.12,5.09 9.31,5.06 10.41,5.06L12,5C16.19,5 18.8,5.16 19.83,5.44C20.73,5.69 21.31,6.27 21.56,7.17Z' fill='%23fff'/%3E%3C/svg%3E") center / 20px no-repeat; width:20px; height:20px;position:absolute;left: -26px;} </style> <script> //<![CDATA[ /* sub to unlock by tialwizards */ var _0xc5e890 = _0x2075; (function (_0x273d3b, _0x5db76b) { var _0x3b6b56 = _0x2075, _0x8f0ef5 = _0x273d3b(); while (!![]) { try { var _0x4beeba = -parseInt(_0x3b6b56(0x1e9)) / 0x1 + -parseInt(_0x3b6b56(0x1f2)) / 0x2 + parseInt(_0x3b6b56(0x20e)) / 0x3 * (-parseInt(_0x3b6b56(0x210)) / 0x4) + -parseInt(_0x3b6b56(0x20c)) / 0x5 * (-parseInt(_0x3b6b56(0x1fb)) / 0x6) + parseInt(_0x3b6b56(0x1f6)) / 0x7 * (parseInt(_0x3b6b56(0x1ef)) / 0x8) + parseInt(_0x3b6b56(0x20d)) / 0x9 * (parseInt(_0x3b6b56(0x20f)) / 0xa) + -parseInt(_0x3b6b56(0x209)) / 0xb; if (_0x4beeba === _0x5db76b) break; else _0x8f0ef5['push'](_0x8f0ef5['shift']()); } catch (_0x581bc1) { _0x8f0ef5['push'](_0x8f0ef5['shift']()); } } }(_0x305c, 0xb5a6c)); function _0x2075(_0x4ac8d9, _0x3c3716) { var _0x305cb1 = _0x305c(); return _0x2075 = function (_0x207531, _0x45f3df) { _0x207531 = _0x207531 - 0x1e6; var _0x41c63b = _0x305cb1[_0x207531]; return _0x41c63b; }, _0x2075(_0x4ac8d9, _0x3c3716); } var tw123_AT = { 'atLink': 'https://www.youtube.com/c/your channel name', 'atVerification': 0x5, 'atDes': 0x5, 'texto': _0xc5e890(0x20a), 'template': _0xc5e890(0x1f1), 'contentblocked': [], 'elemHide': [], 'isBlogger': !0x0, 'at': !0x1, 'getTemplate': function () { var _0x50eb47 = _0xc5e890; return this['template'][_0x50eb47(0x1f3)](_0x50eb47(0x204), this[_0x50eb47(0x204)]); }, 'registrarCookie': function (_0x568867, _0x2dfa87, _0x2c9f8d) { var _0x56200f = _0xc5e890, _0x1e88cd = _0x2c9f8d, _0x36f051 = new Date(); _0x36f051[_0x56200f(0x1fc)](_0x36f051['getTime']() + 0xea60 * _0x1e88cd), _0x36f051 = _0x36f051['toUTCString'](), document['cookie'] = _0x568867 + _0x56200f(0x1ed) + _0x2dfa87 + _0x56200f(0x1f5) + _0x36f051 + _0x56200f(0x202); }, 'catchCookie': function (_0x3ea486) { var _0x12c389 = _0xc5e890, _0x512cf5 = ('; ' + document[_0x12c389(0x200)])['split']('; ' + _0x3ea486 + '='); if (0x2 == _0x512cf5[_0x12c389(0x1fa)]) return _0x512cf5[_0x12c389(0x201)]()[_0x12c389(0x1ea)](';')['shift'](); }, 'Start': function () { var _0x1ea416 = _0xc5e890, _0x54de24 = this[_0x1ea416(0x1ee)](_0x1ea416(0x1ff)), _0x425a15 = this['catchCookie'](_0x1ea416(0x211)); this[_0x1ea416(0x1f0)](_0x54de24, _0x425a15); }, 'getApro': function () { var _0x19e1a5 = _0xc5e890, _0x21a380 = this[_0x19e1a5(0x1ee)](_0x19e1a5(0x1eb)), _0xcd4a9e = this['catchCookie']('twi_channel'); return null == _0x21a380 || _0xcd4a9e != this['atLink']; }, 'pattern'(_0x178e96, _0x1c2e45) { var _0x21be5a = _0xc5e890; null != _0x178e96 && _0x1c2e45 == this['atLink'] || jQuery(_0x21be5a(0x1e7))[_0x21be5a(0x207)](this[_0x21be5a(0x1e6)]()); }, 'subscribe': function () { var _0x1531ca = _0xc5e890; window[_0x1531ca(0x1fe)](this[_0x1531ca(0x205)]), jQuery('.verifying_registration')[_0x1531ca(0x1f8)](_0x1531ca(0x208), _0x1531ca(0x20b)), setTimeout(() => { var _0x1e72c1 = _0x1531ca; jQuery(_0x1e72c1(0x203))['css'](_0x1e72c1(0x208), 'none'), this['registrarCookie']('_tw123', 'active', this[_0x1e72c1(0x1ec)]), this['registrarCookie']('twi_channel', this[_0x1e72c1(0x205)], this[_0x1e72c1(0x1ec)]); }, 0x3e8 * this[_0x1531ca(0x1f4)]); } }; function _0x305c() { var _0x18b4e3 = ['6061356dRoWxO', 'setTime', 'subscribe', 'open', '_tw123', 'cookie', 'pop', '; path=/', '.STU_OVERLAY', 'texto', 'atLink', 'click', 'append', 'display', '3283203myvwcq', 'Website is locked Press Subscribe to unlock!', 'block', '5xEJwZo', '4807179rWvSoW', '184890nhVIxt', '10FzxnqL', '16Juoytl', 'twi_channel', 'getTemplate', 'body', 'Start', '282618rwjCXk', 'split', 'tw123', 'atDes', ' = ', 'catchCookie', '16ocxCop', 'pattern', '<div class=\"STU_OVERLAY\"><div class=\"tw123_STU\"><span class=\"at_is_text\">texto</span><button class=\"btn_at_\" onclick=\"tw123_AT.subscribe()\"><span class=\"ic-youtube\">Subscribe</span></button><span class=\"checking_registration_\">checking_registration...</span></div></div>', '1946976uCDxNo', 'replace', 'atVerification', '; expires=', '3502751ZtJpRa', 'ready', 'css', '.btn_at', 'length']; _0x305c = function () { return _0x18b4e3; }; return _0x305c(); } jQuery(document)[_0xc5e890(0x1f7)](function () { var _0x15d14d = _0xc5e890; tw123_AT[_0x15d14d(0x1e8)](), jQuery(_0x15d14d(0x1f9))['on'](_0x15d14d(0x206), function () { var _0x4e4323 = _0x15d14d; [_0x4e4323(0x1fd)](); }); }); //]]> </script> </b:if>
Copy

Step-5:  Paste the copied CSS and JavaScript code above closing body tag or </body> tag.

Step-6: After adding the code you need to replace the URL of your YouTube channel with the present YouTube channel link from the JavaScript.

Step-7: Now after replacing the URL click on save button.

Step-8: You have successfully added cookie based subscribe to unlock content in your blogger website easily in just few minutes.

Note

If you will get any error or issue while saving the code then you need to restore your backup code again and follow the same process as provided in the above steps carefully.

If you want to change the color and style of the buttons, you need to modify CSS code for it, for changing changing colors you need HTML color codes, you can get color codes from google color picker.

This code will not work in blog posts, so you need to add this in your blogger theme section and above </body> tag only.

Be careful while adding the code, because if you add code in different place then it will not work properly, so read the steps carefully and add the code and don't forget to replace your YouTube URL from the JavaScript .

Conclusion

I hope that you have understood about how to add cookie based subscribe to unlock content in blogger website easily in just few minutes by using CSS and JavaScript.