 |
| how to add pop up youtube subscribe button on blogger/blogspot |
Hello to everyone, on this occasion I will share how to make a pop up subscribe to the YouTube channel on the blog.
one way to increase the number of viewers on youtube videos is to increase the number of subscribers, if you are a blogger who is also a youtuber, then installing a pop up youtube subscriber can be very helpful because it will be immediately visible to visitors.
as we know youtube will only pass the channel to be monetized by adsense if the number of subscribers has reached 1,000 subscribers and has reached 4,000 hours of public viewing which is vilid in the last 12 months. so we need to work hard to achieve it all, with the youtube subscribe pop up installed on this blog maybe it can help a little.
for this type of pop up I use sessionStorage or temporary cookies, so when the pop is closed it will not appear continuously until the visitor closes the browser and opens it again so it will not interfere, ok for those of you who want to make it, let's see how below.
How to Make Pop Up Subscribe Youtube Channel on Blog
make sure your template has jQuery installed, if you don't already have one, you can copy the code below and place it above the code </head> or <!--</head>--></head>
<script async='async' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'/>please go to blogger select temaand edit htmlcopy the css below and place it above the code ]]></b:skin>
/* pop up subscribe youtube channel by Blogger store */
@keyframes show_BSYT{0%{transform:translateX(100%)}40%{transform:translateX(-10%)}80%{transform:translateX(0%)}100%{opacity:1;pointer-events:auto;transform:translateX(-10px)}}
@keyframes hide_BSYT{0%{transform:translateX(-10px)}40%{transform:translateX(0%)}80%{transform:translateX(-10%)}100%{transform:translateX(calc(100% + 100px))}}
.BSYTwrap{position:fixed;z-index:9999999;right:55px;bottom:20px;animation:show_BSYT 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}
.BSYTwrap.hide{animation:hide_BSYT 0.8s ease forwards}
.BSYTcontent{display:flex;align-items:center}
.BSYTicon .BSlogo{max-width:60px;border-radius:100%;transition:all 0.3s ease}
.BSYTcontent .BSYTdetails{margin-left:15px;text-decoration:none;outline:none}
.BSYTdetails span{font-family:Noto Sans;position:relative;font-size:18px;font-weight:600;color:#000000;top:10px}
.BSYTdetails p{color:#878787;font-size:12px}
.BSYtcloseIcon 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}
.BSYTwrap:hover .BSYTicon img{-webkit-transform:rotate(360deg);transform:rotate(360deg)}
.BSYtcloseIcon:hover svg{fill: #444;}
@media screen and (max-width: 480px){.BSYTwrap{right:25px}}
/* css untuk darkmode silakan sesuaikan classnya jika berbeda atau bisa di hapus bagian ini */
.dark-mode .BSYTwrap,.dark-mode .BSYtcloseIcon svg{background:#2d2d30}
.dark-mode .BSYTwrap{border-color:#444}
.dark-mode .BSYTdetails span,.dark-mode .BSYTdetails p{color:#e2e2e2}please copy the code below and place it above the code </body> or <!--</body>--></body>
<div class='BSYTwrap'>
<div class='BSYTcontent'>
<div class='BSYTicon'><img alt='blogger-store' class='BSlogo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPFQscP-ItY8WOiFw1zp8w1x12hP4KPB-vtYDxOI-iuGGmiKqWP7PCs3C3cQbe5-YS1jdLi_ohoNHaRUdkfgVFDe5R7ZtoEWfpJMbQJIoJxtUx8NGFdaWJhxtUk9RydPOytuPMTI3dycJ8_9Z2jisqcbUGKVStwBzoCEA10UISWfBGDJHPnjYFF-lkyg/s1600/marwattech.png'/></div>
<a class='BSYTdetails' href='https://www.youtube.com/c/marwattech?sub_confirmation=1' target='_blank'>
<span>Marwat Tech</span>
<p>Subscribe our channel for more</p>
</a>
</div>
<div class='BSYtcloseIcon'><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 Blogger Store
var time = 5000;
var welcomeSession = sessionStorage.getItem('welcomeSession');if(welcomeSession === null){$(window).bind('load',function(){setTimeout(function(){$('.BSYTwrap').css("display","block");welcomeSession = sessionStorage.setItem('welcomeSession',true)}
,time);$('.BSYtcloseIcon').click(function(){$('.BSYTwrap').addClass('hide')}
)})}</script>the part I marked like var time = 5000; it means a pop up will appear within 5 seconds, please adjust it according to your needs
also replace https://www.youtube.com/channel/c/marwattech with your youtube url.
ok so that 's how to make a pop up subscribe to the youtube channel on the blog, hopefully it's useful.