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
- Notifies your website visitors about your channel
- Helps you to advertise about your channel
- New Attractive Notification Look to grab users attention
- 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}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/AVvXsEhpKvZrE_Eh5zHBD9AF5nedOak2TMVJYxMsxK6w2xxyXmmADnoBIZntOTEDTaJFWVxd1oufpDX_zOs5gCCLtMlu4h63LyxHv0Lo89YeHtFonUnQweFaqEiImWBXWgHt8rktPc8ijvF4bVk/h120/Techy+DarshaN+%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>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