Follow us to get updates regarding Latest posts Follow Now!

How To Make Pop Up Subscribe/ Join Notification For Your Channel

How To Make A Pop Up Subscribe/ Join Notification For Your Channel in blogger site, pop up notification for blogger , pop up subscribe ,

In this article I have made a tutorial on How To Make Pop Up Subscribe/ Join Notification For Your Channel

how-to-make-pop-up-subscribejoin-notification-for-your-channel-


Hello Guys ! Welcome back to Techy DarshaN, Today our tutorial is How To Make  Pop Up Subscribe/ Join Notification For Your Channel in Blogger. Let's continue with a small introduction about it.

If you have a YouTube channel or Telegram channel and want to increase your views the one way is to increase your subscribe, To gain subscribers and members you need to advertise about your channel. If you have a Website and also running a YouTube channel or Telegram channel then adding a Pop up Subscribe/Join notification can be very useful as it tells the visitors about you Channel. 

As we all know YouTube allow the channels to get monetized by Google Adsense only if the channel has reached more than 1000 subscribers and has 4000 watch hours which will be counted only from past 12 months but to achieve all these this pop up subscribe notification will help a little to tell your site visitors about your channel. 

Pros

  1. Notifies your website visitors about your channel
  2. Helps you to advertise about your channel
  3. New Attractive Notification Look to grab users attention
  4. Helps you to reach more subscribers on your channel and achieve your goal

What Is PopUp Subscribe/ Join Notification ?

This Pop up notification which appears at the Bottom right corner of your website which tells the visitors about your Channel and gives a direct link to them. By clicking on that, they directly view your channel and subscribe. If you are daily visiting my website you may saw this Pop notification at the Bottom right corner.

For this Pop up notification I have used session storage or Temporary cookies so that when the user see the notification and and close it the notification won't appear again and again until the user closes the browser and reopen it so it will not be annoying for visitors. 
For those who wanna add this Pop up notification to their blog follow the given below steps. For Demo you may have already while visiting my site.

How To Make A Pop Up Subscribe/Join Notification For Your Channel

Step 1:  Go to your Blogger Dashboard
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 does'nt have paste the following code above the </head>  or <!--</head>--></head> code orelse 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>--></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://lh3.googleusercontent.com/-EBmn9ARiFI8/YeBkbapyTCI/AAAAAAAAFo0/F9aVt2kDzKk2C28R42laTk9HzWlZwsL9gCNcBGAsYHQ/h120/Techy%2BDarshaN%2B%25281%2529.png'/></div>
        <a class='wendyYTdetails' href='https://t.me/TechyDarshaN' target='_blank'>
         <span>Techy DarshaN</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 

Conclusion

In this post I have made a step by step guide about How To Make A Pop Up Subscribe/Join Notification For Your Channel, Which very helpful to tell the visitors about your channel and gain subscribers to your channel . I hope you liked the post and do share with your friends.

If you face any problems in code or have any questions please feel free to ask in comments section or join our Telegram Group for Discussion

Source Code: www.wendycode.com

Getting Info...

About the Author

Student | Developer | Blogger

Post a Comment

Techy DarshaN's Rules : Leave your opinion or any doubt about this article And is you have any queries please feel free to ask. Don't try to spam, our team reviews every comment.
Have a Cookie!
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
More Details
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.