Join Our Telegram Channel Join Now!
المشاركات

Pop Up Subscribe/ Join Notification For Channel For Blogger

Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated
Hello! Welcome to Tecky AaryaN. 

You are looking for Pop Up Subscribe/ Join Notification For Channel For Blogger then this post is just for you.

Pop Up Subscribe Notification For Your Channel

You can see the demo here⤵

Step 1:  Go to your Blogger Dashboard

Step 2 : Go to Themes and then go to Edit HTML 

Step 3: Now search for </head> or <!--</head>--></head> and paste the following CDN just to above it

<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 thfollowing CSS just to above it
/* 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>--></body> and paste the following HTML just to above it
<div class='wendyYTwrap'> <div class='wendyYTcontent'> <div class='wendyYTicon'><img alt='teckyaaryanlogo' class='wendylogo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6HrJ4U1_yM6K3pjMYfJY0x266iDbPbz47I-NoS-pSu7BKCXDXva5xKKlRq-x_FSpsp9f1VInQpWTCgIxkRcd1LP0x9JtyTOZbQuMV4rJuldWto2PrA7rNaaL1dN7CAWWOvjZk7LqrTn4sl8Y-2nd189sP_TiFl77BJmqAd7pSZ_LuNgXOCOAr-XlTSEI/s16000-rw/20231231_193644.jpg'/></div> <a class='wendyYTdetails' href='https://youtube.com/@Teckyaaryan?si=x14qgHDJrp3vPkd6' target='_blank'> <span>Tecky AaryaN</span> <p>Click Here to Subscribe 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>

Change the Highlighted Text below in HTML and customize it according to your needs

Step : 6 Now click on save Button. Conclusion

 I hope you have successfully added Pop Up Subscribe Button. If you are facing any problem in any section or you have any question then ask us in the comment Box

Copyright:
Tecky AaryaN

Telegram

إرسال تعليق

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.