Increase subscribers to your blog and YouTube channel by adding pop-up or floating subscriber buttons. With the help of buttons you can increase traffic on your channel.
 |
YouTube has become a popular primary hub for many bloggers, and it is a platform that bloggers should not ignore. Since most of the people in the current generation frequent YouTube, it is a great medium to increase followers and a great way to drive traffic to your main website.
Also it can prove to be very helpful in increasing the subscribers of your YouTube channel because it can be difficult to increase subscribers even on YouTube if you do not know where to start, but luckily if you already have a blog or website, YouTube offers some tools to allow your readers to easily subscribe to your channel.
There is an easy way to increase the number of views on YouTube videos and blogs which can help you in increasing the number of subscribers on your YouTube channel. If you are a blogger who is also a YouTuber, then installing Pop Up on YouTube is very useful. Can be helpful because it will immediately catch the eye of visitors.
As we know, YouTube channel can be monetized by Adsense only when your number of subscribers has reached 1,000 and 4,000 hours of public watch volume in the last 12 months. Which requires hard work to achieve, adding YouTube Pop up subscribe button on blog posts can help a little to blog traffic along with the channel.
This pop up alert uses session storage cookies, so the pop will not re-appear whenever it is closed - unless the browser is closed and re-opened, which will not interfere, as per the demo. For this you can see by going to the button given above.
Pop Up Subscribe Animation Button Script for Blogger
This tutorial will be divided into three steps, the first step is to add the JQuery Script and the second step is to add the Subscribe Button Style code, the last step is to add the button script. This tutorial is made for Blogger users, other service users can adjust this tutorial.
Add jQuery Script on Blogger Theme
It should be noted that this could be a bit complicated, so watch carefully because if there is even a slight error then the pop up subscribe animation button will not work.
First of all you have to go to Edit HTML Template menu and add the below jQuery script code in the <head> code group on your blog. In short, please click on Theme and click on the HTML shown below; Don't forget to backup your template first to avoid editing errors.
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'/>
Sometimes </head>the code is not found when searching in some templates, for this you can see the code like this:
</head>or
<!--<head/>--></head>
Second Step - Adding CSS code
This CSS code works to display the layout.
/* Pop Up subscribe animation button by thewebtrick.com */
@keyframes show_Yt{0%{transform:translateX(100%)}40%{transform:translateX(-10%)}80%{transform:translateX(0%)}100%{opacity:1;pointer-events:auto;transform:translateX(-10px)}}
@keyframes hide_Yt{0%{transform:translateX(-10px)}40%{transform:translateX(0%)}80%{transform:translateX(-10%)}100%{transform:translateX(calc(100% + 100px))}}
.Ytwrap{position:fixed;z-index:9999999;right:55px;bottom:20px;animation:show_Yt 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}
.Ytwrap.hide{animation:hide_Yt 0.8s ease forwards}
.Ytcontent{display:flex;align-items:center}
.Yticon .logo{max-width:60px;border-radius:100%;transition:all 0.3s ease}
.Ytcontent .Ytdetails{margin-left:15px;text-decoration:none;outline:none}
.Ytdetails span{font-family:Noto Sans;position:relative;font-size:18px;font-weight:600;color:#000000;top:10px}
.Ytdetails p{color:#878787;font-size:12px}
.YtcloseIcon 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}
.Ytwrap:hover .Yticon img{-webkit-transform:rotate(360deg);transform:rotate(360deg)}
.YtcloseIcon:hover svg{fill: #444;}
@media screen and (max-width: 480px){.Ytwrap{right:25px}}
/* CSS Code for Darkmode or Removed this section */
.dark-mode .Ytwrap,.dark-mode .YtcloseIcon svg{background:#2d2d30}
.dark-mode .Ytwrap{border-color:#444}
.dark-mode .Ytdetails span,.dark-mode .Ytdetails p{color:#e2e2e2}
On Blogger, CSS code
<b:skin>...</b:skin>is shown in tags. If you have difficulty finding the CSS code above, you
</head>can search for the code and
</head>place the CSS code right above the code with a note that you have to <style>...</style>use it with the code. For example something like this:
<style>
<!--[ Fill in the CSS Code above ]-->
</style>
</head>
Add Javascript Code for Subscribe Button View
This script works to show YouTube subscribe button on blog, after adding the script on blog automatically floating subscribe button will become visible.
<div class='Ytwrap'>
<div class='Ytcontent'>
<div class='Yticon'><img alt='code' class='logo' src='XXXXXXX YOUR LOGO PNG'/></div>
<a class='Ytdetails' href='https://www.youtube.com/channel/XXXXXXXXXXXXXXXX?sub_confirmation=1' target='_blank'>
<span>Your Channel</span>
<p>Subscribe Our YouTube Channel</p>
</a>
</div>
<div class='YtcloseIcon'><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'>
var hour = 5000;
var welcomeSession = sessionStorage.getItem('welcomeSession');if(welcomeSession === null){$(window).bind('load',function(){setTimeout(function(){$('.Ytwrap,.flashlight').css("display","block");welcomeSession = sessionStorage.setItem('welcomeSession',true)}
,time);$('.YtcloseIcon').click(function(){$('.Ytwrap').addClass('hide')}
)})}</script>
The easiest way to add JavaScript code is to
</body>place it before the tag. Usually this tag is at the bottom of the template. Copy the JavaScript below and
</body>paste it just above the tag.
In this part marked as var time = 5000; This means the pop up will appear within 5 seconds, please adjust it as per your needs.
Replace the code part marked above with the URL of your YouTube Channel.
Up to this point, your YouTube Subscribe Button is completely created, if you follow all the steps correctly, we can guarantee that the floating subscribe button is working properly. Please test it by clicking the floating subscribe button on your blog. If there are any questions which you are finding difficult to understand, please write questions through the comment column provided.