YouTube has become a popular primary hub for many bloggers, and it is a platform that bloggers should not ignore. Since most of the current generation of people visit YouTube frequently, 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 increasing the subscribers on YouTube too can be difficult if you do not know where to start, but luckily if you already have a blog or website, YouTube provides some tools to allow your readers to easily subscribe to your channel.
There are an easy way to increase the number of views on YouTube videos and blogs that can help you increase the number of subscribers on your YouTube channel, if you are a blogger who is also a YouTuber, then setting up Pop Up on YouTube is very important. Can be helpful because it will come immediately in the eyes of the visitors.
As we know, YouTube channel can be monetized by Adsense only when your subscriber count has reached 1,000 and you have completed 4,000 hours of public watch volume in last 12 months. Which needs a lot of hard work to achieve, adding a YouTube pop up subscribe button on a blog post can give a little help to the channel as well as the blog traffic.
Session storage cookies are used for this pop up alert, so whenever it is closed the pop will not appear again and again – unless the browser is closed and re-opened and it will not interfere, according to the demo You can see it by clicking on the button above.
Also Read: Custom Product Box And Pros & Cons Table In Blogger Post
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 ThemeIt should be noted that this will be a bit complicated, so watch carefully because if there is even the slightest error the pop up subscribe animation button will not work.First you need to go to Edit HTML Template menu and add below jQuery script code in <head> code group on your blog. In short, please click on Theme and click on HTML shown below; Be sure to back up your template first to avoid editing errors.
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'/>
Sometimes the </head>code is not found when you search in some templates, for this you can see the code like this: </head>or<!--<head/>--></head>
Second Step – Adding CSS CodeThis CSS code does the job of displaying the layout.
/* Slide Pop Up Subscribe Animation Button Script for Blogger by itsutkarshk.in */
@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}
The CSS code on Blogger is <b:skin>...</b:skin>displayed in the tag. If you have difficulty finding the above CSS code, </head>you can search for the code and place the CSS code </head>with a note just above the <style>...</style>code that you have to use with the code. For example something like this:
< style >
<!--[ Fill in the CSS Code above ]-->
</ style >
</ head >
Add Javascript Code for Subscribe Button ViewThis script works to show youtube subscribe button on blog, after adding script on blog automatically floating subscribe button will be visible.
<div class='Ytwrap'>
<div class='Ytcontent'>
<div class='Yticon'><img alt='code' class='logo' src=' Your Youtube Logo '/></div>
<a class='Ytdetails' href=' https://www.youtube.com/channel/XXXXXXXXXXXXXXX?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 time = 10000;
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 put it </body>before the tag. This tag is usually at the bottom of the template. Copy and paste the JavaScript below </body>just above the tag.
In this part marked as var time = 10000; That means the pop up will appear within 10 seconds, please adjust it according to your needs.
Replace the above code part with the URL of your YouTube channel By 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 are difficult to understand, then please write the question through the given comment column.
Stay connected With itsutkarshk And Follow Us On Instagram & Facebook Subscribe Our YouTube Channel
1 Comment
You've shared some staggeringly valuable data. This is much of the time a dynamite way for us to widen our insight while staying valuable. Much obliged to you for drawing this article out into the open. youtube subscriber panel