Pop Up Subscribe Notification
Hello everyone! Greetings from Tech Abdullah again. We're going to be teaching you how to create a pop-up subscribe/join notification for your blogger channel today. Let's proceed by giving a brief overview of it.
Step 2 : Go to Themes and then go to Edit HTML
Step 3: Make sure that your Theme has jQuery installed it, If your theme doesn't have paste the
following code above the </head> or <!--</head>--> code orals the script does not work in your site.
<script async='async' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'/>
Step 4: Now search for ]]></b:skin> and paste the following CSS just to above it
If you are using Dark Mode feature in your website Change the highlightd code according to your theme
/* pop up subscribe/join notification*/
@keyframes show_wendyYT{0%{transform:translateX(100%)}40%{transform:translateX(-10%)}80%{transform:translateX(0%)}100%{opacity:1;pointer-events:auto;transform:translateX(-10px)}}
@keyframes hide_wendyYT{0%{transform:translateX(-10px)}40%{transform:translateX(0%)}80%{transform:translateX(-10%)}100%{transform:translateX(calc(100% + 100px))}}
.wendyYTwrap{position:fixed;z-index:9999999;right:55px;bottom:20px;animation:show_wendyYT 0.8s ease forwards;box-shadow:0 5px 12px rgba(0,0,0,0.2);border-radius:10px;background:#fff;padding:10px;border-left:5px solid #f09800;width:300px;align-items:center;justify-content:space-between;display:none}
.wendyYTwrap.hide{animation:hide_wendyYT 0.8s ease forwards}
.wendyYTcontent{display:flex;align-items:center}
.wendyYTicon .wendylogo{max-width:60px;border-radius:100%;transition:all 0.3s ease}
.wendyYTcontent .wendyYTdetails{margin-left:15px;text-decoration:none;outline:none}
.wendyYTdetails span{font-family:Noto Sans;position:relative;font-size:18px;font-weight:600;color:#000000;top:10px}
.wendyYTdetails p{color:#878787;font-size:12px}
.wendyYtcloseIcon svg{position:absolute;fill:#878787;font-size:20px;cursor:pointer;height:28px;width:28px;text-align:center;right:13px;top:8px;border-radius:50%;background:#f2f2f2;transition:all 0.3s ease}
.wendyYTwrap:hover .wendyYTicon img{-webkit-transform:rotate(360deg);transform:rotate(360deg)}
.wendyYtcloseIcon:hover svg{fill: #444;}
@media screen and (max-width: 480px){.wendyYTwrap{right:25px}}
/* css untuk darkmode silakan sesuaikan classnya jika berbeda atau bisa di hapus bagian ini */
.dark-mode .wendyYTwrap,.dark-mode .wendyYtcloseIcon svg{background:#2d2d30}
.dark-mode .wendyYTwrap{border-color:#444}
.dark-mode .wendyYTdetails span,.dark-mode .wendyYTdetails p{color:#e2e2e2}
Step 5: Now search for </body> or <!--</body>--> and paste the following HTML just to above it
Change the Highlighted Text below in HTML and customize it according to your needs
<div class='wendyYTwrap'>
<div class='wendyYTcontent'>
<div class='wendyYTicon'><img alt='wendycode' class='wendylogo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjonDOknAqMTUXv5qiSUBekKTohpU56Uv0Hc5Xeozhnunf8ZDiIBv4woxIBTetdOYqtJZSjl6DMJlSwsTdpfkKON_MrKygi6NPiCUphCtZQvZ5ZgN1XOfx7LpB_kOCXBgr7PVeWxmX7L2cSppRthxtaBlVNXIonxUqA422DRsW5fbEZBLw/s220/Abdullah.png'/></div>
<a class='wendyYTdetails' href='https://t.me/techabdullah' target='_blank'>
<span>Ͳҽçհ ȺҍժմӀӀąհ</span>
<p>Join Our Telegram Channel</p>
</a>
</div>
<div class='wendyYtcloseIcon'><svg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'><path 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'/></svg></div>
</div>
<script type='text/javascript'>
//pop up subscribe youtube channel by wendy code
var time = 5000;
var welcomeSession = sessionStorage.getItem('welcomeSession');if(welcomeSession === null){$(window).bind('load',function(){setTimeout(function(){$('.wendyYTwrap').css("display","block");welcomeSession = sessionStorage.setItem('welcomeSession',true)}
,time);$('.wendyYtcloseIcon').click(function(){$('.wendyYTwrap').addClass('hide')}
)})}</script>
If You Have Followed all the steps above Then click Save Theme Now, That's It your are done and don't forget to watch a demo of it
